Day 8 — Vibe Coding: Build and Host a Real Website Today

This is the day most students either skip or say "I'll do this later."

Do not skip it. Do not do it later. Do it today.

By the end of this post you will have a working website with a real URL — not localhost, not a screenshot — a live website you can put on your resume and show in an interview.

Time required: 90 minutes
Cost: ₹0 (everything is free)
What you need: A laptop and an internet connection

What Is Vibe Coding?

Vibe coding is building software by describing what you want in plain English and letting AI write the code. You do not need to know React, Next.js, HTML, or CSS. You describe the page, the AI writes it, you review it, you deploy it.

The term was coined by Andrej Karpathy (former Tesla AI Director, OpenAI co-founder) in early 2025. His exact words: "There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists."

It is not a gimmick. Senior engineers at top companies use this to prototype ideas in hours that used to take days.

For you as a fresher, it means:

• You can build real projects without years of learning syntax
• You can show working software in interviews instead of just talking about it
• You can iterate fast — build → show → improve → repeat

What We Are Building Today

A personal landing page that includes:

• Your name and a one-line description
• Your skills as a visual list
• 2-3 projects with descriptions and GitHub links
• A contact section

This is different from resumeportfolio.in. That is a portfolio builder. This is you building your own custom website from scratch using AI. The difference matters in interviews — "I built my personal site using Cursor and Next.js" is a much stronger statement than "I used a template."

The Tools You Will Use

Cursor — A code editor like VS Code but with AI built in. You describe what you want in plain English and it writes the code. Free tier works for this project.

v0 by Vercel — AI that generates React components from text descriptions. You describe a UI, it generates the code, you copy it into your project.

Vercel — Free hosting for websites. Your site goes live with one command. No server setup, no buying hosting, no domain needed (though you can add one later).

Claude or ChatGPT — For writing content, fixing errors, and explaining code you do not understand.

Step 1: Install the Tools

Install Node.js

Vercel requires Node.js to deploy.

Download from nodejs.org → LTS version → install.

Verify:

node --version
# Should show v18 or higher

npm --version
# Should show a version number

Install Cursor

Download from cursor.com → install → open it.

When it opens, it asks you to sign in. Create a free account with your email.

Cursor looks exactly like VS Code. If you have used VS Code before, you already know how to use Cursor. If not, do not worry — you will only need the basics.

Create a Vercel Account

Go to vercel.com → Sign up with GitHub.

If you do not have a GitHub account, create one at github.com first. It is free and takes 2 minutes.

Step 2: Create the Project

Open Cursor. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac). Type terminal and select "Open New Terminal."

In the terminal, run:

npx create-next-app@latest my-portfolio --typescript --tailwind --eslint --app --no-src-dir --import-alias "@/*"

When it asks questions, press Enter to accept defaults for all of them.

Wait for it to finish. You should see:

Success! Created my-portfolio

Open the project:

cd my-portfolio
code .

This opens your project in Cursor.

Step 3: Build the Homepage with AI

This is where vibe coding begins.

In Cursor, open the file app/page.tsx. This is your homepage. It currently has the default Next.js template.

Select all the code (Ctrl+A or Cmd+A), then delete it.

Now press Ctrl+K (Windows/Linux) or Cmd+K (Mac). This opens Cursor's AI prompt.

Type this prompt:

Create a personal portfolio homepage for an engineering student.

Include:
- A hero section with name "Lakshmi Bandari", role "Full Stack Developer | 2025 Fresher", and a short bio
- A skills section showing: Python, Java, SQL, React, Machine Learning
- A projects section with 3 projects:
  1. "Resume Portfolio Builder" - Built with Next.js and Supabase. An AI-powered platform for engineering students.
  2. "RAG Document Bot" - Python-based Q&A system using OpenAI embeddings and ChromaDB.
  3. "Job Search Agent" - AI agent that searches, filters, and ranks job listings automatically.
