Skip to content

I Rebuilt My Site From Scratch

A tour of the new foggymtndrifter.com: an Apple inspired design, a search box that answers questions, comments that look like text messages, and a few other things I picked up along the way.

September 20, 20266 min read
AstroTailwindWeb DevelopmentDesign
Contents

If you have been here before, things look a little different. I pulled the whole site down and built it again from the ground up. Here’s what changed and why.

Making it feel like an app

The thing I kept coming back to was that I wanted the site to feel like an app, not a web page. On a phone it should feel like an iPhone app. On a laptop it should feel like a Mac app.

So I went and read Apple’s actual design guidelines instead of guessing, and the most useful thing I found was a rule about their new Liquid Glass material. Apple is pretty direct about it: glass belongs on the stuff you navigate with, and not on the stuff you read.

That one sentence shaped the whole site. The toolbar at the top, the tab bar at the bottom of your phone, the search panel, the main buttons: those are all glass. Everything you actually read sits on solid cards. My first pass had glass on everything, which looked neat for about five minutes and then just made it hard to tell what was what.

Easier to show than tell. Flip this between the two and see what I mean. The tabs are clickable too, so you can watch the icons fill in:

Latest writing

Installing Virtual Machine ManagerA step by step walkthrough for Void Linux.
Integrating Gitea and VercelSelf hosted git, deployed automatically.

A few other Apple things made it in:

  • The tab bar icons fill in when you are on that page, like they do in iOS
  • Rounded corners are sized to sit inside each other properly instead of all being the same
  • Everything responds to the accessibility settings for reduced transparency, higher contrast, and reduced motion

That last one is not decoration. If you turn on Reduce Transparency, the glass actually turns solid. Apple calls those settings out specifically, so they are worth doing properly.

Search, and an assistant you can talk to

There are two separate things here, and they used to be tabs of the same panel. Splitting them up was the right call.

Search is search. Hit the search button, or press Command K, and type. It runs entirely in your browser, so there is no waiting on a server between keystrokes.

The assistant is a conversation. It opens as its own thread, styled like Messages, and you can keep going: ask a question, then ask a follow up, then another. It remembers what you were talking about, so “what did he do before that” works without you repeating yourself. The thread sticks around while you move between pages.

It also knows what you are looking at. Open it on a post and ask it to summarize this page, and it will.

The important bit is that it only knows what is on this site. It reads my posts, my CV, and the pages, finds the parts that match your question, and answers from those. If you ask it something the site does not cover, it tells you so instead of making something up. I tested that specifically, because an assistant that invents answers about me is worse than no assistant at all.

One small thing I like: when the answer points somewhere, you get a button rather than a page name to go hunt for. Ask how to get in touch and there is a Send a message button sitting right there.

It is still AI though, so it can get things wrong. The panel says as much.

Every post gets a TLDR

There are three bullets at the top of each post now, summarizing it.

Those are written by AI, but not when you load the page. They are generated once when I write or edit a post, cached against a hash of the text, and committed with the post. So the site never calls a model to show you one, and re-running it costs nothing until a post actually changes. Serving a post is as cheap as it was before.

Comments look like a group chat

Comments still run on GitHub Discussions, same as before. One discussion per post, and everything lives in my repo where I can moderate it with GitHub’s own tools.

What changed is how they look. They are message bubbles now. Mine and everyone else’s show up in gray on the left, and if you are signed in, your own comments show in green on the right. Replies tuck in underneath the comment they are replying to with a little thread line, the way a reply thread looks in Messages.

Here’s the same thread both ways. Flip the switch to see what it looks like once you have signed in:

octocatSwapped Giscus for this on my own site. Does the reply nesting go deeper than one level?
FoggyMtnDrifterNope, GitHub allows exactly one level, so replies stay flat under the parent.
octocatThat matches how iMessage threads them anyway.
FoggyMtnDrifterExactly. Saved me building a tree I did not need.

One thing I dropped: guest comments. The old version let you comment with just a name, which meant a honeypot field and a math captcha to keep the junk out. Now it is GitHub sign in only. Fewer moving parts, and every comment has a real name attached to it.

My email is off the site

I took my email address off entirely. It is not in the page text, not in a mailto link, not buried in the metadata.

There is a contact form instead. When you send something it goes straight to a private Discord channel I watch, so there is no inbox in the middle of it. Spam protection is layered: a hidden field bots fill in and people never see, a check that you did not submit the form faster than a human could type, a limit on how often one person can send, and Cloudflare Turnstile on top of all that.

Coffee money, without Stripe

The old site had a Buy Me a Coffee button wired up to Stripe. Stripe was more hassle than it was worth for what amounts to pocket change, so that is gone.

It uses Cash App now. You pick an amount, it opens Cash App with that amount already filled in, and the payment happens over there. No card details ever touch my site, no keys to rotate, nothing for me to maintain. If you are on a laptop it shows a QR code instead so you can scan it with your phone.

What I’m listening to

There is a little bar at the bottom of the screen that shows what I have playing, styled after the mini player in Apple Music. If I am not listening to anything, it is not there at all.

Try stopping it:

The Less I Know the BetterTame Impala

Nothing playing, so nothing is there.

This one took some digging. I use Apple Music, and Apple has no way to ask what someone is playing right now. None. The closest thing they offer is a recently played list, and getting at even that needs a paid developer account and tokens that expire on you.

So it goes through Last.fm instead. I already run a scrobbler app that reports what I play, and Last.fm marks the track you are currently on with a flag that means “this is playing right now.” The site reads that flag. It updates on its own every twenty seconds, so you do not need to refresh anything.

The boring details

The site runs on Astro 7 and Tailwind 4, and it is hosted on Vercel. Almost every page is plain HTML built ahead of time, which is why it loads fast. The only things running on a server are the search assistant, the comments, the contact form, and the now playing bar.

The old posts all came over, so nothing you may have read here before is gone.

If you find something broken, the comments are right below. Or use the contact form, which now goes somewhere I will actually see it.

Got a question about this?

Ask the site, or send me a message.

Contact

Loading comments…