How To Create a React JS Portfolio Project?

Nowadays, if anyone wants to practice any programming language, they must practice it by creating Projects that can help them increase their knowledge about the language. 

• React is a JavaScript library that is used to build mobile and web applications fast and interactive. It is an open-source, reusable component-based front-end library of JavaScript. 
• React is a combination of HTML and JavaScript. It provides a robust and opinionated way to build modern applications.  It handles the view layer for web and mobile apps and also allows developers to create reusable UI components. 
• React is the most popular front-end JavaScript library in the field of web development. It is used by large, established companies and newly-minted startups alike (Netflix, Airbnb, Instagram, and the New York Times). 

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program

Let's Create the Portfolio Project using React JS:

Step 1: The First thing that we will do is, we are going to create a folder on the Desktop or where you want the code to be written, there create a folder named Portfolio-app, and then open the editor and then open this folder.

Step 2: Now, let's open the terminal and write a command to create a react app,

Open the terminal and write a command npx create-react-app portfolio-app. 

Step 3: Let's Install React Router dom and sass, React Router dom is used to route between pages, and Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets.

Step 4: Let's work on this Portfolio Project from Scratch. Let’s start working on the Header part. We will be using sass in this project and also components.

import { Close, MenuOutlined } from '@material-ui/icons'

import React, { useState } from 'react'

import { Link } from 'react-router-dom'

import './styles/Header.scss'

const Header = () => {

    const [active,setActive] = useState(false);

    const showMenu = () => {

            setActive(!active)

    }

    return (

        <div className='header'>

                    <div className="header__logo">

                        <h1>Simplilearn</h1>

                    </div>

            <nav className={active ? 'navbar active' : 'navbar'}>

                <ul>

                    <div className="closed">

                        <Close className='close' onClick={showMenu}/>

                    </div>

                    <li>

                        <Link to='/'><b>Home</b></Link>

                    </li>

                    <li>

                        <Link to='/'><b>About</b></Link>

                    </li>

                    <li>

                        <Link to='/'><b>Portfolio</b></Link>

                    </li>

                    <li>

                        <Link to='/'><b>Pages</b></Link>

                    </li>

                    <li>

                        <Link to='/'><b>Blog</b></Link>

                    </li>

                    <li>

                        <Link to='/contact'><b>Contact</b></Link>

                    </li>

                </ul>

            </nav>

                    <div className="changer">

                        <MenuOutlined className='menu' onClick={showMenu}/>

                    </div>

                    </div>

    )

}

export default Header

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program

Step 5: We will add the SCSS for the styling.

.header {

    width: 100%;

    display: flex;

    align-items: center;

    position: absolute;

    z-index: 1;

}

.header__logo {

    margin-left: 1rem;

}

.navbar {

    margin: 0 auto;

}

ul {

    display: flex;

   li {

       list-style: none;

       margin: 1rem;

       a {

           text-decoration: none;

           text-transform: uppercase;

           color: #000;

           &:hover {

               border-bottom: 3px solid red;

           }

       }

   }

}

.changer {

    display: flex;

    margin-right: 1.555rem;

    .menu {

        cursor: pointer;

        margin-right: 1rem;

        display: none;

    }

}

.closed .close{

    display: none;

}

@media (max-width:850px) {

    .header {

        justify-content: space-between;

    }

    .navbar {

        display: none;

        transition: 1s ease;

    }

    .navbar.active {

        display: flex;

        flex-direction: column;

        align-items: center;

        position: fixed;

        inset: 0;

        background: rgb(253, 234, 234);

        transition: 1450ms ease;

    }

    ul {

        margin: 0 auto;

        align-items: center;

        flex-direction: column;

        margin-top: 1rem;

       li {

           margin-block: 2rem;

           a {

               font-size: 20px;

               color: rgb(40, 36, 36);

               font-weight: bolder;

           }

       }

    }

    .changer {

        .menu {

            display: block;

        }

    }

    .closed .close{

        display: block;

    }

    .header__logo {

        margin-left: .445rem;

    }

}

@media (max-width:360px) {

    ul {

        margin: 0 auto;

        align-items: center;

        flex-direction: column;

        margin-top: 1rem;

       li {

           margin-block: 2rem;

           a {

               font-size: 20px;

               color: rgb(40, 36, 36);

               font-weight: bolder;

           }

       }

    }

    .changer {

        .menu {

            display: block;

            margin-right: 0;

        }

    }

}

Output: Header

Now, let's start with the Main Page.

