What changed, and why
This site is a live build. Each entry is a change I made and the reason behind it, newest first. The code is on GitHub.
Analytics: switched to a consent banner
I tested with PostHog’s cookieless mode set to always and didn’t get any session replays, even after moving PostHog onto this domain. That mode turns the recorder off, so I couldn’t have both.
Now there’s a consent banner. If you accept, PostHog sets a cookie and records your session, with anything you type masked. If you reject or ignore the banner, you’re counted without cookies.
Favicon: a pedestal table drawn as a T
My handle is tablesleveldesign, so I wanted a table in the icon. I compared four options at 16 px, in light and dark browser tabs: a side table, a pedestal table, a data table, and a TA monogram.
I picked the pedestal table because it reads as both a table and a T, and it still holds up at 16 px. It also matches the T on the homepage. The orange is the same placeholder as the rest of the site, so the icon will change with the palette.
Put up a placeholder design and color theme
The colors and layout you’re looking at are placeholders, and the fonts are only set for this launch. They all stand in until the Figma variables are done, so expect them to change.
This replaces the first home page, and the banner at the top says the site is a live build. The design foundation page still exists, but it’s hidden for now.
Launching before it’s finished
I’d rather show the work as it happens than wait for a finished site. The trade-off is that a visitor might land on a thin day, so the launch has a floor: a homepage, an About page, this log, the repo, and one real written piece.
One rule to keep it from breaking: main only gets working builds. Anything unfinished lives on a preview deploy.
Type: Bricolage Grotesque and JetBrains Mono
The first fonts were placeholders I hadn’t really chosen, and one of them is a default you see on a lot of developer sites. I put four pairings on the same homepage in Figma and compared them side by side. Bricolage Grotesque had the most character while still reading like a working product font. JetBrains Mono handles the labels and dates.
Comparing them on the real page caught something a font list wouldn’t: two of the monospace fonts were missing the arrow characters I use for links.
Homepage: a T as the centerpiece
I mocked up four hero layouts in Figma and first picked a wordmark, where the T in “Todd” was drawn and its leg dropped below the rest of the name. It was clever, but my name became the loudest thing on the page, and most portfolios I admire lead with what the person does instead.
The second round kept the T and gave it room. The crossbar runs under the four broad skills, the leg drops from the center for design systems, and my name and headline sit beside it at a readable size. The colors are still placeholders until the real tokens land.
Foundation: hand-written, token-driven CSS
I passed on a prebuilt component kit and decided to write the CSS myself, driven by a token file. The full reasoning is in the first piece.
Commits stay unsquashed
My first plan was to squash the history into a few clean commits before making the repo public. I changed my mind. The history is part of the work, so commits follow Conventional Commits, one idea each, and nothing gets squashed.
Added analytics without cookies
I want to know which parts of the site people use without asking them to accept cookies. PostHog runs in cookieless mode, so there’s no consent banner, at the cost of less precise returning-visitor counts.
Session recordings mask everything typed, Do Not Track is respected, and only three custom events are sent: theme changes, token pairs checked, and outbound clicks.
Built a token explorer
Contrast numbers in a token file are hard to judge, so I built a page that shows every semantic color in both themes side by side. A pair checker sets any text token on any background token and shows the contrast ratio and WCAG grade.
Added the page shell and themes
The site follows the operating system’s theme, and a toggle overrides it and remembers the choice. A small script in the head applies that choice before the first paint, so nobody who picked dark gets a flash of light.
Generated the CSS from one token file
Components should never hold a raw color or size, so every value lives in one file. Base values sit at the bottom, and semantic tokens point to a different one in each theme, which makes dark mode a data change instead of a code change.
Text and background pairs are declared next to the colors, and the build stops with the failing pair and its ratio if one drops below its minimum.
Prototyped a looping life timeline
A small running character moves through scenes from my life along the bottom of the homepage, and the last scene hands off to the first so it loops. It’s a working prototype with placeholder art, and it isn’t on the site yet.
Scaffolded the repo
Astro for the pages, with React only for the few pieces that need to be interactive. Design tokens live in one JSON file that generates the CSS. Light and dark themes follow the operating system. If a text and background pair drops below the contrast I’ve set for it, the build fails.