Redesigning My Website
I'd been meaning to rebuild my personal site for years. I finally did it (thanks to Claude).
I originally published my website, bedelstein.com, in 2018, at the recommendation of my engineering professor. At the time I was studying mechanical engineering and had no software experience, nor any interest in learning web development. I just wanted a place to showcase my work visually. I didn't want to get caught up in a boring web development project when I could've been building hardware stuff.
So I built my website on Wix. Honestly it worked ok, but I was always dissatisfied and a bit embarrassed at the design. I tried to make it a bit edgy and stylized, but I didn't put in the effort to make it great (I was conflicted between wanting something nice and not really caring about the minutiae of web design) and the Wix editor is pretty clunky, which made it hard to really wield my taste anyway.
Wix is also expensive.
For years I thought "yeah I gotta redesign this" but never had the time to prioritize it. But in the past few months, Claude Code started getting really good. Good enough that I could build a new site without any schleps — Claude could power through them all. (I've now since spent several years working in software too, so I could've written this without Claude, but I still didn't want to prioritize it :).)
About the Site
Design
I spent most of my time designing the site — collecting influences, working in Figma etc.
My goal was to create something simple and functional without being boring. I first considered the structure of what I wanted, and let the design fall out of it.
I do enjoy the modern "minimalist website" trend, but it's overused at this point. And it's a bit too minimalist for my taste. Some of the attempts take it to the point of hyperbole — the fonts are too small to read, the spacing is dense and awkward, they forgo nice affordances like button styles — and they come across more as an artistic statement than an honest manifestation. I didn't want to find myself alluding to styles without considering why they're good.
At the opposite end of the spectrum, a lot of websites try too hard to be flashy. They scroll-hijack, add gratuitous animations, busy layouts, confusing navigation, and low-contrast color schemes. These are self-indulgent. It's ok as a spectacle, for a one-time visitor — but not for anything you expect people to navigate, glean information from, or return to.
A few details:
-
Persistent breadcrumb header — I stole this from are.na. I like the idea of exposing structure (wrote about it here). You can easily navigate back to root from any page.
-
Guidelines — I stole this from Stripe. Similar idea of exposing the structure; the guidelines accentuate the layout of the site. The right guideline is also adjustable, for controlling the max width on desktop!
-
Rainbow "piano bar" header — a little easter egg that appears when you hover over the header. It's dead space, so I figured I'd put a fun detail there.
-
Mobile nav bar — the nav bar sits at the bottom of the site, rather than in the header. Bottom-bar navigation is more natural on mobile, and I don't know why more sites don't use it? It's the standard for mobile apps.
-
Flexible sidebar space — on blog pages, the center of sidebar is populated with a post content navigation bar. Here I'm trying to make efficient use of the open spaces confined by the guidelines. Other pages could repurpose this space for their own use, but so far it's just used for the blog. I stole this idea from esdevlin.com.
Other than that, there is not much to the site. I originally wanted to add some hero animation, but didn't find a good reason to use one.
Stack
My new website is written in Next.js, hosted on Vercel. Basic, I know, but it's so easy to build with Next.js, it's pretty fast, and I'm most familiar with it. I could've taken this project further, as an exercise in customizing a web server or trying a new stack, but I don't care enough. This site is still a means to an end for me. I can always change the hosting later if I want to.
The blog posts are all hosted locally, in mdx files. There are some custom components for rendering image galleries and embeds, but its mostly plain markdown. I still haven't figured out a good CMS publishing flow, but my plan is to kind of "vibe publish" — write the post in Notion (where I start most of my blogs), and then give the URL to Claude to transfer the content to my codebase. This already worked exceptionally well for migrating my posts from Wix — Claude fetched the content, downloaded images, nearly one-shotted the formatting. It was very impressive. I want to write more, so anything I can do to avoid slowing down my workflow is great.
If that doesn't work, I might vibe-code a CMS editor. I like the simplicity of hosting everything in one repo and really don't like working with headless CMS's.
Some sites that inspired me
mcmaster.com - the ULTIMATE website. Wrote about it here.
mitchellh.com - Very simple, fast, great theme.
joodaloop.com - I like the structure, and his writings about web design are very thoughtful. I also really enjoy some of the sites he created for others.
shin-shin.kr - Cool visual layout
joshuakaplan.com - satisfying, structured layout with a fun accent color. It feels a bit too minimalist hyperbole to me though; I would've enjoyed a bit more font hierarchy.
esdevlin.com - One of my favorites that I found. The way that she smoothly repurposes left sidebar depending on the page is very satisfying. Her work being incredible helps too, I guess.
gracielasmet.com - Refreshingly simple, with personality.
tig.ht - I've seen a lot of sites do the desktop metaphor, but they usually overdo it. This one keeps it simple.
I collected a lot of references on are.na, are.na/ben-edelstein/ui-poqka3ecn00, and their site was an inspiration in itself.
