From Blank Canvas to Digital Masterpiece: How I Built My Portfolio in the Age of AI

The story of vibe coding, AI collaboration, and why the future of development is more creative than you think

The 2 AM Revelation

Picture this: It's 2 AM, I'm staring at a blank VS Code window, and the cursor is blinking mockingly at me. I need a portfolio that doesn't just showcase my work—it needs to tell my story, capture my personality, and make visitors think "I need to connect with this person."

But here's the thing that changed everything: Instead of diving into another generic template or spending weeks perfecting CSS animations, I decided to embrace what I call "vibe coding"—a completely new approach to building digital experiences using AI as my creative partner.

Three weeks later, you're reading this post on that very portfolio. And honestly? It might be the most authentic representation of who I am as a developer that I've ever created.

What the Hell is Vibe Coding?

Let me explain this concept that's been brewing in my mind. Traditional coding feels like translating your creative vision through layers of technical constraints. You have an idea, then you battle with frameworks, fight with CSS, debug for hours, and somewhere along the way, the original spark gets lost.

Vibe coding is different. It's about staying in the creative flow state while AI handles the technical heavy lifting. Instead of asking "How do I code this?", I started asking "What feeling do I want this to evoke?"

The result? A portfolio that actually feels like me—not like a sanitized, corporate version of me.

The AI Dream Team That Made It Happen

v0.dev: The MVP Creator

I started with v0.dev, and honestly, it felt like magic. This is where the foundation came to life. Instead of writing component boilerplate from scratch, I could describe the vibe I wanted:

"Create a hero section that feels like floating in digital space, with my name appearing like it's being typed by a ghost, but make it elegant, not cheesy."

v0.dev didn't just give me code—it gave me a solid MVP that already had personality. The component structure, the basic animations, the responsive design—all emerged from conversations about feelings and aesthetics rather than technical specifications. But here's the thing: v0.dev got me 80% there, but that last 20%? That's where the real magic happened.

Cursor & Windsurf: The Nuance Masters

Here's where things got really interesting. v0.dev created the foundation, but Cursor and Windsurf became my detail-obsessed partners for adding those subtle touches that make all the difference.

Want custom animations that weren't supported in v0.dev? Cursor helped me craft them with precision. Need to integrate my own images seamlessly? Windsurf understood exactly how to make them feel native to the design. Those micro-interactions, the perfect timing on hover states, the way elements flow into each other with just the right easing—this is where Cursor and Windsurf shined.

They're not just coding assistants; they're nuance detectives. They helped me add personality to every pixel, fine-tune every transition, and polish every interaction until it felt authentically mine.

ChatGPT + Kling AI: The Airbnb-Inspired Visual Revolution

Remember when Airbnb released that stunning animation that had everyone on Twitter/X talking? The one where people were debating whether it was actually a video file? That sparked something in me.

I wanted that same kind of mesmerizing, almost hypnotic quality for my "Who Am I" section. But instead of trying to recreate what they did, I wanted to make something uniquely mine.

Here's how the magic happened: I started with ChatGPT to create a 3D asymmetric image—something abstract yet personal, geometric yet organic. The prompt was specific:

"Create a 3D asymmetric composition that represents the intersection of creativity and technology—floating geometric shapes with organic curves, rendered in a dreamy, ethereal style."

Once I had this stunning static image, I brought it to Kling AI with carefully crafted prompts to animate it. The goal wasn't flashy motion, but subtle, mesmerizing movement that draws you in and makes you pause.

The result? That floating, breathing animation you see in my "Who Am I" section. It's not just decoration—it's a visual metaphor for how I think, create, and solve problems. And the best part? People actually stop and watch it, just like I hoped they would with Airbnb's animation.

The Technical Poetry Behind the Scenes

Let me show you what this vibe coding approach actually produced. Here's a glimpse into the heart of the portfolio:

.text-scramble__content {
  font-size: 15vw;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #dfdcff;
  /* This isn't just text—it's a feeling */
}

