Building my personal website

I've built enough React apps, SvelteKit sites, and Next.js projects to know the drill: you start with a simple idea, add a framework for "productivity," and six months later you're debugging webpack configs at 2am wondering why your CSS isn't loading.

This site is different. It's pure static HTML, CSS, and JavaScript. No build step. No bundler. No transpilation. Just files in a directory that I can open in any text editor, serve with python3 -m http.server 8000, and deploy by copying to a server.

That simplicity isn't laziness—it's intentional. I wanted a site that would still work in ten years, that I could hand-edit without fighting a framework, and that loads instantly because there's nothing to compile or hydrate.

The three-faculty structure: Memoria, Imaginatio, Ratio

The site is organized around three "faculties" or rooms in my mind, each with its own purpose and aesthetic:

• Memoria (Memory) — The archive. Works, skills, lineage. Projects like Manticore Technologies and PeerWeave live here, along with case studies from systems work and notes on language learning.
• Imaginatio (Imagination) — The studio. Music, art, games, words. Creative work that doesn't need permission to exist.
• Ratio (Reason) — The thought engine. Essays, notes, sparks. Theology, ontology, systems thinking, and the mythic questions behind technology.

This structure emerged naturally from how I think about my own work. I'm not just a developer or just a musician or just a writer—I'm all of these, and they inform each other. The three-faculty model lets me organize without forcing everything into a single category.

Each faculty has its own accent color (Memoria: warm brown, Imaginatio: purple, Ratio: teal) and its own section in the navigation. The homepage shows all three as panels, each with a manifesto and a featured item.

Technical choices: semantic HTML and CSS variables

Here's what the stack actually looks like:

• HTML — Semantic markup with proper ARIA labels. Every page has a clear structure: header, nav, main, footer. No div soup.
• CSS — Three files: base.css for resets and typography, layout.css for grid and flex layouts, and theme.css for colors and theming. CSS variables handle light/dark mode switching.
• JavaScript — Vanilla JS in two files: main.js for theme toggling and site chrome, filters.js for content filtering on Imaginatio and Ratio pages. No dependencies.

The theme system is particularly elegant: a single data-theme attribute on the root element switches between light and dark modes. CSS variables handle all the color changes, and localStorage remembers your preference. The whole thing is about 50 lines of JavaScript.

Design philosophy: readable, fast, honest

I had three goals for the design:

1. Readability first. Typography matters. I'm using EB Garamond for headings (serif, warm) and Inter for body text (sans-serif, clean). Generous line height, comfortable max-width, proper contrast ratios.
2. Speed. No images unless necessary. SVG icons are tiny. CSS is minimal. JavaScript is minimal. The whole site should load in under a second on a slow connection.
3. Honesty. No fake loading states, no skeleton screens, no "coming soon" pages that never come. If something isn't ready, it doesn't exist. If it exists, it works.

The result is a site that feels fast and intentional. Every element has a purpose. Every page has content. No fluff.

What I'm building next: a digital 52-card deck

The next major feature I'm adding is a digital 52-card deck—interactive playing cards that work for musicians, games, and pure entertainment.

Musicians can use it for improvisation prompts, chord progressions, or random musical constraints. Game designers can prototype card-based mechanics. And sometimes you just want to shuffle a deck and see what happens.

I'm building this as a vanilla JavaScript component that will live in the Imaginatio section. It'll be fully interactive: shuffle, deal, flip, draw. The cards themselves will be rendered with CSS and SVG, so they're fast and scalable.

I'll document the development process in a follow-up post, showing the code end-to-end—from the card data structure to the shuffle algorithm to the CSS animations. This will also serve as a tutorial for anyone who wants to build something similar.

Why this matters

Most personal websites are either over-engineered (React for a blog) or under-designed (default WordPress theme). I wanted something in between: intentional, minimal, but still beautiful and functional.

Building this site reminded me that the web doesn't have to be complicated. You can make something meaningful with just HTML, CSS, and a bit of JavaScript. No frameworks required. No build tools needed. Just files and a server.

And that simplicity is liberating. I can edit this site from my phone if I need to. I can version control it with git. I can deploy it anywhere. It's mine, and it works.

Running it locally

If you want to run this site locally (or build something similar), it's dead simple:

cd /path/to/site
python3 -m http.server 8000

Then open http://localhost:8000 in your browser. That's it. No npm install, no build step, no configuration. Just serve the files.

The python3 -m http.server command starts Python's built-in HTTP server module. The -m flag tells Python to run the module as a script, and 8000 is the port number. You can use any port you want, or omit it to default to 8000.

This works because static sites don't need a fancy server. They just need something to serve files over HTTP, which Python's http.server does perfectly.

What's next

I'm planning to add:

• The digital 52-card deck (with full development documentation and a tutorial showing the code end-to-end)
• More interactive elements in Imaginatio—maybe a simple music player, or a visual generator
• A proper feed system for Ratio essays and notes
• Better mobile responsiveness (it works now, but could be smoother)

But I'm keeping the core simple: static HTML, CSS, and JavaScript. No frameworks. No build step. Just files and a server.

If you're building your own site and want to keep it simple, this is a good template. Start with HTML. Add CSS for styling. Add JavaScript only when you need interactivity. Keep it readable. Keep it fast. Keep it yours.