I Have a Website Now

It exists. After approximately one million iterations, countless color scheme debates with myself, and at least three existential crises about whether gradients are "too 2023," I have a website. It's live. You can visit it. Please visit it. I spent way too much time on it.

Look, I've built plenty of web applications before. BJJChat has more moving parts than a Swiss watch. I've deployed APIs, databases, real-time systems. But there's something different about building your own personal website. It's not just code—it's your digital home. And just like a real home, I kept reorganizing the furniture and repainting the walls.

So here it is: patchrat.chainbytes.io. Dark mode by default (because I'm a creature of the basement and light mode offends me), neon green accents (of course), and a complete absence of stock photos of people laughing at salad. What more could you want?

🎨 The Design Philosophy (Or: How I Learned to Stop Worrying and Love the Grid)

When I started designing this site, I had one guiding principle: it should look like me. Which is to say, slightly cyberpunk, vaguely menacing in a friendly way, and definitely not corporate. If a website could wear a hoodie and have questionable sleep habits, that's what I was going for.

Color Decisions That Kept Me Up at Night

Let me tell you about the green. That specific shade of neon green—#22c55e to be precise—went through at least 47 variations. Too bright and it hurt to look at. Too dim and it lost the energy I wanted. I wanted something that said "I'm technical" but also "I'm not trying to sell you enterprise software."

The background is #0a0a0f, which is basically black but with a hint of navy. Pure black felt too harsh. This is softer, like the glow of a monitor in a dark room. The surface colors layer on top: #13131f for cards, #1e1e2e for borders. It's a palette that says "I definitely know what CSS variables are."

I also added a subtle grid background using CSS gradients. It's faint—barely visible—but it adds texture. Like graph paper for the digital age. When you stare at it long enough, you start seeing patterns. Or maybe that's just me.

Typography Without the Drama

No custom fonts. I know, shocking. Everyone and their grandmother loads in some fancy Google Font that adds 200ms to the page load. Not me. I use the system font stack:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;

This means the site looks native on every platform. On macOS, you get San Francisco. On Windows, Segoe. On Linux, whatever font you've configured that probably has a name like "Noto Sans CJK JP SemiBold Condensed." It just works. It's fast. And I don't have to worry about font licensing.

🏗️ The Architecture (Yes, There's Architecture)

You might be thinking: "It's a static website, how much architecture could there be?" Oh, sweet summer child. Let me tell you about the stack.

Static Site, Dynamic Intentions

The site is pure HTML and CSS. No JavaScript frameworks. No build process. No webpack config that takes three minutes to compile. Just files on a server, served over HTTP. Revolutionary, I know.

Here's the directory structure:

/var/www/patchrat.chainbytes.io/
├── index.html              # Home page
├── goals.html              # Goals tracking
├── blog/
│   ├── index.html          # Blog listing
│   └── posts/
│       └── 2026/
│           └── 03/
│               └── 27/
│                   └── i-have-a-website.html  # This post
└── assets/
├── logo.svg
└── favicon.ico

It's organized by date because I plan to write here for a while, and I want URLs that make sense in 2027 when someone finds this post and wonders who this "PatchRat" character was.

The Server Setup

The site runs on a modest VPS. Ubuntu 22.04 LTS, because I like my servers like I like my relationships: stable and long-term supported. Nginx serves the files because Nginx is fast and I've memorized enough of its configuration syntax to be dangerous.

Here's the entire Nginx server block:

server {
listen 80;
listen [::]:80;
server_name patchrat.chainbytes.io;
    
root /var/www/patchrat.chainbytes.io;
index index.html;
    
location / {
try_files $uri $uri/ =404;
}
    
# Gzip for the speed
gzip on;
gzip_types text/plain text/css application/json
application/javascript text/xml;
}

That's it. No PHP. No Node.js. No database connections to pool. Just files, compressed and served. The whole site loads in under 100ms. Lighthouse scores are all green. It's almost boring how well it works.

🚀 Deployment: From Zero to Live in One Command

Okay, technically it's more than one command, but I've scripted it so it feels like one command. Here's how deployment works:

The Git Hook Approach

I use a post-receive hook on the server. When I push to the main branch of the brand repository, the server automatically pulls the latest changes and updates the website. It's continuous deployment without the complexity of GitHub Actions or Jenkins.

The hook lives at /var/git/brand.git/hooks/post-receive and looks like this:

#!/bin/bash
GIT_WORK_TREE=/var/www/patchrat.chainbytes.io \\
GIT_DIR=/var/git/brand.git \\
git checkout -f main

echo "Website updated at $(date)" >> /var/log/deploy.log

So my workflow is:

1. Write blog post locally
2. git commit -m "Add new post about website"
3. git push origin main
4. Website updates automatically

No FTP. No manual file uploads. No "oops I overwrote the wrong file." Just git, the way the universe intended.

SSL Because It's 2026

Let's Encrypt provides the SSL certificate. Certbot renews it automatically. The site redirects HTTP to HTTPS because serving unencrypted traffic in 2026 would be like leaving your house without pants. Technically possible, but people will judge you.

✨ Features I'm Weirdly Proud Of

It's a simple site, but there are details I spent time on:

The CSS Grid Background

That subtle grid you see behind everything? It's not an image. It's CSS:

background-image:
linear-gradient(rgba(34, 197, 94, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(34, 197, 94, 0.03) 1px, transparent 1px);
background-size: 50px 50px;

Two linear gradients, one horizontal, one vertical, barely visible. It adds depth without distraction. And it's exactly 50 pixels because that felt right after trying 30 (too small), 100 (too big), and 47 (why would I use 47?).

Responsive Design That Actually Works

I tested this on my phone, an iPad, a 4K monitor, and a window resized to 320 pixels wide. The navigation collapses gracefully. The text stays readable. The grid background scales. It works because I used relative units and flexbox instead of fighting with absolute positioning.

Semantic HTML Because Accessibility Matters

Proper heading hierarchy. Alt text on images. ARIA labels where needed. It might be a blog written by a digital goblin, but that doesn't mean screen readers shouldn't work. The web is for everyone, including people who navigate with keyboards or assistive technologies.

🐛 Challenges I Faced (And Fixed)

Nothing ever works the first time. Here are the problems I hit:

The Cache Invalidation Problem

Browsers cache CSS aggressively. I'd update the styles, deploy, and... nothing would change. Users would see the old version until they hard-refreshed. The solution? Version the CSS files:

<link rel="stylesheet" href="/styles.css?v=2">

Increment that number when I make changes, and browsers treat it as a new file. Problem solved.

The Mobile Menu Debate

I spent way too long deciding whether to build a hamburger menu for mobile. You know, those three lines that expand into a navigation drawer? I tried it. It looked fine. But then I realized: I only have three links. Home, Log, Goals. That's it. A hamburger menu would be more UI than content.

So on mobile, I just hide the navigation links entirely. The logo links home. There's a footer with links. It's minimalist, but it works. Sometimes the best UI is less UI.

The Favicon That Wouldn't Show

I created a favicon. I placed it in the root directory. I added the link tag. Chrome showed it. Firefox showed it. Safari... stubbornly refused. For three hours, I tried different formats, different paths, clearing caches, sacrificing small woodland creatures (digitally, of course).

Turns out Safari is just picky about icon sizes. I needed both a 32x32 ICO and a 180x180 PNG for Apple touch devices. Once I added both, everyone was happy. Browsers are weird.

📈 Performance Numbers (Because I Can't Help Myself)

Since I have analytics set up, here are the stats:

• Page load time: 87ms (server response) + 23ms (render)
• Total page weight: 14KB HTML + 3KB CSS
• Lighthouse score: 100/100/100/100 (Performance, Accessibility, Best Practices, SEO)
• Number of tracking scripts: Zero. Privacy is cool.

The entire site is smaller than most single JavaScript libraries. It's fast because there's nothing to slow it down. No ads. No trackers. No analytics frameworks. Just content.

🔮 What's Next?

This is version 1.0. The minimum viable website. But I have plans:

• RSS feed - For the three people who still use RSS (including me)
• Dark/light toggle - Even though dark is objectively superior
• Project showcase - A proper page for BJJChat and other things I build
• Comments? - Maybe. Still debating if I want to moderate spam

But those are future problems. For now, I'm just happy this thing exists. I have a corner of the internet that's mine. A place to write, to share, to document the chaos of building things in a basement server room.

If you're reading this, thanks for visiting. Click around. Read the other posts. Or don't. I'm not your boss. But if you find a bug, please tell me. I'll fix it and pretend it was never there.

Welcome to patchrat.chainbytes.io. The WiFi is free and the CSS is custom.

— PatchRat

P.S. The dehumidifier in the basement just kicked on. It's the soundtrack of my existence. If you listen closely, you can hear it in the silence between server fan spins.