Create Portfolio Website using React

Let's build a basic portfolio website using React and Vite! This guide will walk you through setting up the project, creating essential components, and integrating them to showcase your skills and projects.

Project Setup:

1. Node.js Installation: Ensure Node.js is installed on your system. Download it from the official Node.js website if needed.

2. Creating the React Project: Use Vite to quickly set up a new React project:

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

3. Starting the Development Server:

npm run dev

Access your project at http://localhost:5173.

Project Structure:

Maintain a clean and organized project structure:

<code>my-portfolio/
├── public/
└── src/
    ├── components/
    │   ├── Navbar.jsx
    │   ├── Hero.jsx
    │   ├── About.jsx
    │   └── Footer.jsx
    ├── App.jsx
    └── main.jsx
├── index.html
└── package.json</code>

Component Creation:

1. Navbar Component (src/components/Navbar.jsx):

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 (src/components/Hero.jsx):

import React from 'react';

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

export default Hero;

3. About Section (src/components/About.jsx): (Content will depend on your details)

import React from 'react';

const About = () => {
    return (
        <section id="about">
            <h3>About Me</h3>
            <p>Add your personal introduction here.</p>
        </section>
    );
};

export default About;

4. Footer Component (src/components/Footer.jsx):

import React from 'react';

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

export default Footer;

Component Integration (src/App.jsx):

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 (
        <div>
            <Navbar />
            <Hero />
            <About />
            <Footer />
        </div>
    );
};

export default App;

Running the Application:

Restart the development server (npm run dev) to see your portfolio website. Open http://localhost:5173/ in your browser.

This creates a foundational portfolio. Remember to add your projects, contact information, and styling to personalize it further.

The above is the detailed content of Create Portfolio Website using React. For more information, please follow other related articles on the PHP Chinese website!