If you are a React developer stuck in tutorial hell with no real portfolio, this walkthrough is for you.
In this article, I’ll break down how I built a React portfolio website with Vite and Tailwind CSS that helped me land ₹1.2L+ in freelance projects in under three weeks. No paid tools, no over‑engineered stack just a clean, fast portfolio that real clients could open and understand.
Step 1: Set up a Vite + React project
Instead of Create React App, I went with Vite because it is extremely fast and lightweight for React projects.
Run these commands:
npm create vite@latest my-portfolio -- --template react
cd my-portfolio
npm install
npm run dev
Your development server should start at http://localhost:5173. Once it is running, clear out the default content in App.jsx so you can start from a blank slate.
Tailwind handled all the styling for this project, and getting the config right early made customization much easier.
Install Tailwind and its dependencies:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Update tailwind.config.js to scan the right files:
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
primary: '#3b82f6',
dark: '#1e293b',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
plugins: [],
}
Then add the Tailwind directives to src/index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
At this point, you can start using Tailwind utility classes directly in your JSX.
Step 3: Build reusable components
To move fast, I leaned heavily on component‑driven design. One of the core building blocks was a ProjectCard component that I reused for each portfolio project.
const ProjectCard = ({ title, description, tech, liveUrl, githubUrl, image }) => {
return (
<div className="bg-dark rounded-xl shadow-md overflow-hidden flex flex-col">
{image && (
<img
src={image}
alt={title}
className="h-48 w-full object-cover"
>
)}
<div className="p-6 flex-1 flex flex-col">
<h3 className="text-xl font-semibold text-white mb-2">
{title}
</h3>
<p className="text-slate-300 mb-4">
{description}
</p>
<div className="flex flex-wrap gap-2 mb-4">
{tech.map((t, i) => (
<span
key={i}
className="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-200"
>
{t}
</span>
))}
</div>
<div className="mt-auto flex gap-3">
{liveUrl && (
<a
href={liveUrl}
target="_blank"
rel="noreferrer"
className="text-sm font-medium text-primary hover:underline"
>
Live Demo
</a>
)}
{githubUrl && (
<a
href={githubUrl}
target="_blank"
rel="noreferrer"
className="text-sm font-medium text-slate-300 hover:underline"
>
GitHub
</a>
)}
</div>
</div>
</div>
);
};
You can then use ProjectCard in your main page or a Projects section by passing in different props for each project.
Step 4: Deploy to Vercel in minutes
Once the portfolio was ready, I pushed the code to GitHub and deployed with Vercel.
Basic steps:
Push the repository to GitHub.
Go to vercel.com and sign in with GitHub.
Click Import Project and select your portfolio repo.
Vercel automatically detects Vite just click Deploy.
Vercel gives you a URL like yourname.vercel.app. You can later attach a custom domain from the project settings; I used a .tech domain for a professional look.
If you prefer Netlify, you can run npm run build and drag‑and‑drop the dist folder into Netlify’s UI both options are free and include SSL.
Step 5: Portfolio layout that actually converts
You can see the live portfolio at dtechsolutions.tech. Here is the structure that helped me convert visitors into paying freelance clients:
Hero section: A clear headline such as “Full‑Stack Developer specializing in React + Node.js” plus a concise subheading and a primary CTA.
3 - 4 strong projects: Focus on a handful of solid, deployed projects with live demos and GitHub links.
Tech stack badges: Visual tech tags or icons (for example with react-icons) so clients quickly understand what you use.
Contact form: I used Formspree for contact handling without needing a custom backend.
Tech stack used
- React 18
- Vite 5
- Tailwind CSS 3
- Vercel (deployment)
- Formspree (contact form)
- GitHub (version control)
This stack was enough to ship fast, iterate quickly, and still look professional to clients.
Pros and cons of this stack
text
| Pros | Cons |
| --------------------------------------------- | -------------------------------------------- |
| Tailwind utility classes speed up styling | Initial learning curve for Tailwind syntax |
| Component reusability saves a lot of time | Dark mode requires custom setup |
| Vite dev server is extremely fast | Smaller ecosystem compared to Next.js |
| Free deployment on Vercel/Netlify with SSL | Client-side rendering only (limited SEO) |
| Mobile responsiveness is easy to achieve | Larger CSS bundle than handcrafted CSS |
From zero portfolio to paid gigs
Within about two weeks of making the portfolio public, I started getting actual freelance work:
On Reddit (subreddits like /r/forhire and /r/webdev), I landed a couple of gigs by replying to “looking for developer” posts with my portfolio link.
On LinkedIn, I shared the portfolio with #opentowork and relevant tech hashtags, which led to multiple projects.
Typical project sizes ranged from ₹30K for simpler landing pages to ₹50K+ for dashboards and more complex builds.
Clients particularly liked that they could click a live link and interact with the projects instead of just seeing GitHub repositories.
Practical tips for Indian freelancers
If you are targeting Indian clients specifically, these points helped me:
Quote in rupees initially: For early projects, starting around ₹20K - ₹30K for smaller builds works well; raise rates as you collect testimonials.
Use your time zone as a feature: Promise quick responses and same‑day iterations for IST‑based clients.
Know local payment flows: Show that you can integrate Razorpay/UPI or other Indian payment gateways.
Mention local hosting experience: If clients care about data locality or compliance, highlight any work with Indian hosting providers.
Be visible on LinkedIn: Founders and decision makers are very active there comment on their posts, share your work, and keep your profile updated.
Final thoughts
You do not need an overcomplicated stack or months of planning to start getting freelance work. A simple combination of React, Tailwind, and Vercel was enough for me to go from no portfolio to real paid projects in a matter of weeks.
Focus on shipping a functional, honest portfolio, then refine it as you learn from real client feedback. Your first freelance opportunity might be just one deployed React portfolio away and if you are curious, you can check out mine here: https://www.dtechsolutions.tech/.