Twenty years of career evolution — from graphic design to UX to design engineering — distilled into a single-file portfolio that is itself the proof of competence. No frameworks. No templates. Just intent, craft, and a conversation with AI.
Repositioning myself in the European market as a Design Engineer after a 20-year career spanning graphic design, branding, and UX. The portfolio couldn't just show work — it needed to be the work. A tangible demonstration that I can bridge the gap between design intent and technical execution.
A hand-crafted, zero-framework portfolio built through an AI-augmented workflow — Claude as design and code co-pilot. The visual identity draws from Death Stranding and The Matrix: metaphors for connection-building and seeing beyond the surface. Every design decision maps to a CSS custom property. Every component is intentional.
The portfolio itself is the strongest case study. It proves design thinking (strategy, visual direction, systems thinking) and engineering capability (semantic HTML, CSS architecture, performance) in a single artefact. The process — AI-augmented design and code — demonstrates adaptability and a forward-looking approach to the craft.
Before touching a single pixel, I needed to answer a fundamental question: what story does this portfolio tell? After two decades in design, the answer wasn't obvious — it required honest reflection on where I've been and where I'm heading.
Foundational years in visual design, developing an eye for composition, typography, and brand systems across print, identity, and digital media in Brazil.
Moving from static to interactive. Designing for behaviour, not just aesthetics. Information architecture, user flows, and the shift from making things beautiful to making things work beautifully.
Deep UX work across products, design systems, and cross-functional teams. Building the bridge between user needs and business goals. Information architecture at Logitech. Moving to Ireland, entering the European market.
The natural evolution. Not abandoning design, but extending it into code. Understanding that the best design decisions happen when you can prototype, build, and ship — not just hand off.
The European market values T-shaped professionals who can operate across disciplines. My positioning had to reflect 20 years of accumulated design sensibility while clearly signalling engineering capability. The portfolio couldn't be a Figma export — it had to be code.
The visual identity needed to communicate duality — design craft and technical depth. I looked beyond the design industry for references, finding the most resonant metaphors in gaming and cinema.
Death Stranding became the conceptual anchor. In the game, Sam Bridges literally builds connections across a fragmented landscape. That's what a Design Engineer does — bridges the gap between design and engineering, between intent and implementation. The game's HUD elements, scan-line effects, and utilitarian aesthetic informed the portfolio's visual language.
The Matrix added the second layer. The cascading code, the idea of seeing the underlying structure beneath the surface. As a design engineer, I operate at both levels — the visual layer users experience and the code architecture beneath it. The code cascade background, the monospace typography, and the terminal-inspired interactions all trace back to this reference.
These references translated into concrete design decisions:
Rather than designing in Figma and translating to code, the design system was built directly in CSS custom properties. Every token, every component, every spacing decision lives in code from the start — because that's where it matters.
The full design system is documented below, rendering live tokens and components as proof of the system's coherence.
The complete visual language of the portfolio, built as CSS custom properties. Every decision has a reason. Every token maps to intent.
Primitive tokens — the atomic values every component inherits. Colour, typography, spacing, motion, letter-spacing. Sourced directly from global.css :root.
Overlays, borders and tints use rgba() derivatives of the base tokens (rgba(8,8,8,X), rgba(240,237,232,X), rgba(0,232,122,X), rgba(255,51,51,X)). Not tokenised individually — treat them as utility overlays, not discrete tokens.
prefers-reduced-motion.Single-purpose UI primitives. The smallest functional elements — combine into molecules and patterns.
Compositions of atoms into self-contained UI units with their own purpose.
--bg (off-white) to match the live site. Dark mode is not planned for v1 — this surface reflects real usage.counter-increment.Reusable compositions tied to specific content-types — the "shapes" that appear across multiple case studies. Rendered at real usage fidelity (16:9 frame, full meta stack).
Restricted Area badge + Authorized People only hint + artefact meta (Tool · Asset · NDA?). Red signal is universal across cases regardless of page accent — decouples "classified" from brand identity.Motion & behavioural layers. Hook onto existing atoms/molecules via data-* attrs, live canvas, or CSS transitions. All respect prefers-reduced-motion.
.tv-frame. Config baked in tv-glitch.js (no data-attrs). Replaces previous Chiral Network canvas — better legibility, lower CPU, no canvas dependency.data-decode on any element. Powered by decode.js (MODE 1 & 3).@keyframes classifiedPulse. Pairs with var(--error).This portfolio wasn't built in the traditional sense. There was no Figma handoff, no design-to-dev pipeline. Instead, the entire process was a conversation — an ongoing dialogue with Claude where design decisions and code happened simultaneously.
This AI-augmented approach flips the traditional flow: rather than writing specs and translating them sequentially, you describe the intent, review the output, iterate in real time, and shape the result through continuous feedback. The AI handles the boilerplate; I focused on the decisions that matter — visual direction, information hierarchy, interaction patterns, and brand coherence.
Key decisions that emerged through this process:
The most valuable aspect of this workflow wasn't speed — it was the ability to stay in the design headspace while producing production code. No context switching between tools. No fidelity gap between mockup and implementation. The design IS the code from the first moment.
The portfolio went through multiple rounds of refinement. Each iteration was driven by a clear question: does this decision serve the positioning strategy?
Things that changed along the way:
SIGNAL_LOST, CORRUPTED_SIGNAL, DATA_NULL), with red accent borders, input glitch animations, and proper pattern validation for email format and minimum character lengthsLater iterations addressed scalability and polish:
zoom-in/zoom-out cursors overriding the custom cursor system, Escape key and click-outside-to-close, accessible role="dialog" markup<style> tags into shared external files — reducing each page from ~800 lines of CSS to 4 lines (just the hero gradient colour). Changes now propagate to all case studies simultaneouslyThings that were intentionally kept:
requestAnimationFrame during its brief run then stops entirely; the ongoing glitch fires one setTimeout every 2–5 seconds with near-zero CPU cost
Landing Page — Hero with HUD elements & code cascade
Project Grid — Featured-first layout with scan-line cards
About — Bio, work history timeline & skills cloud
Contact — Form with classified/HUD-style footer
Every CSS custom property is a design decision. Every semantic HTML element is information architecture. The portfolio demonstrates that design engineering isn't about choosing between design and code — it's about doing both with intent. The modular architecture mirrors the same systematic thinking that drives design system work in product teams.
AI-augmented work is powerful, but only when you bring strong design opinions to the conversation. The AI accelerated execution, but every meaningful decision was human judgement. The visual metaphors, the restraint, the Death Stranding reference as conceptual anchor: these came from 20 years of design sensibility, not a prompt.
The project evolved from five self-contained HTML files with ~800 lines of inline CSS each into a modular system: shared stylesheets, paired JS components, and per-page overrides reduced to four lines. A single change now propagates to every case study — the same principle behind any design system.
A full responsive audit uncovered gaps in tablet coverage. The fix introduced proper breakpoints with intermediate values — all achieved with CSS custom properties and media queries. No Tailwind, no Bootstrap, no PostCSS.
Accessibility was woven into the build, not bolted on. Semantic HTML throughout, ARIA roles on interactive components, keyboard navigation, visible focus states, and a cursor system that gracefully degrades for assistive tech.
This project validated the workflow. The next step is applying the same approach — design system thinking and AI-augmented iteration — to product work. The portfolio itself is proof the process works.