Building a Simple Portfolio Website with React JS

If you're looking for a simple and effective way to showcase your work and skills, a portfolio website is a must-have. And if you're a frontend developer, what better way to build your portfolio site than with React JS? In this article, we'll go through a step-by-step process to help you build a simple and elegant portfolio site using React JS.

Prerequisites

Before we get started, you'll need to have some basic knowledge of HTML, CSS, and JavaScript. And naturally, you'll need to have the latest version of Node.js and NPM installed on your system. Once you have those, we can get started!

Step 1: Setting Up the Environment

Create a new project folder and navigate to it from the command line. Run the following to create a new React project:

npx create-react-app my-portfolio
cd my-portfolio
npm start

This will create a new React project called 'my-portfolio' and run the app in development mode on your local machine.

Step 2: Structuring the Project

In this step, we'll create the basic structure for your portfolio website. We'll create a new 'src' folder to house your React application.

Create a new file called 'index.css' and add the following code:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

Next, create a new file called 'index.js' in the src folder and add the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class App extends React.Component {
  render() {
    return (
      <div className='container'>
        <h1>My Portfolio</h1>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

This code imports React and ReactDOM, creates a new App component that returns a simple HTML template containing a header, and renders the App component into the 'root' DOM element.

In this step, we'll add navigation to the portfolio website. We'll create a new Navigation component that will link to four pages: 'Home', 'About', 'Portfolio', and 'Contact'.

Create a new file called 'Navigation.js' in the src folder and add the following code:

import React from 'react';

class Navigation extends React.Component {
  render() {
    return (
      <nav>
        <ul>
          <li><a href='#'>Home</a></li>
          <li><a href='#'>About</a></li>
          <li><a href='#'>Portfolio</a></li>
          <li><a href='#'>Contact</a></li>
        </ul>
      </nav>
    );
  }
}

export default Navigation;

This code creates a new Navigation component that returns a simple HTML template containing a navigation menu with four links.

Next, we'll import this component into the App component.

import React from 'react';
import ReactDOM from 'react-dom';
import Navigation from './Navigation';
import './index.css';

class App extends React.Component {
  render() {
    return (
      <div className='container'>
        <Navigation />
        <h1>My Portfolio</h1>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

This code imports the Navigation component and adds it to the App component.

Step 4: Creating Pages

In this step, we'll create four pages: 'Home', 'About', 'Portfolio', and 'Contact'. We'll create a new component for each page and link to them from the Navigation component.

Create a new file called 'Home.js' in the src folder and add the following code:

import React from 'react';

class Home extends React.Component {
  render() {
    return (
      <div>
        <h2>Home</h2>
        <p>Welcome to my portfolio website!</p>
      </div>
    );
  }
}

export default Home;

This code creates a new Home component that returns a simple HTML template containing a headline and a paragraph.

Repeat this process for the 'About', 'Portfolio', and 'Contact' pages.

Next, we'll import these components into the Navigation component and add links to them.

import React from 'react';
import { Link } from "react-router-dom";

class Navigation extends React.Component {
  render() {
    return (
      <nav>
        <ul>
          <li><Link to='/'>Home</Link></li>
          <li><Link to='/about'>About</Link></li>
          <li><Link to='/portfolio'>Portfolio</Link></li>
          <li><Link to='/contact'>Contact</Link></li>
        </ul>
      </nav>
    );
  }
}

export default Navigation;

This code imports the Link component from React Router and updates the Navigation component to use it.

Step 5: Setting Up Routing

In this step, we'll set up routing for the portfolio website using the React Router. We'll add a new dependencies to our project using NPM.

npm install react-router-dom

Next, we'll create a new 'App.js' file in the src folder and add the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Navigation from './Navigation';
import Home from './Home';
import About from './About';
import Portfolio from './Portfolio';
import Contact from './Contact';
import './index.css';

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div className='container'>
          <Navigation />
          <Switch>
            <Route exact path='/' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/portfolio' component={Portfolio} />
            <Route path='/contact' component={Contact} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

This code imports BrowserRouter, Route, and Switch from React Router and sets up routes for each of the four pages.

Step 6: Adding Styles

In this step, we'll add some styles to the portfolio website to make it look more professional. We'll create a new 'styles.css' file and add some basic styles to it.

body {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

h1, h2, h3 {
  font-weight: 700;
  margin-bottom: 20px;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 32px;
}

p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 20px;
}

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

nav ul li {
  margin-right: 20px;
}

nav ul li:last-child {
  margin-right: 0;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  font-size: 20px;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
}

nav ul li a:hover {
  color: #0077cc;
}

Next, we'll import this 'styles.css' file into the 'index.js' file.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Navigation from './Navigation';
import Home from './Home';
import About from './About';
import Portfolio from './Portfolio';
import Contact from './Contact';
import './index.css';
import './styles.css';

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div className='container'>
          <Navigation />
          <Switch>
            <Route exact path='/' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/portfolio' component={Portfolio} />
            <Route path='/contact' component={Contact} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

This code imports the styles.css file into the index.js file.

Conclusion

By following the above steps, you should now have a functional React JS portfolio website that you can use to showcase your work and skills. Change the content and styles to your liking, and add more pages or features as needed. Good luck and have fun with your new portfolio site!

Tech Blogs