Merge branch 'master' of github.com:alexbazzi/website

.github/workflows/deploy-site.yaml

@@ -0,0 +1,33 @@
+name: Deploy to AWS S3 and Invalidate CloudFront
+
+on:
+  push:
+    branches:
+      - master  # Adjust this to your repository's default branch
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      
+      - name: Sync to S3
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --acl public-read --follow-symlinks --delete
+        env:
+          AWS_S3_BUCKET: www.xbazzi.com
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: 'us-east-1'  # e.g., us-east-1
+          SOURCE_DIR: './'  # The root of your repository; adjust if your files are in a subdirectory
+
+      - name: Invalidate CloudFront Distribution
+        uses: chetan/invalidate-cloudfront-action@v1
+        env:
+          DISTRIBUTION: E3VV7PXHG95EM0
+          PATHS: '/*'
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: 'us-east-1'

assets/style/style.css

@@ -1,16 +1,15 @@
 @font-face {
     font-family: "Monocraft";
     src: local("Monocraft");
-    /* src: url("https://github.com/IdreesInc/Monocraft/releases/download/v3.0/Monocraft.ttf") format("truetype"); */
-    /* src: url("https://sadhost.neocities.org/fonts/FreePixel.ttf") format("truetype"); */
+    src: url("https://www.xbazzi.com/Monocraft.ttf") format("truetype");
 }
 
 :root {
-    --background: #0E191A;
-    --main-color:#7107AF;
+    --background: rgba(150, 150, 150, 0.95);
+    --main-color:#bf00ff;
     --main-color-dk:#441261;
-    --accent-1:#B5E61D;
-    --accent-2:#EB53D3;
+    --accent-1: #0000ff;
+    --accent-2:#00FFFF;
     --content-spacing:5px;
     --background-img:url('../img/beach-night-bg.webp');
     --banner:url('../img/bg_ascii2.png');
@@ -21,7 +20,6 @@
     --link-color:var(--accent-1);
     --border:2px solid black;
     --arrows:url('../assets/images/arrow.png');
-    
 }
 
 html,
@@ -43,9 +41,15 @@ body {
     background-size: 100% 100%;
     height:150px;
     margin-bottom:var(--content-spacing);
-    border:var(--border);
+    /* border:var(--border); */
 }
 
+p.blog {
+    font-weight: bold;
+    padding: 5px;            /* Add some space around the text */
+    display: inline-block;    /* Ensure the background only covers the text */
+
+}
 #container,
 .topbar img {
     max-width: 850px;
@@ -90,19 +94,30 @@ body::before {
 }
 
 aside {
-    width: 30%;
+    font-weight: bold;
+    width: 25%;
+    margin: 5px;            /* Add some space around the text */
     margin-left:var(--content-spacing);
     border-left:var(--border);
     background-color: var(--background);
-    opacity: 0.9;
 }
+.sidebar-title {
 
-.title, .sidebar-title {
     background-image:var(--titleBars);
     font-weight:bold;
+    font-size: 25px;
     border:var(--border);
-    font-size:20px;
-    color: var(--text-color);
+    color: var(--title-text-color);
+    text-shadow: var(--text-shadow-custom);
+}
+.title {
+    background-image:var(--titleBars);
+    background-size: 100% 100%;
+    padding: 5px;
+    font-weight:bold;
+    font-size: 25px;
+    border:var(--border);
+    color: var(--title-text-color);
     text-shadow: var(--text-shadow-custom);
     /*position: sticky;*/
 }
@@ -117,7 +132,6 @@ aside {
 
 main {
     width: 74%;
-    background-color: var(--background);
 }
 
 nav {
@@ -137,17 +151,19 @@ nav ul li a {
 
 .content {
     padding:25px;
+    opacity: 1;
+    background-color: var(--background);
+    font-size: 20px;
 }
 
 footer {
-    /*border:var(--border);*/
     background-image: var(--banner-footer);
-    /*background-size: 100% 100%;*/
     height:30px;
     margin-bottom:var(--content-spacing);
     margin-top:var(--content-spacing);
     text-align:center;
 }
+
 /* button styles */
 button {
     background-image:var(--titleBars);
@@ -170,8 +186,8 @@ h2 {
 }
 
 #themeDiv {
-position: sticky;
-top: 550px;
+    position: sticky;
+    top: 550px;
 }
 
 @media only screen and (max-width: 640px) {
@@ -188,7 +204,7 @@ top: 550px;
     }
     aside {
         display:block;
-        width:100%;
+        width:50%;
         order:1;
         margin-left:0;
     }
@@ -202,9 +218,10 @@ top: 550px;
     nav ul > ul {
         display:none;
     }
+}
+
+@media only screen and (max-height: 640px) {
+    nav ul > ul {
+        display:none;
     }
-    @media only screen and (max-height: 640px) {
-        nav ul > ul {
-            display:none;
-        }
-    }
+}

index.html

@@ -9,7 +9,7 @@
         <link rel="stylesheet" href="assets/style/style.css">
         <!-- <script src="assets/scripts/load.js"></script> -->
         <!-- <script src="//gc.zgo.at/count.js" data-goatcounter="https://sadgrl.goatcounter.com/count" async=""></script> -->
-        <link rel="icon" href="/assets/images/fav.gif" type="image/gif">
+        <script src="https://kit.fontawesome.com/e6a86da546.js" crossorigin="anonymous"></script>       <link rel="icon" href="/assets/images/fav.gif" type="image/gif">
     </head>
 
     <body>
@@ -19,31 +19,32 @@
 
                 <main>
                     <div class="wrapper">
-                        <div class="title">&nbsp; About</div>
+                        <div class="title">&nbsp;<span class="fa-solid fa-user"></span>   whoami</div>
+                        <div class="contentDaddy">
                         <div class="content">
                             <p>
                                 Network, aerospace, and software engineer turned 
-                                cybersecurity professional. Interested in the intersection of AI with cybersecurity,
+                                cybersecurity professional. Exploring the applications of AI in offensive security,
                                 software-defined networking, and serverless architectures.
                             </p>
                         </div>
-
-                        <div class="title">&nbsp; What's new?
+                        <div class="title">&nbsp; <span class="fa-solid fa-wrench"></span>  updates
                         </div>
                         <div class="content">
+                            <p class="update">01/10/2024: Generated the cool bg image with DALL-E.</p>
                             <p class="update">12/26/2023: This site is
                                 officially online.</p>
                             <p class="update">12/05/2023: Finished the home
                                 datacenter project.</p>
                         </div>
 
-                        <div class="title">&nbsp; Blog posts</div>
+                        <div class="title">&nbsp; <span class="fa-solid fa-commenting"></span>  blog </div>
                         <div class="content">
-                            <p><a href='./homenetwork.html'>
+                            <p class="blog"><a href='./homenetwork.html'>
                                     Home "datacenter" is what Americans needed,
                                     but didn't deserve.
                                 </a></p>
-                            <p><a href='./juniperfanmod.html'>
+                            <p class="blog"><a href='./juniperfanmod.html'>
                                     Bribing a loud enterprise switch with Noctua fans.
                                 </a></p>
                         </div>