Code is copied!
How to create Portfolio Website Using React JS
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
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
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;
}
@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;
}
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
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
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
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
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
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
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
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
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
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