Built with Codex
Using Next.js, React, TypeScript, Tailwind CSS.
2024.09 – 2025.09
Codex + Figma / Vercel / Web Design
Personal Portfolio
Web design & Vibecoding
Designing and Building My Personal Portfolio with Figma and Codex
This project started as a personal challenge: to design and build my own portfolio website from scratch. I used Figma for the visual system and Codex as an AI development partner to translate the design into a responsive website ready for deployment on Vercel.
Results
Made in 1.5 months
Of designing and vibecoding. Deployed on Vercel.
10+pages
Main Page, About, Portfolio, Case Pages, 404.
Little Intro
My main goal was to create a portfolio that anyone could easily open and explore — not just a static presentation, but a personal space where I could show who I am as a designer.
After looking through other designers’ profiles on LinkedIn, I realized that I didn’t want to limit myself to Behance or a Figma portfolio. I wanted to create my own website, showing not only my design work, but also my ability to build and shape a real digital experience using AI tools.
Why Codex?
I already had experience creating websites with no-code tools like Tilda, but for this project I wanted to go one step further. Instead of building another no-code portfolio, I decided to explore vibe coding and use AI as a development partner.
To be honest, I can’t say there was one perfect reason why I chose Codex over tools like Lovable. It was a mix of curiosity, access to ChatGPT, and the fact that I had someone close to me who works as a developer and could help me better understand the process.
What I liked most was the combination of Codex and Figma. It felt like a natural bridge between design and development: I could keep working from my visual system while also learning how design decisions turn into real code.
In a funny way, working with Codex reminded me of collaborating with developers on previous projects — structured, calm, and focused on solving one task at a time. And sometimes, with a bit of arguing over the desired result. :)
My workflow
At the beginning of the project, I realized how important it is to prepare a clear Markdown file before starting the development process. When I tried working without one, the result was still usable — but once I described the structure, pages, components, and logic in advance, Codex understood the project much better.
Our collaborative work followed this process:
Figma Layouts
Codex coding
Testing website
Nice Result!
Figma Layouts
Codex coding
Testing website
Nice Result!
My workflow helped me stay in control of both the visual direction and the final implementation. I could design each page, test how it worked in code, adjust details, and gradually build the website step by step.
I decided to work on the responsive version after completing the main desktop pages. Together with Codex, I created a clear adaptation plan, and then applied it across the website. This helped me make the layout work well on different screen sizes without losing the original visual style.
For animations, I explored references from Godly and Awwwards and used them as inspiration. However, since this was a personal portfolio, I didn’t want the website to feel overloaded. My goal was to keep the experience clean, readable, and easy to navigate — so I kept the animations simple, soft, and supportive rather than purely decorative.
Modernizations
At first, I made the website only in English. But after completing all the pages, I decided to translate it into my native language — Russian. With the help of AI, I made the translations pretty quickly, although most of them still needed my review and editing. As you may know, I’m also learning Korean, but I’m not sure yet whether I could handle a Korean version as well.
I also wanted to create a dark mode for people who don’t like light interfaces, but I guess I’ll leave it for the future. :)
Final Thoughts
Working with Codex turned out to be surprisingly engaging. At some point, I completely lost track of time, diving deeper and deeper into building new animations, pages, and small interaction details.
Throughout this project, I learned to trust my ideas more and limit myself less. Before, I sometimes hesitated to suggest something unusual because I wasn’t sure whether developers would be able to bring it to life.
But after working with AI, I realized that it’s often better to be more creative at the beginning. It’s always easier to simplify an idea later than to avoid taking risks from the start.
If you’d like to work together or have any questions, I’d be happy to chat!
Open to projects
Let's collaborate!
Contact me and we'll turn your idea into a great product.