import { Facebook, Instagram, LinkedIn, Pinterest, Twitter } from '@material-ui/icons'

import React, { useState } from 'react'

import './styles/Main.scss'

import anu from './assets/anubhav.png'

const Main = () => {

    return (

        <div className='main'>

            <div className='main__container'>

                <div className="main__content">

                    <div className="text">

                            <p>Hey There !</p>

                            <h1>I am Anubhav</h1>

                            <p>Front End Developer  & Designer</p>

                            <div className="icons">

                                <Twitter className='icon'/>

                                <Instagram className='icon'/>

                                <Facebook className='icon'/>

                                <LinkedIn className='icon'/>

                                <Pinterest className='icon'/>

                            </div>

                    <div className="buttons">

                        <button>See Me</button>

                        <button>Hire Me</button>

                    </div>

                    </div>

                </div>

                <div className="main__img">

                    <img src={anu} alt="" />

                </div>

            </div>

        </div>

    )

}

export default Main

.main {

    min-height: 100vh;

    max-width: 100%;

    background-color: #f8efef;

    position: relative;

    &::before,&::after {

        content: '';

        position: absolute;

        left: 0;

    }

    &::before {

        clip-path: polygon(100% 33%, 0% 100%, 100% 100%);

        background:linear-gradient(45deg,rgba(216, 46, 8, 0.085),rgba(62, 7, 189, 0.126));

        width: 100%;

        height: 100%;

}

}

.main__container {

    display: flex;

    height: 90vh;

    justify-content: space-between;

    align-items: center;

    position: relative;

}

.main__content {

    margin-left: 3.445rem;

}

.text {

    line-height: 55px;

    p {

        color: rgb(157, 155, 155);

        text-transform: uppercase;

        font-size: 22px;

    }

    h1 {

        font-size: 50px;

        text-transform: uppercase;

    }

}

.icons {

    display: flex;

    .icon {

        margin-top: 1rem;

        margin-right: 1.4rem;

        font-size: 35px;

        cursor: pointer;

        color: rgb(157, 155, 155);

        &:hover {

            color: red;

        }

    }

}

.main__img {

    clip-path: circle(50% at 50% 57%);

    cursor: pointer;

    img {

        background:linear-gradient(45deg,rgb(216, 46, 8),rgb(62, 7, 189));

    }

}

.buttons {

    button {

        padding: 15px 40px;

        margin-top: 2rem;

        margin-right: 1rem;

        background: linear-gradient(25deg,rgba(1, 60, 210, 0.753),rgb(255, 72, 6));

        color: #fff;

        border: 1px solid #fff;

        cursor: pointer;

        border-radius: 5px;

        text-transform: uppercase;

        font-weight: bolder;

    }

}

.main__container.active {

    background: red;

}

@media (max-width:1200px)

{

    .text {

        white-space: nowrap;

        line-height: 30px;

        p {

            font-size: 14px;

        }

        h1 {

            font-size: 30px;

        }

    }

    .buttons button {

        padding: 8px 20px;

    }

    .icons {

        margin-right: 1rem;

        .icon {

            font-size: 25px;

        }

    }

}

@media (max-width:600px) {

    .main__content {

        margin-left: 0;

    }

    .main__container {

        text-align: center;

        flex-direction: column-reverse;

        justify-content: center;

    }

    .main__img img {

        width: 250px;

    }

    .text {

        h1 {

            font-size: 23px;

        }

        p {

            color: #000;

            font-size: 11px;

        }

    }

    .icons{

        margin-left: 1.5rem;

    .icon {

        color: firebrick;

    }

}

}

      Fig: Output

Boost Your Cloud Skills. Land an Architect Role

Cloud Architect Master's ProgramExplore Program

Step 6: Here, we will create a Sections page in which we add the experience and the skill set that the candidate has. Also, we are adding the pop-up functionality as mentioned below. 

Section page 

import React from 'react'

import './styles/Section.scss'

import anu2 from './assets/profilephoto.jpeg'

const Section = () => {

    return (

        <div className='section'>

            <div className="section__container">

                <div className="section__img">

                    <img src={anu2} alt="" />

                </div>

                <div className="section__content">

                    <h1>Anubhav Sharma</h1>

                    <p>Experience in frontend and backend development</p>

                    <p>JavaScript development</p>

                    <p>Java </p>

                    <p>Python</p>

                    <p>Professional UI and UX Designer</p>

                </div>

            </div>

        </div>

    )

}

export default Section

