Challenge
The site consists of three pages. At this scale, a full Figma prototype would have added documentation without improving clarity. Instead, the structure was defined upfront through sketches, with layout and hierarchy decisions made before moving into code.
Designing and building at the same time introduced a different challenge. Without a handoff stage, decisions are immediately visible in the browser. Some only reveal issues once implemented, requiring continuous adjustment without losing the initial structure.
The second challenge was transitioning from a static setup to a component-based framework. Rebuilding the project in Next.js required rethinking the structure in terms of reusable components, routing, and state, rather than static pages.
Process
Tokens
Before writing code, I defined a base set of design tokens: colour variables for light and dark themes, a spacing scale, border radius values, and padding increments. Dark mode was built into the token structure from the start at a semantic level, so switching themes does not require component-level overrides.
As the design evolved in the browser, typography, spacing, and component behaviour were refined across breakpoints. The token system made these adjustments consistent and traceable.
AI-assisted development
I used Claude in VS Code to scaffold structure and logic, treating prompts as precise design instructions rather than open-ended requests. When the output did not match the intended result, I refined it directly in code. AI accelerated the build, but decisions around layout, hierarchy, and behaviour remained manual.
During the rebuild in Next.js, this approach extended to component structure, routing, and styling with CSS Modules, using AI to support implementation while maintaining control over architecture.
Responsive behaviour
Responsive design was handled directly in the browser, with multiple iterations to refine typography and layout across breakpoints. Some components required specific adjustments for mobile and tablet to maintain clarity and spacing.
Accessibility
Accessibility was considered from the start, using semantic HTML, clear heading structure, and keyboard navigation. These principles were carried into the React rebuild, with all interface colours meeting WCAG contrast requirements.
Outcome
The portfolio is live, responsive, and version-controlled on GitHub. The project gave me practical experience translating design systems into code and working within a modern frontend setup.
