Build a React Portfolio landing page using React Router

Web Development
Norbert BM0


In this React tutorial we are going to build together a simple portfolio landing page using React Router, React useState hooks, and also create a responsive navigation which, with the help of the React Router’s Links will let us navigate through differed Routs of this React application and output the routs in the Outlet.

A Simple portfolio landing pages is extremely easy to create using the react framework and especially react router for quick navigation.

Gettin start with the react app

Installing react app and react router dom

In order to get our react application up and running wit first need to install it. For this you will open a new terminal and type in the create app command and the name of the application :

npx create-react-app landing-page

Note! you need to have npm and node.js installed. Follow this tutorial if you don’t know how to install the:

Hot to create a server using Node.js

After you have your application installed you can now install react router by using:

npm install react-router-dom

Resources:

Here you can find a cople of useful links :

CSS file 

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* background: linear-gradient(90deg, #1c19e4, #b81edb);
   */
  background: rgb(0, 0, 0);
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 21%,
    rgba(172, 54, 31, 1) 50%,
    rgba(21, 21, 21, 1) 91%
  );
  font-family: "Poppins", sans-serif;
  color: #fbfbfb;
  text-shadow: 1px 1px 1px #333;
  overflow-wrap: break-word;
}

a,
li {
  text-decoration: none;
  list-style-type: none;
  color: #fbfbfb;
}
a:hover {
  text-decoration: underline;
}
.logo {
  display: inline-block;
  height: 23px;
  border-radius: 50%;
  margin-left: 0.5rem;
}
.btn {
  font-weight: 600;
  color: dark;
  font-family: inherit;
  background-color: #fbfbfb;
  border-color: #7952b3;
  display: inline-block;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  transition: 0.3s ease;
  box-shadow: 2px 2px 7px 1px #666;
}

.btn:hover {
  background: rgba(253, 253, 253, 0.5);
  transition: 0.3s ease;
}

.nav {
  font-size: 1.4rem;
  padding-top: 4rem;
  padding-left: 6rem;
  color: #fbfbfb;
  display: flex;
  align-items: center;
}

.nav a {
  color: #fbfbfb;
}

.nav .nav-links {
  position: relative;
  right: -400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav .nav-links li {
  margin-left: 2rem;
}

.nav .nav-links li a:hover {
  opacity: 0.5;
}

.nav .nav-links .btn {
  margin-left: 2rem;
}

.nav .fa-bars,
.nav .fa-times {
  cursor: pointer;
  display: none;
}

.nav .nav-links.active {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  background: rgba(3, 3, 3, 0.7);
  padding: 15vh 0;
  font-size: 2rem;
  z-index: 2;
}
/* the close class will hide the bars  */
.nav .fa-bars.close {
  display: none;
}

/* the open class will show the X  */

.nav .fa-times.open {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-right: 4rem;
  z-index: 2;
}

.container {
  max-width: 1440px;
  height: 80vh;
  margin: auto;
  margin-top: 10vh;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 10px 10px 25px 5px #111;
  animation: fadeIn 4s ease-out;
}

h2 {
  font-size: 4rem;
}

h4 {
  font-weight: 100;
  font-size: 2.5rem;
}

p {
  margin: 4rem 0;
  color: #ddd;
}
form {
  display: flex;
  flex-direction: column;
  max-width: 400px;
}
input {
  margin-bottom: 1.8rem;
  padding: 0.5rem;
  border-radius: 3px;
  outline: none;
  border: none;
}
@keyframes fadeIn {
  0% {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.1);
  }
  100% {
  }
}

header,
section {
  position: relative;
  margin-top: 4rem;
  margin-left: 6rem;
  max-width: 700px;
}