.section {

    width: 100%;

    min-height: 100vh;

    background:linear-gradient(45deg,rgba(11, 141, 228, 0.77),rgba(226, 87, 36, 0.562));

    overflow: hidden;

}

.section__container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 2.5rem;

}

.section__img img{

    margin-top: 1rem;

    width: 520px;

    height: 600px;

    padding: 10px;

    object-fit: cover;

}

.section__content {

    margin: 0 auto;

    line-height: 50px;

    text-align: center;

    h1 {

        color: #fff;

        text-transform: uppercase;

        font-size: 55px;

        margin-bottom: 2.125rem;

    }

    p {

        font-weight: bolder;

        color: #fff;

        text-transform: uppercase;

        border-bottom: 1px solid green;

        cursor: pointer;

        box-shadow: 2px 2px 15px green;

        padding: 6px;

        margin-block: 7px

        ;

        &:hover {

            transform: scale(110%);

            transition: 250ms;

            color: firebrick;

        }

    }

}

@media (max-width:1100px) {

    .section__container {

        flex-direction: column;

        margin: 2.5rem;

    h1 {

        font-size: 25px;

        margin-bottom: 0rem;

    }

    p {

        font-size: 26px;

        margin-block: 25px;

        padding: 25px;

        font-weight: normal;

    }

    }

    .section__img img{

        width: 720px;

        height: 410px;

        padding: 5px;

        object-fit: cover;

    }

}

@media (max-width:735px) {

    .section__img img{

        width: 300px;

        height: 220px;

        padding: 2px;

        object-fit: cover;

    }

    .section__container {

        flex-direction: column;

        margin: 1.5rem;

    h1 {

        font-size: 25px;

    }

    p {

        font-size: 10px;

        margin-block:5px;

        padding: 5px;

    }

    }

}

@media (max-width:335px) {

    .section__container {

        margin: 0;

    h1 {

        font-size: 20px;

        margin-bottom: 0rem;

    }

    p {

        font-size: 12px;

        margin-block: 0px;

        padding: 0px;

        font-weight: normal;

        box-shadow: 2px 2px 5px green;

    }

    }

    .section__img img{

        width: 250px;

        height: 150px;

        padding: 2px;

        object-fit: cover;

    }

}

   Output: Section page 

Become a Certified UI UX Expert in Just 5 Months!

With The Best-in-class UI UX ProgramExplore Program

Step 7: Now, In last what we will be doing is we will add the contact page in which if anyone wants to connect with you, they can write a mail to you. 

import React from "react";

import {ArrowBack } from '@material-ui/icons'

import './styles/Contact.scss'

import { Link } from 'react-router-dom'

const Contact =() => {

    return (

        <div className="contact">

            <Link to ='/ ' >

                <ArrowBack className ='arrow'/>

            </Link>

            <div className="inputs">

                <h1>Contact Me</h1>

                <input type="text" placeholder="Name"/>

                <input type="text" placeholder="Email"/>

                <input type="text" placeholder="Message" className="message"/>

                <button>Send</button>

            </div>

        </div>

    )

}

export default Contact

.contact{

    width: 100%;

    height: 100%;

    background-color: white;

}

a{

    color: gray;

    text-decoration: none;

}

.inputs{

    width: 60%;

    height: 80%;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

h1{

    color: rgb(82, 76,76)

}

input{

    width: 100%;

    align-items: center;

    padding: 20px;

    outline: none;

    border: none;

}

.message {

    padding-bottom: 10rem;

}

button{

    padding: 10px 40px;

    background: none;

    cursor: pointer;

    margin-top: 1rem;

    border: 1px solid blue;

    color: rgb(255, 102, 128);

    text-transform: uppercase;

}

@media(max-width:550px) {

    .inputs{

        width: 80%;

        input{

            padding: 15px;

        }

    }

}

If you're eager to gain the skills required to work in a challenging, rewarding, and dynamic IT role - we've got your back! Discover the endless opportunities through this innovative Post Graduate Program in Full Stack Web Development course designed by our partners at Caltech CTME. Enroll today!

Next Steps

This article has touched on how to create a Portfolio website using React JS. Simplilearn’s Post Graduate Program in Full Stack Web Development would be useful if you want to become a front-end developer. React includes a method for transmitting data and states between components. You can easily provide state, props, and setState. React also takes care of state management and resets. 

Are there any questions you'd want to ask us? Please feel free to write to us in the comments below. Our expert team will resolve them and will be happy to answer them earliest.