jtmac.dev - My personal website

Online reflection

jtmac.dev is my personal site and an online reflection of the things I care about. It brings my work and writing together with enough of my interests and point of view to make the person behind the work visible.

The Mass Effect games provided the visual reference. Korataki, electric blue, and a few restrained interface details give the site a futuristic science-fiction character without turning it into a replica of the games.

The experience

Visual character was never a reason to make the site harder to use. The same design system governs light and dark themes, responsive layouts, typography, navigation, motion, and focus states. Each decision has to work aesthetically and functionally with a keyboard, a screen reader, reduced motion, or a narrow viewport.

Accessibility is part of the design rather than a cleanup pass. The goal is an experience that feels distinctive without asking anyone to trade clarity, speed, or control for atmosphere.

Scroll horizontally to inspect the diagram.

Fig. 1: The token layer as its own bento view, color through to the interaction ramp. Blue marks the accent token and the states it owns.

The first Tab press

Press Tab on this page and a skip link appears at the top. It is the first focusable element in the document and the first thing a keyboard user reaches, and it exists so nobody has to walk through the navigation to get to the page.

The usual version of this control is a bare rectangle bolted above the header, visible only long enough to look unfinished. This one takes the navigation island's exact footprint, with the same pill geometry, glass surface, border, and accent color the rest of the site uses. The navigation steps aside while the skip link holds focus and returns before focus moves to the home link, so nothing on the page shifts.

Contrast ratios, focus states, reduced motion, and semantic structure shaped the visual language here rather than being reconciled with it afterward. An interface that is easy to operate and an interface that has a point of view are not competing goals, and treating accessibility as a constraint to design around is usually what produces the compromise people blame it for.

Scroll horizontally to inspect the diagram.

Fig. 2: The first Tab press. The skip action takes the navigation's exact footprint, and blue marks the focused control.

Building with AI

I built the site while experimenting with Fable 5 and GPT 5.6 Sol, using Impeccable and Taste to facilitate the design process. Product, design, and voice decisions live beside the code so each iteration can be judged against the same intent.

Automated checks catch deterministic drift, while visual review covers hierarchy, rhythm, and tone.

Agent access

Agent support comes after the human experience, but it is part of the same system. The site exposes a Model Context Protocol server at /mcp, canonical Markdown documents, and llms.txt so modern AI tools can query the work directly.

The browser pages and agent-facing interfaces draw from the same structured project and writing data. Their formats differ because people and agents read differently, but the underlying facts stay aligned.

claude mcp add --transport http jtmac https://jtmac.dev/mcp