How To Create A Responsive Personal Portfolio Website From Scratch Using HTML CSS And Javascript.
How To Create A Responsive Personal Portfolio Website From Scratch Using HTML CSS And Javascript.
This Content is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.
You Can Use & Start Project From Scratch And Get Source Code from here and support me ❤ You can Motivate me through Paying using UPI , Your Single Panny will be Countable. UPI_ID : CodingGenius@ybl , CodingGenius@ibl .
And Don’t Forget To Subscribe My Youtube Channel To motivate me So I can Give You more Valuable Content .
" https://www.youtube.com/@Codingenius "
Home
About
My Journey
My Skills
Contact Me
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Complete Responsive Personal Portfolio Website HTML CSS Javascript |
Codehal
</title>
<link rel="stylesheet" href="css/style.css" />
<!-- box icons -->
<link
href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
rel="stylesheet"
/>
</head>
<body>
<!-- header design -->
<header class="header">
<a href="#" class="logo"
>Coding Genius. <span class="animate" style="--i: 1"></span
></a>
<div class="bx bx-menu" id="menu-icon">
<span class="animate" style="--i: 2"></span>
</div>
<nav class="navbar">
<a href="#home " class="active">Home</a>
<a href="#about">About</a>
<a href="#education">Education</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
<span class="active-nav"></span
><span class="animate" style="--i: 2"></span>
</nav>
</header>
<!-- home section design -->
<section class="home show-animate" id="home">
<div class="home-content">
<h1>
Hi, I'm <span>Coding Genius.</span
><span class="animate" style="--i: 2"></span>
</h1>
<div class="text-animate">
<h3>Frontend Developer.</h3>
<span class="animate" style="--i: 3"></span>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id
dolor! Provident et, ab autem odit minima, magni laboriosam blanditiis
quas officia quis atque reiciendis.
<span class="animate" style="--i: 4"></span>
</p>
<div class="btn-box">
<a href="#" class="btn">Hire Me</a>
<a href="#" class="btn">Let's Talk</a
><span class="animate" style="--i: 5"></span>
</div>
</div>
<div class="home-sci">
<a href="#"><i class="bx bxl-facebook"></i></a>
<a href="#"><i class="bx bxl-twitter"></i></a>
<a href="#"><i class="bx bxl-linkedin"></i></a
><span class="animate" style="--i: 6"></span>
</div>
<div class="home-imgHover"></div>
<span class="animate home-img" style="--i: 7"></span>
</section>
<!-- about section design -->
<section class="about" id="about">
<h2 class="heading">
About <span>Me</span><span class="animate scroll" style="--i: 1"></span>
</h2>
<div class="about-img">
<img src="/images/home_bg.png" alt="" />
<span class="circle-spin"></span
><span class="animate scroll" style="--i: 2"></span>
</div>
<div class="about-content">
<h3>
Frontend Developer !
<span class="animate scroll" style="--i: 3"></span>
</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti
sequi aut quam magnam laudantium, obcaecati modi quod explicabo iure
officiis possimus, ut id et perferendis veniam maxime aliquam
voluptatum quas fugiat corrupti magni voluptates non. Ullam obcaecati
aliquid omnis corporis ipsum, ipsa assumenda excepturi architecto
asperiores, recusandae consequatur, minus consectetur.
<span class="animate scroll" style="--i: 4"></span>
</p>
<div class="btn-box btns">
<a href="#" class="btn">Read More</a
><span class="animate scroll" style="--i: 5"></span>
</div>
</div>
</section>
<!-- education section design -->
<section class="education" id="education">
<h2 class="heading">
My <span>Journey</span
><span class="animate scroll" style="--i: 1"></span>
</h2>
<div class="education-row">
<div class="education-column">
<h3 class="title">
Education <span class="animate scroll" style="--i: 2"></span>
</h3>
<div class="education-box">
<div class="education-content">
<div class="content">
<div class="year">
<i class="bx bxs-calendar"></i>2017 - 2018
</div>
<h3>Master Degree - University</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Omnis, iusto? Corrupti sunt est reprehenderit blanditiis a cum
dolor quos provident.
</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year">
<i class="bx bxs-calendar"></i>2018 - 2019
</div>
<h3>Master Degree - University</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Omnis, iusto? Corrupti sunt est reprehenderit blanditiis a cum
dolor quos provident.
</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year">
<i class="bx bxs-calendar"></i>2019 - 2020
</div>
<h3>Master Degree - University</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Omnis, iusto? Corrupti sunt est reprehenderit blanditiis a cum
dolor quos provident.
</p>
</div>
</div>
<span class="animate scroll" style="--i: 3"></span>
</div>
</div>
<div class="education-column">
<h3 class="title">
Experience <span class="animate scroll" style="--i: 5"></span>
</h3>
<div class="education-box">
<div class="education-content">
<div class="content">
<div class="year">
<i class="bx bxs-calendar"></i>2017 - 2018
</div>
<h3>Web Developer - Company</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Omnis, iusto? Corrupti sunt est reprehenderit blanditiis a cum
dolor quos provident.
</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year">
<i class="bx bxs-calendar"></i>2018 - 2019
</div>
<h3>Web Developer - Company</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Omnis, iusto? Corrupti sunt est reprehenderit blanditiis a cum
dolor quos provident.
</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year">
<i class="bx bxs-calendar"></i>2019 - 2020
</div>
<h3>Web Developer - Company</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Omnis, iusto? Corrupti sunt est reprehenderit blanditiis a cum
dolor quos provident.
</p>
</div>
</div>
<span class="animate scroll" style="--i: 6"></span>
</div>
</div>
</div>
</section>
<!-- skills section design -->
<section class="skills" id="skills">
<h2 class="heading">
My <span>Skills</span>
<span class="animate scroll" style="--i: 1"></span>
</h2>
<div class="skills-row">
<div class="skills-column">
<h3 class="title">
Coding Skills <span class="animate scroll" style="--i: 2"></span>
</h3>
<div class="skills-box">
<div class="skills-content">
<div class="progress">
<h3>HTML<span>90%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>CSS<span>80%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>JavaScript<span>65%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>Python <span>75%</span></h3>
<div class="bar"><span></span></div>
</div>
</div>
<span class="animate scroll" style="--i: 3"></span>
</div>
</div>
<div class="skills-column">
<h3 class="title">
Professional Skills
<span class="animate scroll" style="--i: 5"></span>
</h3>
<div class="skills-box">
<div class="skills-content">
<div class="progress">
<h3>Web Design<span>95%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>Web Development<span>67%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>Graphics Design<span>85%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>SEO Marketing <span>60%</span></h3>
<div class="bar"><span></span></div>
</div>
</div>
<span class="animate scroll" style="--i: 6"></span>
</div>
</div>
</div>
</section>
<!-- contact section design -->
<section class="contact" id="contact">
<h2 class="heading">
Contact <span>Me!</span>
<span class="animate scroll" style="--i: 1"></span>
</h2>
<form action="#">
<div class="input-box">
<div class="input-field">
<input type="text" placeholder="Full Name" required />
<span class="focus"></span>
</div>
<div class="input-field">
<input type="text" placeholder="Email Address" required />
<span class="focus"></span>
</div>
<span class="animate scroll" style="--i: 3"></span>
</div>
<div class="input-box">
<div class="input-field">
<input type="number" placeholder="Mobile Number" required />
<span class="focus"></span>
</div>
<div class="input-field">
<input type="text" placeholder="Email Subject" required />
<span class="focus"></span>
</div>
<span class="animate scroll" style="--i: 5"></span>
</div>
<div class="textarea-field">
<textarea
name=""
id=""
cols="30"
rows="10"
placeholder="Your Message"
required
></textarea>
<span class="focus"></span>
<span class="animate scroll" style="--i: 7"></span>
</div>
<div class="btn-box btns">
<button type="submit" class="btn">Submit</button>
<span class="animate scroll" style="--i: 9"></span>
</div>
</form>
</section>
<!-- footer design -->
<footer class="footer">
<div class="footer-text">
<p>Copyright © 2023 by Coding Genius | All Rights Reserved.</p>
<span class="animate scroll" style="--i: 1"></span>
</div>
<div class="footer-iconTop">
<a href="#"><i class="bx bx-up-arrow-alt"></i></a>
<span class="animate scroll" style="--i: 3"></span>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>
Style.css
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
border: none;
outline: none;
scroll-behavior: smooth;
font-family: "Poppins", sans-serif;
}
:root {
--bg-color: #081b29;
--second-bg-color: #112e42;
--text-color: #ededed;
--main-color: #00abf0;
}
html {
font-size: 62.5%;
overflow-x: hidden;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 2rem 9%;
background: transparent;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
transition: 0.3s;
}
.header.sticky {
background: var(--bg-color);
}
.logo {
position: relative;
font-size: 2.5rem;
color: var(--text-color);
font-weight: 600;
}
.navbar {
position: relative;
}
.navbar a {
font-size: 1.7rem;
color: var(--text-color);
font-weight: 500;
margin-left: 3.5rem;
transition: 0.3s;
}
.navbar a:hover,
.navbar a.active {
color: var(--main-color);
}
#menu-icon {
position: relative;
font-size: 3.6rem;
color: var(--text-color);
cursor: pointer;
display: none;
}
section {
min-height: 100vh;
padding: 10rem 9% 2rem;
}
.home {
display: flex;
align-items: center;
padding: 0 9%;
background: url("/images/home.png") no-repeat;
background-size: cover;
background-position: center;
}
.home-content {
max-width: 65rem;
z-index: 99;
}
.home-content h1 {
position: relative;
display: inline-block;
font-size: 5.6rem;
font-weight: 700;
line-height: 1.3;
}
.home-content h1 span {
color: var(--main-color);
}
.home-content .text-animate {
position: relative;
width: 33.5rem;
}
.home-content .text-animate h3 {
font-size: 3.2rem;
font-weight: 700;
color: transparent;
-webkit-text-stroke: 0.7px var(--main-color);
background-image: linear-gradient(var(--main-color), var(--main-color));
background-repeat: no-repeat;
-webkit-background-clip: text;
background-position: -33rem 0;
}
.home.show-animate .home-content .text-animate h3 {
animation: homeBgText 6s linear infinite;
animation-delay: 2s;
}
.home-content .text-animate h3::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
border-right: 2px solid var(--main-color);
z-index: -1;
}
.home.show-animate .home-content .text-animate h3::before {
animation: homeCursorText 6s linear infinite;
animation-delay: 2s;
}
.home-content p {
position: relative;
font-size: 1.6rem;
margin: 2rem 0 4rem;
}
.btn-box {
position: relative;
display: flex;
justify-content: space-between;
width: 34.5rem;
height: 5rem;
}
.btn-box .btn {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: 15rem;
height: 100%;
background: var(--main-color);
border: 0.2rem solid var(--main-color);
border-radius: 0.8rem;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 0.1rem;
color: var(--bg-color);
z-index: 1;
overflow: hidden;
transition: 0.5s;
}
.btn-box .btn:hover {
color: var(--main-color);
}
.btn-box .btn:nth-child(2) {
background: transparent;
color: var(--main-color);
}
.btn-box .btn:nth-child(2):hover {
color: var(--bg-color);
}
.btn-box .btn:nth-child(2)::before {
background: var(--main-color);
}
.btn-box .btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--bg-color);
z-index: -1;
transition: 0.5s;
}
.btn-box .btn:hover::before {
width: 100%;
}
.home-sci {
position: absolute;
bottom: 4rem;
width: 170px;
display: flex;
justify-content: space-between;
}
.home-sci a {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: transparent;
border: 0.2rem solid var(--main-color);
border-radius: 50%;
font-size: 20px;
color: var(--main-color);
z-index: 1;
overflow: hidden;
transition: 0.5s;
}
.home-sci a:hover {
color: var(--bg-color);
}
.home-sci a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--main-color);
z-index: -1;
transition: 0.5s;
}
.home-sci a:hover::before {
width: 100%;
}
.home-imgHover {
position: absolute;
top: 0;
right: 0;
width: 45%;
height: 100%;
background: transparent;
transition: 3s;
}
.home-imgHover:hover {
background: var(--bg-color);
opacity: 0.8;
}
.about {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 2rem;
background: var(--second-bg-color);
padding-bottom: 6rem;
}
.heading {
position: relative;
font-size: 5rem;
margin-bottom: 3rem;
text-align: center;
}
span {
color: var(--main-color);
}
.about-img {
position: relative;
width: 25rem;
height: 25rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.about-img img {
width: 90%;
border-radius: 50%;
border: 0.2rem solid var(--main-color);
}
.about-img .circle-spin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0);
width: 100%;
height: 100%;
border-radius: 50%;
border-top: 0.2rem solid var(--second-bg-color);
border-bottom: 0.2rem solid var(--second-bg-color);
border-left: 0.2rem solid var(--main-color);
border-right: 0.2rem solid var(--main-color);
animation: aboutSpinner 8s linear infinite;
}
.about-content {
text-align: center;
}
.about-content h3 {
position: relative;
display: inline-block;
font-size: 2.6rem;
}
.about-content p {
position: relative;
font-size: 1.6rem;
margin: 2rem 0 3rem;
}
.btn-box.btns {
display: inline-block;
width: 15rem;
}
.btn-box.btns a::before {
background: var(--second-bg-color);
}
.education {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: auto;
padding-bottom: 5rem;
}
.education .education-row {
display: flex;
flex-wrap: wrap;
gap: 5rem;
}
.education-row .education-column {
flex: 1 1 40rem;
}
.education-column .title {
position: relative;
display: inline-block;
font-size: 2.5rem;
margin: 0 0 1.5rem 2rem;
}
.education-column .education-box {
position: relative;
border-left: 0.2rem solid var(--main-color);
}
.education-box .education-content {
position: relative;
padding-left: 2rem;
}
.education-box .education-content::before {
content: "";
position: absolute;
top: 0;
left: -1.1rem;
width: 2rem;
height: 2rem;
background: var(--main-color);
border-radius: 50%;
}
.education-content .content {
position: relative;
padding: 1.5rem;
border: 0.2rem solid var(--main-color);
border-radius: 0.6rem;
margin-bottom: 2rem;
overflow: hidden;
}
.education-content .content::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: var(--second-bg-color);
z-index: -1;
transition: 0.5s;
}
.education-content .content:hover::before {
width: 100%;
}
.education-content .content .year {
font-size: 1.5rem;
color: var(--main-color);
padding-bottom: 0.5rem;
}
.education-content .content .year i {
padding-right: 0.5rem;
}
.education-content .content h3 {
font-size: 2rem;
}
.education-content .content p {
font-size: 1.6rem;
padding-top: 0.5rem;
}
.skills {
min-height: auto;
padding-bottom: 7rem;
background: var(--second-bg-color);
}
.skills h2 {
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
.skills .skills-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.skills-row .skills-column {
float: 1 1 40rem;
width: 48%;
}
.skills-column .title {
position: relative;
display: inline-block;
font-size: 2.5rem;
margin: 0 0 1.5rem;
}
.skills-column .skills-box {
position: relative;
}
.skills-box .skills-content {
position: relative;
border: 0.2rem solid var(--main-color);
border-radius: 0.6rem;
padding: 0.5rem 1.5rem;
z-index: 1;
overflow: hidden;
}
.skills-box .skills-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--bg-color);
z-index: -1;
transition: 0.5s;
}
.skills-box .skills-content:hover::before {
width: 100%;
}
.skills-content .progress {
padding: 1rem 0;
}
.skills-content .progress h3 {
font-size: 1.7rem;
display: flex;
justify-content: space-between;
}
.skills-content .progress h3 span {
color: var(--text-color);
}
.skills-content .progress .bar {
height: 2.5rem;
border-radius: 0.6rem;
border: 0.2rem solid var(--main-color);
padding: 0.5rem;
margin: 1rem 0;
}
.skills-content .progress .bar span {
display: block;
height: 100%;
border-radius: 0.3rem;
background: var(--main-color);
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(1) .bar span {
width: 90%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(2) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(3) .bar span {
width: 65%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(4) .bar span {
width: 75%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(1) .bar span {
width: 95%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(2) .bar span {
width: 67%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(3) .bar span {
width: 85%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(4) .bar span {
width: 60%;
}
.contact {
min-height: auto;
padding-bottom: 7rem;
}
.contact h2 {
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
.contact form {
max-width: 70rem;
margin: 0 auto;
text-align: center;
}
.contact form .input-box {
position: relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.contact form .input-box .input-field {
position: relative;
width: 49%;
margin: 0.8rem 0;
}
.contact form .input-box .input-field input,
.contact form .textarea-field textarea {
width: 100%;
height: 100%;
padding: 1.5rem;
font-size: 1.6rem;
color: var(--text-color);
background: transparent;
border-radius: 0.6rem;
border: 0.2rem solid var(--main-color);
}
.contact form .input-box .input-field input::placeholder,
.contact form .textarea-field textarea::placeholder {
color: var(--text-color);
}
.contact form .focus {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--second-bg-color);
border-radius: 0.6rem;
z-index: -1;
transition: 0.5s;
}
.contact form .input-box .input-field input:focus ~ .focus,
.contact form .input-box .input-field input:valid ~ .focus,
.contact form .textarea-field textarea:focus ~ .focus,
.contact form .textarea-field textarea:valid ~ .focus {
width: 100%;
}
.contact form .textarea-field {
position: relative;
margin: 0.8rem 0 2.7rem;
display: flex;
}
.contact form .textarea-field textarea {
resize: none;
}
.contact form .btn-box.btns .btn {
cursor: pointer;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 2rem 9%;
background: var(--second-bg-color);
}
.footer-text,
.footer-iconTop {
position: relative;
}
.footer-text p {
font-size: 1.6rem;
}
.footer-iconTop a {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0.8rem;
background: var(--main-color);
border: 0.2rem solid var(--main-color);
border-radius: 0.6rem;
z-index: 1;
overflow: hidden;
}
.footer-iconTop a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--second-bg-color);
z-index: -1;
transition: 0.5s;
}
.footer-iconTop a:hover::before {
width: 100%;
}
.footer-iconTop a i {
font-size: 2.4rem;
color: var(--bg-color);
transition: 0.5s;
}
.footer-iconTop a:hover i {
color: var(--main-color);
}
/* ANIMATION RELOAD AND SCROLL */
.animate {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: var(--bg-color);
z-index: 98;
}
.animate.home-img {
width: 50%;
}
.logo .animate,
.navbar .animate,
#menu-icon .animate,
.home.show-animate .animate {
animation: showRight 1s ease forwards;
animation-delay: calc(0.3s * var(--i));
}
.animate.scroll {
transition: 1s ease;
transition-delay: calc(0.3s / var(--i));
animation: none;
}
section:nth-child(odd) .animate.scroll,
footer .animate.scroll {
background: var(--second-bg-color);
}
.education .education-box .animate.scroll {
width: 105%;
}
.about.show-animate .animate.scroll,
.education.show-animate .animate.scroll,
.skills.show-animate .animate.scroll,
.contact.show-animate .animate.scroll,
.footer.show-animate .animate.scroll {
transition-delay: calc(0.3s * var(--i));
width: 0;
}
/* BREAKPOINTS */
@media (max-width: 1200px) {
html {
font-size: 55%;
}
}
@media (max-width: 991px) {
.header {
padding: 2rem 4%;
}
section {
padding: 10rem 4% 2rem;
}
.home {
padding: 0 4%;
}
.footer {
padding: 2rem 4%;
}
}
@media (max-width: 850px) {
.animate.home-img {
width: 55%;
}
}
@media (max-width: 768px) {
.header {
background: var(--bg-color);
}
#menu-icon {
display: block;
}
.navbar {
position: absolute;
top: 100%;
left: -100%;
width: 100%;
padding: 1rem 4%;
background: var(--main-color);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
transition: 0.25s ease;
transition-delay: 0.25s;
z-index: 1;
}
.active {
transition-delay: 0s;
left: 0;
}
.navbar .active-nav {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--bg-color);
border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
z-index: -1;
transition: 0.25s ease;
transition-delay: 0s;
}
.active .active-nav {
transition-delay: 0.25s;
left: 0;
}
.navbar a {
display: block;
font-size: 2rem;
margin: 3rem 0;
transform: translateX(-20rem);
transition-delay: 0s;
}
.active a {
transform: translateX(0);
transition-delay: 0.25s;
}
.home-imgHover {
pointer-events: none;
background: var(--bg-color);
opacity: 0.6;
}
}
@media (max-width: 617px) {
html {
font-size: 50%;
}
.home-content h1 {
display: flex;
flex-direction: column;
}
.home-sci {
width: 160px;
}
.home-sci a {
width: 38px;
height: 38px;
}
.skills .skills-row {
justify-content: space-between;
}
.skills-row .skills-column {
width: 100%;
}
.contact form .input-box .input-field {
width: 100%;
}
}
@media (max-width: 462px) {
.home-content h1 {
font-size: 5.2rem;
}
.education {
padding: 10rem 4% 5rem 5%;
}
.footer {
flex-direction: column-reverse;
}
.footer p {
margin-top: 2rem;
text-align: center;
}
}
@media (max-width: 371px) {
.home {
justify-content: center;
}
.home-content {
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
}
.home-content h1 {
font-size: 5rem;
}
}
/* KEYFRAMES ANIMATION */
@keyframes homeBgText {
0%,
10%,
100% {
background-position: -33rem 0;
}
65%,
85% {
background-position: 0 0;
}
}
@keyframes homeCursorText {
0%,
10%,
100% {
width: 0;
}
65%,
78%,
85% {
width: 100%;
opacity: 1;
}
57%,
81% {
opacity: 0;
}
}
@keyframes aboutSpinner {
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes showRight {
100% {
width: 0;
}
}
Script.js
// toggle icon navbar
let menuIcon = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");
menuIcon.onclick = () => {
menuIcon.classList.toggle("bx-x");
navbar.classList.toggle("active");
};
// scroll sections
let sections = document.querySelectorAll("section");
let navLinks = document.querySelectorAll("header nav a");
window.onscroll = () => {
sections.forEach((sec) => {
let top = window.scrollY;
let offset = sec.offsetTop - 100;
let height = sec.offsetHeight;
let id = sec.getAttribute("id");
if (top >= offset && top < offset + height) {
// active navbar link
navLinks.forEach((links) => {
links.classList.remove("active");
document
.querySelector("header nav a[href*=" + id + "]")
.classList.add("active");
});
// active sections for animation on scroll
sec.classList.add("show-animate");
}
// if want to use Animation that repeats on scroll use this
else {
sec.classList.remove("show-animate");
}
});
// sticky header
let header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 100);
// remove toggle icon and navbar when click navbar links (scroll)
menuIcon.classList.remove("bx-x");
navbar.classList.remove("active");
// animation footer on scroll
let footer = document.querySelector("footer");
footer.classList.toggle(
"show-animate",
this.innerHeight + this.scrollY >= document.scrollingElement.scrollHeight
);
};
Gallery
Profile Photo
About Photo
Some Important ant Links Are :--
Related Videos:
1. Build a Complete Responsive Personal Portfolio Website using HTML CSS Javascript
https://youtu.be/C6IE2bcS47c
2. Build a Complete Responsive Personal Portfolio Website using HTML CSS Javascript | Dark
And Light Mode
https://youtu.be/ftWF2fP3EIk
Related PlayList:
1. Full Tutorial For Css Flex and Grid System in Web Development .
https://www.youtube.com/playlist?list=PLbBqedyzVdDvdrxb6wTG18PGAFGxU9iYX
2. Full Tutorial For Jasmine Unit Testing Using JavaScript And Angular.
https://www.youtube.com/playlist?list=PLbBqedyzVdDsUINNDz2uVX6fPldppKs6k
3. PlayList For Responsive Web Development Using Html, Css, Js , React And Angular .
https://www.youtube.com/playlist?list=PLbBqedyzVdDuMhoixLt94NqWuQlQhTaWm
Thanks For Your Love And Support.
Comments
Post a Comment