Finding the thread.

A career needs a connecting idea.

I could have put my jobs in date order and called it a portfolio. But a banking mainframe, a cloud project, and an AI workflow looked like three different careers unless I explained what I kept doing in each of them.

I make complex technology useful.

That sentence gave me the thread. In each job, I have tried to understand the system in front of me, find what is getting in someone’s way, and make the result useful to them.

Once I had that idea, the page made more sense. The opening could say what I do; the backstory could show where I learned it; and the stories could show what happened when I put it to work.

Beige and brown felt like me.

I kept coming back to beige and brown. They felt warmer and more familiar than a polished tech palette. The cream leaves room for the writing, dark brown keeps it readable, and the warmer accent draws attention only where it helps.

The portrait was harder. Against a flat beige background, I looked as though I had been cut out and pasted onto the page. A little soft light and shadow finally gave it some depth.

I also tried a white T-shirt. It looked less like me. I went back to the black one, removed the logo, and kept my face as it was. I would rather recognise myself in the photograph than have a perfect-looking studio image.

One word carries the emphasis.

I tried a few more dramatic headline fonts. I liked them in screenshots, then saw them on my page and changed my mind. They drew attention to the font instead of the sentence, so I returned to the quieter type.

I wanted one word to carry the weight: “useful”. The italic makes you pause there. The small monospaced labels are enough of a nod to engineering; the rest should be easy to read.

A small signature: fp.

The little fp. started as a signature. It sits beside my full name in the header, so a visitor knows whose page this is without another large name competing with the headline.

The header mark uses Outfit, the same typeface as the rest of the interface. Its heavier weight and tight letter spacing bring the two letters together into a recognisable shape. The lowercase forms keep it informal, which fits the personal tone of the page.

I like the brown full stop because it gives the initials a finish. I did not need the logo to symbolise every part of my career. The writing and the thread already do that work.

The header implements it as live text, so it stays sharp as the layout changes and doubles as the home link. The browser-tab favicon repeats the initials and accent on a rounded cream tile. Its letterforms are outlined from the same Outfit weight and spacing as the header, so the favicon keeps its shape without relying on a font being installed or loaded.

Give movement something to explain.

I was attached to the Git-style timeline from early on. The branches make my career feel like a set of connected choices rather than a list of job titles. Revealing them as you scroll made reading the backstory feel like following those choices.

The moving thread came later. On its own it was just an interesting shape; “systems”, “cloud”, and “applied AI” made it feel tied to my story. When I briefly removed those words, I missed them.

I also learned to pull back. The forms needed to respond to the pointer, but more motion and bigger type did not always make the page better. The footer keys worked once they were small enough to belong in the corner and still felt like something you could press.

Give each part of the page a different job.

I put the photograph on the right because the left side needed to hold the sentence. Keeping that space open let the headline sit beside me without a box around it or text across my face.

The background and the page share a warm colour family, so the portrait feels connected to its surroundings. The studio treatment is built from two image layers inside an SVG. A feathered mask preserves the face from the reference image over the softened background. This keeps the accepted portrait while allowing a different setting around it.

Further down, I wanted the thread and my introduction to be in conversation with each other. They sit side by side when there is room, then stack on smaller screens so neither becomes cramped.

The backstory and the selected stories answer different questions. The timeline explains the progression of my responsibilities. The stories go deeper into particular problems and decisions. Separating those roles helps avoid repeating the same career summary in every section.

Rounded corners soften the larger image and story panels. Most writing sits directly on the page, with spacing doing the grouping. The keyboard gets more physical depth because its shape communicates an interaction: these are things you can press.

The stack follows the page.

I tried more elaborate directions, but the version I kept did not need an application framework. It is a static site: HTML for the words and structure, CSS for the layout, and JavaScript for the movement. I can serve it without a build step.

That simplicity suits the site while it is small. A local server is enough to preview it, and static hosting is enough to publish it. If Notes becomes a bigger body of writing, I may want a publishing system later.

Choosing how to build it.

I kept the page itself in HTML and CSS. Where I wanted something more expressive, I reached for two drawing tools: Canvas for the thread that keeps moving, and SVG for the timeline and diagrams that need to line up precisely.

Each suits a different job. The thread redraws as you interact with it; the timeline needs precise connections to the surrounding text. The contact keys remain ordinary links, with CSS providing their shape, depth, and pressed state.

I like that split. Reading and navigation still behave like a normal website. The custom drawing appears only where it helps me tell the story.

The small engineering decisions matter.

I wanted the thread to feel responsive, not merely animated. It redraws with requestAnimationFrame: moving the pointer turns it, dragging gives it momentum, and a quick gesture adds a brief burst of speed. When it leaves the screen or the tab is hidden, the loop pauses.

I capped the drawing resolution at twice the display density. That keeps the strands crisp without making every frame unnecessarily expensive. Sorting the strands by depth gives the form some volume, even though it is drawn on a flat canvas.

The timeline needed a different solution. Hard-coded node positions drifted away from the text as fonts and layout changed. The current graph measures its anchors after fonts load and recalculates when its container resizes. The muted path and the revealed path share the same geometry; a clipping rectangle controls how much of the active path is visible as you scroll in either direction.

I did not want motion to be compulsory. There is a pause button for the sculpture, keyboard support for the chapter tabs, and a quieter version for people who prefer reduced motion. That is not a claim that the site has passed a full accessibility audit, but it does put the reader in control.

One mobile bug was especially instructive: a rule meant for the header also hid the Email key in the footer. Both happened to use a navigation element. Scoping the rule to the header fixed it, and reminded me that a page can look finished on desktop while a small shared style breaks something elsewhere.

Building with AI still means making decisions.

I built the site with Codex in a lot of small rounds. I would bring a reference or describe a feeling, look at the result in the browser, and say what still felt wrong. Seeing the page mattered more than agreeing on a description of it.

Some of my feedback was very specific: leave my face alone, soften the shadow, bring back the timeline, make the contact keys smaller. A few ideas looked promising until I saw them in context. Then I asked to go back.

The same approach applied to implementation. A convincing picture of an interaction is only a starting point. The actual page has to respond to input, preserve readable text, and hold together when the viewport changes. Looking at the browser repeatedly was part of the design process.

The process left some housekeeping. I still want to consolidate styles added during the experiments and measure the deployed page before making any confident claims about speed. That is part of finishing the work, too.

The last part was editing.

The version I kept is built from a few choices I kept returning to: the warm palette, the photograph that still looks like me, the thread, the Git history, and that one italic word.

The hardest part was often taking something away. A beautiful reference could still feel wrong here. I had to keep asking whether each detail helped someone understand me and my work, or whether I only liked the detail on its own.