How to Build a Portfolio Website With React (Step-by-Step Guide)

Your personal portfolio is the most important digital asset you own.

It represents your identity as a developer, showcases your skills, and helps clients or recruiters understand what you can do.

In this guide, we'll walk through building a modern React-based portfolio website, covering folder structure, components, routing, styling, and deployment.

Why Use React for a Portfolio?

React is ideal for creating a portfolio because:

- It's fast and highly optimized

- Encourages reusable components

- Perfect for animations and interactive UIs

- Easy to maintain as your projects grow

- Works well with modern frameworks and tools

Most developers today choose React for personal websites due to its flexibility and performance.

Step 1: Set Up Your Project

Start by creating a new React application:

npx create-react-app my-portfolio
cd my-portfolio
npm start

This sets up the basic structure and runs your development server at localhost:3000.

Step 2: Create a Clean Folder Structure

Here's a recommended folder layout for clarity and scalability:

src/
 ├── components/
 │     ├── Navbar.jsx
 │     ├── Hero.jsx
 │     ├── ProjectCard.jsx
 │     └── Footer.jsx
 ├── pages/
 │     ├── Home.jsx
 │     ├── Projects.jsx
 │     └── Contact.jsx
 ├── assets/
 ├── styles/
 └── App.jsx

A clean structure helps maintain separation between UI components, pages, and shared assets.

Step 3: Build Core Components

Your portfolio is essentially a collection of reusable components. Let's build the important ones.

Navbar Component

function Navbar() {
  return (
    <nav className="navbar">
      <h2>Subham Mahapatra</h2>
      <ul>
        <li>Home</li>
        <li>Projects</li>
        <li>Contact</li>
      </ul>
    </nav>
  );
}

export default Navbar;

This provides navigation to all the major sections.

Hero Section

function Hero() {
  return (
    <section className="hero">
      <h1>Hi, I'm Subham!</h1>
      <p>Full Stack Developer • AI Enthusiast • Designer</p>
      <button>View My Work</button>
    </section>
  );
}

export default Hero;

Your hero section should be bold, clean, and instantly tell visitors who you are.

ProjectCard Component

function ProjectCard({ title, description, link }) {
  return (
    <div className="project-card">
      <h3>{title}</h3>
      <p>{description}</p>
      <a href={link} target="_blank" rel="noopener noreferrer">
        View Project
      </a>
    </div>
  );
}

export default ProjectCard;

Reusable cards help present your projects elegantly.

Step 4: Add Routing with React Router

Install React Router:

npm install react-router-dom

Set up routing inside App.jsx:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Home from "./pages/Home";
import Projects from "./pages/Projects";
import Contact from "./pages/Contact";

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/projects" element={<Projects />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

export default App;

Your portfolio now supports multiple pages and clean navigation.

Step 5: Style Your Portfolio

You can style your site using:

- Tailwind CSS (fastest for modern UI)

- CSS Modules

- Styled-components

- SCSS

Tailwind Setup (recommended):

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

Then add Tailwind imports in index.css:

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

Tailwind helps you create clean, modern, responsive layouts quickly.

Step 6: Deploy Your Portfolio

Best hosting options:

Vercel (Recommended)

- Fastest builds

- Easiest CI/CD

- Free SSL + domains

Other great options:

- Netlify

- GitHub Pages

- Cloudflare Pages

Build your app before deployment:

npm run build

Upload /build folder or connect your repository for continuous deployment.

Final Tips for an Attractive Portfolio

- Show 5–7 of your best projects, not everything

- Add a personal brand identity (colors, typography, tone)

- Use micro-animations and transitions for polish

- Include clear CTAs like "Hire Me" or "Download Resume"

- Keep your writing clean and concise

- Ensure mobile responsiveness

A strong portfolio is a long-term asset — invest in clarity, design, and storytelling.

Live Example

Want to see these principles in action? Check out my portfolio built with Next.js, Tailwind CSS, and Framer Motion. You can also explore my projects to see real examples of React applications.

Related Articles

Looking to enhance your development skills further? Check out:

- Best AI Tools for Developers in 2025 - Boost your productivity with AI-powered coding tools

- My Competitive Programming Journey - How I improved my problem-solving skills

- Was It All Worth It? - Reflections on my development journey

About the Author

I'm Subham Mahapatra, a Full Stack Developer with 2+ years of experience building React and Next.js applications. I've built multiple portfolio websites and web applications. Contact me if you need help building your portfolio or have questions about this tutorial.

Last updated: January 2025