534 lines
17 KiB
HTML
534 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tech Blog | Projects & Documentation</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--deep-navy: #0A1128;
|
|
--rich-gold: #D4AF37;
|
|
--warm-gold: #F4E5C2;
|
|
--cream: #FFF8E7;
|
|
--charcoal: #2C2C2C;
|
|
--silver: #C0C0C0;
|
|
--burgundy: #7C2D37;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
|
|
line-height: 1.6;
|
|
color: var(--charcoal);
|
|
background: linear-gradient(180deg, var(--deep-navy) 0%, #1a2847 100%);
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Art Deco geometric background pattern */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image:
|
|
repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(212, 175, 55, 0.03) 35px, rgba(212, 175, 55, 0.03) 70px),
|
|
repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(212, 175, 55, 0.03) 35px, rgba(212, 175, 55, 0.03) 70px);
|
|
z-index: -1;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
/* Art Deco Header */
|
|
header {
|
|
padding: 4rem 0 3rem;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.deco-border-top {
|
|
width: 300px;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, transparent, var(--rich-gold), transparent);
|
|
margin: 0 auto 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.deco-border-top::before,
|
|
.deco-border-top::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: var(--rich-gold);
|
|
transform: rotate(45deg);
|
|
top: -8px;
|
|
}
|
|
|
|
.deco-border-top::before {
|
|
left: -10px;
|
|
}
|
|
|
|
.deco-border-top::after {
|
|
right: -10px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 5rem;
|
|
font-weight: 300;
|
|
color: var(--warm-gold);
|
|
margin-bottom: 0.5rem;
|
|
letter-spacing: 0.3em;
|
|
text-transform: uppercase;
|
|
text-shadow:
|
|
2px 2px 0 rgba(212, 175, 55, 0.3),
|
|
4px 4px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.2rem;
|
|
color: var(--silver);
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
font-weight: 300;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
.deco-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 3rem 0;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.deco-divider::before,
|
|
.deco-divider::after {
|
|
content: '';
|
|
width: 100px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--rich-gold), transparent);
|
|
}
|
|
|
|
.deco-divider .diamond {
|
|
width: 15px;
|
|
height: 15px;
|
|
background: var(--rich-gold);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* Blog Grid */
|
|
.blog-grid {
|
|
display: grid;
|
|
gap: 3rem;
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.blog-post {
|
|
background: var(--cream);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 2px solid var(--rich-gold);
|
|
box-shadow:
|
|
0 10px 40px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Geometric corner decorations */
|
|
.blog-post::before,
|
|
.blog-post::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 2px solid var(--rich-gold);
|
|
z-index: 2;
|
|
}
|
|
|
|
.blog-post::before {
|
|
top: 0;
|
|
left: 0;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.blog-post::after {
|
|
bottom: 0;
|
|
right: 0;
|
|
border-left: none;
|
|
border-top: none;
|
|
}
|
|
|
|
.post-content-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 400px 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.post-image-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.post-image {
|
|
height: 100%;
|
|
min-height: 350px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 4rem;
|
|
position: relative;
|
|
background: linear-gradient(135deg, var(--deep-navy) 0%, var(--burgundy) 100%);
|
|
}
|
|
|
|
/* Sunburst pattern on images */
|
|
.post-image::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: repeating-conic-gradient(
|
|
from 0deg,
|
|
rgba(212, 175, 55, 0.1) 0deg 10deg,
|
|
transparent 10deg 20deg
|
|
);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.post-number {
|
|
position: absolute;
|
|
top: 1.5rem;
|
|
left: 1.5rem;
|
|
font-size: 5rem;
|
|
font-weight: 300;
|
|
color: var(--rich-gold);
|
|
line-height: 1;
|
|
z-index: 3;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.post-content {
|
|
padding: 3rem;
|
|
position: relative;
|
|
}
|
|
|
|
.post-meta {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
color: var(--charcoal);
|
|
}
|
|
|
|
.post-category {
|
|
color: var(--burgundy);
|
|
font-weight: 700;
|
|
position: relative;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.post-category::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%) rotate(45deg);
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--rich-gold);
|
|
}
|
|
|
|
.post-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 400;
|
|
color: var(--deep-navy);
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.2;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.post-description {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
line-height: 1.8;
|
|
color: var(--charcoal);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.tech-stack {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0.75rem;
|
|
margin-top: 2rem;
|
|
padding-top: 2rem;
|
|
border-top: 2px solid var(--rich-gold);
|
|
}
|
|
|
|
.tech-item {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--deep-navy);
|
|
padding: 0.75rem 1rem;
|
|
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
|
|
border-left: 3px solid var(--rich-gold);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Alternating layouts */
|
|
.blog-post:nth-child(even) .post-content-wrapper {
|
|
grid-template-columns: 1fr 400px;
|
|
}
|
|
|
|
.blog-post:nth-child(even) .post-image-container {
|
|
order: 2;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 4rem 0;
|
|
color: var(--silver);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.footer-ornament {
|
|
width: 200px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--rich-gold), transparent);
|
|
margin: 0 auto 1.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.footer-ornament::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--rich-gold);
|
|
transform: rotate(45deg);
|
|
top: -4px;
|
|
left: 50%;
|
|
margin-left: -5px;
|
|
}
|
|
|
|
@media (max-width: 968px) {
|
|
h1 {
|
|
font-size: 3.5rem;
|
|
letter-spacing: 0.2em;
|
|
}
|
|
|
|
.post-content-wrapper,
|
|
.blog-post:nth-child(even) .post-content-wrapper {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.post-image-container,
|
|
.blog-post:nth-child(even) .post-image-container {
|
|
order: 1;
|
|
}
|
|
|
|
.post-content {
|
|
order: 2;
|
|
}
|
|
|
|
.post-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.tech-stack {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
letter-spacing: 0.15em;
|
|
}
|
|
|
|
.container {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
header {
|
|
padding: 3rem 0 2rem;
|
|
}
|
|
|
|
.post-content {
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.post-number {
|
|
font-size: 3.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
<div class="deco-border-top"></div>
|
|
<h1>BLOG</h1>
|
|
<p class="subtitle">Technical Projects & Innovation</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="deco-divider">
|
|
<div class="diamond"></div>
|
|
</div>
|
|
|
|
<main class="container">
|
|
<div class="blog-grid">
|
|
|
|
<!-- Blog Post 1 -->
|
|
<article class="blog-post">
|
|
<div class="post-content-wrapper">
|
|
<div class="post-image-container">
|
|
<div class="post-image">
|
|
<span style="filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5)); font-size: 5rem;">
|
|
<img src="STEAM-CONTROLLER.svg" width=300>
|
|
</span>
|
|
</div>
|
|
<div class="post-number">04</div>
|
|
</div>
|
|
<div class="post-content">
|
|
<div class="post-meta">
|
|
<span class="post-category">Hardware</span>
|
|
<span>November 2025</span>
|
|
</div>
|
|
<h2 href="https://steen.run/blog/SteamController" class="post-title">Steam Controller Driver For Actual Motors</h2>
|
|
<p class="post-description">
|
|
Taking a deprecated piece of technology and reverse-engineering the protocol to create custom drivers for games as well as drive two motors over bluetooth using an ESP32.
|
|
</p>
|
|
<div class="tech-stack">
|
|
<div class="tech-item">C/C++</div>
|
|
<div class="tech-item">Hardware</div>
|
|
<div class="tech-item"></div>
|
|
<div class="tech-item">MongoDB</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Blog Post 2 -->
|
|
<article class="blog-post">
|
|
<div class="post-content-wrapper">
|
|
<div class="post-image-container">
|
|
<div class="post-image" style="background: linear-gradient(135deg, #7C2D37 0%, #4A1C25 100%);">
|
|
<span style="filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5)); font-size: 5rem;">
|
|
<img src="Air-Quality-Monitor.svg" width=300>
|
|
</span>
|
|
</div>
|
|
<div class="post-number">03</div>
|
|
</div>
|
|
<div class="post-content">
|
|
<div class="post-meta">
|
|
<span class="post-category">Hardware</span>
|
|
<span>October 2025</span>
|
|
</div>
|
|
<h2 class="post-title">Air-Quality Monitoring and Data Collection</h2>
|
|
<p class="post-description">
|
|
Built an air quality monitoring system using an ESP32 microcontroller that interfaces with three sensors: a BME280 for temperature, humidity, and pressure; an SPS30 for particulate matter (PM2.5/PM10); and an SCD40 for CO2 levels. The ESP32 runs custom firmware that collects sensor data and transmits it over WiFi via HTTP with JSON payloads to an InfluxDB instance running on my homelab. This enables continuous monitoring and historical tracking of indoor air quality metrics.
|
|
</p>
|
|
<div class="tech-stack">
|
|
<div class="tech-item">C/C++</div>
|
|
<div class="tech-item">Soldering</div>
|
|
<div class="tech-item">I2C</div>
|
|
<div class="tech-item">InfluxDB</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Blog Post 3 -->
|
|
<article class="blog-post">
|
|
<div class="post-content-wrapper">
|
|
<div class="post-image-container">
|
|
<div class="post-image" style="background: linear-gradient(135deg, #1a2847 0%, #0f1829 100%);">
|
|
<span style="filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5)); font-size: 5rem;">
|
|
<img src="homelab.svg" width=300>
|
|
</span>
|
|
</div>
|
|
<div class="post-number">02</div>
|
|
</div>
|
|
<div class="post-content">
|
|
<div class="post-meta">
|
|
<span class="post-category">Infrastructure</span>
|
|
<span>September 2025</span>
|
|
</div>
|
|
<h2 class="post-title">Home Sweet Homelab</h2>
|
|
<p class="post-description">
|
|
Welcome to my homelab! Let me show you around.
|
|
</p>
|
|
<div class="tech-stack">
|
|
<div class="tech-item">Kubernetes</div>
|
|
<div class="tech-item">Proxmox</div>
|
|
<div class="tech-item">ArgoCD</div>
|
|
<div class="tech-item">OTEL-LGTM Stack</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Blog Post 4 -->
|
|
<article class="blog-post">
|
|
<div class="post-content-wrapper">
|
|
<div class="post-image-container">
|
|
<div class="post-image" style="background: linear-gradient(135deg, #2C3E50 0%, #1a252f 100%);">
|
|
<span style="filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5)); font-size: 5rem;">
|
|
<img src="n8n.svg" width=300>
|
|
</span>
|
|
</div>
|
|
<div class="post-number">01</div>
|
|
</div>
|
|
<div class="post-content">
|
|
<div class="post-meta">
|
|
<span class="post-category">DevOps</span>
|
|
<span>August 2025</span>
|
|
</div>
|
|
<h2 class="post-title">Automating Automation with n8n</h2>
|
|
<p class="post-description">
|
|
Architected and implemented a comprehensive CI/CD pipeline for microservices deployment. The sophisticated
|
|
system incorporates automated testing, security scanning, containerization, and Kubernetes orchestration,
|
|
dramatically reducing deployment time while enhancing reliability through automated rollback capabilities.
|
|
</p>
|
|
<div class="tech-stack">
|
|
<div class="tech-item">n8n</div>
|
|
<div class="tech-item">Kubernetes</div>
|
|
<div class="tech-item">Terraform</div>
|
|
<div class="tech-item">AWS</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-ornament"></div>
|
|
<p>Crafted with Precision & Elegance © 2025</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|