xbazzi/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(0.5.0): Clean up CSS/html and add footer.js.

Browse Source
This commit is contained in:
Xander Bazzi 2024-04-02 21:13:07 -06:00
parent 0b00dab4d2
commit 8ad964ad51
6 changed files with 204 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/scripts/footer.js Normal file
View File

@ -0,0 +1,15 @@
//document.addEventListener('DOMContentLoaded', (event) => {
// var footerHtml = `
// <footer id="footer">
// This site was built with plain old html, css, and javascript. Maybe I'll touch a framework sometime.
// </footer>
// `;
//
// // Insert the footer after the
//});
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('footer').innerHTML = `
This site was built with plain old html, css, and javascript. Maybe I'll touch a framework sometime.
`;
});

15
assets/style/style.css
View File

@ -54,10 +54,9 @@ ul {
}
.blog-image {
width: 30%;
width: 100%;
display: block;
margin: 0 auto;
}
.topbar {
@ -84,6 +83,7 @@ p.blog {
#container a {
color:var(--link-color);
text-decoration: none;
}
.topbar img {
@ -132,13 +132,6 @@ aside {
font-style: italic;
}
.diagram {
width: 100%;
display: block;
margin: 0 auto;
}
.sidebar-container {
/*border:var(--border);*/
/*margin-top: var(--content-spacing);*/
@ -249,6 +242,10 @@ code {
font-size: 14px;
}
caption {
font-weight: bold;
}
footer {
background-color: rgb(70, 70, 70);
height:5%;

10
changelog.md
View File

@ -4,7 +4,15 @@ All notable changes to this site will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the versioning is consistent with [Semantic Versioning](https://semver.org/).
## [0.4.0] - 2024-04-1
## [0.5.0] - 2024-04-02
### Added
- footer.js script to dynamically load the footer with js.
### Changed
- Some CSS stuff
- Cleaned up index.html and worked on the wording for homenetwork.html.
## [0.4.0] - 2024-04-01
### Added
- Cyware RSS feed.
- New project page: Overengineered Static Site.

265
homenetwork.html
View File

@ -1,122 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xbazzi.com</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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/tokyo-night-dark.min.css">
<head>
<title>xbazzi.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/style/style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/tokyo-night-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="assets/scripts/footer.js"></script>
<script src="assets/scripts/rss.js"></script>
<script src="assets/scripts/aside.js"></script>
<script src="https://kit.fontawesome.com/e6a86da546.js" crossorigin="anonymous"></script>
<link rel="icon" href="/assets/images/fav.gif" type="image/gif">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="assets/scripts/rss.js"></script>
<script src="assets/scripts/aside.js"></script>
<script src="https://kit.fontawesome.com/e6a86da546.js" crossorigin="anonymous"></script>
<link rel="icon" href="/assets/images/fav.gif" type="image/gif">
</head>
<body>
<div id="container">
<div class="topbar"></div>
<div id="flex">
<body>
<div id="container">
<div class="topbar"></div>
<div id="flex">
<main>
<div class="wrapper">
<div class="title" style="font-style: italic;">
<a href="index.html">../</a>
homenetwork.html
</div>
<div class="content">
<h1>Datacenter at Home</h1>
<div class="author">Written by Xander Bazzi on 24-03-12.</div>
<br>
Embarking on a homelab journey often starts with a spark of curiosity and a dash of ambition. For me, it began as a playful experiment with declarative deployments and container orchestration but swiftly evolved into an essential part of my daily life. This transformation wasn't just about growth in scale; it was about creating a robust infrastructure capable of supporting my day-to-day digital needs with resilience and efficiency. Let's delve deeper into the intricacies of my homelab setup, a testament to the power of hyper-converged infrastructure and the meticulous engineering that sustains it.
<br>
<br>
At the heart of my setup are three physical servers, each playing a pivotal role in the orchestration of my digital domain. These servers are powered by Proxmox Virtual Environment, a versatile hypervisor that underpins the entire infrastructure. Proxmox's flexibility and efficiency make it the perfect candidate for running a variety of virtual machines and containers, tailored to my specific requirements. One server, distinct with its 6-slot HDD bay, is the stronghold of my data storage capabilities, hosting a TrueNAS instance. This virtualized environment is not just about storage; it's about reliable, accessible, and secure data management.
<br>
<br>
Another server in the stack is dedicated to networking, running an OPNsense appliance that oversees firewalling and routing. This setup ensures that my network is not only secure from external threats but also smartly managed to facilitate seamless communication between different services and devices. The backbone of this interconnected ecosystem is a trio of servers, each hosting k3s master/worker Debian nodes. These nodes are provisioned declaratively with Ansible, leveraging a GitOps workflow through Flux. This methodological approach ensures consistency, reproducibility, and scalability, allowing the infrastructure to evolve without compromising reliability.
<br>
<br>
<a href="assets/img/dc1.JPG"><img src="assets/img/dc1.JPG" class="blog-image"></a>
<br>
<br>
Connectivity within this homelab is nothing short of revolutionary, with each server equipped with 10Gbps SFP+ NICs. The inclusion of a Juniper EX3300 L3 switch, featuring 4 SFP+ 10Gbps slots, elevates the network's data transfer capabilities, ensuring that high-speed connectivity is not just a luxury but a standard. This setup facilitates incredibly fast LAN speeds, making large-file data transfers and backup restorations a breeze.
<br>
<br>
Storage solutions within this homelab are meticulously engineered, with TrueNAS serving as the cornerstone of persistent storage. This FreeBSD-based NAS system leverages ZFS to create a networked file system that is both highly available and fault-tolerant. The configuration includes 2 x 6 TB HDDs in a mirrored pool, supplemented by a 500 GB NVMe SSD as an L2 cache and 64 GB of RAM for L1 caching. This layered caching strategy is crucial for optimizing data access speeds, allowing for the full utilization of the 10Gbps network capacity during intensive data transfer operations.
<br>
<br>
A notable feature of this homelab is its physical footprint. Two of the servers are ultra-small form factor PCs, a design choice that posed an interesting challenge when integrating the sizeable 10Gbps NICs. This constraint didn't hinder performance but rather added a layer of complexity and satisfaction to the assembly process.
<br>
<br>
<a href="assets/img/dc2.JPG"><img src="assets/img/dc2.JPG" class="blog-image"></a>
<br>
<br>
An essential aspect of managing this homelab is the use of the main server's BMC webUI, accessed through the IPMI interface over Ethernet. This setup bypasses the need for traditional video output to a monitor, allowing for remote management and troubleshooting of the server, further emphasizing the system's versatility and user-centric design.
<br>
<br>
<a href="assets/img/mb1.JPG"><img src="assets/img/mb1.JPG" class="blog-image"></a>
<br>
<br>
The logical topology of this homelab, detailed in the accompanying diagram, reveals not just the complexity and efficiency of the setup but also its connectivity with external services like Cloudflare and AWS. This integration highlights the homelab's role not just as a standalone system but as a node within a larger network of services, benefiting from the robustness and scalability of cloud solutions while maintaining the personalization and control of a private infrastructure.
<br>
<br>
<a href="assets/img/homelab_logical.png"><img src="assets/img/homelab_logical.png" class="blog-image"></a>
<br>
<br>
This homelab is more than just a collection of hardware and software; it's a dynamic ecosystem that balances performance, security, and scalability. It represents the culmination of a journey from curiosity to critical infrastructure, demonstrating the power of modern virtualization, networking, and storage solutions in creating a resilient, efficient, and deeply personal digital environment.
<br>
<br>
A home datacenter is what most Americans deserve, but don't need.
</p>
</div>
<main>
<div class="wrapper">
<div class="title" style="font-style: italic;">
<a href="index.html">../</a>
homenetwork.html
</div>
<div class="content">
<h1>Datacenter at Home</h1>
<div class="author">Written by Xander Bazzi on 24-03-12.</div>
<br>
Embarking on a homelab journey often starts with a spark of curiosity and a dash of ambition.
At first, my idea was to host my own NAS so that I could unmarry from the cloud; however, this
quickly evolved
into a multi-server rack with enterprise-level configuration and security.
This transformation
wasn't just about growth in scale; it was about creating a robust infrastructure capable of
supporting my day-to-day digital needs with resilience and efficiency. Let's delve deeper into
the intricacies of my homelab setup, a testament to the power of hyper-converged infrastructure
and the meticulous engineering that sustains it.
<br>
<br>
</main>
At the core of the infrastructure are 3 physical servers, each running Proxmox Virtual Environment,
which is a versatile linux-based hypervisor that underpins the entire infrastructure. Proxmox's flexibility and
efficiency make it the perfect candidate for running a variety of virtual machines and
LXC containers (even though I run my containers in a k3s cluster instead). All services and workflows run on
virtualized machines hosted on the 3 PVE machines. Three of these VMs (one in each server) act as the master nodes
for my k3s deployment; all other VMs are either running appliances or dedicated services.
Two of the servers are actually used Lenovo Ultra Small Form Factor PCs, and the other one is built from scratch.
The latter has a 6-drive HDD bay, and is where my TrueNAS Scale VM lives. Since TrueNAS operates with the ZFS file system,
it needs direct access to the disks in order to read the SATA metadata; Proxmox facilitates this with physical disk passthrough.
It also supports direct PCI passthrough if I decide to get a dedicated GPU for encoding/AI workloads.
Even though it is not recommended to virtualize a NAS, it's hard to justify a beefy Xeon CPU just to run OpenZFS workloads.
<br>
<br>
Another server in the stack is dedicated to networking, running an OPNsense appliance that
oversees firewalling and routing. This setup ensures that my network is not only secure from
external threats but also smartly managed to facilitate seamless communication between different
services and devices. The backbone of this interconnected ecosystem is a trio of servers, each
hosting k3s master/worker Debian nodes. These nodes are provisioned declaratively with Ansible,
leveraging a GitOps workflow through Flux. This methodological approach ensures consistency,
reproducibility, and scalability, allowing the infrastructure to evolve without compromising
reliability.
<br>
<br>
<a href="assets/img/dc1.JPG"><img src="assets/img/dc1.JPG" class="blog-image"></a>
<br>
<br>
Connectivity within this homelab is nothing short of revolutionary, with each server equipped
with 10Gbps SFP+ NICs. The inclusion of a Juniper EX3300 L3 switch, featuring 4 SFP+ 10Gbps
slots, elevates the network's data transfer capabilities, ensuring that high-speed connectivity
is not just a luxury but a standard. This setup facilitates incredibly fast LAN speeds, making
large-file data transfers and backup restorations a breeze.
<br>
<br>
Storage solutions within this homelab are meticulously engineered, with TrueNAS serving as the
cornerstone of persistent storage. This FreeBSD-based NAS system leverages ZFS to create a
networked file system that is both highly available and fault-tolerant. The configuration
includes 2 x 6 TB HDDs in a mirrored pool, supplemented by a 500 GB NVMe SSD as an L2 cache and
64 GB of RAM for L1 caching. This layered caching strategy is crucial for optimizing data access
speeds, allowing for the full utilization of the 10Gbps network capacity during intensive data
transfer operations.
<br>
<br>
A notable feature of this homelab is its physical footprint. Two of the servers are ultra-small
form factor PCs, a design choice that posed an interesting challenge when integrating the
sizeable 10Gbps NICs. This constraint didn't hinder performance but rather added a layer of
complexity and satisfaction to the assembly process.
<br>
<br>
<a href="assets/img/dc2.JPG"><img src="assets/img/dc2.JPG" class="blog-image"></a>
<br>
<br>
An essential aspect of managing this homelab is the use of the main server's BMC webUI, accessed
through the IPMI interface over Ethernet. This setup bypasses the need for traditional video
output to a monitor, allowing for remote management and troubleshooting of the server, further
emphasizing the system's versatility and user-centric design.
<br>
<br>
<a href="assets/img/mb1.JPG"><img src="assets/img/mb1.JPG" class="blog-image"></a>
<br>
<br>
The logical topology of this homelab, detailed in the accompanying diagram, reveals not just the
complexity and efficiency of the setup but also its connectivity with external services like
Cloudflare and AWS. This integration highlights the homelab's role not just as a standalone
system but as a node within a larger network of services, benefiting from the robustness and
scalability of cloud solutions while maintaining the personalization and control of a private
infrastructure.
<br>
<br>
<a href="assets/img/homelab_logical.png"><img src="assets/img/homelab_logical.png"
class="blog-image"></a>
<br>
<br>
This homelab is more than just a collection of hardware and software; it's a dynamic ecosystem
that balances performance, security, and scalability. It represents the culmination of a journey
from curiosity to critical infrastructure, demonstrating the power of modern virtualization,
networking, and storage solutions in creating a resilient, efficient, and deeply personal
digital environment.
<br>
<br>
A home datacenter is what most Americans deserve, but don't need.
</p>
</div>
</div>
</main>
</div>
<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 {
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>
<footer id="footer"></footer>
</div>
<style>
main {
background-color: transparent !important;
}
</body></html>
.content {
background-color: var(--background);
}
.title {
margin-top: var(--content-spacing);
}
.title:first-child {
margin-top: 0 !important;
}
</style>
</body>
</html>

44
index.html
View File

@ -1,14 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>xbazzi.com</title>
<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/rss.js"></script>
<script src="assets/scripts/aside.js"></script>
<script src="assets/scripts/footer.js"></script>
<script src="https://kit.fontawesome.com/e6a86da546.js" crossorigin="anonymous"></script>
</head>
@ -26,38 +25,31 @@
software-defined networking, and reverse engineering.
</p>
</div>
<div class="title"><span class="fa-solid fa-lightbulb"></span> projects </div>
<div class="content" style="display: flex;">
<div class="project">
<a href="./homenetwork.html"><img src="assets/img/dc1.JPG" alt="Datacenter preview" class="project-image"></a>
<a href='./homenetwork.html'><span class="caption">
Datacenter at Home
</span></a>
</div>
<div class="project">
<a href="./website.html"><img src="assets/img/website.png" alt="Website preview" class="project-image"></a>
<a href='./website.html'><span class="caption">
Overengineered Static Site (this website)
</span></a>
</div>
<div class="title"><span class="fa-solid fa-lightbulb"></span> projects </div>
<div class="content" style="display: flex;">
<div class="project">
<a href="./homenetwork.html"><img src="assets/img/dc1.JPG" alt="Datacenter preview" class="project-image"></a>
<a href='./homenetwork.html'><span class="caption">
Datacenter at Home
</span></a>
</div>
<div class="project">
<a href="./website.html"><img src="assets/img/website.png" alt="Website preview" class="project-image"></a>
<a href='./website.html'><span class="caption">
Overengineered Static Site (this website)
</span></a>
</div>
</div>
</div>
</main>
</div>
<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>
<footer id="footer"></footer>
<div class="under-construction">
<img src="assets/img/gifs/thispageisunderconstruction.gif" alt="Under construction gif"></img>
</div>
</div>
<style>
.update {
border: 2px dashed var(--main-color);
padding: 5px;
}
main {
background-color: transparent !important;
}

23
website.html
View File

@ -4,7 +4,6 @@
<head>
<meta charset="UTF-8">
<title>xbazzi.com</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">
@ -16,6 +15,7 @@
<script src="assets/scripts/rss.js"></script>
<script src="assets/scripts/aside.js"></script>
<script src="assets/scripts/footer.js"></script>
<script src="https://kit.fontawesome.com/e6a86da546.js" crossorigin="anonymous"></script>
</head>
@ -56,7 +56,7 @@
<br>
<br>
<a href="assets/img/website-diagram-dark.png"><img src="assets/img/website-diagram-dark.png"
class="diagram"></a>
class="blog-image"></a>
<br>
<br>
The quest for automation and seamless updates led me down the path of
@ -110,17 +110,9 @@ jobs:
</main>
</div>
<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>
<footer id="footer"></footer>
</div>
<style>
.update {
border: 2px dashed var(--main-color);
padding: 5px;
}
main {
background-color: transparent !important;
}
@ -137,15 +129,6 @@ jobs:
margin-top: 0 !important;
}
.myButton {
display: flex;
margin: 0 auto;
width: 150px;
}
.yw-content {
text-align: center;
}
</style>
</body>