Problem & Purpose
I started making this site as one of my "weekly projects" during my summer of 2025, although the consistency didn't last too long. Most of my creations are things I make for the intrinsic joy of programming and I really only share it with the friends that would understand the effort put in. A personal website can serve as a public space I can leave my projects to share more broadly. I can also use it as essentially a blog for each of the projects.
Technical Decisions
With the product goal being a project showcase, I also had a couple of technical goals that reflect some of my web development ideals.
Progressive Enhancement
I would not call myself a front-end dev or designer simply because I don't care about how things look that much. The content should be able to stand alone. Everything should look good without CSS, and you can see that with css toggle.
Lightweight
Pages should load fast. This project doesn't use any existing frameworks like react so the only JavaScript being pulled in is code that actually does something.
Architecture
Each component that I included is typed as a Blueprint, equivalent to a react functional component except that it just returns a string.
const Component: Blueprint<ComponentProps> = (props) => `Content`
Toggling the CSS is fairly simple, as its just a matter of disabling the stylesheet
const stylesheets = Array.from(document.styleSheets);
stylesheets.forEach(sheet => {
if (sheet.href && sheet.href.includes('clean.css')) {
sheet.disabled = true;
}
});
You can also select the "fancy" "modern" css theme which I generated using github copilot. You can feel how generic it is, but that's there as a demonstration. Maybe at some point I'll handcraft a really clean theme.
Formatter
This one is bespoke for no reason. I have it for debugging purposes, and all it does is tab forward nested tags
Tester
I haven't been keeping up with tests because this is mostly ui work but the formatter has unit tests, and this test engine is bespoke too.
Other Features
Iframes
You saw on the home page you could see the same page nested inside itself. This is done with an iframe component because I thought it was cool. It only loops like once or twice before the browser stops. There is a way for me to subvert that but that violates the goal to keep the site lightweight.
CSS Selector
Because the page is static and semantic, I thought it would be cool to be able to switch between different stylesheets on the same contant. You can swap between them using the selector at the top of each page.
Final Thoughts
I consider this a persistent project that I can adapt as I work on other ideas and want to showcase them. Having everything in the browser means I get to use any form of interactivity I'm willing to implement. Everything on client-side means I can push and forget. Everything in one place means I have a one-stop shop to show off what I do. I definitely spent way more time on this personal page than what one should spend on it but overengineering is what I do best