Back to Life Journey

My Portfolio, Built with AI, Not Code (and Vercel's Magic)

July 16, 2025

portfolio-story

For years, the idea of building my own portfolio website felt like scaling Mount Everest without a map. My "coding skills"? Let's just say they were non-existent. Next.js, React, web development – it all sounded like a foreign language. But then, a thought sparked: what if I could build it with an AI as my co-pilot?

The Impossible Dream: A Website Without Code

My goal was simple: a sleek, functional portfolio with a dynamic blog. The problem was, I couldn't write a single line of code. This is where the AI stepped in, becoming my patient tutor, relentless debugger, and unwavering partner.

The process wasn't about me typing code; it was a fascinating dialogue. I'd describe what I wanted, and the AI would translate it into Next.js components and API calls. It explained core concepts like:

  • Components: The building blocks of a React app.

  • Routing: How pages navigate seamlessly.

  • Server-Side Rendering: Making pages fast and SEO-friendly.

Each explanation came with generated code, making abstract ideas tangible. My endless "why does this do that?" questions were met with clear, concise answers. It was like having a senior developer on call, 24/7, never judging my "noob" questions.

Taming the Content Beast: Contentful & TypeScript

One of the biggest challenges was integrating Contentful, a headless CMS, for my blog. Managing content outside the codebase was appealing, but setting it up felt like deciphering ancient scrolls. "Content models," "API Identifiers," "rich text fields" – all new terms. The AI guided me through the Contentful dashboard, helping me define the structure for my blog posts (title, slug, date, cover image, content). It then provided the exact TypeScript interfaces and fetching functions for my lib/contentful.ts file.

But the journey wasn't without its bumps. Oh, the bumps! TypeScript errors, like Property 'file' does not exist on type 'never'. or Conversion of type '{ [x: string]: undefined; }' to type 'Document' may be a mistake..., seemed to multiply. My heart would sink. The website, miraculously, would still work, but the red squiggles and angry terminal messages were a constant reminder of underlying issues.

This is where the AI's true grit shone. It helped me:

  • Break down errors: Explaining what "never" means in TypeScript (a type that can never occur, indicating a mismatch).

  • Refine types: Suggesting precise definitions for Contentful's Asset type for images and ensuring the Document type for rich text was correctly applied.

Each fix, each attempt to align my types with Contentful's API, felt like a miniature victory. It wasn't just about fixing the error; it was about understanding why it occurred. This iterative debugging, guided by the AI, was the most intense and valuable learning experience.

The Grand Finale: Vercel's Deployment Magic

Finally, with the code humming and the TypeScript errors tamed, came the moment of truth: deployment. For this, Vercel proved to be an absolute lifesaver. The promise of "zero-configuration" deployment for Next.js applications sounded too good to be true, but Vercel delivered.

Connecting my GitHub repository was straightforward, and Vercel automatically detected my Next.js project, handled all the build processes, and deployed my site to a global CDN. The relief of seeing my portfolio live on the internet, accessible to anyone, was incredible. Vercel even made setting up a custom domain incredibly easy, guiding me through the DNS configuration with clear instructions. If you're looking for a hosting solution that just works for Next.js, I cannot recommend them enough.

The Takeaway: AI as Your Co-Creator

Looking back, this portfolio isn't just a collection of my work; it's a living testament to what's truly possible when human curiosity meets the boundless capabilities of artificial intelligence. I started this journey with literally zero Next.js knowledge, intimidated by the very idea of web development. Today, I have a live, functional, and visually appealing website, built through a collaborative effort where my role was more akin to an architect and project manager, and the AI was the skilled builder.

It's proof that with the right tools, a willingness to learn (even if it's just understanding the AI's explanations), and a persistent AI partner, anyone can bring their digital visions to life, no matter their starting skill level. The journey was challenging, filled with moments of head-scratching frustration, but the learning, the empowerment, and the final outcome were incredibly rewarding. This portfolio is more than just a website; it's a story of collaboration, learning, and overcoming the perceived impossible.