Portfolio v3.
A design-and-development exercise in organising multidisciplinary work, shaping visual hierarchy and translating interaction decisions into reusable Next.js and React components.
Delivered
Designed and built a responsive Next.js portfolio with shared components, project case studies and contact workflows.
- Scope
- Responsive website
- Role
- Frontend Developer · Visual Design
- Timeline
- 2025
01 / CONTEXT
Problem and response
Challenge
The previous portfolio was functional but did not fully express the overlap between design thinking, frontend craft, and product storytelling.
Response
Turn the portfolio into a product experience that helps recruiters understand how the work was shaped, not just what tools were used.
02 / CONTRIBUTION
My contribution
Contribution
- +Designed the information architecture and visual hierarchy around project storytelling.
- +Built reusable page layouts, project cards and case-study components with Next.js and React.
- +Implemented Motion transitions, ambient backgrounds and responsive interface states.
- +Applied keyboard-focus, reduced-motion and form-feedback considerations.
03 / DECISIONS
How the system took shape
- 01
Reduced repeated card patterns and introduced stronger section contrast.
- 02
Adopted a single authored dark theme as the default visual identity.
- 03
Used large typography and restrained motion to make the work easier to scan.
- 04
Kept the redesign within the existing Next.js app structure.
- 05
Centralized visual tokens and reusable studio utilities in global CSS.
- 06
Moved homepage project rendering to Next Image for stronger media performance.
Product context and reasoning
- Audited the information architecture around recruiter scanning behavior.
- Moved from a vertical card stack toward editorial project storytelling.
- Repositioned the site around product building from idea to production.
04 / OUTCOME
Outcome and reflection
The redesign reframes the site as a product/design engineering portfolio instead of a conventional React portfolio.
Keyboard and reduced-motion improvements are part of ongoing accessibility work; this is not a claim of complete WCAG conformance.
The main lesson was restraint: the strongest portfolio moments come from hierarchy and story before decoration.