How to Build a Portfolio Website That Gets You Hired: Step-by-Step for Indian Freshers 2026
MU
Muhammed Rafeeq
Published: 8 Jun 2026
8 min read
A step-by-step tutorial to build and deploy a professional portfolio website using Next.js and Vercel — completely free, in a single weekend.
Your portfolio website is the most powerful career tool you can build as an Indian fresher or early-career professional in 2026. It is your 24/7 job application — accessible to any recruiter globally, showcasing your work without the constraints of a one-page resume. In this tutorial, we will build a complete portfolio site from scratch using Next.js, deploy it for free on Vercel, and connect a custom domain. By the end, you will have a live, professional portfolio that will actively help you land interviews. No prior web development experience required — just basic comfort with a computer and 4–6 hours of focused time.
Key Takeaways
You will have a live portfolio website by the end of this tutorial
Total cost: ₹0 (free hosting on Vercel, optional ₹700/year for a custom domain)
You will learn: Next.js basics, GitHub deployment, Vercel hosting, and basic responsive design
The portfolio template is fully customisable for any profession — not just developers
A good portfolio website increases interview callback rates by 3–5x, according to our survey of Indian recruiters
3.4xhigher interview callback rate for candidates with a portfolio website vs those withoutTekBit 2026 India Recruiter Survey: 78% of hiring managers at product companies and startups visit candidate portfolio links when provided, and 65% report it significantly influences shortlisting decisions.
What You Need Before Starting
Prerequisites: a computer (Windows, Mac, or Linux), Node.js 20+ installed (download from nodejs.org), a GitHub account (free at github.com), and a Vercel account (free at vercel.com). The tutorial uses VS Code as the editor — download it free from code.visualstudio.com.
Step 1: Create Your Next.js Project
Next.js is the industry standard for modern React websites and is exactly what companies like Vercel, Netflix, and Tata Digital use for their web properties. It gives us free performance optimisation, SEO benefits, and seamless deployment. We will use the official Next.js create command which scaffolds a complete project with all the configuration done for us. Open your terminal (Command Prompt or PowerShell on Windows, Terminal on Mac/Linux) and run the following command. When prompted, choose: TypeScript Yes, ESLint Yes, Tailwind CSS Yes, App Router Yes, and keep other defaults.
bash
terminal
# Create a new Next.js project
npx create-next-app@latest my-portfolio
# Navigate into the projectcd my-portfolio
# Start the development server
npm run dev
After running npm run dev, open your browser and go to http://localhost:3000. You should see the default Next.js welcome page. This confirms your development environment is working correctly. Now we will replace the default content with your portfolio.
Step 2: Build the Home Page Structure
A high-converting portfolio for Indian job seekers has five essential sections: Hero (your name, title, and a brief positioning statement), About (who you are and what you bring to teams), Skills (your technical and soft skills in a visual format), Projects (your 3 best work samples with descriptions and links), and Contact (email link and social profiles). We will build each section as a separate component for clean, maintainable code. Open the project in VS Code and replace the contents of src/app/page.tsx with the following code.
The Hero section is the first thing a recruiter sees. It must answer three questions immediately: who are you, what do you do, and what do you want. Keep it concise, confident, and specific. Avoid vague phrases like 'passionate developer' — instead use specific, verifiable claims like 'I build React applications that load in under 2 seconds' or 'I have shipped 3 production web apps serving 1,000+ users'. Create a new file at src/components/Hero.tsx with the following code. Replace the placeholder content with your actual details.
typescript
src/components/Hero.tsx
exportdefaultfunctionHero() {
return (
<sectionclassName="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 px-6"><divclassName="text-center max-w-3xl"><pclassName="text-indigo-600 font-semibold text-lg mb-3">Hi, I'm</p><h1className="text-5xl md:text-7xl font-bold text-gray-900 mb-4">
Your Name
</h1><pclassName="text-2xl md:text-3xl text-gray-600 mb-6">
Full-Stack Developer • React & Node.js
</p><pclassName="text-lg text-gray-500 mb-8 max-w-xl mx-auto">
I build fast, accessible web applications. Currently open to
full-time roles and freelance projects.
</p><divclassName="flex gap-4 justify-center"><ahref="#projects"className="bg-indigo-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-indigo-700 transition"
>
View My Work
</a><ahref="#contact"className="border-2 border-indigo-600 text-indigo-600 px-8 py-3 rounded-full font-semibold hover:bg-indigo-50 transition"
>
Get in Touch
</a></div></div></section>
)
}
Step 4: Add Your Projects Section
The Projects section is the heart of your portfolio. Each project card should include: project name, a one-sentence description of what it does and who it is for, the tech stack used, a live demo link, and a GitHub repository link. Never include tutorial clones or practice projects here — only work you are genuinely proud of and can discuss in depth during an interview. Create the Projects component with a card layout that showcases each project effectively.
typescript
src/components/Projects.tsx
const projects = [
{
title: 'Finance Tracker',
description: 'A personal finance app with expense categorisation, monthly budgets, and CSV export. Built for Indian users with INR formatting and UPI payment tracking.',
tech: ['Next.js', 'TypeScript', 'Supabase', 'Tailwind'],
liveUrl: 'https://fintrack-demo.vercel.app',
githubUrl: 'https://github.com/yourusername/fintrack',
},
{
title: 'Job Application Tracker',
description: 'Track job applications, interview stages, and follow-up reminders. Used by 200+ job seekers after being shared on LinkedIn.',
tech: ['React', 'Node.js', 'MongoDB', 'Express'],
liveUrl: 'https://jobtrack-demo.vercel.app',
githubUrl: 'https://github.com/yourusername/jobtrack',
},
]
exportdefaultfunctionProjects() {
return (
<sectionid="projects"className="py-20 px-6 max-w-5xl mx-auto"><h2className="text-4xl font-bold text-center mb-12">Projects</h2><divclassName="grid md:grid-cols-2 gap-8">
{projects.map((p) => (
<divkey={p.title}className="border rounded-2xl p-6 hover:shadow-lg transition"><h3className="text-xl font-bold mb-2">{p.title}</h3><pclassName="text-gray-600 mb-4">{p.description}</p><divclassName="flex flex-wrap gap-2 mb-4">
{p.tech.map(t => (
<spankey={t}className="bg-indigo-50 text-indigo-700 text-sm px-3 py-1 rounded-full">{t}</span>
))}
</div><divclassName="flex gap-4"><ahref={p.liveUrl}className="text-indigo-600 font-semibold text-sm">Live Demo →</a><ahref={p.githubUrl}className="text-gray-500 font-semibold text-sm">GitHub →</a></div></div>
))}
</div></section>
)
}
Write Descriptions That Recruiters Actually Care About
Instead of 'Built a React app', write 'Built a React application that helps 200+ Indian students track their job applications, with features like interview stage management and follow-up reminders'. Specificity — numbers, audience, outcomes — is what makes project descriptions memorable to hiring managers.
Step 5: Deploy to Vercel for Free
Vercel is the company that created Next.js, and deploying Next.js apps to Vercel is entirely free for personal projects. The deployment process is three steps: push your code to GitHub, connect the GitHub repository to Vercel, and trigger a deploy. Every subsequent push to your main branch automatically triggers a new deployment — your portfolio stays live and up-to-date with zero maintenance.
bash
# Initialize git and push to GitHub
git init
git add .
git commit -m "Initial portfolio"# Create repo on github.com first, then:
git remote add origin https://github.com/yourusername/my-portfolio.git
git push -u origin main
# Then go to vercel.com → New Project → Import your GitHub repo → Deploy
1
Push code to GitHub (commands above)
2
Go to vercel.com and sign in with GitHub
3
Click 'New Project' and import your repository
4
Leave all settings as default and click 'Deploy'
5
Your portfolio is live at yourname.vercel.app in 60 seconds
Step 6: Add a Custom Domain (Optional but Recommended)
yourname.vercel.app is functional, but yourname.dev or firstname-lastname.in looks significantly more professional on a resume and business card. Custom domains cost ₹700–₹1,200 per year. Purchase your domain from GoDaddy India, Namecheap, or Google Domains. Then in your Vercel dashboard, go to Settings > Domains, add your custom domain, and follow the DNS configuration instructions provided. The process takes 5 minutes and DNS propagation is usually complete within 30–60 minutes in India.
✓Portfolio is live on yourname.vercel.app
✓Hero section has your real name, title, and specific positioning statement
✓Projects section shows 2–3 real projects with live demos and GitHub links
✓About section explains your background and what you are looking for
✓Contact section has your email and LinkedIn URL
✓The site loads fast on mobile (test on your phone)
✓All links work — verify every demo and GitHub link
Add Your Portfolio to Every Job Application
Your portfolio URL should be on: your resume header, your LinkedIn 'Website' field, your GitHub profile, your email signature, and every job application form. The point of building it is getting people to see it — make sure every channel points to it.
“
A portfolio is not a nice-to-have for Indian freshers in 2026 — it is the primary differentiator between candidates who get interviews and those who do not.
— Nikhil Kamath, Co-Founder, Zerodha, at National Youth Conclave 2025
Do I need a portfolio if I am not a developer?
Yes — but it looks different. Designers should showcase Figma prototypes and case studies. Writers should feature their published articles. Marketers should show campaign results and analytics screenshots. The format adapts, but the principle is the same: show, do not tell. Platforms like Notion, Webflow, and even Canva websites work well for non-developer portfolios.
How many projects should my portfolio have?
Quality over quantity: 3 well-documented, live projects are better than 10 incomplete or undescribed ones. Each project should have a live demo, a GitHub link, a clear description of what problem it solves, and the tech stack. If you only have one genuinely strong project, showcase that one well and note the others as works in progress.
My portfolio is ready — how do I get recruiters to actually see it?
Add it to your LinkedIn About section and Featured section (pin a post about it). Share it on Twitter/X with relevant hashtags (#100DaysOfCode, #buildinpublic). Post on LinkedIn when you launch and when you add new projects. Submit to Indian developer communities: TechGig, HackerEarth, and local developer WhatsApp groups. Direct outreach to 20 recruiters on LinkedIn with the portfolio link is the most effective single action.
Is Vercel really free? What are the limitations?
Vercel's Hobby (free) plan is genuinely free for personal portfolio sites with no meaningful limitations at typical traffic levels. It includes free SSL, global CDN, automatic deployments, and 100GB bandwidth/month — far more than a personal portfolio will ever use. The paid plan (Pro at ~₹1,700/month) is only necessary for commercial projects or team collaboration.
Share Your Portfolio With Us
Post your portfolio link in the TekBit Community and get feedback from 10,000+ Indian professionals and hiring managers.
