Building a Portfolio Website with React.js: Part 1

Creating a portfolio website using React.js can be a great way to showcase your work and skills to potential clients or employers. In this tutorial, we will walk through the process of creating a portfolio website using React.js step by step.

Step 1: Setting up your environment
Before we get started, make sure you have Node.js and npm installed on your computer. You can download and install Node.js from https://nodejs.org/. Once you have Node.js installed, you can check if npm is installed by running the following command in your terminal:

npm -v

Next, you will need to install create-react-app, which is a command-line tool for creating React.js applications. You can install create-react-app by running the following command in your terminal:

npm install -g create-react-app

Step 2: Creating a new React app
Now that you have create-react-app installed, you can use it to create a new React app for your portfolio website. Open your terminal and run the following command to create a new React app called "portfolio":

create-react-app portfolio

This will create a new folder called "portfolio" with all the necessary files and dependencies for a React app. Change into the newly created folder by running the following command:

cd portfolio

Step 3: Creating the portfolio website components
Now that you have created a new React app, you can start building the components for your portfolio website. Open the src folder in your code editor and create a new folder called components. Inside the components folder, create a new file called Navbar.js and add the following code:

import React from 'react';

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

export default Navbar;

This code creates a simple Navbar component with links to the About, Portfolio, and Contact sections of your portfolio website. Next, create a new file called About.js inside the components folder and add the following code:

import React from 'react';

const About = () => {
    return (
        <section id="about">
            <h2>About Me</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis eget dui pulvinar finibus.</p>
        </section>
    );
}

export default About;

This code creates a simple About component with some placeholder text. Repeat this process to create Portfolio.js and Contact.js components for the Portfolio and Contact sections of your website.

Step 4: Building the portfolio website layout
Now that you have created the components for your portfolio website, you can start building the layout. Open the App.js file in the src folder and import the components you created:

import React from 'react';
import Navbar from './components/Navbar';
import About from './components/About';
import Portfolio from './components/Portfolio';
import Contact from './components/Contact';

const App = () => {
    return (
        <div>
            <Navbar />
            <About />
            <Portfolio />
            <Contact />
        </div>
    );
}

export default App;

This code imports the Navbar, About, Portfolio, and Contact components and adds them to the main App component. Next, you can style your portfolio website by creating a new file called App.css in the src folder and adding the following CSS code:

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

nav {
    background: #333;
    color: white;
    padding: 10px;
}

ul {
    list-style: none;
    display: flex;
}

ul li {
    margin-right: 10px;
}

section {
    padding: 20px;
}

h2 {
    font-size: 2em;
}

p {
    font-size: 1em;
}

This code styles the Navbar, About, Portfolio, and Contact sections of your portfolio website. You can customize the styles to match your design preferences.

Step 5: Running your portfolio website
To see your portfolio website in action, open your terminal and run the following command in the root folder of your React app:

npm start

This will start a development server and open your portfolio website in your default web browser. You can now view and interact with your portfolio website locally.

In this tutorial, we have covered the first part of creating a portfolio website using React.js. In the next part, we will add more functionality and additional features to enhance your portfolio website. Stay tuned for part 2!