How I Built a React Portfolio in 7 Days That Landed ₹1.2L in Freelance Work

#react #freelancing #portfolio #webdev

If you're a React developer stuck in tutorial hell with no real portfolio, this guide is for you.

In this post, I’ll show exactly how I built a React portfolio website using Vite and Tailwind CSS that helped me land ₹1.2L+ ($1,400+) in freelance projects in under three weeks.

No paid tools. No fancy frameworks. Just a clean, deployed portfolio that clients could actually visit.

Step 1: Vite + React Portfolio Setup Using Vite

Forget Create React App. Vite is lightning fast and gets you coding in under a minute.

npm create vite@latest my-portfolio -- --template react
cd my-portfolio
npm install
npm run dev

Your dev server fires up at localhost:5173. Clean the boilerplate from App.jsx and you're ready to build.

Step 2: Tailwind CSS Configuration

Install Tailwind and set up the config properly. This is crucial for customization later.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update tailwind.config.js to scan your components:

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        dark: '#1e293b',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Add Tailwind directives to src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 3: Build Reusable Components

Here's the secret sauce: component-driven architecture makes iterations painless. I built a ProjectCard component that I reused 6 times across my portfolio.

const ProjectCard = ({ title, description, tech, liveUrl, githubUrl, image }) => {
  return (
    <div className="bg-white dark:bg-dark rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
      <img src={image} alt={title} className="w-full h-48 object-cover" />
      <div className="p-6">
        <h3 className="text-2xl font-bold mb-2">{title}</h3>
        <p className="text-gray-600 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 bg-blue-100 text-blue-800 rounded-full text-sm">
              {t}
            </span>
          ))}
        </div>
        <div className="flex gap-4">
          <a href={liveUrl} className="text-primary hover:underline">Live Demo</a>
          <a href={githubUrl} className="text-gray-700 hover:underline">GitHub</a>
        </div>
      </div>
    </div>
  );
};

Usage in your main component:

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
  <ProjectCard 
    title="E-commerce Dashboard"
    description="Admin panel with real-time analytics"
    tech={['React', 'Tailwind', 'Chart.js']}
    liveUrl="https://demo.example.com"
    githubUrl="https://github.com/user/project"
    image="/project1.png"
  />
</div>

Step 4: Deploy to Vercel (Under 5 Minutes)

Push your code to GitHub, then:

Go to vercel.com and sign in with GitHub
Click "Import Project" and select your repository
Vercel auto-detects Vite just click "Deploy"

Your site goes live at yourname.vercel.app. For custom domains, add them in project settings (I bought a .tech domain for ₹800/year).

Netlify alternative: Drag-drop your dist folder after running npm run build. Both platforms offer free hosting with SSL.

Step 5: Portfolio Showcase Strategy

You can see my live implementation at dtechsolutions.tech, but here's what actually got me clients:

Hero section: Clear headline ("Full-Stack Developer specializing in React + Node.js")
3-4 strong projects: Quality over quantity. Include live demos and GitHub links
Tech stack badges: Visual representation using icons from react-icons
Contact form: Used Formspree for free form handling

Tech Stack Used in This React Portfolio

React 18
Vite 5
Tailwind CSS 3
Vercel (Deployment)
Formspree (Contact Form)
GitHub (Version Control)

Pros and Cons of This Stack

| Pros                                             | Cons                                         |
| ------------------------------------------------ | -------------------------------------------- |
| Tailwind's utility classes enable faster styling | Initial learning curve for Tailwind syntax   |
| Component reusability saves hours                | Need to set up dark mode manually            |
| Vite's hot reload is incredibly fast             | Smaller ecosystem vs Next.js                 |
| Free deployment on Vercel/Netlify                | Client-side rendering only (no SEO benefits) |
| Works perfectly on mobile out of the box         | Larger bundle size than vanilla CSS          |

Results: From Zero to Paid Gigs

Within 2 weeks of posting my portfolio:

Reddit (/r/forhire, /r/webdev): 2 gigs (₹40K total) by commenting with portfolio link on "looking for developer" posts
LinkedIn: 2 gigs (₹80K total) by posting my portfolio with "#opentowork" and tagging "React" + "Web Development"
Average project: ₹30K for landing pages, ₹50K for dashboards

Indian clients loved seeing actual deployed projects vs just GitHub repos. The Vercel links proved I knew deployment, not just coding.

Tips for Indian Freelancers

Price in rupees initially: Start at ₹20-30K for simple projects, scale up as you gain testimonials
Leverage time zone: Mention "same-day turnaround" for clients in IST zones
Add Razorpay/UPI: Show you can integrate Indian payment gateways
Use Indian hosting examples: If targeting local clients, mention experience with Indian servers/compliance
Network on LinkedIn: Indian startup founders are very active there engage with their posts

Final Thoughts

You don't need a fancy tech stack or months of preparation. React + Tailwind + Vercel got me from zero to earning within 3 weeks. The key was shipping something imperfect but functional, then iterating based on client feedback.
Stop planning, start building. Your first freelance gig is one portfolio away. Want to see the final result? Here's my portfolio: dtechsolutions.tech

Tech stack: React 18, Tailwind CSS 3.4, Vite 5, Vercel
Build time: 7 days
Cost: ₹0 (free tier everything)
Live portfolio: dtechsolutions.tech