Personal Portfolio

Overview

In 2026, I decided to build my personal portfolio website from scratch.

The goal was not simply to create a place to showcase my work. I wanted to build a public representation of how I currently think about products, where design, engineering, storytelling, motion, and AI-assisted development all exist as part of the same workflow.

The project started early in the year but was unexpectedly interrupted by external circumstances in Iran, including months of internet disruptions that significantly delayed progress. Once conditions stabilized, development resumed and the project was completed over roughly one month of focused work.

The Challenge

Building a portfolio as a product designer comes with an interesting challenge:

Designer portfolios often become products themselves.

Complex layouts, experimental interactions, and visually aggressive interfaces can easily compete with the work they are supposed to present. My goal was the opposite.

I wanted the interface to disappear and allow the projects to become the center of attention.

At the same time, the portfolio needed to solve several practical problems:

• Present both my professional experience and freelance work as a coherent story.
• Avoid visible gaps after transitioning to freelance work in 2022.
• Showcase selected public projects while keeping confidential client work private.
• Create a structure that could evolve over time without requiring major redesigns.

Research & Product Thinking

The visual direction became clear surprisingly early in the process. I spent time exploring portfolio websites across the design industry and collecting references from designers and products whose work I admired. While many portfolios leaned heavily toward complexity and experimentation, I intentionally moved toward simplicity and clarity.

The entire interface was designed in Figma before implementation began. Once the visual language was established, the focus shifted from interface design to product design:

• What information should be visible?
• How should years of experience be presented without overwhelming visitors?
• Which projects best represent my current capabilities?

The final information architecture revolved around two core sections. Work Experience and Selected Projects.

Design Principles

Several principles guided every decision throughout the project:

• The portfolio should remain visually quiet.
• Projects should receive more attention than the interface itself.
• Motion should support hierarchy rather than decoration.
• Simplicity should feel intentional rather than minimal for its own sake.

The result is an interface that prioritizes readability, clarity, and content over visual complexity.

Development Approach

For implementation, I chose Next.js. The decision was practical rather than ideological. Since I was already familiar with the ecosystem, I knew I could move quickly and rely on existing knowledge whenever technical obstacles appeared.

The first implementation pass was generated using v0. Structurally, the generated output was surprisingly good. Visually, however, it was far from the original designs.

Typography, spacing, proportions, and interactions lacked the level of precision I expected from the final product. Instead of fighting the limitations of generation, I manually refined large parts of the implementation until the website closely matched the original Figma designs.

Once the foundation was stable, the project was moved into a private GitHub repository for long-term iteration and maintenance.

Exploring AI-Native Development

One of the most interesting aspects of this project was treating it as an experiment in AI-assisted product development.

Rather than relying exclusively on cloud models, I intentionally moved a significant part of the workflow to local AI tooling.

Over time, the stack evolved into:

• VS Code
• Ollama
• Qwen local models
• Cline
• Mimo Code
• Custom skills and workflows

The objective was not simply generating code. I explored different collaboration patterns between human and AI across implementation, debugging, refactoring, architectural discussions, design reviews, and experimentation. The portfolio gradually became a laboratory for exploring what AI-native product development workflows might look like in the near future.

Components, Motion & Interaction

Although the portfolio intentionally avoids excessive visual complexity, interaction design still plays an important role in the experience.

The project includes:

• Full responsiveness across devices and screen sizes.
• Theme switching between light and dark modes.
• Theme-aware visuals and adaptive project mockups.
• Carefully designed micro-interactions throughout the experience.
• Motion used to support orientation and hierarchy rather than decoration.

For implementation, I relied primarily on:

• shadcn/ui for interface primitives and component foundations.
• motion.dev for transitions and animations.

These tools allowed me to move quickly while maintaining a high level of polish and consistency.

Content Production

Content creation turned out to be one of the most demanding parts of the project. The portfolio currently showcases eight selected projects, each requiring screenshots, context, storytelling, and visual presentation.

Unlike development, I intentionally avoided using AI during this stage.

Every project description, image, and narrative was created manually to preserve accuracy and reflect the real decisions behind the work. To improve presentation quality:

• Screenshots were exported at higher-than-standard resolutions.
• Images were compressed and optimized while preserving visual detail.
• Mockup backgrounds adapt dynamically to the active theme to maintain consistency across light and dark modes.

Performance & Optimization

Beyond visual polish, performance was treated as a core product feature.

The project went through multiple rounds of cleanup, optimization, and refinement to ensure a fast and responsive experience.

Special attention was given to:

• Image optimization
• Asset size reduction
• Smooth animations
• Responsive behavior
• Accessibility and usability

The final result achieved strong Lighthouse scores while maintaining visual quality and interaction richness.

Branding & Launch

For the personal brand, I chose the name a1ign. The name subtly references both my own name, Ali, and the word align — a concept closely connected to product design, systems thinking, and structured experiences. The domain choice felt like a natural continuation of that identity. After the final rounds of optimization and polish, the website was deployed on Vercel and published publicly.

Outcome

The final result is more than a portfolio website. It became a curated archive of selected work, a public representation of my product thinking, a personal branding exercise, an experiment in AI-native development workflows and a testing ground for local AI coding environments and agent collaboration.