Update index.html and homenetwork.html with images.

assets/style/style.css

@@ -11,8 +11,8 @@
     --accent-1: #8d0081;
     --accent-2:#00FFFF;
     --content-spacing:5px;
-    --background-img:url('../img/bg-beach3.png');
-    --banner:url('../img/banner-cloud.png');
+    --background-img:url('../img/bg-beach5.png');
+    --banner:url('../img/bg_ascii2.png');
     --banner-footer: url('../img/tiny-bar-green.png');
     --titleBars:url('../img/tiny-bar-green.png');
     --text-color: white;
@@ -26,7 +26,7 @@ html,
 body {
     margin: 0;
     box-sizing: border-box;
-    font-family: "Monocraft";
+    font-family: "Times New Roman", Times, serif;
 }
 
 body {
@@ -36,23 +36,41 @@ body {
     z-index: 1;
 }
 
+.email-link {
+    position: absolute;
+    top: 10px; /* Adjust the position as needed */
+    right: 10px; /* Adjust the position as needed */
+    display: inline-block;
+}
+
+.blog-image {
+    width: 50%;
+}
+
 .topbar {
     background-image:var(--banner);
     background-size: 100% 100%;
     height:150px;
+    padding-bottom:var(--content-spacing);
     margin-bottom:var(--content-spacing);
     /* 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 */
 
 }
+
+.project-image {
+    display: block; /* Ensures the image does not have inline whitespace below it */
+    max-width: 20%; /* Ensures the image is responsive and fits its container */
+    height: auto; /* Maintains aspect ratio */
+}
+
 #container,
 .topbar img {
-    max-width: 850px;
+    max-width: 1000px;
     margin: 0 auto;
 }
 #container a {
@@ -90,7 +108,7 @@ body::before {
 
 #flex {
     display: flex;
-    max-width:850px;
+    max-width:1000px;
 }
 
 aside {
@@ -98,11 +116,16 @@ aside {
     width: 25%;
     height: 10%;
     margin-left:var(--content-spacing);
-    border-left:var(--border);
+}
+
+.sidebar-container {
+    /*border:var(--border);*/
+    /*margin-top: var(--content-spacing);*/
     background-color: var(--background);
 }
 
 .sidebar-title {
+    font-family: 'Monocraft';
     padding: 3px 10px; /* Adjust top/bottom and left/right padding as needed */
     background-image:var(--titleBars);
     font-weight:bold;
@@ -113,6 +136,7 @@ aside {
 }
 
 .title {
+    font-family: 'Monocraft';
     padding: 3px 10px; /* Adjust top/bottom and left/right padding as needed */
     font-weight: bold;
     font-size: 20px;
@@ -120,7 +144,10 @@ aside {
     color: var(--title-text-color);
     text-shadow: var(--text-shadow-custom);
     background-image: var(--titleBars);
-    background-size: 100% 100%;
+    background-repeat: repeat-x;
+    margin-top: var(--content-spacing);
+
+
     /* Remove text-indent if it's not needed */
     /* Ensure padding does not prevent text from reaching the ends */
     box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
@@ -154,18 +181,24 @@ nav ul li a {
 }
 
 .content {
-    padding:25px;
+    padding: 1px 20px;
     opacity: 1;
     background-color: var(--background);
-    font-size: 10;
+    font-size: 18px;
+    font-family: "Times New Roman", Times, serif;
 }
 
 footer {
-    background-image: var(--banner-footer);
-    height:30px;
-    margin-bottom:var(--content-spacing);
+    background-color: rgb(70, 70, 70);
+    height:5%;
+    border: var(--border);
+    margin-bottom: var(--content-spacing);
     margin-top:var(--content-spacing);
-    text-align:center;
+    text-align: center;
+}
+
+.p footer {
+    margin: 5px;
 }
 
 /* button styles */
@@ -206,6 +239,7 @@ h2 {
         width:100%;
         order:2;
     }
+
     aside {
         display:block;
         width:50%;

changelog.md

@@ -4,6 +4,13 @@ All notable changes to this site will be documented in this file.
 
 The format is based on [Semantic Versioning](https://semver.org/).
 
+## [0.1.0] - 2024-02-26
+### Added
+- Several new image assets
+
+### Changed
+- Modified index and homenetwork pages with new images
+
 ## [0.0.1] - 2024-02-23
 ### Added
  - Changelog file.

homenetwork.html

@@ -20,21 +20,31 @@
                 <main>
                     <div class="wrapper">
                         <div class="title">
-                                Home "datacenter" is what Americans needed, but diddfn't deserve.
+                            <a href="index.html">../</a>
+                                Home datacenter project
                         </div>
                         <div class="content">
-                            <p>
-                                Home "datacenter" 
+                                A home datacenter is what most Americans need, but don't deserve.
+                                <br>
+                                <img src="assets/img/dc1.JPG" class="blog-image">
 
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium quam id pharetra efficitur. Aenean pellentesque lectus at nisl viverra vulputate. Aliquam pellentesque hendrerit odio eu convallis. Donec tristique elementum urna et ornare. Aenean nec tempor purus. Quisque sed nisi eu felis ornare tincidunt. Vivamus rutrum mi ac consequat hendrerit. Praesent non sagittis mi.
+
+
+                                <br>
+                                Here is the logical diagram of my homelab setup.
+                                <br>
+                                <img src="assets/img/homelab_logical.png" class="blog-image" style="width: 100%">
                                 
-                                Morbi porttitor enim nec augue feugiat eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus enim quis leo gravida pharetra. Nam commodo, arcu ut bibendum blandit, turpis mi viverra nulla, at imperdiet quam augue molestie felis. Morbi ipsum nulla, commodo vitae molestie pulvinar, consectetur sed nulla. Aliquam ultricies et dolor sit amet efficitur. Donec non interdum sapien. Mauris viverra mauris ipsum, at placerat tellus varius sit amet. Etiam in metus metus. Nulla tincidunt, lorem in pulvinar semper, velit dolor sodales dui, at bibendum tellus risus vel justo. Nunc vel eros ut tortor auctor placerat. Sed commodo elit at nulla cursus ultricies. Phasellus sit amet feugiat nibh.
                                 
-                                Donec commodo ornare nunc sit amet molestie. Donec laoreet et nunc nec finibus. Duis rhoncus felis eget ipsum condimentum, vel ullamcorper dui ultrices. Sed eu neque nec nunc vestibulum condimentum ac sit amet ligula. Sed tristique accumsan diam, at semper risus eleifend vitae. Nulla pharetra auctor lorem, non bibendum nunc venenatis ac. Mauris rhoncus sapien eros, non tristique neque aliquam ut. Nulla consequat diam ut feugiat laoreet. Nam porttitor ac est id molestie. Etiam a varius urna, sit amet bibendum nibh. Aliquam quis elementum mauris. Fusce pretium aliquet urna, non porttitor elit interdum vitae. Mauris vel pharetra ex, vitae dignissim nulla. Integer ullamcorper velit feugiat mauris accumsan imperdiet.
+                                <br>
+                                Had to fit some of the ultra-small form factor PCs with SFP+ NICs to enable 10gbps transfer speeds on LAN.
+                                <br>
+                                <img src="assets/img/dc2.JPG" class="blog-image">
                                 
-                                Curabitur euismod odio nulla, vel luctus risus auctor at. Ut sit amet posuere urna, sit amet iaculis lorem. Cras lobortis mauris a risus pulvinar dapibus. Vestibulum vel sapien at eros molestie efficitur. Donec neque urna, pulvinar sit amet risus eu, maximus ultricies velit. Aliquam venenatis ante eu ante finibus, ut lacinia nisi faucibus. Donec posuere pulvinar mi sit amet cursus. Integer tincidunt lobortis vehicula. Suspendisse rutrum sem quam, dictum vehicula risus lacinia ac. Vivamus ullamcorper metus sit amet libero hendrerit maximus. Donec consectetur velit eu nulla rutrum sollicitudin. Etiam volutpat porttitor massa vel imperdiet. Nam non felis eget eros viverra pharetra. Vestibulum molestie, leo eget viverra placerat, augue sem rhoncus est, sed luctus tellus nisl ut velit. Suspendisse suscipit tempor volutpat.
-                                
-                                Nullam nunc massa, interdum ac dolor at, vulputate mollis sapien. Maecenas semper mattis aliquam. Curabitur dignissim feugiat turpis eget faucibus. Sed in vestibulum ipsum. Praesent eget est elit. Phasellus rutrum orci ullamcorper est finibus, in commodo felis tempus. Pellentesque vestibulum congue ante rhoncus viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quam augue, ultricies scelerisque risus eget, hendrerit lobortis quam. In dignissim felis nec mollis euismod. Nulla porta fringilla justo id venenatis. Quisque augue lacus, auctor in ante vitae, ultrices commodo dui. Vestibulum hendrerit, leo sit amet aliquet dignissim, quam est faucibus ex, quis ornare lorem lacus vitae lorem. Vivamus ac elementum orci. Morbi congue metus urna, non ornare augue cursus vel. is what Americans needed, but didn't deserve.
+                                <br>
+                                Accessing the main server BMC webUI through the IPMI interface via Ethernet, bypassing any need to output video into a monitor.
+                                <br>
+                                <img src="assets/img/mb1.JPG" class="blog-image">
                             </p>
                         </div>
                     </div>

index.html

@@ -16,11 +16,9 @@
         <div id="container">
             <a href="https://www.xbazzi.com"><div class="topbar" ></div></a>
             <div id="flex">
-
                 <main>
                     <div class="wrapper">
                         <div class="title"><span class="fa-solid fa-user"></span>   whoami</div>
-                        <div class="contentDaddy">
                         <div class="content">
                             <p>
                                 Network, aerospace, and software engineer turned 
@@ -32,40 +30,56 @@
                         </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>
+                            <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"><span class="fa-solid fa-lightbulb"></span>  projects </div>
-                        <div class="content">
+                        <div class="content flex">
+                            <img src="assets/img/dc1.JPG" alt="Datacenter preview" class="project-image">
                             <p class="blog"><a href='./homenetwork.html'>
                                 Home datacenter
-                                </a></p>
+                                </a>
+                            </p>
+                            <img src="assets/img/website.png" alt="Website preview" class="project-image">
+                            <p class="blog"><a href='./website.html'>
+                                This website
+                                </a>
+                            </p>
                         </div>
                     </div>
-
                 </main>
+
                 <aside>
-                    <div class="sidebar-title">Navigation</div>
-                    <div class="navclass">
-                        <nav id="nav">
+                    <div class="sidebar-container">
+                    <div class="sidebar-title">Quick links</div>
+                        <nav id="nav"> 
                             <ul>
                                 <li>
                                     <a href="index.html">Home</a>
                                 </li>
+                            </ul>
+                            <ul>
                                 <li>
-                                    <a target='_blank' rel='noreferrer noopener'
-                                        href='https://github.com/alexbazzi'>
-                                        Github
-                                    </a>
+                                    <a href="github.com/alexbazzi"><span class="fa-brands fa-github"></span>GitHub</a>
                                 </li>
                             </ul>
-                        </nav></div>
+                            <ul>
+                                <li>
+                                    <a href="linkedin.com/in/alexbazzi"><span class="fa-brands fa-linkedin"></span>LinkedIn</a>
+                                </li>
+                            </ul>
+                            <a target='_blank' rel='noreferrer noopener'
+                                href='mailto:x@xbazzi.com'>
+                            <img style="height: 40px; margin: 10px;" src="assets/img/email.gif">
+                            </a>
+                        </nav>
+                    </div>
                 </aside>
             </div>
-            <footer id="footer"></footer>
+            <footer id="footer">
+                This site is hosted in an AWS S3 bucket, cached globally by a CloudFront distribution, and updated programmatically through GitHub Actions.
+            </footer>
         </div>
         <style>
                 .update {
@@ -78,20 +92,9 @@
                 .content {
                     background-color: var(--background);
                 }
-                .title {
-                    margin-top: var(--content-spacing);
-                }
                 .title:first-child {
                     margin-top: 0 !important;
                 }
-                .myButton {
-                    display:flex;
-                    margin:0 auto;
-                    width:150px;
-                }
-                .yw-content {
-  text-align: center;
-}
             </style>
 
     </body></html>