Using AI to design, code, and launch my portfolio
Role
UX, UI, Front‑End, Content
Tools
Figma, VS Code, Copilot, Gemini
Project Type
Personal portfolio rebuild
Overview
When my previous portfolio expired, I chose to rebuild rather than repost a four‑year‑old site. I wanted a fresh version online quickly that better reflected my work as a senior product designer and manager. Rebuilding from scratch was daunting since the original took months of hand‑coding, but I was confident AI could streamline the process.
My process
Step 1
Designing in Figma
I explored multiple design iterations to find the right balance between professionalism and personality. In the end, I kept the layout simple and focused on showcasing my work.
Step 2
Coding in VS Code
I have a foundational background in coding from two college courses, which has been invaluable throughout my UX career. It helps me communicate effectively with developers and understand technical constraints.
For this project, I wasn’t starting from zero. I referenced my previous portfolio to guide the build.
Step 3
Integrating AI
I used Gemini to accelerate the coding process. It helped me generate layouts, troubleshoot issues, and fill in the gaps where my coding knowledge was limited.
Step 4
Launching the site
Deployment has always been the most challenging part for me as a UX designer. With a few YouTube tutorials, I was able to upload the site and get everything functioning correctly.
Step 5
Iteration
I continue to refine the site as my work evolves and as I learn new ways to improve the experience.
Prompts
Below are some examples of the prompts that helped me move faster and solve coding challenges
"Troubleshoot why the "work" and "about" text is a light gray color. Attached is the HTML..."
"Code a hover effect that cursor makes cute sparkles in a section of a website. The sparkles should be floaty, and should have 2d effect"
"Design a skills section featuring a header with body copy, followed by two padded, icon‑supported list columns that collapse into one on mobile, each separated by subtle dividers, with an additional UI‑tagged list showcasing UX‑related tools beneath."
Highlights from AI
AI expanded what I could accomplish on my own and removed several barriers that slowed down past portfolio builds.
Secure password protection
I used Gemini to build a clean client‑side password system to protect NDA‑sensitive work, something I couldn’t effectively create on my own before.
Faster design iterations
I was able to test new layouts much faster because AI handled the coding heavy lifting.
Streamlined troubleshooting
Whenever I hit a coding issue, Gemini helped me diagnose and fix it quickly.
Ensuring accessibility
Refining the design system typography and color palette to ensure AA accessibility compliance.
Key takeaways
Outcome
Outcome 1
I launched my new portfolio in under three months, a major improvement from my first hand‑coded version.
Outcome 2
AI helped me add features I couldn’t previously build like password protecting my case studies.
Challenges
Challenge 1
Different AI tools had different strengths, so I switched between Copilot for content and Gemini for coding.
Challenge 2
Some outputs were overly long or verbose, but since code optimization wasn’t my goal, it didn’t slow me down.
Purpose
The purpose of this case study is to highlight how I could use AI beyond my day‑to‑day role at Mastercard. It helped me move faster, experiment more freely, and ship a portfolio that reflects both my design skills and my adaptability as a senior product designer.