- A contact section with email: lakshmi@email.com and LinkedIn and GitHub links
- Use Tailwind CSS for styling
- Make it modern, dark theme, professional
- No placeholder text - use the actual content I provided

Press Enter. Watch Cursor write the entire page.

Replace "Lakshmi Bandari" with your actual name. Replace the skills, projects, and contact details with your real information.

Step 4: Preview It Locally

In the terminal (still open in Cursor), run:

npm run dev

Open your browser and go to http://localhost:3000

You should see your portfolio page.

If it looks wrong or has errors:

Open the AI chat in Cursor (Ctrl+L or Cmd+L) and describe what is wrong:

The hero section text is too small and the skills section has no visual separation. Fix these.

Or:

There is a TypeScript error on line 23. Fix it.

Cursor will fix the code. Refresh the browser to see the change.

This is vibe coding. You describe the problem, AI fixes it, you review.

Step 5: Improve It with v0

v0 (v0.dev) generates React components that you can paste directly into your project.

Open v0.dev in your browser.

Type a prompt like:

A skills section for a developer portfolio. Shows skills as cards with icons. 
Skills: Python, Java, SQL, React, Machine Learning, Git. 
Dark background, modern design, using Tailwind CSS.

Click Generate. v0 shows you a preview and the code.

Click "Copy code." Go back to Cursor. Find the skills section in app/page.tsx. Replace it with the v0 code.

Do this for any section you want to improve. v0 is particularly good for:

• Navigation bars
• Card layouts
• Contact forms
• Timeline sections

Step 6: Customise with Real Content

This step matters most. Generic AI-generated content looks generic. Make it yours.

Your bio — do not use AI-generated text. Write it yourself in 2 sentences:

Bad (AI generated):

Passionate software developer with strong analytical skills and 
a drive to create innovative solutions.

Good (real):

Final year B.Tech student at XYZ College, Hyderabad. 
I build AI tools for placement prep and have been 
learning in public since 2024.

Your projects — use actual projects you built:

If you completed Day 8 and Day 9 already, add the RAG bot and job search agent. Real projects you built yourself look dramatically better than placeholder projects.

Add a profile photo: Put your photo in the public folder (name it photo.jpg). Reference it in the code as /photo.jpg.

Step 7: Push to GitHub

You need your code on GitHub before Vercel can deploy it.

Create a GitHub Repository

1. Go to github.com
2. Click the + button → New repository
3. Name it my-portfolio
4. Keep it Public
5. Do not add README or .gitignore (the project already has one)
6. Click Create repository

Push Your Code

In Cursor's terminal:

git init
git add .
git commit -m "Initial portfolio site"
git branch -M main
git remote add origin https://github.com/yourusername/my-portfolio.git
git push -u origin main

Replace yourusername with your actual GitHub username.

Refresh GitHub. Your code is now there.

Step 8: Deploy to Vercel

This is where your site goes live.

1. Go to vercel.com
2. Click "Add New Project"
3. Click "Import" next to your my-portfolio repository
4. Leave all settings as default
5. Click "Deploy"

Wait 2-3 minutes. Vercel builds your site.

You will see a URL like:

https://my-portfolio-lakshmi.vercel.app

Open it. Your site is live. Anyone in the world can see it.

Step 9: Check Everything Works

Go through this checklist:

On mobile:

• Open the URL on your phone
• Does the text fit the screen?
• Can you read everything?
• If not, go back to Cursor and ask: "Make the homepage fully responsive for mobile screens"

Content check:

• Is your actual name showing?
• Are your actual skills listed?
• Do your project descriptions sound like real projects?
• Is your contact information correct?

Links check:

• Click your GitHub link. Does it open your profile?
• Click your LinkedIn link. Does it open your profile?

Common Errors and Fixes

npm: command not found Node.js is not installed. Go back to Step 1 and install Node.js.

Module not found error in browser Something was imported incorrectly. Open the AI chat in Cursor and paste the error:

I got this error: [paste the full error message]
Fix it.

