Initial commit 🚀

assets/scripts/load.js

@@ -0,0 +1,92 @@
+window.onload = () => {
+
+
+
+/* SIDEBAR & FOOTER LOAD START */
+
+    fetch('/assets/templates/nav.html') // the page we want to use for our sidebar
+    .then(data => {
+      return data.text()
+    })
+    .then( data => {
+      document.getElementById("nav").innerHTML = data; // inserts to element id="navbar"
+    })
+
+
+/* SIDEBAR & FOOTER LOAD END */
+
+/* THEME SWITCHER START */
+
+function catCafe() {
+  document.documentElement.style.setProperty("--background", "#D6D8CC");
+  document.documentElement.style.setProperty("--titleBars", "url('https://sadgrl.online/assets/images/tiny-bar-brwn.png')");
+  document.documentElement.style.setProperty("--banner", "url('https://sadgrl.online/assets/images/full-banner-cafe.png')");
+  document.documentElement.style.setProperty("--text-color", "black");
+  document.documentElement.style.setProperty("--link-color", "black");
+  document.documentElement.style.setProperty("--background-img", "url('https://sadgrl.online/assets/images/calico-bg.png')");
+  document.documentElement.style.setProperty("--border", "1px solid #8F563B;");
+  //document.documentElement.style.setProperty("--arrows", "url('https://sadgrl.online/assets/images/arrow-brwn.png')");
+}
+
+function sadGrl() {
+  document.documentElement.style.setProperty("--background", "#0E191A");
+  document.documentElement.style.setProperty("--titleBars", "url('https://sadgrl.online/assets/images/tiny-bar-2.png')");
+  document.documentElement.style.setProperty("--banner", "url('https://sadgrl.online/assets/images/full-banner-new.png')");
+  document.documentElement.style.setProperty("--text-color", "white");
+  document.documentElement.style.setProperty("--link-color", "#B5E61D");
+  document.documentElement.style.setProperty("--background-img", "url('../assets/img/bg.jpg')");
+  document.documentElement.style.setProperty("--border", "1px solid black");
+  // document.documentElement.style.setProperty("--arrows", "url('../assets/images/arrow.png')");
+}
+if (localStorage.getItem('currentTheme')) {
+if (localStorage.getItem('currentTheme') === "catcafe") {
+catCafe();
+}
+}
+/* create the dropdown */
+var sideBar = document.querySelectorAll('aside')[0];
+var themeDiv = document.createElement('div');
+themeDiv.setAttribute('id', 'themeDiv');
+
+var select = document.createElement('select');
+select.setAttribute('name', 'themePicker');
+select.setAttribute('id', 'themePicker');
+select.style.marginLeft = "10px";
+select.style.marginBottom = "10px";
+
+var option0 = document.createElement('option');
+var option1 = document.createElement('option');
+var option2 = document.createElement('option');
+option0.value = "chooseTheme";
+option1.value = "sadgrl";
+option2.value = "catcafe";
+option0.innerText = "Choose theme";
+option1.innerText = "sadgrl.online";
+option2.innerText = "cozy cat cafe";
+
+select.append(option0);
+select.append(option1);
+select.append(option2);
+
+themeDiv.append(select);
+
+sideBar.append(themeDiv);
+
+select.addEventListener("change", changeTheme);
+
+function changeTheme(e) {
+var value = e.target.value;
+console.log(value);
+
+if (value === "catcafe") {
+  catCafe();
+  localStorage.setItem('currentTheme', value);
+  } else if (value === "sadgrl") {
+  sadGrl();
+  localStorage.setItem('currentTheme', value);
+}
+
+}
+
+/* THEME SWITCHER END */
+}

assets/style/style.css

