Experimenting with AI-Powered Vibe Coding: How Claude 3.7 + Cursor helped me build a dynamic portfolio

Vibe Coding

Why I started this project

As a UI/UX designer, I often craft digital experiences for others. But this time, I wanted to build something purely for myself:

  • A dynamic, AI-assisted personal portfolio.
  • A project to test my limits, explore new workflows, and collect meaningful lessons.
  • A chance to dive into what I call “vibe coding” — not just coding for delivery, but coding for exploration, creativity, and learning.

    • My goal wasn’t just to make a portfolio website.

    It was to try out a new way of building:

  • Using Claude 3.7 (via Cursor) as a coding partner.
  • Combining design + backend + automation in a seamless workflow.
  • Challenging myself to think like both a designer and a developer.

    • Tools & Stack I used

  • Notion API → to manage and deliver dynamic content like case studies and project listings.
  • Next.js → as the web framework for frontend and backend logic.
  • Claude 3.7 (via Cursor) → to generate, debug, and refine code efficiently.
  • Figma → for visual design and component planning.
  • GitHub → for clean version control, without committing sensitive files or heavy assets.
  • Vercel → as the cloud deployment platform.

    • Project highlights & workflow

    1. Starting with AI-powered vibe coding

    Instead of sitting down with a fixed roadmap, I approached this project like an experiment.

    I used Cursor + Claude 3.7 to:

  • Prompt AI for backend tasks (like fetching data from Notion).
  • Build frontend components faster by describing my visual goals in natural language.
  • Organize my prompts into reusable templates, which saved time and helped keep consistency.

    • This wasn’t about outsourcing thinking — it was about collaborating with AI and learning from the results.

    Notion image

    2. Building backend foundations first

    I prioritized making sure:

    If the system can’t pull live content from Notion, the project fails.

    So I focused on:

  • Setting up the Notion integration and getting the necessary API keys.
  • Writing fetch functions (with Claude’s help) to handle nested Notion JSON responses.
  • Testing locally (npm run dev, using console.log) to check data accuracy before touching any UI work.

    • Once the backend worked, I knew I had something meaningful.

    3. Crafting the UI with a designer’s eye

    I used Figma to plan the look and feel, but when moving to code, I:

  • Relied partly on AI for generating reusable React components.
  • Carefully tuned layouts, media queries, and interactions myself, using DevTools (F12).
  • Avoided dumping unnecessary assets (icons, large images) into the GitHub repo — keeping the codebase light and clean.

    • The result was a UI that felt authentically mine — not just AI-generated boilerplate.

    4. Managing the project like a pro on GitHub

    Even though this was a solo project, I followed best practices:

  • Wrote a .gitignore to exclude .env, node_modules, .next, and heavy files.
  • Stored secrets safely in environment variables, never hardcoded or pushed to GitHub.
  • Wrote clear, meaningful commit messages so I could track my own progress and decisions.

    • 5. Deploying incrementally on Vercel

    Rather than waiting until the project was “done,” I deployed early and often.

    Vercel made it easy to:

  • Connect the GitHub repo and auto-deploy on pushes.
  • Add environment variables securely through the dashboard.
  • Monitor live logs to debug production-specific issues.

    • This incremental deployment approach helped me avoid big last-minute surprises.

    What I learned

  • AI is a collaborator, not a crutch.

    • Claude 3.7 + Cursor boosted my speed, but I had to understand and own every line of code.

  • Building backend-first gives confidence.

    • Once the data worked, I could focus creatively on the UI without worrying about system failures.

  • Vibe coding brings joy and growth.

    • Because I approached this as an experiment, I allowed myself room to make mistakes, try things, and reflect — and I learned more than I would have from a rigid, delivery-focused project.

  • Good habits matter, even in personal projects.

    • Clean GitHub management, secure key handling, and solid deployment practices made the project feel polished and professional.

    Final thoughts

    This project was more than just a portfolio build — it was an exploration of how far you can go when you mix creativity, AI, and curiosity.