This website is built the same way I approach any project I take on professionally. Since it is a showcase of my career, it felt right that the process behind it should reflect how I actually work.
I start by planning, then defining the fundamentals: colour, typography, and visual style. Once those are in place, I apply them in a modular way, building each part of the project on top of a consistent foundation. This makes every decision faster to implement, easier to keep coherent, and simpler to improve over time.
This post documents that process, one layer at a time.
The Problem
My career spans product design, digital fabrication, technical communication, education and software. That range is the point, but it is also the risk: a portfolio that lists several disciplines can read as scattered rather than broad. The site had to make a multi-disciplinary profile legible within the seconds a recruiter gives it, in English and German, on any screen size.
The answer is structure: a small set of fundamentals, applied consistently, so that breadth reads as one coherent story instead of a list of jobs.
The People It Is For
A portfolio site really serves two audiences, and it has to work for both at once. These are proto-personas: grounded in how hiring funnels actually work rather than in interview data, and open to correction if real usage data ever arrives.
- Arrives from a CV or LinkedIn link, 30 to 90 seconds on the first pass
- Needs the “what does this person do” answer instantly, then evidence
- Design response: three-field positioning up top, CV and Contact always one click away
- Second-round reviewer or potential collaborator, 5 to 15 minutes
- Reads case studies properly and notices craft details as a proxy for competence
- Design response: structured project stories and this documented system as meta-evidence
Both arrive cold from an external link, and both punish inconsistency. A thin post next to a polished one undermines the recruiter and the peer alike, which is why depth of evidence inside each project post matters as much as the frame around it.
The Journey
The primary journey is the recruiter’s first pass: cold entry, fast orientation, a scan through the relevant discipline, one or two projects, then a low-friction way to reach out. Mapping it against the live site surfaced the weak points honestly, from the hero that takes a few seconds to say who I am, to the missing wayfinding state on deep pages.
Primary persona: the Scanning Recruiter, a 30 to 90 second first pass deciding whether the candidate fits an open role.
Journey mapped against the live site, October 2026. Lanes follow the Nielsen Norman journey map structure: goal, actions, touchpoints, pain points, opportunities.
The Map
The architecture mirrors the two audiences and the two markets. One menu, two hubs: Design groups the five disciplines, Skills groups the technical capabilities. Works and CV sit top level where recruiters expect them, Contact stays a persistent header action, and the whole structure exists twice, once per language.
The Colour Palette
The palette is built around four core colours, each playing a specific role in the visual hierarchy, with white as the accent.
White is the accent. It appears on calls to action, key headings and interactive elements, giving the eye a clear place to land without complicating the palette.
The Type System
Four typefaces, each with one job. A display face for statements, a serif italic for voice, a workhorse for reading, and a monospace for anything technical. The theme provides the last two; the first two are layered on as overrides where a page needs more personality.
Layout and Components
Everything sits on the block theme’s grid, and the component vocabulary is deliberately small:
- Header. Logo left, navigation centre, Contact call to action right, identical on every page and in both languages.
- Cards. Rounded 12px corners, a soft 8px shadow, Coffee Bean text on white or Ash Grey. The same card carries project thumbnails, palette swatches and type specimens like the ones above.
- Carousels. Horizontal scrolling for project galleries, so a works section can hold many pieces without a wall of thumbnails.
- Custom HTML blocks. Where a component does not exist (colour cards, journey maps, this site’s sitemap), it is written as a self-contained block that inherits the palette rather than hardcoding new styles.
The Audit
After building, the site was audited against the five questions the design curriculum uses to review UX portfolios. Scores are honest, and the weakest one is there on purpose: it is the thing still being worked on.
| Review question | Score | Key finding |
|---|---|---|
| Personal brand? | Strong | Three-field positioning, custom domain, distinctive system. Gap: hero states the what, not the who. |
| Navigation? | Strong | Two-hub menu, persistent Contact, full EN/DE mirror. Gap: no wayfinding state on deep pages. |
| Beyond the template? | Strong | Custom palette, font stack, carousels, bilingual structure, self-documenting. |
| Diversity of projects? | Partial | Breadth is real; depth varies. Thin posts sit next to polished ones while the asset pipeline catches up. |
| Responsive? | Pass | Adapts at phone width; one cosmetic defect (carousel arrows overlap card text). |
Accessibility
The palette was tested pair by pair against WCAG contrast requirements. The two surfaces that carry almost all text, Coffee Bean and White, hold a 18.63:1 ratio, nearly the maximum possible. The audit did find one genuine failure:
| Pair | Ratio | Verdict |
|---|---|---|
| White on Coffee Bean | 18.63:1 | AA + AAA |
| Coffee Bean on White | 18.63:1 | AA + AAA |
| Slate Grey on White | 4.21:1 | Large text only |
| Slate Grey on Coffee Bean | 4.42:1 | Large text only |
| Coffee Bean on Ash Grey | 11.30:1 | AA + AAA |
| Coffee Bean on Pale Slate | 9.72:1 | AA + AAA |
The rule adopted: Slate Grey never carries normal-size text. It stays for large meta labels, dividers and decorative borders, while body-size secondary text uses Coffee Bean at reduced weight. A small constraint, but the kind that is cheap to respect when it is written down.
What Comes Next
- A one-line name-and-role eyebrow above the hero headline, so the who lands before the what.
- Wayfinding on deep pages: a breadcrumb or a highlighted menu state so a visitor entering on a project post can place themselves.
- Deeper evidence per project: visuals, featured images and structured sections on the posts that are still thin.
- The mobile carousel arrow overlap, a known cosmetic fix.
That list is the point of the tagline. A living portfolio is never finished; it is just documented honestly at each stage. This post will keep growing the same way, one layer at a time.