.gradient-text {
  background: linear-gradient(to right, #ff6b6b, #a16bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Words that literally glow with personality */
}

Notice how even the CSS comments reflect the vibe coding approach? This isn't just functional code—it's code with intention, personality, and story.

The custom font loading, the carefully crafted color palette (those CSS custom properties aren't random—each one was chosen to evoke specific emotions), the smooth scroll behavior—every technical decision serves the larger narrative.

Vercel: Beyond Static, Into Dynamic

Here's the thing about modern portfolios—they're not just static websites anymore. With videos, animations, and interactive elements, I needed a deployment solution that could handle the complexity while keeping everything lightning-fast.

While GitHub Pages could have worked for a basic site, I wanted to explore something new. Enter Vercel.

Vercel turned what used to be an anxiety-inducing deployment process into something almost magical. One push to GitHub, and suddenly my creation was live, globally distributed, and optimized automatically. But Vercel isn't just about deployment—it's about the entire experience.

Vercel Blob became my media hub. All those custom videos I created with Kling AI, the high-resolution images from ChatGPT, the documentation assets—everything found its perfect home in Vercel Blob. Upload once, access everywhere, with automatic optimization and global CDN distribution.

Vercel Analytics gave me something I'd never had before: real insight into how people actually experience my work. Not just page views, but the full story:

• Where visitors are coming from (geographically and referrer-wise)
• What devices they're using to view my work
• How fast the site loads on different connections
• Which sections capture attention and which ones people skip

It's like having a window into the minds of my visitors, and it's been invaluable for understanding what resonates. Plus, seeing those real-time visitor numbers come in after putting so much effort into the portfolio? That's a special kind of validation.

The speed insights alone were worth it—knowing that my carefully crafted animations load smoothly on mobile devices, that the videos stream without buffering, that the overall experience is consistently fast... that's the kind of peace of mind you can't put a price on.

Claude: The Brain Dump Translator

Let me be honest—I'm not a natural writer. My brain works in code, concepts, and visual ideas. But I had this entire journey brewing in my head, all these insights and experiences that I knew would resonate with other developers.

So I did what felt natural in the age of AI: I brain-dumped everything to Claude.

Not in a "write this for me" way, but in a "help me translate my thoughts into something people will actually want to read" way. I poured out all my experiences, my excitement about these tools, my insights about the future of development—basically everything you're reading here, but in my chaotic, stream-of-consciousness style.

Claude didn't write this post. I did. But Claude helped me find the words, structure the narrative, and polish the rough edges. It's still my brain, my experiences, my voice—just amplified and refined through AI collaboration.

This is exactly what I mean by vibe coding extending beyond just development. When you have AI partners who understand context and can help you express your ideas clearly, you can focus on the substance while they help with the presentation.

Napkin.ai: Making the Complex Beautiful

Soon, I'll be adding diagrams to visualize this entire process—the flow from idea to implementation, the interconnections between different AI tools, the creative pipeline that makes vibe coding possible. Napkin.ai will help transform these abstract concepts into visual stories that are as engaging as they are informative.

The Three-Day Sprint That Changed Everything

Here's what blows my mind: This entire portfolio—from concept to deployed reality—took me just three days.

Three days to go from blank canvas to a portfolio that authentically represents who I am as a developer and creative thinker. Three days to experiment with cutting-edge tools, create custom animations, generate unique visuals, and deploy a professional-grade website.

But here's the thing—those three days weren't spent fighting with code or debugging CSS. They were spent in pure creative flow, making decisions about user experience, crafting the narrative, and fine-tuning the details that make visitors pause and think "this person gets it."

The Tools I Tried (And Why Some Didn't Make the Cut)

The journey wasn't just about the tools that made it into the final portfolio. During those three intense days, I experimented with everything I could get my hands on:

Runway and other video generation tools caught my attention, but Kling AI felt more intuitive for the specific aesthetic I was after. Sometimes it's not about the most powerful tool—it's about the one that speaks your creative language.

Jules (Google's new async agent) was fascinating to play with. Since I didn't need unit tests for a portfolio website, I decided to experiment with Jules anyway, just to see what it could do. The result? Comprehensive test coverage that I didn't actually need, but gave me insight into how AI agents think about code quality and edge cases.

The point is: the AI revolution isn't just about using one perfect tool. It's about having an entire ecosystem of intelligent collaborators at your fingertips, each with their own strengths, ready to help you bring ideas to life.

The Uncomfortable Truth About AI and Creativity

Here's what no one talks about: Using AI tools like this doesn't make you less of a developer—it makes you more of a creator. Instead of spending 80% of my time on boilerplate and debugging, I spent 80% of my time on design decisions, user experience, and creative problem-solving.

The portfolio you see isn't just technically competent (though it is). It's not just visually appealing (though I think it is). It's authentically, unmistakably me—but amplified, polished, and presented in a way that would have taken me months to achieve using traditional methods.

The Future Is Already Here

This portfolio project taught me something profound: We're not just in the early days of AI-assisted development. We're in the early days of AI-assisted creativity, AI-assisted storytelling, AI-assisted human expression.

The tools I used—v0.dev, Cursor, Windsurf, ChatGPT, Kling AI, Vercel, Claude, and soon Napkin.ai—they're not just making development easier. They're making it more human.

When you don't have to worry about the technical constraints, when the implementation flows naturally from your creative vision, when your ideas can become reality at the speed of thought... that's when the real magic happens.

Your Turn to Vibe Code

If you're still building websites the old way—fighting with frameworks, debugging CSS at 3 AM, letting technical limitations constrain your creativity—you're working harder than you need to.

The tools are here. The future is now. The only question is: What story do you want to tell?

And more importantly: What's stopping you from telling it?

This portfolio and this post are living proof that the age of AI-assisted creativity isn't coming—it's here. And honestly? It's more exciting than I ever imagined.

Want to connect and create something amazing together? Feel free to reach out—I'd love to hear about your projects and explore how we can collaborate to build something extraordinary.

Tech Stack That Made This Possible:

• MVP Creation: v0.dev for rapid prototyping and foundation
• Fine-tuning & Nuances: Cursor & Windsurf for custom animations and personal touches
• Visual Creation: ChatGPT for 3D image generation
• Animation: Kling AI for bringing static visuals to life
• Deployment: Vercel with Blob storage for media assets
• Analytics: Vercel Analytics for performance and user insights
• Content Creation: Claude for translating ideas into engaging narrative
• Diagram Creation: Napkin.ai (coming soon for visual storytelling)
• Experimentation: Jules, Runway, and other tools that didn't make the final cut but enriched the journey

Each tool played a unique role in bringing this vision to life in just three days—not as replacements for human creativity, but as amplifiers of it.