Building a Portfolio with AI‑Assisted Development

My Learnings

Specification quality matters more than ever. The AI executes exactly what you specify or don't specify. Vague instructions produce vague results. Clear, detailed prompts with explicit constraints produce professional output. Refinement needs taste and understanding the core technologies and their limits.

Iteration speed changes the design process. When implementation takes minutes instead of hours, you can explore more options through code instead of just design (read: Figma). The cost of "trying something" drops dramatically, which encourages experimentation. This actually opened my mind about redoing some personal projects from years ago, that I was technically limited with before.

The designer's role shifts toward curation. Instead of building, you're evaluating - choosing between options, catching inconsistencies, and maintaining vision. This requires strong taste and attention to detail.

Overview

This document tracks the iterative construction of this portfolio using AI-assisted development with human-in-the-loop direction. Each phase represents a complete cycle of planning, execution, and verification.

In 2026, the definition of "designer" is shifting. This project serves as a live testbed for human-AI collaboration. Instead of coding every pixel manually, I acted as the Systems Architect while an AI agent handled the execution based on my direction.

Tools Used

Phase 1: Research

Analysis & Strategy — Complete

Goal: Define the portfolio's core identity, structure, and technical constraints.

The first phase focused on understanding what makes a portfolio effective. I analyzed three competitor portfolios representing different approaches: Linear-style (clean, product-focused), Bento-style (grid-based, visual), and Minimalist (text-heavy, content-first).

From this research, I defined an "Impact-First" structure for case studies: Context → Process → Impact. This structure ensures readers immediately understand the value delivered before diving into methodology.

For the tech stack, I selected Vanilla HTML + Tailwind CSS (via CDN for MVP) to ensure zero-build-step simplicity. This decision prioritized deployment ease over optimization.

Phase 2: Architecture

Blueprint — Complete

Goal: Create the technical plan and file structure.

With research complete, the second phase focused on translating insights into a concrete plan. I designed the sitemap: Home, Case Study (Modena), and About. The component hierarchy included a Smart Header, Bento Grid (Hero), Blog-style Content sections, and Footer.

Design System Decisions

• Typography: Inter for UI elements, JetBrains Mono for data and code
• Color Palette: Initially Dark Mode (Slate-900), later shifted to Light Mode (White/Black) based on user feedback
• Spacing: Tailwind default scale for consistency

Phase 3: MVP

Construction — Complete

Goal: Build the functional pages and core layout.

This was the first implementation phase. The AI agent created the project structure, initialized tailwind.config, and built the core pages based on my specifications.

Pages Built

• Homepage: Hero section with "Available for work" badge and Work Grid
• Modena Case Study: Bento Grid for high-level KPIs (€14M+ Volume) and readable narrative section
• About Page: Two-column layout with sticky photo left, bio right

Phase 4: Prototype

Refinement & Feedback — Complete

Goal: Polish the design and incorporate user feedback.

After seeing the dark mode implementation, I decided to pivot to a light theme. This was a significant decision that required refactoring all color tokens and border treatments.

Changes Made

• Theme Switch: Fully refactored all pages from Dark Mode to Light Mode (White background, Gray borders)
• Navigation: Implemented "Smart Header" that hides on scroll down, reveals on scroll up
• Typography: Updated Homepage Heading to "I create systems within design" (Black, Underlined)
• Interactions: Made case study cards fully clickable hover zones
• New Content: Created this very case study to document the process

Phase 5: Test & Polish

Final Touches — Complete

Goal: Final content expansion and cleanup.

• Modena Expansion: Added "Learnings" and "Conclusion" sections to the case study
• Refined Copy: Updated problem statements to be more specific ("Fund Modena's loan portfolio")
• Clean Up: Removed raw code artifacts from documentation files

Phase 6: Case Study Refinement

Portfolio Refinement — Complete

Goal: Comprehensive portfolio updates based on user feedback.

This phase focused on polishing the entire portfolio based on detailed user feedback. It included social link updates, a complete rewrite of Case Study 1, typography consistency fixes, and UI improvements. See the Changelog at the bottom for details.

Phase 7: Homepage Redesign

Visual Overhaul — Complete

Goal: Replace the generic hero + card list layout with a bento grid that visually represents each project.

The original homepage had a large hero section with a headline, description, and two CTA buttons followed by a vertical list of case study cards. While functional, it felt like a template. The redesign removes the hero entirely and leads directly with the work — a 4-column bento grid on desktop, 2-column on mobile.

Each card was given a distinct visual treatment. Modena Capital got a browser chrome frame with a live screenshot cutting off at the bottom edge. Credit Product Flow got a phone mockup frame. Portfolio Build with AI uses the tool logos image. Converge is a placeholder marked TBA. Tags were colour-coded to match across the homepage and blog.

The Figma MCP integration was used for the first time here — sharing a Figma frame directly to Claude Code to communicate layout intent, rather than describing it in words. This significantly reduced the back-and-forth and is now the preferred way to communicate design direction.

Phase 8: Content Audit & Case Study Rewrite

Accuracy & Content — Complete

Goal: Audit the full site for issues and rewrite the credit product case study with real, verified content.

A full site audit surfaced issues across content accuracy, navigation consistency, SEO, and accessibility. The biggest finding was that the credit product case study had the product timeline backwards — it described the Investor Portal as coming first, when in reality the credit product was Modena's core offering from 2021 and the Investor Portal was built later to fund the portfolio it generated.

Changes Made

• Credit case study rewrite: Corrected timeline (2021–2025), narrative, product evolution, flow steps, and results to reflect the real history
• Investor Portal bento grid: Updated KPI numbers from Figma source (€3.5M, 11%, €100K, 1,500 users)
• Credit bento grid: Replaced unverified metrics with confirmed ones — 6 credit products, 0% BNPL interest rate
• Fixed stray closing tag in this page's HTML structure

What I Would Improve Next

If revisiting this project, I would establish stricter design tokens upfront — colors, spacing, and typography should be defined before any implementation begins. Some inconsistencies emerged from ad-hoc decisions during iteration.

I would also create more structured prompt templates for common tasks. Having a library of proven specifications would reduce cognitive load and ensure consistency across sessions.