Building a developer portfolio in 2025 feels different than it did just a year ago. The tools have evolved, AI has become a legitimate coding partner, and the line between "designing" and "developing" has blurred in the most exciting ways. This is the story of how I built my retro-futuristic portfolio—and how an AI assistant named Claude became my most reliable pair programmer.
The Vision: Cyberpunk Meets Nostalgia
My long-standing fascination with the aesthetic of old-school video games and the neon-soaked visuals of cyberpunk fiction naturally guided my vision. When rebuilding my portfolio, I aimed to create a digital experience that felt like stepping into a futuristic arcade—a place brimming with pixelated fonts, glowing terminals, and nostalgic scanlines. The challenge was to seamlessly blend all that retro charm into a modern React application.
The challenge was making it more than just a gimmick. A portfolio needs to be functional first. It needs to showcase real work, be accessible, and actually help me connect with potential collaborators and employers. The 8-bit aesthetic had to enhance the experience, not get in the way of it.
Starting with Design, Not Code
Before writing a single line of code, I spent time in Figma mapping out the experience. I'm a firm believer that jumping straight into code leads to endless refactoring later. Having a visual reference meant I could make design decisions without the pressure of implementation looming over me.
The design process helped me establish the color palette—electric cyan, neon green, sunset orange, and deep space purples against dark backgrounds. I mapped out the sections: a dramatic hero with my name in pixelated glory, an about section that tells my story, a skills showcase with animated progress bars, projects displayed as terminal windows, and a contact form styled like a command-line interface.
Enter Claude: My AI Pair Programmer
Here's where things got interesting. I'd been experimenting with AI coding assistants, but my experience with Claude Opus 4.5—specifically through an agentic coding platform called Antigravity—was different from anything I'd tried before.
Instead of treating the AI as a fancy autocomplete, I approached it as a true collaborator. I described what I wanted to build, shared my design files, and watched as Claude helped me scaffold the entire React project structure. It suggested component architecture, helped me set up GSAP animations, and even caught accessibility issues I would have missed.
The magic wasn't just in code generation—it was in the back-and-forth. When something didn't look right, I could describe the problem in plain English. When I wanted to add a feature like a typing animation for my tagline, Claude didn't just write the code; it explained the approach and suggested alternatives I hadn't considered.
Bringing It to Life with Animation
A static portfolio feels lifeless, especially one going for a retro-gaming vibe. I leaned heavily on GSAP and ScrollTrigger to create those moments of delight—the hero section with its dramatic reveal, skill bars that fill as you scroll past, project cards that float in with staggered timing.
One of my favorite touches is the holographic projector in the hobbies section. Hover over a hobby category and watch the CRT monitor flicker to life with details about that interest. Small interactions like this transform a portfolio from a static resume into an experience people actually want to explore.
The Technical Stack
For those curious about what powers this site: it's built with React and Vite for fast development and builds. Styling is vanilla CSS with CSS variables for the theme system. Animations are handled by GSAP with ScrollTrigger for scroll-based effects. The backend uses Firebase for the contact form and any dynamic content. Everything is deployed on Vercel with automatic previews for every push.
I intentionally kept the stack simple. Fancy frameworks are great, but for a personal portfolio, I wanted technology that would be easy to maintain and update years from now. React and CSS aren't going anywhere.
Lessons from the Process
Building this portfolio taught me a few things worth sharing. First, AI-assisted development is genuinely powerful when you treat it as collaboration rather than delegation. I still made every design decision and wrote plenty of code myself, but having an intelligent assistant to bounce ideas off accelerated the whole process.
Second, constraints breed creativity. The 8-bit theme could have been limiting, but it actually made decisions easier. Every component had to pass the "does this feel retro-futuristic?" test. That focus prevented feature creep and kept the design cohesive.
Third, accessibility still matters, even with a gimmicky aesthetic. The portfolio works with screen readers, respects reduced-motion preferences, and maintains proper color contrast despite all the neon. Good design is inclusive design.
What's Next
A portfolio is never truly finished—it evolves as you do. I'm already planning to add a blog section for deeper technical writing, integrate some live project demos, and continue refining the animations based on feedback.
If you're thinking about building your own portfolio, my advice is simple: have fun with it. This is the one website where you get to be completely yourself. Make it weird, make it personal, make it something you're proud to share. And if you've got an AI assistant ready to help, don't be afraid to lean on it. The future of development is collaborative—even when your collaborator is a large language model.
Please check out my personal portfolio https://portfolio.jeffdev.studio/ for more info about me and blog posts
Top comments (0)