Create Portfolio Website using React

Alright Developer let's get start. creating a portfolio website is a great way to showcase your skills, projects and experience. so, today we are going to build a simple portfolio website using React.

Setting up the React Project with Vite

1. Install Node.js

First, ensure you have Node.js installed. you can download it from Node.js

2. Create a New React Project with Vite

Run the following command to create a new React project using Vite:

npm create vite@latest portfolio

Then, navigate into the project directory:

cd my-portfolio

3. Install Dependencies

npm install

4. Start the Development Server

npm run dev

Your project will now be running at http://localhost:5173.

Setting Up the Folder Structure

Organize your project in a clean structure:

my-portfolio/
│── public/
│── src/
│   │── components/
│   │   │── Navbar.jsx // Make each component diff. CSS file
│   │   │── Hero.jsx
│   │   │── About.jsx
│   │   │── Footer.jsx
│   │── App.jsx
│   │── main.jsx
│── index.html
│── package.json

Creating Components

1. Navbar Component

Create Navbar.jsx inside the components/ folder.

import React from 'react';

const Navbar = () => {
    return (
        <nav>
            <h1>My Portfolio</h1>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    );
};

export default Navbar;

2. Hero Section

Create Hero.jsx inside components/.

import React from 'react';

const Hero = () => {
    return (
        <section>
            <h2>Welcome to My Portfolio</h2>
            <p>Hi, I'm a software developer passionate about creating amazing applications.</p>
        </section>
    );
};

export default Hero;

3. About Section

Create About.jsx inside components/.

import React from 'react';

const About = () => {
    return (
        <section id="about">
            <h2>About Me</h2>
            <p>I am a React developer with experience in building web applications.</p>
        </section>
    );
};

export default About;

4. Footer Component

Create Footer.jsx inside components/.

import React from 'react';

const Footer = () => {
    return (
        <footer>
            <p>&copy; 2025 My Portfolio. All rights reserved.</p>
        </footer>
    );
};

export default Footer;

Integrating Components in App.jsx

Modify App.jsx to include all components.

import React from 'react';
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import About from './components/About';
import Footer from './components/Footer';

const App = () => {
    return (
        <>
            <Navbar />
            <Hero />
            <About />
            <Footer />
        </>
    );
};

export default App;

Running the Project

Start the development server to see your portfolio website in action:

npm run dev

Open http://localhost:5173/ in your browser.

You have successfully created a simple portfolio website using React Vite. This website includes a Navbar, Hero Section, About Section, and Footer. You can enhance it by adding more sections like Projects, Contact Form, or Testimonials.