Portfolio

Featured

A Custom-Designed Product Engineer Portfolio

Next.jsFramer MotionTailwind CSSVariable Fonts

The Mission

Showcase my product engineering thinking and software engineering work beyond what a CV can capture.

Overview

This portfolio was designed as a response to generic developer sites, treating personal branding as a systems engineering challenge. It uses a central vertical backbone to anchor alternating content blocks and create visual rhythm. Typography, spacing and interaction design reinforce the core message: I do not just write code, I design and deliver products from discovery to execution.

// FIG_01: Early desktop wireframe exploring how the portfolio narrative should flow
Result // 01

Established a distinctive visual language blending technical clarity with human narrative

Result // 02

Demonstrated a structured, systems-driven approach to product storytelling

Result // 03

Built a fully custom portfolio rather than relying on templates or prebuilt themes

Result // 04

Used AI tools for rapid prototyping while retaining full architectural control

01 // Discovery & Design

// Discovery

Identified that a CV alone could not communicate depth, progression and systems thinking, leading to a portfolio built as a product

// Key Decisions

Used a central vertical spine with alternating sections to create a structured, predictable reading flow

// Trade-offs

Prioritised clarity and structure first, refining visual polish through successive iterations

🛠️ One thing I changed after launch

Repositioned my professional identity toward Product Engineering to better reflect the breadth of ownership across discovery, design and delivery

02 // Technical Execution

// Tech Stack

Next.js, React, Framer Motion, Tailwind CSS, JSON-driven content architecture, deployed in Vercel

// Implementation

Hosted in Vercel and deployed to my custom domain, using ReSend for the contact form

// System Design

Implemented a modular component architecture with JSON-driven content rendering to decouple structure from presentation

💡 One thing I would do different now

Invest more time upfront in higher-fidelity mockups before implementation

03 // Ownership

// Team

Sole engineer and designer, managing the full lifecycle from architecture to deployment

// Timeline

Rapid initial build followed by continuous iterative refinement

❤️ The thing I enjoyed the most

Synthesising my career into a cohesive engineering narrative and recognising the depth built across different domains

04 // Evidence

// FIG_01: Early desktop wireframe exploring how the portfolio narrative should flow
// FIG_02: Mobile wireframe ensuring the project narrative worked on smaller screens
// FIG_03: First working version of the portfolio, focused on structure and content before visual polish
// FIG_04: First working version of the portfolio on mobile, with the same structure but adapted to a single column layout
// FIG_05: The final portfolio experience, combining narrative, engineering projects, and product thinking.
// FIG_06: A portfolio designed to show both systems thinking and full-stack execution
Previous
Next