Portfolio as Product

I rebuilt this portfolio site from scratch over a few weeks as a practical experiment with Claude Code and modern AI‑assisted development workflows.

The goal wasn't just to redesign the site, but to apply the same structured approach I use in product work: start with solid foundations, implement a design system, apply it to real content, then iterate and refine.

The result is a lightweight portfolio built around a documented design system, semantic markup, accessibility considerations, and a performance‑consciousness baked in from the start.

This reflects how I approach design leadership: strategic POV paired with hands‑on execution.

Why rebuild

My previous portfolio lived on a hosted platform. It worked, but with limited control over structure, performance, and iteration.

At the same time, tools like Claude Code are changing how quickly a designer can move from concept to working product. I wanted to learn that workflow in a real environment.

So I rebuilt the site with a few clear goals:

• Learn Claude Code through real work
• Experiment with AI‑assisted product development
• Structure the site the same way I would structure a product

The approach

The work followed a simple sequence:

Foundation → structure → semantics → refinement → interaction → cleanup → cohesion

This is an inherently iterative approach focused on increasing quality and fit-to-purpose with each rev.

Foundation

The first step was scaffolding the site with modern tooling:

• Next.js application
• MDX content model
• shadcn/ui component primitives
• Tailwind utility framework

Claude Code helped remove a lot of setup friction here — environment configuration, dependency setup, and basic scaffolding.

That allowed me to focus on the system structure earlier.

Content first

Next I migrated all case studies into MDX.

This made the site behave more like a structured content system rather than a set of hand-built pages.

Each case study now uses:

• Structured metadata
• Reusable layout components
• Consistent presentation patterns

Working with real content early helped surface layout and hierarchy issues quickly.

A small design system

Once the content model was stable, I built a lightweight design system.

The goal was to define reusable primitives that would keep the site consistent over time.

The system includes:

• Design tokens for typography, color, spacing, and motion
• Semantic components for text, layout, and UI elements
• Higher-level components used across case studies
• A documentation page explaining how the system works

This approach keeps the site maintainable and easy to extend.

Accessibility

Accessibility was part of the system from the start rather than something added later.

Examples include:

• Semantic HTML structures
• Focus styles that exceed WCAG minimums
• Keyboard-accessible interactions
• Meaningful alt text for images

Accessibility work is ongoing. Like any product, the site will continue to improve through testing and iteration.

Media and performance

Portfolio sites tend to be image-heavy, so I rebuilt the image pipeline.

Changes included:

• Renaming image files using descriptive names derived from alt text
• Generating optimized WebP display versions
• Preserving larger originals for lightbox viewing

This keeps page weight manageable while maintaining image quality.

Device framing for screenshots

I also created reusable components for presenting screenshots:

• Browser frame
• Phone frame
• Scrollable viewports
• Lightbox interaction for detailed viewing

These give screenshots clearer context without manually editing images (a HUGE production time saving).

Interaction and motion

After the structural pieces were stable, I added a small motion layer:

• Scroll-triggered entrance animations
• Hover states for cards and navigation
• Animation tokens for easing and duration

The goal was subtle feedback and hierarchy rather than decorative animation.

Internationalization

The site was also built to support localization.

As a demonstration, I added a full Arabic translation and right-to-left layout mode.

This includes:

• Mirrored layout direction
• Directional icon changes
• Translation keys for page content

Because I don't speak Arabic, the site includes a disclaimer noting the translation has not been verified.

Iteration and cleanup

Throughout the rebuild I regularly revisited earlier decisions.

Examples include:

• Removing unused design tokens
• Simplifying component APIs
• Reverting custom scroll behavior that proved unnecessary
• Normalizing spacing and typography

That cleanup process helped keep the system small and predictable.

Using Claude Code

Claude Code reduced the time spent on setup and repetitive tasks.

But it didn't remove the need for structure.

The most important decisions were still about:

• Architecture
• Accessibility
• Semantics
• System consistency

AI made iteration faster. The design thinking behind the work grounded the project in best practices.

What's next

The site is functional, but like any product it will continue evolving.

Next steps include:

• Deploying and testing across devices
• Performance and accessibility audits
• Additional case studies
• Further refinements to motion and interaction