Portfolio Process

Overview

I partnered with Claude AI to design and develop a fully customized portfolio that maintains both creative freedom and ease of updates while ensuring it's intuitive and easily scannable.

The Problem

As a UX designer, I needed a portfolio that would effectively showcase my work while being easy to maintain and update. Traditional portfolio solutions created a frustrating dilemma between convenience and creative control, leaving me unable to achieve the user experience I envisioned.

Key Issues

Initial Ideation

I began this project with a clear design principle in mind: creating a portfolio that would be easily scannable while still providing meaningful depth for those who wanted to dive deeper into my work and process.

Framing the Space

My primary objective was scannability. I wanted visitors to quickly understand three key things about my work: what types of projects I've tackled, what skills I brought to each project, and for those willing to invest more time, a clear view of my design process.

Outlining my goals

Pattern Recognition

I analyzed what makes content easily scannable in my own browsing behavior. This led me to incorporate specific design patterns: skill chips for quick skill identification and structured project cards that provide just enough context to spark interest while maintaining visual consistency.

Visual Design Foundation

I started designing the overall aesthetic in Figma, focusing on creating a clean, professional look that would support the scannability goal. However, as I progressed through the design phase, I became overwhelmed by the prospect of hand-coding and maintaining a custom site.

❮

❯

Designs I started in Figma. View the file here.

The AI Solution Discovery

While researching alternatives to traditional portfolio platforms, I discovered that Claude AI excelled at generating clean, semantic code from design mockups. Given my existing HTML/CSS/JavaScript knowledge, this seemed like the perfect middle ground between platform limitations and coding complexity.

Prompting Strategy

Working effectively with Claude required more than just asking for code—it demanded strategic communication to ensure we shared the same vision and goals. I developed a systematic approach to prompting that consistently produced results aligned with my design intentions.

Framing the Context

Every interaction began with clear context-setting. I established that I was building a UX portfolio specifically designed to be easily scannable for hiring managers, recruiters, and industry professionals. This framing helped Claude understand not just what I was building, but who would be using it and how.

❮

❯

Examples of how I used Claude

Consistency Requirements

I made styling consistency a explicit requirement in my prompts, referencing existing design elements and asking Claude to maintain visual harmony across all pages. This proactive approach prevented style drift and reduced the need for extensive revisions.

Iterative Refinement

Always established the project type (UX portfolio) and target audience (hiring managers, recruiters) to align Claude's approach with user needs.

Solution: AI-Powered Custom Portfolio Development

The solution delivered a fully customized portfolio that balanced creative control with practical efficiency. By partnering with Claude AI, I achieved the best of both worlds: complete design freedom without the traditional time and maintenance overhead of custom development.

Key Features

• Rapid Customization: Transformed Figma mockups into functional code within hours rather than weeks
• Easy Maintenance: Simple prompting process for updates and new project additions
• Cost Efficiency: Eliminated monthly platform fees in favor of occasional AI tool access
• UX Focus: Allowed me to concentrate on user experience decisions while delegating technical implementation
• Future-Minded: Created a system that can evolve with my needs and new AI capabilities

❮

❯

The home page and a screenshot of my code

Reflection

This project fundamentally shifted my perspective on the relationship between design and development. By partnering with AI, I discovered a new way to bridge the gap between creative vision and technical execution, opening up possibilities I hadn't considered before.