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:

<code class="language-bash">npm create vite@latest my-portfolio -- --template react
cd my-portfolio
npm install</code>

3. Starting the Development Server:

<code class="language-bash">npm run dev</code>

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):

<code class="language-javascript">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;</code>

2. Hero Section (src/components/Hero.jsx):

<code class="language-javascript">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;</code>

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

<code class="language-javascript">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;</code>

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

<code class="language-javascript">import React from 'react';

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

export default Footer;</code>

Component Integration (src/App.jsx):

<code class="language-javascript">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;</code>

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!