diff --git a/assets/img/banner-cockpit-footer-transparent.png b/assets/img/banner-cockpit-footer-transparent.png new file mode 100644 index 0000000..adb13ec Binary files /dev/null and b/assets/img/banner-cockpit-footer-transparent.png differ diff --git a/assets/img/banner-cockpit-transparent-2.png b/assets/img/banner-cockpit-transparent-2.png new file mode 100644 index 0000000..b91f07b Binary files /dev/null and b/assets/img/banner-cockpit-transparent-2.png differ diff --git a/assets/img/bg-code.png b/assets/img/bg-code.png new file mode 100644 index 0000000..8f25556 Binary files /dev/null and b/assets/img/bg-code.png differ diff --git a/assets/img/bg-desert.png b/assets/img/bg-desert.png new file mode 100644 index 0000000..4d9eb74 Binary files /dev/null and b/assets/img/bg-desert.png differ diff --git a/assets/img/bg-future.png b/assets/img/bg-future.png new file mode 100644 index 0000000..12b52f9 Binary files /dev/null and b/assets/img/bg-future.png differ diff --git a/assets/img/bg_ascii.png b/assets/img/bg_ascii.png new file mode 100644 index 0000000..1026a78 Binary files /dev/null and b/assets/img/bg_ascii.png differ diff --git a/assets/img/bg_ascii2.png b/assets/img/bg_ascii2.png new file mode 100644 index 0000000..86ed686 Binary files /dev/null and b/assets/img/bg_ascii2.png differ diff --git a/assets/img/tiny-bar-2.png b/assets/img/tiny-bar-2.png new file mode 100644 index 0000000..7ae3938 Binary files /dev/null and b/assets/img/tiny-bar-2.png differ diff --git a/assets/img/tiny-bar-green.png b/assets/img/tiny-bar-green.png new file mode 100644 index 0000000..b9b7ec6 Binary files /dev/null and b/assets/img/tiny-bar-green.png differ diff --git a/assets/scripts/load.js b/assets/scripts/load.js new file mode 100644 index 0000000..4aa81cd --- /dev/null +++ b/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 */ +} diff --git a/assets/style/style.css b/assets/style/style.css new file mode 100644 index 0000000..bcc3466 --- /dev/null +++ b/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; + } + } \ No newline at end of file diff --git a/homenetwork.html b/homenetwork.html new file mode 100644 index 0000000..0b3be5b --- /dev/null +++ b/homenetwork.html @@ -0,0 +1,83 @@ + + + + + Monkey Town + + + + + + + + + +
+
+
+ +
+
+
  + Home "datacenter" is what Americans needed, but didn't deserve. +
+
+

+ 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. +

+
+
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..441dc2e --- /dev/null +++ b/index.html @@ -0,0 +1,108 @@ + + + + + Xander Bazzi + + + + + + + + + +
+
+
+ +
+
+
  About
+
+

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. +

+
+ +
  What's new? +
+
+

12/26/2023: This site is + officially online.

+

12/05/2023: Finished the home + datacenter project.

+
+ +
  Blog posts
+
+

+ Home "datacenter" is what Americans needed, + but didn't deserve. +

+

+ Bribing a loud enterprise switch with Noctua fans. +

+
+
+ +
+ +
+ +
+ + + \ No newline at end of file