Site looks broken on mobile Ask Cursor:

The site is not responsive on mobile. 
Add proper Tailwind responsive classes to make it work on all screen sizes.

Vercel deployment failed Click on the failed deployment in Vercel. Read the error. Usually it is a TypeScript error. Copy the error and ask Cursor to fix it. Then push the fix to GitHub. Vercel automatically redeploys.

Images not showing Make sure your image is in the public folder and you reference it as /imagename.jpg not ./imagename.jpg.

Break It — Learn by Experimenting

Experiment 1 — Change the Theme

Ask Cursor:

Change the colour theme from dark to light. 
Use a clean white background with violet accents.

See how it changes. If you prefer dark, ask it to revert.

What you learned: In modern web development, changing an entire theme is a prompt, not a week of work.

Experiment 2 — Add an Animated Section

Ask Cursor:

Add a simple typing animation to the hero section. 
The role text should cycle through: 
"Full Stack Developer", "AI Engineer", "Problem Solver"

What you learned: Animations that used to require JavaScript libraries now take one prompt.

Experiment 3 — Add a Dark/Light Toggle

Ask Cursor:

Add a dark/light mode toggle button in the top right corner of the navigation.
Use Next.js themes or a simple className toggle.

What you learned: Features that used to take hours of reading documentation now take minutes.

The Challenge

Goal: Add a "Currently Learning" section to your site.

This section shows what you are learning right now with a progress bar for each topic.

Example:

Currently Learning
RAG Systems      ████████░░  80%
AI Agents        ██████░░░░  60%
MCP Protocol     ████░░░░░░  40%

Prompt to start with:

Add a "Currently Learning" section after the skills section.
Show 3 topics with progress bars:
- RAG Systems: 80%
- AI Agents: 60%  
- MCP Protocol: 40%
Use Tailwind CSS. Match the existing dark theme.

Then try changing the percentages and adding your own learning topics.

What To Write In Your Portfolio

On resumeportfolio.in, add this project:

Project title: Personal Portfolio Website

Description: Built a personal portfolio website from scratch using vibe coding — describing requirements in plain English and using Cursor AI to generate the code. Built with Next.js 14 and Tailwind CSS. Deployed on Vercel with automatic CI/CD from GitHub. Responsive on all screen sizes.

Tech stack: Next.js, TypeScript, Tailwind CSS, Vercel

Live URL: your-portfolio.vercel.app

GitHub: github.com/yourusername/my-portfolio

How to Explain This in an Interview

"I built my personal portfolio site using vibe coding — I used Cursor AI to generate the initial Next.js and Tailwind codebase by describing each section in plain English. I customised it with my actual projects, skills, and real content. I deployed it on Vercel with continuous deployment from GitHub, so every push automatically updates the live site. The whole thing took about 90 minutes and it is live at this URL."

If asked follow-ups:

• "Do you understand the code?" → "Yes. I reviewed every component, customised the content, and fixed errors by understanding what the AI generated. Cursor explains the code when I ask."
• "Is vibe coding cheating?" → "Senior engineers at Google and Meta use the same tools. The skill is knowing what to ask for, reviewing the output, and understanding what it does. That is exactly what I did."
• "Can you add a feature right now?" → "Yes. Tell me what feature you want and I will add it in Cursor while you watch."

That last answer, offered confidently in an interview, is extremely impressive.

Key Takeaways

• Vibe coding = describe what you want, AI writes the code, you review and deploy
• Next.js + Tailwind is the standard stack for modern web projects
• Vercel gives you free hosting with automatic deploys from GitHub
• The skill is not writing code — it is knowing what to ask for and reviewing the output
• A working live URL on your resume is worth more than 10 projects described in text

Tomorrow: Day 9 — How RAG works. You will build a system that answers questions about any PDF document. We go from vibe coding (no code knowledge needed) to understanding the AI itself.

Day 8 of 15 — AI Survival Kit for Engineers