@@ -0,0 +1,212 @@
+@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"); */
+}
+
+:root {
+    /*background-image: url('../../assets/img/bg.jpg');*/
+    
+    --background: #0E191A;
+    --main-color:#7107AF;
+    --main-color-dk:#441261;
+    --accent-1:#B5E61D;
+    --accent-2:#EB53D3;
+    --content-spacing:5px;
+    --background-img:url('../img/bg-code.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;
+    --text-shadow-custom: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+    --link-color:var(--accent-1);
+    --border:2px solid black;
+    --arrows:url('../assets/images/arrow.png');
+    
+}
+
+html,
+body {
+    margin: 0;
+    box-sizing: border-box;
+    font-family: "Monocraft";
+}
+
+body {
+    background-color: black;
+    color: var(--text-color);
+    background-attachment: scroll;
+    z-index: 1;
+}
+
+.topbar {
+    background-image:var(--banner);
+    background-size: 100% 100%;
+    height:150px;
+    margin-bottom:var(--content-spacing);
+    border:var(--border);
+}
+
+#container,
+.topbar img {
+    max-width: 850px;
+    margin: 0 auto;
+}
+#container a {
+    color:var(--link-color);
+}
+
+.topbar img {
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+}
+
+#container {
+    border-top: none;
+    position: relative;
+    min-height: 100vh;
+    width: 100%;
+    z-index: 1;
+}
+
+/* Revised Pseudo-element Styles */
+body::before {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    content: '';
+    background-image: var(--background-img);
+    background-size: cover; /* Ensure the image covers the entire element */
+    background-repeat: no-repeat; /* Prevent the image from repeating */
+    opacity: 0.8; /* Adjust the transparency */
+    z-index: -1;
+}
+
+#flex {
+    display: flex;
+    max-width:850px;
+}
+
+aside {
+    width: 30%;
+    margin-left:var(--content-spacing);
+    border-left:var(--border);
+    background-color: var(--background);
+    opacity: 0.9;
+}
+
+.title, .sidebar-title {
+    background-image:var(--titleBars);
+    font-weight:bold;
+    border:var(--border);
+    font-size:20px;
+    color: var(--text-color);
+    text-shadow: var(--text-shadow-custom);
+    /*position: sticky;*/
+}
+
+.navclass {
+    opacity: 1.0;
+}
+
+.wrapper {
+    opacity: 0.9;
+}
+
+main {
+    width: 74%;
+    background-color: var(--background);
+}
+
+nav {
+    /*position:sticky;*/
+    top:20px;
+}
+
+nav ul {
+    /*list-style-image:var(--arrows);*/
+    margin-left:0;
+    padding-left:30px;
+}
+
+nav ul li a {
+    color:var(--accent-1);
+}
+
+.content {
+    padding:25px;
+}
+
+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);
+    border:var(--border);
+    color:white;
+    margin-bottom:10px;
+}
+
+th {
+    color:var(--accent-2);
+}
+
+#linkNum {
+    color:var(--accent-2);
+    font-weight:bold;
+}
+
+h2 {
+    color:var(--accent-2);
+}
+
+#themeDiv {
+position: sticky;
+top: 550px;
+}
+
+@media only screen and (max-width: 640px) {
+    nav ul {
+        list-style-image:none;
+        list-style-type:none;
+    }
+    #flex {
+        flex-wrap:wrap;
+    }
+    main {
+        width:100%;
+        order:2;
+    }
+    aside {
+        display:block;
+        width:100%;
+        order:1;
+        margin-left:0;
+    }
+    nav ul {
+        display:flex;
+        flex-wrap:wrap;
+    }
+    nav ul li {
+        padding-right:10px;
+    }
+    nav ul > ul {
+        display:none;
+    }
+    }
+    @media only screen and (max-height: 640px) {
+        nav ul > ul {
+            display:none;
+        }
+    }

homenetwork.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Monkey Town</title>
+        <meta property="og:image"
+            content="https://sadgrl.online/images/og/homepage.png">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <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">
+    </head>
+
+    <body>
+        <div id="container">
+            <div class="topbar"></div>
+            <div id="flex">
+
+                <main>
+                    <div class="wrapper">
+                        <div class="title">&nbsp;
+                                Home "datacenter" is what Americans needed, but didn't deserve.
+                        </div>
+                        <div class="content">
+                            <p>
+                                Home "datacenter" 
+
+                                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.
+                                
+                                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.
+                                
+                                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.
+                            </p>
+                        </div>
+                    </div>
+
+                </main>
+                <aside>
+                    <div class="sidebar-title">&nbsp; Navigation</div>
+                    <nav id="nav">
+                        <ul>
+                            <li>
+                                <a href="./index.html">Home</a>
+                            </li>
+                        </ul>
+                    </nav>
+                </aside>
+            </div>
+            <footer id="footer"></footer>
+        </div>
+        <style>
+                .update {
+                    border: 2px dashed var(--main-color);
+                    padding: 5px;
+                }
+                main {
+                    background-color: transparent !important;
+                }
+                .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>

index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Xander Bazzi</title>
+        <meta property="og:image"
+            content="https://sadgrl.online/images/og/homepage.png">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <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">
+    </head>
+
+    <body>
+        <div id="container">
+            <a href="https://www.xbazzi.com"><div class="topbar" ></div></a>
+            <div id="flex">
+
+                <main>
+                    <div class="wrapper">
+                        <div class="title">&nbsp; About</div>
+                        <div class="content">
+                            <p> This is my piece of real estate in the public
+                                internet.
+                                My name's Xander, and I've worked as a SysAdmin,
+                                rocket engineer, network engineer, scientific
+                                programmer,
+                                freelancer, and software engineer. Nowadays, I
+                                dedicate my
+                                time to help further
+                                the modernization of our current cyberspace
+                                --specifically in the areas
+                                of cybersecurity, cloud architecture, and
+                                software-defined networking.
+                            </p>
+                        </div>
+
+                        <div class="title">&nbsp; What's new?
+                        </div>
+                        <div class="content">
+                            <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="content">
+                            <p><a href='./homenetwork.html'>
+                                    Home "datacenter" is what Americans needed,
+                                    but didn't deserve.
+                                </a></p>
+                            <p><a href='./juniperfanmod.html'>
+                                    Bribing a loud enterprise switch with Noctua fans.
+                                </a></p>
+                        </div>
+                    </div>
+
+                </main>
+                <aside>
+                    <div class="sidebar-title">&nbsp; Navigation</div>
+                    <div class="navclass">
+                        <nav id="nav">
+                            <ul>
+                                <li>
+                                    <a href="index.html">Home</a>
+                                </li>
+                                <li>
+                                    <a target='_blank' rel='noreferrer noopener'
+                                        href='https://github.com/alexbazzi'>
+                                        Github
+                                    </a>
+                                </li>
+                            </ul>
+                        </nav></div>
+                </aside>
+            </div>
+            <footer id="footer"></footer>
+        </div>
+        <style>
+                .update {
+                    border: 2px dashed var(--main-color);
+                    padding: 5px;
+                }
+                main {
+                    background-color: transparent !important;
+                }
+                .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>