This website
It started as a personal website and grew into something much bigger.
I wanted to share some of my story and show some of my frontend experiments, but I had so many ideas for this website that it became an experiment of its own.
The navigation options will change as you click through the website.
You can always click the avatar image in the top left to go back to the homepage.
One of the things I wanted was to see how far I can push a design system. How radically different can I make the appearance of a website while keeping the same fundamental code and structure? Try the theme picker in the navigation and you can see the answer: yes, you can make the same stuff look pretty damn different.
Why make this thing?
I wanted to own and control my online presence. I also think that any web developer really should have their own website.
I also wanted to try out Astro . It's a web framework for content heavy projects, and it allows you to use other frameworks. So for the simpler content-pages on this website, I've used Astro, and for anything that is more complex, I have used Svelte - though I have fully replicated the component library for React as well.
This website has about four jobs. It introduces me as a person - my life story , travel , scuba diving history , kids, philosophy, and whatever else I feel like sharing. It serves as a professional portfolio with CV , project writeups , and live demos . It's a digital garden where half-finished thoughts and routines and supplement stacks can exist without being polished essays. And it's a frontend playground where I test ideas I might never use professionally.
The four jobs overlap. The showcase demos are portfolio pieces *and* experiments. The life simulator is autobiographical *and* a complex SVG rendering challenge. The movie collection is family content *and* a filter/sort/view-mode interface. That overlap is the point. I wanted a website where the personal and technical sides reinforce each other instead of being split into "about me" and "portfolio" sections that pretend the same person didn't make both.
The Chameleon Engine
The theme system is probably the most technically ambitious part of the site. Dark mode and color theme options are nice, but I wanted to see just how powerful CSS can be in a structured environment. I call it the Chameleon Engine. The idea is that one set of components and one DOM structure can render as completely different-looking websites - different layout, different typography, different spacing, different color palette, different visual personality.
Currently there are six themes: Modern (clean and professional), Retro (late-90s Geocities), Rainbow (MySpace CSS maximalism), Terminal (hacker console), Cyberpunk, and Steampunk. Each theme changes the site's grid layout, navigation direction, border styles, fonts, corner radii, and interaction style through CSS custom properties and grid template area remapping. The DOM doesn't change. The View Transitions API handles the morphing animation between themes so elements physically move to their new positions.
You can switch between all six from the theme picker in the navigation; your choice is remembered when you come back. The change is more than a palette swap: the shell can move from a top navigation to a sidebar, and the same button can become bracketed terminal text, a beveled retro control, or a glowing cyberpunk panel.
This works because every piece of visible content goes through the component library instead of raw HTML. Headings, buttons, links, cards, inputs, tables - all wrapped in theme-aware components that read semantic design tokens. That constraint is annoying to maintain but it's what makes the whole thing possible. A button in Terminal theme gets bracket decorations and monospace font. The same button in Retro gets a Windows 95 outset border. Same component, same props, completely different output.
The component library
I built a full component library for this website. Every component is implemented in Astro, React, and Svelte - same CSS module, same class contract, three thin framework wrappers. The three implementations render identically. You can switch between them on the components showcase page and watch nothing change, which is the whole point.
The reason for three frameworks is Astro's islands architecture. Static pages use the Astro components and ship zero JavaScript. Interactive features hydrate as Svelte or React islands. The component library needs to work in all three contexts, so it does.
IndieWeb
I like the idea of owning my own space on the internet. Having a guestbook instead of a comments section on someone else's platform. Publishing content here first and syndicating it elsewhere. The site includes h-card markup, and I'm working on more IndieWeb features - webmentions, POSSE syndication, and eventually micropub support. It's slow going because I'm building everything else at the same time.