A personal portfolio landing page is like your very own online resume, but much cooler! It's a website where you get to show off all your amazing work, skills, and experience in a super professional way. Think of it as your digital business card that introduces you to potential clients or employers and tells them, "Hey, here's what I can do!"
On this special webpage, you can display examples of your work, tell your professional story, and share how people can get in touch with you. It's like putting your best foot forward in the digital world.
Why is having a personal portfolio landing page so awesome, you ask? Well, in today's competitive job market, it helps you shine like a star. You can showcase your skills and experience in a way that's uniquely you. Even if you're just starting out and don't have tons of experience, this page can be your secret weapon.
The coolest part is that anyone, anywhere, can check it out anytime they want. So, if a potential client or employer is curious about you at 3 AM, they can see your work and find your contact info without waking you up! It's all about making it super easy for them to learn more about you and maybe even reach out for a chat or exciting opportunities.
Create a responsive personal portfolio website using HTML CSS and JavaScript
First things first, we'll start by create simple HTML file. Think of it as the skeleton of your portfolio website. In this file, we'll lay down the foundation, outlining the basic structure of your webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bijan || Portfolio website</title>
<link rel="stylesheet" href="style.css">
<!-- boxicon css link -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="overlay"></div>
<header>
<a href="#" class="logo"><span>J</span>enny</a>
<ul class="navlist">
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="right-header">
<a href="#" class="btn">Let's chat <i class='bx bx-message-dots' ></i></a>
<div class="menu-icon">
<div class="bar"></div>
</div>
</div>
</header>
<section class="home" id="home">
<div class="hero-info">
<h3>Welcome To my World</h3>
<h1>Hi I'm Jenny</h1>
<div class="text-animate">
<h2>Frontend Developer</h2>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi rerum cupiditate delectus ullam voluptates accusamus sapiente minima deleniti cum amet.</p>
<div class="btn-box">
<a href="#" class="btn">Hire Me Now ! <i class='bx bx-right-arrow-alt' ></i></a>
<a href="#" target="_blank" class="btn d-CV">Download CV <i class='bx bx-download'></i></a>
</div>
<div class="social-media">
<div class="bg-icon">
<a href="#"><i class='bx bxl-instagram'></i></a>
<span></span>
</div>
<div class="bg-icon">
<a href="#"><i class='bx bxl-github'></i></a>
<span></span>
</div>
<div class="bg-icon">
<a href="#"><i class='bx bxl-twitter'></i></a>
<span></span>
</div>
<div class="bg-icon">
<a href="#"><i class='bx bxl-facebook'></i></a>
<span></span>
</div>
</div>
</div>
<div class="img-hero">
<img src="img/main.png" alt="">
<div class="rotate-text">
<div class="text">
<p>I'm Blogger And I'm Frontend Developer And I'm Designer</p>
</div>
<span><i></i></span>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Once our HTML structure is all set up, it's time to make your portfolio look amazing with some styling using CSS. CSS is like the magic wand that lets you control how everything appears on your website. You can tweak the layout, choose your favorite colors, and even pick the perfect fonts to make it uniquely yours.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: #000;
}
body {
font-family: 'Poppins', sans-serif;
background: #e3edf7;
overflow-x: hidden;
}
header {
padding: 15px 8%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(0deg, #fff 0%, #edf4fa 51%, #e5eef7 100%);
z-index: 100;
transition: .3s;
}
header .logo {
font-size: 1.7rem;
font-weight: 700;
}
span {
background: linear-gradient(180deg, rgba(247, 1, 120, 1)0%,
rgba(160, 8, 156, 1)51%,
rgba(99, 13, 178, 1)100%);
;
color: transparent;
-webkit-background-clip: text;
}
ul.navlist {
display: flex;
}
.navlist li {
margin: 0 1rem;
}
.navlist li a {
display: inline-flex;
font-weight: 600;
}
.navlist li a:hover,
.navlist li a.active {
background: linear-gradient(180deg, rgba(247, 1, 120, 1)0%,
rgba(160, 8, 156, 1)51%,
rgba(99, 13, 178, 1)100%);
;
color: transparent;
-webkit-background-clip: text;
}
.right-header {
display: flex;
align-items: center;
justify-content: end;
grid-gap: .8rem;
}
.btn {
background: linear-gradient(180deg, rgba(247, 1, 120, 1)0%,
rgba(160, 8, 156, 1)51%,
rgba(99, 13, 178, 1)100%);
;
color: #fff;
padding: 8px 10px;
border-radius: 5px;
font-weight: 500;
transition: all .3s ease;
}
.btn:hover,
.btn-box .d-CV:hover {
box-shadow: rgba(0, 0, 0, 0.19)0px 10px 20px,
rgba(0, 0, 0, 0.23)0px 6px 6px;
}
.menu-icon {
position: relative;
display: block;
width: 30px;
height: 30px;
cursor: pointer;
}
.menu-icon .bar,
.menu-icon::after,
.menu-icon::before {
content: "";
display: none;
width: 100%;
height: 4px;
border-radius: 3px;
background: #000;
margin: 6px 0;
transition: .4s;
}
.menu-icon.active::before {
transform: rotate(-45deg) translate(-6px, 6px);
}
.menu-icon.active::after {
transform: rotate(45deg)translate(-8px, -8px);
}
.menu-icon.active .bar {
opacity: 0;
}
/* ==== home ==== */
section {
padding: 90px 8%;
}
.home {
min-height: 100vh;
height: 100%;
width: 100%;
display: flex;
grid-template-columns: repeat(2, 1fr);
align-items: center;
grid-gap: 4em;
background: linear-gradient(98deg, #e5eef7 0%, #fff 100%);
}
.hero-info {
margin-top: 3rem;
}
.hero-info h3 {
color: #90979f;
font-weight: 300;
text-transform: uppercase;
font-size: 1.1rem;
}
.hero-info h1 {
font-size: 3.5rem;
}
.text-animate {
width: 22.8rem;
position: relative;
}
.text-animate h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
color: transparent;
-webkit-text-stroke: 0.1vw #770753;
background: linear-gradient(180deg, rgba(247, 1, 120, 1)0%,
rgba(160, 8, 156, 1)51%,
rgba(99, 13, 178, 1)100%);
;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-position: 0 0;
transition: .6s;
letter-spacing: 2px;
animation: moveText 3s linear infinite;
animation-delay: 2s;
}
.text-animate h2::before {
content: "";
position: absolute;
top: 7px;
left: -3px;
width: 0;
height: 70%;
border-right: 2px solid #e6006d;
animation: moveCursorText 3s linear infinite;
animation-delay: 2s;
}
.hero-info p {
font-size: .9rem;
color: #90979f;
line-height: 1.5rem;
}
.btn-box {
display: flex;
justify-content: space-between;
width: 320px;
margin-top: 2rem;
margin-bottom: 6rem;
}
.btn-box .btn {
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.btn-box .d-CV {
background: linear-gradient(98deg, #e5eef7 0%, #fff 100%);
padding: 10px;
border-radius: 5px;
font-weight: 500;
color: #000;
box-shadow: rgba(60, 64, 67, 0.3)0px 1px 2px 0,
rgba(60, 64, 67, 0.15)0px 2px 6px 2px;
transition: all .3s ease;
}
.social-media {
display: flex;
justify-content: space-between;
width: 220px;
height: 45px;
}
.social-media a {
width: 42px;
height: 42px;
font-size: 1.5rem;
color: #e6006d;
background: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
transition: .4s;
border-radius: 50%;
z-index: 1;
}
.social-media a:hover {
background: linear-gradient(180deg, rgba(247, 1, 120, 1)0%,
rgba(160, 8, 156, 1)51%,
rgba(99, 13, 178, 1)100%);
;
color: #fff;
}
.bg-icon {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.bg-icon span {
position: absolute;
width: 50px;
height: 50px;
background: linear-gradient(180deg, rgba(247, 1, 120, 1)0%,
rgba(160, 8, 156, 1)51%,
rgba(99, 13, 178, 1)100%);
;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: animate 1s linear infinite;
}
.img-hero {
position: relative;
animation: floatImage 4s ease-in-out infinite;
animation-delay: 3s;
}
.img-hero img {
position: relative;
width: 400px;
height: auto;
z-index: 10;
}
.rotate-text {
position: absolute;
top: 4%;
left: -53px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 2rem;
}
.rotate-text span {
position: relative;
width: 442px;
height: 442px;
background: red;
border: 6px solid #eaeef0;
border-radius: 50%;
z-index: 1;
overflow: hidden;
}
.rotate-text span::before {
content: "";
position: absolute;
inset: 20px;
background: #00aaff;
border-radius: 50%;
z-index: 1;
}
.rotate-text span i {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(247, 1, 120, 1)0%,
rgba(160, 8, 156, 1)51%,
rgba(99, 13, 178, 1)100%);
;
filter: blur(5px);
animation: animate 2s linear infinite;
}
.rotate-text .text {
position: absolute;
width: 490px;
height: 490px;
background: #f2f6fb;
border-radius: 50%;
box-shadow: 0 1px 6px 5.94px rgba(0, 0, 0, 0.2);
animation: rotateText 30s linear infinite;
}
.text b {
position: absolute;
transform-origin: 0 247px;
display: block;
top: 0;
left: 50%;
font-size: 1.2rem;
}
/*==== @keyframes ====*/
@keyframes moveText {
0%,
10%,
100% {
background-position: -24rem 0;
}
65%,
85% {
background-position: 0rem 0;
}
}
@keyframes moveCursorText {
0%,
10%,
100% {
width: 0;
}
65%,
78%,
85% {
width: 100%;
opacity: 1;
}
75%,
85% {
opacity: 0;
}
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotateText {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes progress {
to {
stroke-dashoffset: var(--target);
}
}
@keyframes floatImage {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-22px);
}
100% {
transform: translateY(0);
}
}
/*==== BrakPoints ==== */
@media(max-width:1200px) {
html {
font-size: 95%;
}
}
@media(max-width:991px) {
header,
section,
footer {
padding-left: 3%;
padding-right: 3%;
}
.home,
.portfolio-box {
flex-direction: column-reverse;
}
}
@media(max-width:768px) {
.menu-icon .bar,
.menu-icon::after,
.menu-icon::before {
display: block;
}
ul.navlist {
position: absolute;
top: -1000px;
transition: all .3s ease;
width: 100%;
text-align: center;
display: block;
background: linear-gradient(0deg, #fff 0%, #edf4fa 51%, #e5eef7 100%);
left: 0;
border-top: 2px solid rgba(248, 202, 202, .7);
}
ul.navlist a {
font-size: 1.5rem;
margin: 1rem 0;
}
.navlist.active {
top: 100%;
}
.overlay {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
position: fixed;
background: rgba(0, 0, 0, 0.5);
z-index: 8;
opacity: 0;
transform: .3s;
pointer-events: none;
}
body.open .overlay {
opacity: 1;
pointer-events: auto;
}
.btn {
padding: 10px;
}
.home {
grid-gap: 0;
}
.fillter-buttons button {
padding: 10px;
font-size: .8rem;
}
.hero-info {
text-align: center;
}
.text-animate,
.btn-box,
.social-media {
margin: 25px auto;
}
}
@media(max-width:530px) {
html {
font-size: 80%;
}
section {
padding: 50px 3%;
}
}
Finally, we need to create an interactivity function in JavaScript.
// active hamburger menu
let menuIcon = document.querySelector(".menu-icon");
let navlist = document.querySelector(".navlist")
menuIcon.addEventListener("click",()=>{
menuIcon.classList.toggle("active");
navlist.classList.toggle("active");
document.body.classList.toggle("open");
});
// remove navlist
navlist.addEventListener("click",()=>{
navlist.classList.remove("active");
menuIcon.classList.remove("active");
document.body.classList.remove("open");
})
// rotate text js code
let text = document.querySelector(".text p");
text.innerHTML = text.innerHTML.split("").map((char,i)=>
`${char}`
).join("");