Loading
Most developer portfolios look like each other. I wanted mine to look like a physics textbook.
Most developer portfolios are the same portfolio.
Same hero section with a gradient background and a name in a large sans-serif font. Same card grid of projects. Same "I build things that matter." The design is trying to seem serious by resembling other things that have been considered serious — which is rational, except that when everything resembles everything else, nothing is memorable. A portfolio's first job is to be remembered. Its second job is to tell a story about how its maker thinks. Most portfolios fail both.
The question I asked instead: what should a portfolio look like if the work is genuinely about physics and artificial intelligence and the nature of intelligence itself? Not "how do I signal credibility by borrowing from things that look credible?" but "what visual language is actually native to this domain?"
The answer, it turned out, was not on Dribbble.
The system that emerged has three layers: core principles (what the system believes), derived rules (how those beliefs become decisions), and an implementation layer (the specific choices that execute them). Most design systems document only the third. This post covers all three, in order.
One signal, three encodings. The form changes; the underlying measurements do not.
The references that shaped this design were not design references. They were CERN technical documentation, NASA mission posters from the 1970s through 1990s, and the typesetting of Physical Review Letters.
What these share — and what almost no web design shares — is that they treat data as the primary citizen of the composition. In a CERN event display, the numbers are the content. The visual hierarchy serves the data, not the other way around. In a NASA mission poster, color encodes functional information: trajectory phases, system states, mission parameters. The aesthetic follows from function so closely that they become indistinguishable. Nobody at NASA designed the visual language by asking "what looks cool?" They asked "what encodes the most information with the least visual noise?" and the answer happened to be beautiful.
Three specific design decisions that came directly from these references. First: dark backgrounds, not as a style choice but as a choice about visual weight. Light backgrounds place emphasis on the container — the white space, the card surfaces, the frame. Dark backgrounds place emphasis on the content itself, which is where it belongs when the content is technical. The luminance differential between text and background is what creates legibility; dark backgrounds invert the convention and make text the source of light. Second: monospace typography for data. In a physics paper, equations occupy a different visual register than prose — you know immediately when you are looking at data versus when you are looking at argument. This distinction is worth preserving on the web, and monospace is the signal that carries it. Third: color restricted to semantic use. CERN diagrams use color to distinguish particle types. Strip the color and you lose information. That standard — color only when it encodes meaning that would be lost without it — became the non-negotiable rule.
Each domain in this site has a color. The assignment was not aesthetic. It was semantic, and the choices were deliberate.
Electric blue (#378ADD) for physics: the color of Cherenkov radiation, plasma discharge, the cold precision of measurement. It reads as energetic and exact simultaneously, which is what physics is — phenomena that carry enormous energy, described with total precision.
Teal (#1D9E75) for robotics: a color that sits between the organic green of biology and the cold blue of technology. Robotics is exactly that intersection — mechanical systems that move through physical space with biological-analog purpose. The color reads as alive in a way that pure blue does not, and as engineered in a way that pure green does not.
Purple (#7F77DD) for AI: the color of the invisible and abstract. AI systems produce outputs but have no physical instantiation you can point to. Purple historically encodes abstraction in scientific visualization — ultraviolet, cosmic background radiation false-color maps, the representation of things that exist in domains we cannot directly perceive.
Rose gold (#B76E79) for Ayri: warm, intimate, distinctly human. Ayri is not the technical side of this site. It is the creative and personal side — the project concerned with beauty, feeling, and the parts of intelligence that resist reduction. Rose gold sits at the intersection of warmth and restraint — not aggressive like orange, not cold like lavender. It is the only warm color in the palette, and that singularity is the point.
#378ADDPhysics#1D9E75Robotics#7F77DDAI#B76E79AyriCore principle: If a color doesn't encode meaning, it's decoration. Decoration is noise.
In practice, this means: blue never appears on a robotics page. Purple never appears on a physics tag. Color is not decorative inventory — it is a domain signal, and cross-domain use degrades the signal for every reader who has already learned the system. A reader who has spent five minutes on this site should be able to identify which domain a page belongs to without reading the page title. The color does the work. The text confirms it. This is the difference between a system and a palette — a system assigns meaning, a palette assigns mood.
Two font roles, never three. The moment you introduce a third typeface, the visual language fragments. You lose the signal that distinguishes the two roles you actually needed, and add a third role that is rarely justified by its cognitive cost.
Display typeface for headings: geometric, confident, legible at large sizes without decoration. It carries narrative and hierarchy without drawing attention to itself as a font choice. If a reader notices the heading typeface, something has gone wrong — the content should be what they notice.
Monospace for data, labels, tags, timestamps, code, and numbers: because data is monospace. This is not a design convention imported arbitrarily. It is a semantic one with a history. Monospace type originated in environments where each character needed equal width for column alignment — typewriters, teletypes, terminals. It became the convention for code and data because it makes structure visible at a glance. That visual recognition — monospace means machine-readable, structured, precise — is worth preserving and leveraging.
The rule applied consistently: if it's a number, a date, a category tag, a file size, a version string, or a code snippet, it is monospace. Everything that is argument, explanation, or narrative is display or body. The visual contrast between the two is consistent across every page. A reader learns the system in seconds: monospace means data, proportional means meaning.
This also solves a recurring problem in technical writing: distinguishing inline code from prose. When the body copy is proportional and the code is monospace, the distinction is immediate and requires no background color, no border, no additional decoration. The type itself carries the signal.
In practice, this means: every date, tag, version string, stat, and code snippet on this site is monospace. Every heading, body paragraph, and caption is proportional. There are no exceptions. The moment you break the rule for a single element — a decorative number in display type, a heading set in monospace for effect — you invalidate the signal for everything around it.
AX-Series and Ayri share infrastructure — the same dark background, the same typeface system, the same layout grid, the same spacing scale, the same border-radius conventions. Everything structural is identical. And yet they feel like entirely different sites.
AX-Series: cold, electric, data-dense, precise. The emotional register is the inside of a particle accelerator — everything purposeful, everything measured, no surface that exists for its own sake.
Ayri: warm, soft, generous, intimate. The emotional register is a conversation between two people about something that matters — personal, careful, unhurried.
One variable separates them: color temperature. AX-Series colors pull toward the cold end of the spectrum — electric blue, teal, cool purple. Ayri colors pull toward the warm end — rose, warm purple, amber accent. Every other variable is held constant. Same border-radius system, same spacing, same grid proportions, same type scale. The warmth or coldness of the accent color propagates through the entire page via hover states, gradient overlays, glow effects, and active state indicators — and transforms the felt quality of the interface without altering its structure.
This is the most important insight from the design process: identity lives in the variable that changes, not in the constants. Constrain everything structural. Vary the minimum necessary to create distinction. When you vary color temperature and only color temperature, the contrast between the two identities is clear and immediate without creating fragmentation — both sites are recognizably from the same system, which they are.
In practice, this means: you could clone the AX-Series layout identically, change a single CSS variable — the accent hue — and arrive at something that feels like Ayri. The warmth propagates through every hover state, every glow, every gradient tint. The structure is identical. The identity is different.
A design system is only as strong as its constraints. These are the violations that degrade it — each one has a specific mechanism of failure.
Using color decoratively. Adding a blue gradient to a section because it looks good — not because the content is physics-related — dilutes the semantic mapping. The reader learned that blue means physics. Now blue means "this section needed visual interest." The signal decays a little each time this happens, and eventually means nothing.
A third typeface. Two typefaces in tension produce rhythm. Three produce noise. The signal that distinguishes data from narrative requires exactly two registers. A third register erodes both, because the reader can no longer resolve what the contrast is signaling.
Warm accents in AX-Series. The cold–warm split between AX-Series and Ayri is the primary identity differentiator. Any warm accent on the AX side — an orange hover state, an amber badge, a rose gradient — collapses the distinction between the two systems.
Light backgrounds for "breathing room." The content-as-light principle depends on dark backgrounds. A light card inserted for contrast doesn't create breathing room — it places emphasis on the card's container rather than its content, reversing the hierarchy everywhere it appears.
Motion without information content. Transitions that exist only as polish — a hover fade that signals nothing, a spinner that doesn't communicate state — are noise. Every animation should answer a question: what state changed? What action completed? What is loading? If the animation doesn't answer one of those, it shouldn't exist.
Two specific mistakes, not vague self-deprecation.
The logo placement was wrong for three months. It sat inside the navigation pill at a size that competed with the navigation items — too prominent for a nav element, too small for a brand statement. A logo should establish identity at the edge of the viewport. It is the first signal a user receives, and it needs room to work. A logo scaled to fit inside a navigation bar has already conceded the visual hierarchy to the bar. The fix — moving the logo outside the pill, giving it proportional scale relative to the viewport — was obvious in retrospect. I resisted it because I'd spent time on the nav pill design and was weighting sunk cost over correctness.
The project card grid was designed desktop-first, and it shows on small viewports. At 375px width, a grid with complex hover states, layered text hierarchies, and nested layout structures becomes unreadable — the hover states never fire on touch devices, the text wraps unexpectedly, and the visual rhythm that works at 1200px breaks down entirely. The correct approach was to design the mobile card first: the irreducible minimum of information the card needs to communicate, presented in the minimum space, with the minimum visual complexity. Then expand from there as viewport width allows. Designing desktop-first and making it "responsive" afterward is not responsive design. It is a large-screen design that tolerates small screens under duress.
A design system is an argument. Every choice signals something about how you think about the domain. Dense grids signal comfort with complexity and precision. Generous whitespace signals confidence in the content — that it doesn't need to crowd other content off the page to assert itself. Monospace signals that data is a first-class citizen, not a footnote. Dark backgrounds signal that the content is more important than the container.
The design of a portfolio is the first project in it.
More to read
How sci-art aesthetics and purposeful motion create a living portfolio experience.
The interface must invite play without hiding causality, expose evidence without becoming a dashboard wall, and work on a phone.
The project began as a visual experiment. It ended by teaching me that spacing, measurement, reproducibility, and interfaces are the same scientific problem.