@media screen and (max-width: 1440px) {
  .container {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  header,
  section {
    margin-left: 2rem;
  }
  .nav {
    padding-left: 2rem;
  }
  .nav .nav-links {
    display: none;
  }
  .nav .fa-bars {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-right: 4rem;
  }
  h2 {
    font-size: 3rem;
  }
  h4 {
    font-size: 2rem;
  }
  p {
    margin: 2rem 0;
  }
  label {
    font-size: 0.9rem;
  }
  input {
    margin-bottom: 1.5rem;
  }
}

index.js

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

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Header from "./routs/header";
import Services from "./routs/services";
import About from "./routs/about";
import Contact from "./routs/contact";
import SingUp from "./routs/singUp";
import LogIn from "./routs/logIn";

ReactDOM.render(
  <Router>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="header" element={<Header />} />
        <Route path="services" element={<Services />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="singUp" element={<SingUp />} />
        <Route path="logIn" element={<LogIn />} />
      </Route>
    </Routes>
  </Router>,
  document.getElementById("root")
);

App.js

import { Outlet } from "react-router-dom";
import Navigation from "./components/Navigation";

function App() {
  return (
    <div className="container">
      <Navigation />
      <Outlet />
    </div>
  );
}

export default App;

Components

The navigation is the only needed component for this application. You will need to create a separate dir, in there you will create the Navigation.js react component.

The react useState hook returns a stateful value, and a function to update it.

import React, { useState } from "react";
import { Link } from "react-router-dom";
import logo from "../img/menyhartMediaLogo.png";

export default function Navigation() {
  const [open, setOpen] = useState(false);
  return (
    <nav className="nav">
      <a href="https://norbertbm.com/">
        Menyhart <img src={logo} alt="logo" className="logo" /> Media
      </a>
      <ul className={open ? "nav-links active" : "nav-links"}>
        <li>
          {" "}
          <Link to="/header">Home</Link>{" "}
        </li>
        <li>
          {" "}
          <Link to="/services">Service</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>

        <Link to="/singUp">
          {" "}
          <button className="btn">Sing Up</button>
        </Link>
        <Link to="/logIn">
          <button className="btn">Login</button>
        </Link>
      </ul>
      <i
        className={open ? "fas fa-bars close" : "fas fa-bars open"}
        onClick={() => setOpen(true)}
      ></i>
      <i
        className={open ? "fas fa-times open" : "fas fa-times close"}
        onClick={() => setOpen(false)}
      ></i>
    </nav>
  );
}

Routs

Header rout header.js

import React from "react";
import { Link } from "react-router-dom";
export default function Header() {
  return (
    <header>
      <h2>Hi,</h2>
      <h2>I'm Norbert!</h2>
      <h4>Welcome to my landing page</h4>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga sequi
        necessitatibus asperiores officia eos tenetur a voluptatem ducimus, ut
        quisquam ad, quia et minima tempora excepturi cumque earum, laudantium
        ipsum.
      </p>
      <Link to="/about">
        <button className="btn"> Read more..</button>
      </Link>
    </header>
  );
}

Services rout services.js

import React from "react";

export default function Services() {
  return (
    <section>
      <h2>Services</h2>
      <ul>
        <li>
          {" "}
          <h3>Education contact</h3>{" "}
        </li>
        <li>
          <h3>Web development Courses</h3>{" "}
        </li>
      </ul>
    </section>
  );
}

About component about.js

import React from "react";

export default function About() {
  return (
    <section>
      <h2>About me...</h2>
      <h3>self taught web developer</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, at
        id cum iusto eveniet obcaecati impedit facilis minus porro omnis illum
        explicabo voluptatum repellat vitae fuga debitis velit tempore tempora!
      </p>
      <h3>Content creator and course teacher</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, at
        id cum iusto eveniet obcaecati impedit facilis minus porro omnis illum
        explicabo voluptatum repellat vitae fuga debitis velit tempore tempora!
      </p>
    </section>
  );
}

Contact component contact.js

import React from "react";

export default function Contact() {
  return (
    <section>
      <h2>Contact</h2>
      <ul>
        <li>
          <i className="fas fa-globe"></i> Website:{" "}
          <a href="https://www.norbertbm.com/">www.norbertbm.com</a>
        </li>{" "}
        <li>
          <i className="fab fa-youtube"></i> YouTube:{" "}
          <a href="https://www.youtube.com/c/MenyhartMedia">
            Norbert BM Web Development
          </a>
        </li>
      </ul>
    </section>
  );
}

Sing up form component singUp.js

import React from "react";

export default function SingUp() {
  return (
    <section>
      <h2>Sing Up</h2>
      <form>
        <label htmlFor="userName">Full name</label>
        <input type="text" />
        <label htmlFor="userName">Email</label>
        <input type="email" />
        <label htmlFor="userName">User name</label>
        <input type="text" />
        <label htmlFor="password">Password</label>
        <input type="password" />
        <label htmlFor="password">Repeat Password</label>
        <input type="password" />
        <button className="btn" type="submit">
          Sign Up
        </button>
      </form>
    </section>
  );
}

Login form component login.js

import React from "react";

export default function LogIn() {
  return (
    <section>
      <h2>LogIn</h2>
      <form>
        <label htmlFor="userName">User name</label>
        <input type="text" />
        <label htmlFor="password">Password</label>
        <input type="password" />
        <button className="btn" type="submit">
          Login
        </button>
      </form>
    </section>
  );
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.