In this tutorial, we'll be creating a Portfolio website using React JS,

A portfolio website is a digital space that showcases your best work. It can be used to share your work with potential collaborators, employers, or the press. Portfolio websites can also be used when applying for jobs or internships.

By the end of this tutorial, you'll learn how to create your own personal portfolio website.

Source Code for the App.jsx file

---

Add the following Code inside your App.jsx file :

             
import './App.css'
import {BrowserRouter as Router,Routes,Route} from 'react-router-dom'
import Navbar from './components/Navbar'
import Home from './pages/Home'
import About from './pages/About'
import Contact from './pages/Contact'
import Footer from './components/Footer'

function App() {
    return(
    < Router>
    < Navbar />
    < Routes>
        < Route path={'/'} element={< Home/>} />
        < Route path={'/about'} element={< About/>} />
        < Route path={'/contact'} element={< Contact/>} />
    
    < Footer />
    
    )
}

export default App
   
             
            

copy

Add the following code to your App.css file

                 
    @import url('https://fonts.googleapis.com/css2?family=Lora&family=Rubik:ital,wght@0,300;0,400;0,500;0,700;0,800;0,900;1,600&display=swap');

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Rubik', sans-serif;
        list-style: none;
        text-decoration: none;
    }
    
    :root{
        --base-color:#F2FDFF;
        --text-color:hsl(225, 54%, 14%);
    
        --main-color:#9AD4D6;
        --high-color:#564787;
        --high2-color:#DBCBD8;
    
        --b-font:44px;
        --p-font:1.2rem;
    
    }
    
    body{
        background-color: #f0fdff;
    }
    
    nav{
        background-color: var(--main-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
    }
    
    .logo{
        color: var(--high-color);
        font-size: 38px;
        font-weight: 600;
    
    }
    .logo span{
        color: var(--base-color);
        transition: all 0.6s ease-in-out;
    
    }
    .logo span:hover{
        color: var(--text-color);
    }
    
    .navbar{
        display: flex;
        gap: 2rem;
    }
    
    .navbar a{
        font-size: var(--p-font);
        font-weight: 500;
        color: var(--text-color);
        padding: 5px;
        border-radius: 5px;
        position: relative;
    }
    
    .navbar a:hover,
    .navbar a:focus{
        color: var(--base-color);
    }
    
    .navbar a::after{
        content: "";
        height: 3px;
        width: 90%;
        background: var(--high-color);
        position: absolute;
        left: 4px;
        bottom: -25px;
        opacity: 0;
        transition: all 0.6s ease-in-out;
    }
    
    
    .navbar a:hover::after{
        opacity: 1;
    }
    
    .hero{
        padding: 0 15%;
        display: flex;
        width: 100%;
        height: 70vh;
        align-items: center;
        justify-content: space-between;
        gap:100px;
        height: 77vh;
        width: 90%;
        padding: 10% 15%;
        background-color: var(--high2-color);
        border-radius: 20px;
        margin:20px auto;
    }
    
    .hero-img{
        
    }
    
    .hero-img img{
        border-radius: 50%;
        border: 4px solid var(--main-color);
        height: 400px;
        width: 400px;  
        transition: all 0.3s ease-in-out;
        object-fit: cover;
    
    }
    .hero-img img:hover{
        filter: drop-shadow(4px 4px 4px grey);
        transform:translateY(-3px);
    
    }
    
    
    .hero-desc span{
        padding: 12px 25px;
        background: linear-gradient(130deg, hsl(254, 31%, 40%) 0%,hsl(255, 2%, 54%) 100%);
        box-shadow: 0px 20px 40px;
        border: 1px solid;
        border-radius: 100px;
        color: var(--base-color);
        font-weight: 700;
        font-size: 15px;
    }
    .hero-desc h2{
        font-size: var(--b-font);
        margin: 23px 0px;
        color: var(--text-color);
    }
    
    .hero-desc p{
        font-size: var(--p-font);
        font-weight: 400;
        line-height: 30px;
        margin-bottom: 30px;
        color: var(--text-color);
    }
    
    .btn{
        margin-right: 5px;
        margin-top: 5px;
        display: inline-block;
        padding: 10px 34px;
        background-color: var(--high-color);
        color: var(--base-color);
        border: 2px solid var(--high-color);
        font-size: 16px;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
    }
    
    .btn:hover{
        transform:translateY(-3px);
        background-color: var(--base-color);
        color: var(--high-color);
    }
    
    footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        padding: 1% 15%;
        display: flex;
        align-items: center;
        background-color: var(--main-color);
    }
    
    footer p{
        font-size: 18px;
        color: var(--text-color);
        margin-right: 25px;
    }
    
    footer i{
        margin-right: 10px;
        color: var(--high-color);
        transition: all 0.3s ease-in-out;
    }
    footer i:hover{
        transform:translateY(-5px);
    }
    
    
    
    
    
    .about-desc{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 100px 50px;
        padding: 100px 50px;
    }
    
    .card{
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        width: 350px;
        height: 300px;
        background-color: var(--high2-color);
        border-radius: 20px;
        transition: all 0.3s ease-in-out;
    }
    .card:hover{
        height: 410px;
    }
    
    .card-img{
        position: relative;  
        overflow: hidden; 
        width: 300px;
        height: 220px;
        background: transparent;
        top: 20px;
        border-radius: 12px;
        transition: all 0.4s ease-in-out;
    }
    
    .card:hover .card-img{
        top:-60px;
        scale: 0.75;
        box-shadow: 0 15px 45px rgba(0 0 0 0.2);
    }
    
    .card-img img{
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: fill;
    }
    
    .card-content{
        position: relative;
        width: 100%;
        padding: 3px 30px;
        height: 30px;
        overflow: hidden;
        text-align: center;
        transition: all 0.5s ease-in-out;
    }
    
    
    
    .card:hover .card-content{
        top: -40px;
        height: 220px;
    }
    
    
    .contact{
        position: relative;
        display: flex;
        gap: 100px;
        margin:20px auto;
        align-items: center;
        height: 77vh;
        width: 90%;
        padding: 10% 15%;
        background-color: var(--high2-color);
        border-radius: 20px;
    }
    
    .contact-img{
        transition: all 0.7s ease-in-out;
    }
    
    .contact-img:hover{
        scale: 1.1;
    }
    
    .contact-desc{
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        gap: 20px;
        margin-left: 100px;    
        text-align: center;
    }
    
    .contact-desc button{
        width: 50%;
    }
    
    .contact-desc input,textarea{
        padding: 10px 10px;
        border-radius: 10px  ;
        border: 3px solid var(--text-color);
        font-size: 20px;
    }
    
                 
                

