In my previous article, I talked about why having a portfolio is important for professionals working in technology. Whether you're a UX designer, UX researcher, software developer, product manager, or data scientist, a portfolio showcases much more than a resume ever can. It demonstrates how you think, solve problems, and apply your skills to real-world projects.
A resume usually summarizes your experience in one or two pages. It lists your job titles, responsibilities, skills, and education. A portfolio, however, tells the story behind your work. It explains your process, your decision-making, your challenges, and the impact of your projects.
In this article, I want to share the end-to-end process I followed to build my own portfolio website. Instead of using a traditional website builder, I explored an AI-assisted workflow by combining Figma AI, Claude Code, and GitHub Pages.
This wasn't simply about using AI to generate a website. It was about using AI to accelerate the process while still applying UX thinking, design principles, and human judgment at every stage.
My workflow consisted of five major phases:
- Planning the portfolio
- Selecting projects and creating content
- Designing the portfolio with Figma AI
- Developing the website with Claude Code
- Publishing the website with GitHub Pages
Step 1: Planning the Portfolio
Before opening Figma or writing any code, I spent time thinking about the purpose of the portfolio.
Over the years, I had experimented with different approaches to creating portfolio websites, including website builders, content management systems, and custom HTML and CSS. This time, I wanted to explore how AI could help me move from an idea to a working website more efficiently.
However, before thinking about layouts or colors, I asked myself a few important questions: Who is my portfolio for? What do I want visitors to learn about me? Which projects best represent my experience? What should recruiters and hiring managers see first?
I wanted visitors to quickly understand: Who I am, What I specialize in, The kinds of projects I have worked on, How I approach UX research and design, How they can contact me
Rather than creating a portfolio filled with unnecessary information, I wanted it to be simple, focused, and easy to navigate.
Step 2: Selecting and Prioritizing My Projects
Choosing the right projects was probably the most important part of the entire process.
Many designers include every project they have ever worked on, but I wanted my portfolio to communicate a clear story about my experience.
**Instead of asking, "What are my best projects?" I asked:
"What do I want each project to communicate about my skills?"**
I selected four projects and divided them into primary and supporting case studies.
Primary Projects
Kubernetes SIG Multi-Cluster UX Research
My first primary project highlights my work as a UX researcher with Kubernetes SIG Multi-Cluster.
Over the past two years, I have been conducting developer experience research by working closely with engineers, interviewing practitioners, analyzing workflows, and identifying usability challenges in multi-cluster Kubernetes environments.
This project demonstrates my ability to:
- Conduct qualitative UX research
- Analyze complex technical workflows
- Work with open-source communities
- Translate research findings into actionable insights
Super Purposes
My second primary project focuses on my work at Super Purposes.
During my three years there, I worked across multiple areas of UX, including: User research, UX design, UI design, Accessibility
Design systems, B2B product experiences
This project reflects my ability to take products from research through design and collaborate closely with developers and stakeholders.
Supporting Projects
To complement my primary work, I included two additional projects: OrcaSound, Code for America's Rural Net web application
These projects demonstrate additional experience in user research, usability testing, information architecture, interaction design, and interface design.
Once I selected the projects, I arranged them in an order that would guide visitors naturally through my experience—from my most recent research work to earlier UX design projects.
Step 3: Writing the Content Before Designing
One lesson I learned is that great portfolios begin with content—not visuals. Before opening Figma, I created the content for each case study in separate documents.
I researched how successful UX portfolios present case studies and created my own reusable template.
Each project answered questions such as:
- What problem was I solving?
- What was my role?
- Who were the users?
- What research methods did I use?
- What design process did I follow?
- What challenges did I face?
- What decisions did I make?
- What impact did the project have?
- What did I learn?
Preparing the content first made the design process much easier because I already knew exactly what information needed to appear on every page.
Instead of designing empty layouts and filling them later, I designed around real content.
Step 4: Planning the Website Structure
With the content ready, I planned the information architecture.
I decided that my portfolio would contain seven main pages: Home, Projects, Four individual case study pages, About Me.
The Projects page provides a high-level overview of each project, while each case study goes into greater depth about the research, design process, and outcomes.
The About Me page includes information about: My professional background, Areas of specialization, Career journey, Community contributions, Articles, Resume, Contact information
Keeping the structure simple allows visitors to find information quickly without feeling overwhelmed.
Step 5: Creating Mockups with Figma AI
Once the planning was complete, I moved into the design phase.
Instead of designing every screen from scratch, I used Figma AI to generate the initial layouts.
I described the type of portfolio I wanted, including: A clean and modern design, Responsive layouts, Professional typography, Strong visual hierarchy, Simple navigation, Clear project presentation
Rather than asking Figma AI to generate the entire website in one prompt, I worked page by page.
For example, I asked it to create: The Home page, A project overview page, Individual case study layouts, An About Me page, Reusable project cards, Navigation components
Working incrementally gave me much more control over the results. The AI-generated designs became the starting point—not the final product.
Step 6: Refining the User Experience
Although Figma AI generated the initial mockups, I manually refined every page. Some of the improvements included: Better navigation, Improved content hierarchy, More consistent spacing, Stronger, typography, Better color consistency, Reusable components, Accessibility improvements, Responsive layouts
AI can generate attractive interfaces, but it cannot fully understand the context of your projects or your design decisions. The final experience still depends on the designer.
Step 7: Developing the Website with Claude Code
Once the designs were finalized, I used Claude Code to help convert the designs into code. Instead of rebuilding the entire website manually, I used Claude to generate the initial HTML, CSS, and JavaScript. Claude helped accelerate the implementation by generating: HTML page structures, CSS styling, JavaScript, interactions, Responsive layouts, Navigation components
However, development was still an iterative process.
I reviewed the generated code, tested the layouts, refined the prompts, corrected issues, and continued improving the implementation until it matched the designs.
Throughout development, I focused on: Responsive behavior, Accessibility, Readability, Maintainable code, Component consistency, Performance, Although AI generated much of the initial code, every design decision was still reviewed and refined manually.
Step 8: Testing and Iteration
Once the initial implementation was complete, I tested the website across multiple browsers and screen sizes.
Testing helped identify areas that still needed improvement, including: Mobile responsiveness, Typography, Navigation, Layout spacing, Component alignment, Accessibility
Several rounds of testing and refinement helped create a more polished experience. This iterative approach is very similar to product design itself—design, test, learn, and improve.
Step 9: Publishing with GitHub Pages
After completing development, I uploaded the project to a GitHub repository. Using GitHub Pages, I published the website as a live portfolio. GitHub Pages made deployment straightforward while also providing version control.
Whenever I make updates to my portfolio, I simply push the latest changes to GitHub, and the live website is updated.
Before sharing the portfolio, I verified that: Every page loaded correctly, Navigation links worked, Images displayed properly, External links opened correctly, The website worked on desktop and mobile devices, My resume could be downloaded, Case studies were easy to read
What I Learned
Building my portfolio taught me that AI can significantly speed up both design and development, but it cannot replace UX thinking. The most important decisions happened long before I generated mockups or code. I still had to decide: Which projects to include, What story each project should tell, How visitors would navigate the website, How to prioritize information, How to improve accessibility, How to create a consistent user experience
Figma AI helped me explore ideas quickly. Claude Code helped me accelerate development. GitHub Pages made publishing simple.
Together, these tools allowed me to move from an idea to a live website much faster than traditional workflows.
Final Thoughts:
My complete workflow looked like this:
Think → Select Projects → Create Content → Plan the Architecture → Design with Figma AI → Refine the UX → Develop with Claude Code → Test → Publish with GitHub Pages
Looking back, I realized that AI was never replacing my role as a UX designer. Instead, it acted as a collaborative partner that accelerated repetitive tasks while allowing me to focus on what matters most—understanding users, organizing content, making design decisions, and creating meaningful experiences.
A portfolio is more than a collection of projects. It is a product designed for a specific audience. By starting with content and strategy before moving into AI-generated designs and code, I was able to create a portfolio that reflects both my professional experience and my approach to user-centered design.
If you're planning to build or redesign your own portfolio, my advice is simple: start with your story, not your tools. Once you know what you want to communicate, AI can become a powerful partner in bringing that vision to life.
Interested in seeing the final version of my UX portfolio? Feel free to send me a LinkedIn connection request, and I'll be happy to share it with you. I look forward to connecting! Here is my linkedin profile: https://www.linkedin.com/in/pavanipriyasajja/
Top comments (0)