This content originally appeared on DEV Community and was authored by borge
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
Install Node.js
First, ensure you have Node.js installed. you can download it from Node.jsCreate 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
- Install Dependencies
npm install
- 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
- 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;
- 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;
- 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;
- Footer Component Create Footer.jsx inside components/.
import React from 'react';
const Footer = () => {
return (
<footer>
<p>© 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.
This content originally appeared on DEV Community and was authored by borge
borge | Sciencx (2025-01-29T19:56:45+00:00) Create Portfolio Website using React. Retrieved from https://www.scien.cx/2025/01/29/create-portfolio-website-using-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.