copy

Source Code for the Pages Section

---

Add the following Codes under specified file inside your 'pages' folder :

Add the following code to your About.jsx file under your pages folder

                 
const About = () => {
    return (
        <section className="about-desc">
        <div className="card">
            <div className="card-img">
                <img src="/src/assets/card-img-1.png"/>
            </div>
            <div className="card-content">
                <h2>React JS</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est earum suscipit, voluptatum autem soluta repellendus
                    similique ducimus accusamus. Ad accusamus facilis autem minus deleniti architecto ex debitis quae saepe aut.</p>
                < button className="btn"  href="#"> Read More< /button >   
            </div >
        </div >
        <div className="card" >
            <div className="card-img">
                <img src="/src/assets/card-img-2.png"/ >
            </div >
            <div className="card-content">
                < h2 >Node JS</h2 >
                < p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est earum suscipit, voluptatum autem soluta repellendus
                    similique ducimus accusamus. Ad accusamus facilis autem minus deleniti architecto ex debitis quae saepe aut.</p >
                    <button className="btn"  href="#">Read More</button >   
            < / div >
        < / div >
        < div className ="card" >
            <div className="card-img">
                <img src="/src/assets/card-img-3.png" / >
            < / div >
            <div className="card-content">
                <h2>Mongo DB</ h2 >
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est earum suscipit, voluptatum autem soluta repellendus
                    similique ducimus accusamus. Ad accusamus facilis autem minus deleniti architecto ex debitis quae saepe aut.</p >
                    <button  className="btn"  href="#">Read More</button >   
            </ div >
        </ div >
    </ section >
    )
    }
    
    export default About
    
                 
                

copy

Add the following code to your Contact.jsx file under your pages folder

                 
const Contact = () => {
    return (
        <section className="contact">
        <div className="contact-img">
            <img src="/src/assets/contact-img.png" alt=""/>
        </div>
        <div className="contact-desc">
            <div>
            <h2>CONTACT US</h2>
        </div>
            
            <input type="text" name="name" placeholder="Name" />
            
            <input type="email" name="email" placeholder="Email"/>
            
            <input type="phone" name="phone" placeholder="Phone" />
            
            <textarea name="detail" placeholder="Message" ></textarea>
            <div>
            <button className="btn"  href="#">Submit</button>   
        </div>
        </div>
    
    </section>
    )
    }
    
    export default Contact
    
                 
                

copy

Add the following code to your Home.jsx file under your pages folder

                 
    const Home = () => {
        return (
            <section className="hero">
            <div className="hero-desc">
                <span>MERN || STACK</span>
                <h2>Jay Sean</h2>
                <p>
                    Hi! I'm a FullStack Developer with 5 years of experience.
                    I'm passionate about building web applications that are both user-friendly and scalable.                
                </p>
                <div className="hero-btn">                
                    <button className="btn">Hire Me</button>
                    <button className="btn">My App</button>
                </div>
            </div>
            <div className="hero-img">
                    <img src="/src/assets/alex.png" alt="my image"/>
            </div>
        
        </section>
        )
        }
        
        export default Home
    
                 
                

copy

Source Code for the Components Section

---

Add the following Codes under specified file inside your 'components' folder :

Add the following code to your Footer.jsx file under your components folder

                 
const import React from 'react'

const Footer = () => {
  return (
    <footer>
    <p>Follow me on : </p>
    <div className="social">
        <a href="#"><i className="fa-brands fa-facebook fa-xl"></i></a>
        <a href="#"><i className="fa-brands fa-x-twitter fa-xl"></i></a>
        <a href="#"><i className="fa-brands fa-linkedin fa-xl"></i></a>
    </div>
</footer>
  )
}

export default Footer
    
                 
                

copy

Add the following code to your Navbar.jsx file under your components folder

                 
    import React from 'react'
    import { Link } from 'react-router-dom'
    
    const Navbar = () => {
        return (
        <nav>
            <a className="logo" href="#">
                <span>LO</span>GO
            </a>
    
            <ul className="navbar">
                <li><Link to="/">HOME</Link>   </li>
                <li><Link to="/about">ABOUT</Link>   </li>
                <li><Link to="/contact">CONTACT</Link>   </li>
            </ul>
        </nav>
        )
    }
    
    export default Navbar
    
                 
                

copy