Hello friends, today in this blog, we will learn how to create a responsive personal portfolio design using HTML, CSS, and Javascript. In our previous blog, we saw how to create a custom select input with a search option in HTML, CSS, and Javascript. Earlier I shared many projects related to HTML, CSS, and Javascript. You can check here. Now it's time to create a portfolio design. If you are interested then you can check my other javascript projects after reading this blog. My Javascript blogs.
An online portfolio (may also be called a digital portfolio or e-portfolio) is an online representation of the work of an individual. A portfolio website provides professional information about an individual or a company and presents a showcase of their work.
You may like these:
- Random Password Generator
- Responsive Sidebar Menu Design
- Glassmorphism login Form
- Responsive Animated Card Design
On this site [Personal Portfolio], there are five sections on one page – Home, About, Services, Teams, and Contact, and each section is attractive and eye-catching. On the home page of this site, on the top, there is a sticky navigation bar with a logo on the left side and some navigation links are on the right side. On the left side of the home page, there are texts which are about the author’s profession, and two buttons labeled “View Work” and “Hire me” as you can see in the image above.
If you like this portfolio and want to get the source codes, I have provided all the codes of this program below and I’ve also provided the download link of this program where you can easily download the source files of this program. You can use this portfolio with your creative customization and can take this portfolio to the next level with your creativity.
Preview is available here.
HTML Code
<!-- --------------------- Created By InCoder --------------------- -->
<!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>Home - Ashutosh Tiwari</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
</head>
<body>
<!-- --------------------- Home Section --------------------- -->
<section class="home-section" id="home-section">
<header class="navbar">
<div class="logo">
<a href="javascript:void(0)">
<p>Ashutosh Tiwari</p>
</a>
</div>
<nav>
<div class="menuBtn">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li><a href="javascript:void(0)" id="home">Home</a></li>
<li><a href="#about-section" id="about">About</a></li>
<li><a href="#services-section" id="service">Services</a></li>
<li><a href="#team-section" id="team">Team</a></li>
<li><a href="#contact-section" id="contact">Contact</a></li>
</ul>
</nav>
</header>
<div class="home">
<div class="welcomeSection">
<h1>Welcome!</h1>
<p>I am a <span class="auto-type"></span></p>
<div class="welcomeAction">
<a href="#"><button class="inBtn inBtn-outline">View Work</button></a>
<a href="#"><button class="inBtn inBtn-primary">Hire Me</button></a>
</div>
</div>
</div>
</section>
<!-- --------------------- Home Section End --------------------- -->
<!-- --------------------- About Section --------------------- -->
<section class="about-section" id="about-section">
<div class="skills">
<div class="sectionTitle">About Me</div>
<div class="skillContainer">
<div class="progressBar">
<p>HTML</p>
<div class="progress">
<div class="percent" data-percent="80%"></div>
</div>
</div>
<div class="progressBar">
<p>CSS</p>
<div class="progress">
<div class="percent" data-percent="60%"></div>
</div>
</div>
<div class="progressBar">
<p>Javascript</p>
<div class="progress">
<div class="percent" data-percent="40%"></div>
</div>
</div>
</div>
</div>
<div class="image">
</div>
<div class="details">
<div class="name">
<h6>Who Am I</h6>
<h3>Ashutosh Tiwari</h3>
</div>
<h4 class="profession">Web Designer</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci rerum nemo architecto facilis quibusdam
autem facere at nam. Ex fugiat molestiae perferendis ut<br><br> placeat explicabo eveniet numquam porro
vero, quia nam possimus, non animi itaque eaque voluptate ad. Hic eveniet fuga enim libero mollitia
consectetur vitae soluta maxime deleniti, ipsa in accusantium corporis tenetur</p>
<div class="followMe">
<p>Follow Me:</p>
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-dev"></i>
</div>
</div>
</section>
<!-- --------------------- About Section End --------------------- -->
<!-- --------------------- Services Section --------------------- -->
<section class="services-section" id="services-section">
<div class="serviceTitle">Services</div>
<div class="cards">
<div class="card">
<div class="icon">
<i class="fa-solid fa-pencil"></i>
</div>
<div class="title">
<p>Web Design</p>
</div>
<div class="desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, ipsam.
</div>
</div>
<div class="card">
<div class="icon">
<i class="fa-brands fa-codepen"></i>
</div>
<div class="title">
<p>Web Development</p>
</div>
<div class="desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, ipsam.
</div>
</div>
<div class="card">
<div class="icon">
<i class="fa-brands fa-blogger-b"></i>
</div>
<div class="title">
<p>Blogging</p>
</div>
<div class="desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, ipsam.
</div>
</div>
<div class="card">
<div class="icon">
<i class="fa-solid fa-handshake-simple"></i>
</div>
<div class="title">
<p>Freelance</p>
</div>
<div class="desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, ipsam.
</div>
</div>
</div>
</section>
<!-- --------------------- Services Section End --------------------- -->
<!-- --------------------- Team Section --------------------- -->
<section class="team-section" id="team-section">
<div class="teamTitle">My Team</div>
<div class="tramMembers owl-carousel">
<div class="memberCard">
<div class="img"></div>
<div class="name">Jhon Deo</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="memberCard">
<div class="img"></div>
<div class="name">Jhon Deo</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="memberCard">
<div class="img"></div>
<div class="name">Jhon Deo</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="memberCard">
<div class="img"></div>
<div class="name">Jhon Deo</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</section>
<!-- --------------------- Team Section End --------------------- -->
<!-- --------------------- Contact Section --------------------- -->
<section class="contact-section" id="contact-section">
<div class="contactTitle">Contact Me</div>
<div class="container">
<div class="details">
<div class="phone">
<p>Phone: <br><span>+91 9684357286</span></p>
</div>
<div class="address">
<p>Address: <br><span>A 1858, xyz place state, country.</span></p>
</div>
<div class="email">
<p>Email: <br><span>example@xyzdomain.com</span></p>
</div>
</div>
<div class="contact-form">
<div class="input-group">
<div class="input-field">
<input type="text" placeholder="Name:">
</div>
<div class="input-field">
<input type="email" placeholder="Email:">
</div>
</div>
<div class="input-field">
<textarea placeholder="Message:" cols="30" rows="6"></textarea>
</div>
<button class="inBtn inBtn-primary">Submit</button>
</div>
</div>
</section>
<!-- --------------------- Contact Section End --------------------- -->
<!-- --------------------- Footer Section --------------------- -->
<footer class="footer">
<h4 class="footerLogo">Ashutosh Tiwari</h4>
<div class="followMe">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-blogger-b"></i>
</div>
<div class="copyright">
<p>Copyright <i class="fa-regular fa-copyright"></i> 2022 <span>Ashutosh Tiwari</span>. Created By InCoder</p>
</div>
</footer>
<!-- --------------------- Footer Section End --------------------- -->
<div class="backToTop">
<i class="fa-solid fa-arrow-up"></i>
</div>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS Code
/* --------------------- Created By InCoder --------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
background: linear-gradient(45deg, #010207, #00070d);
}
a {
color: #fff;
text-decoration: none;
}
/* ---------------- navbar ---------------- */
.navbar {
display: flex;
height: 4.2rem;
padding: 0 1.5rem;
position: relative;
align-items: center;
justify-content: space-between;
}
.navbar.active {
z-index: 2;
width: 100%;
position: fixed;
background: #021422;
animation: showMenu 0.3s;
}
@keyframes showMenu {
from {
transform: translateY(-2rem);
}
to {
transform: translateY(0rem);
}
}
.navbar .logo {
font-weight: 600;
font-size: clamp(1rem, 4vw, 1.6rem);
}
.navbar nav ul {
display: flex;
}
.navbar nav ul li {
margin: 0 0.6rem;
list-style: none;
position: relative;
text-transform: uppercase;
}
.navbar nav ul li::before {
content: "";
left: 0;
top: -2px;
height: 1px;
background: #fff;
position: absolute;
transform: scale(0);
width: calc(50% - 0.5rem);
transform-origin: center;
transition: transform 0.3s cubic-bezier(0.18, 0.02, 0, 1.99);
}
.navbar nav ul li:hover::before {
transform: scale(1);
}
.navbar nav ul li::after {
content: "";
right: 0;
bottom: -2px;
height: 1px;
background: #fff;
position: absolute;
transform: scale(0);
width: calc(50% - 0.5rem);
transform-origin: center;
transition: transform 0.3s cubic-bezier(0.18, 0.02, 0, 1.99);
}
.navbar nav ul li:hover::after {
transform: scale(1);
}
.menuBtn {
z-index: 2;
width: 3rem;
height: 3rem;
display: none;
cursor: pointer;
overflow: hidden;
position: relative;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.menuBtn span {
height: 0.18rem;
position: absolute;
border-radius: 8px;
background-color: #fff;
transition: 0.3s;
}
.menuBtn span:nth-child(1) {
left: 10%;
width: 50%;
transform: translateY(-12px);
}
.menuBtn.active span:nth-child(1) {
left: 10%;
width: 80%;
transform: translateY(0px) rotate(45deg);
}
.menuBtn span:nth-child(2) {
width: 80%;
}
.menuBtn.active span:nth-child(2) {
opacity: 0;
transform: translateX(40px);
}
.menuBtn span:nth-child(3) {
left: 10%;
width: 50%;
transform: translateY(12px);
}
.menuBtn.active span:nth-child(3) {
left: 10%;
width: 80%;
transform: translateY(0px) rotate(135deg);
}
/* ---------------- navbar end ---------------- */
/* ---------------- Home Section ---------------- */
.home-section {
color: #fff;
height: 100vh;
overflow-y: hidden;
background: url("https://drive.google.com/uc?id=1DXKOaZJ72G-FG07apoiXRDZXQ9KUNuLp&export=view")
no-repeat right bottom / clamp(35rem, 50vw, 70rem);
}
.home {
width: 100%;
display: flex;
min-height: 110vh;
align-items: center;
}
.home .welcomeSection {
width: 100%;
height: 15vh;
display: flex;
align-items: center;
justify-content: end;
flex-direction: column;
}
.home .welcomeSection h1,
p {
width: max-content;
}
.home .welcomeSection h1 {
font-weight: 200;
font-size: clamp(2rem, 8vw, 6rem);
}
.home .welcomeSection p {
font-size: clamp(2rem, 8vw, 6rem);
}
.home .welcomeSection p span {
color: #d28021;
}
.welcomeAction {
margin-top: 1.5rem;
}
.welcomeAction button {
margin: 0 0.6rem;
}
.welcomeAction button:last-child {
padding: 0.4rem 2rem !important;
}
.inBtn {
outline: none;
font-size: 1rem;
cursor: pointer;
border-radius: 50rem;
padding: 0.4rem 1.4rem;
transition: background 0.2s ease-in-out, color 0.2s ease-in-out,
border 0.2s ease-in-out;
}
.inBtn-primary {
color: #fff;
background: #d28021;
border: 2px solid #d28021;
}
.inBtn-primary:hover {
color: #d28021;
background: #ffffff;
border: 2px solid #fff;
}
.inBtn-outline {
color: #fff;
background: transparent;
border: 2px solid #fff;
}
.inBtn-outline:hover {
color: #d28021;
background: #ffffff;
border: 2px solid #fff;
}
/* ---------------- Home Section End ---------------- */
/* ---------------- About Section ---------------- */
.about-section {
height: 42rem;
display: flex;
background: #010910;
justify-content: center;
}
.about-section :is(.skills, .image, .details) {
width: 25rem;
height: 100%;
margin: 0 1rem;
max-width: 25rem;
}
.about-section .sectionTitle {
font-weight: 800;
color: #0d141b;
padding-top: 10.6rem;
font-size: clamp(4rem, 4vw, 5rem);
transition: color 0.3s ease-in-out;
}
.about-section:hover .sectionTitle {
color: transparent;
-webkit-text-stroke: 1px #212830;
}
.skillContainer {
width: 100%;
color: #fff;
margin-top: 1rem;
margin-left: 1rem;
}
.skillContainer .progressBar {
margin-top: 1rem;
}
.skillContainer .progress {
height: 0.5rem;
margin-top: 0.8rem;
border-radius: 50rem;
background: #191f25;
}
.skillContainer .progress .percent {
height: 100%;
width: 0%;
position: relative;
border-radius: 50rem;
transition: all 1.5s;
background: #d28021;
}
.skillContainer .progress .percent::before {
top: -16px;
right: 0;
font-size: 0.7rem;
position: absolute;
content: attr(data-percent);
}
.about-section .image {
max-height: 100%;
overflow: hidden;
background: #0b141c
url("https://drive.google.com/uc?id=1gTOPNHrZna3qVr2k-99ais05B6KS7jN2&export=view")
no-repeat center bottom;
background-position-y: 7rem;
}
.about-section .details {
color: #fff;
padding-top: 8.6rem;
}
.about-section .details .name h6 {
font-size: 1rem;
font-weight: 200;
letter-spacing: 8px;
text-transform: uppercase;
}
.about-section .details .name h3 {
font-weight: 600;
font-size: 1.5rem;
margin-top: 0.5rem;
width: max-content;
letter-spacing: 2px;
background: #d28021;
margin-bottom: 1.2rem;
text-transform: uppercase;
padding: 0px 0.5rem 0.3rem 0.5rem;
}
.about-section .details p {
font-size: 0.9rem;
line-height: 26px;
max-width: fit-content;
color: rgb(255 255 255 / 60%);
}
.about-section .details .profession {
font-weight: 400;
font-size: 1.2rem;
margin-bottom: 0.6rem;
}
.about-section .details .followMe {
display: flex;
align-items: center;
}
.about-section .details .followMe p {
color: #d28021;
margin-right: 0.4rem;
}
.about-section .details .followMe i {
cursor: pointer;
margin: 2rem 1rem;
transition: color 0.3s;
color: rgb(255 255 255 / 60%);
}
.about-section .details .followMe i:hover {
color: #fff;
}
/* ---------------- About Section End ---------------- */
/* ---------------- Service Section ---------------- */
.services-section {
background: #040c13;
padding-bottom: 1.2rem;
}
.serviceTitle {
font-weight: 800;
color: #0d141b;
text-align: center;
padding-top: 1.6rem;
font-size: clamp(4rem, 4vw, 5rem);
transition: color 0.3s ease-in-out;
}
.services-section:hover .serviceTitle {
color: transparent;
-webkit-text-stroke: 1px #212830;
}
.services-section .cards {
color: #fff;
display: flex;
margin-top: 1rem;
align-items: center;
justify-content: center;
}
.services-section .cards .card {
width: 14rem;
display: flex;
margin: 0 0.4rem;
max-width: 16rem;
align-items: center;
margin-bottom: 1.2rem;
background: #010910;
flex-direction: column;
justify-content: center;
}
.services-section .cards .card .icon {
z-index: 1;
font-size: 3rem;
color: #d28021;
margin-top: 2rem;
position: relative;
margin-bottom: 1.6rem;
}
.services-section .cards .card .icon::before {
content: "";
top: 50%;
left: 50%;
width: 4rem;
height: 4rem;
padding: 0.4rem;
position: absolute;
border-radius: 1rem;
background: rgb(255 255 255 / 5%);
transform: translate(-50%, -50%) rotate(45deg);
transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}
.services-section .cards .card:hover {
color: #fff !important;
}
.services-section .cards .card:hover .icon::before {
background: rgb(210 128 33 / 10%);
transform: translate(-50%, -50%) rotate(90deg);
}
.services-section .cards .card .desc {
font-size: 0.8rem;
margin-top: 1rem;
max-width: 10rem;
line-height: 20px;
text-align: center;
margin-bottom: 0.8rem;
color: rgb(255 255 255 / 60%);
}
/* ---------------- Service Section End ---------------- */
/* ---------------- Team Section ---------------- */
.teamTitle {
font-weight: 800;
color: #010910;
text-align: center;
padding-top: 1.6rem;
margin-bottom: 1rem;
font-size: clamp(4rem, 4vw, 5rem);
transition: color 0.3s ease-in-out;
}
.team-section:hover .teamTitle {
color: transparent;
-webkit-text-stroke: 1px #212830;
}
.tramMembers {
color: #fff;
display: flex;
padding-top: 1rem;
align-items: center;
justify-content: center;
}
.tramMembers .memberCard {
width: 16rem;
display: flex;
margin: 0 1rem;
max-width: 20rem;
align-items: center;
margin-bottom: 1rem;
border-radius: 0.8rem;
flex-direction: column;
justify-content: center;
transition: background 0.3s ease-in-out;
border: 2px solid rgb(255 255 255 / 6%);
}
.tramMembers .memberCard:hover {
background: rgb(210 128 33 / 10%);
}
.memberCard .img {
width: 6rem;
height: 6rem;
position: relative;
margin-top: 1.5rem;
margin-bottom: 1rem;
border-radius: 50rem;
background: url("https://drive.google.com/uc?id=1fEVU_QIj8GnWow6tEvWMHd772Sl-Qcsq&export=view")
no-repeat center / 100%;
}
.memberCard .img::before {
content: "";
top: 50%;
left: 50%;
width: 120%;
z-index: -1;
height: 120%;
position: absolute;
border-radius: 50rem;
transform: translate(-50%, -50%);
background: rgb(255 255 255 / 3%);
transition: background 0.3s ease-in-out;
}
.tramMembers .memberCard:hover .img::before {
background: rgb(210 128 33 / 10%);
}
.memberCard .name {
font-size: 1.2rem;
}
.memberCard p {
font-size: 0.9rem;
max-width: 12rem;
text-align: center;
margin-bottom: 1rem;
}
.owl-item.active {
display: grid;
place-items: center;
}
.owl-nav {
display: none;
}
.owl-dots {
display: flex;
margin-bottom: 3rem;
align-items: center;
justify-content: center;
}
.owl-dots .owl-dot {
width: 1.5rem;
height: 0.8rem;
margin: 0 0.4rem;
border-radius: 50rem;
transition: width 0.3s, transform 0.3s;
border: 2px solid rgb(255 255 255 / 20%) !important;
}
.owl-dots .owl-dot.active {
width: 2.5rem;
transform: scale(1.1);
background: rgb(13 20 27);
border: 2px solid rgb(13 20 27) !important;
}
/* ---------------- Team Section End ---------------- */
/* ---------------- Contact Section ---------------- */
.contact-section {
background: #040c13;
}
.contactTitle {
font-weight: 800;
color: #0d141b;
text-align: center;
padding-top: 1.6rem;
font-size: clamp(4rem, 4vw, 5rem);
transition: color 0.3s ease-in-out;
}
.contact-section:hover .contactTitle {
color: transparent;
-webkit-text-stroke: 1px #212830;
}
.contact-section .container {
display: flex;
margin-top: 1.2rem;
align-items: center;
padding-bottom: 2rem;
justify-content: space-evenly;
}
.contact-section .container .details {
margin-right: 1rem;
color: rgb(255 255 255 / 40%);
}
.contact-section .container .details p {
color: #d28021;
margin-top: 0.8rem;
}
.contact-section .container .details span {
color: rgb(255 255 255 / 40%);
}
.contact-section .container .contact-form .input-group {
display: flex;
margin-bottom: 1rem;
justify-content: space-between;
}
.contact-section .container .contact-form .input-field {
margin: 0 0.4rem;
}
.contact-section .container .contact-form .input-field input {
height: 2.8rem;
padding: 0 0.6rem;
border-radius: 2rem;
background: transparent;
color: rgb(255 255 255 / 50%);
border: 2px solid rgb(255 255 255 / 25%);
}
.contact-section .container .contact-form .input-field input:focus {
outline: none;
border: 2px solid #d28021 !important;
}
.contact-section .container .contact-form .input-field textarea {
height: auto;
width: 100%;
padding: 0 0.6rem;
padding-top: 0.4rem;
border-radius: 1.2rem;
background: transparent;
color: rgb(255 255 255 / 50%);
border: 2px solid rgb(255 255 255 / 25%);
}
.contact-section .container .contact-form .input-field textarea:focus {
outline: none;
border: 2px solid #d28021 !important;
}
.contact-section .container .contact-form button {
float: right;
margin-top: .6rem;
margin-right: 1rem;
}
@media (max-width: 700px) {
.contact-section .container {
display: block;
}
.contact-section .container .details {
width: 90%;
margin: 0 1rem;
margin-bottom: 2rem;
}
.contact-section .container .contact-form {
margin: 0 .58rem;
overflow-x: hidden;
}
.contact-section .container .contact-form .input-group {
flex-direction: column;
}
.contact-section .container .contact-form .input-group input {
width: 100%;
margin-top: .5rem;
}
}
/* ---------------- Contact Section End ---------------- */
/* ---------------- Footer Section ---------------- */
.footer{
overflow-x: hidden;
background: #010309;
}
.footer .footerLogo {
font-size: 2rem;
margin-top: .4rem;
text-align: center;
margin-bottom: .4rem;
color: rgb(255 255 255 / 80%);
}
.footer .followMe {
display: flex;
flex-wrap: wrap;
justify-content: center;
color: rgb(255 255 255 / 50%);
}
.footer .followMe i {
cursor: pointer;
font-size: 1.4rem;
position: relative;
margin: 1.5rem 1.4rem;
}
.footer .followMe i::after{
content: "";
top: 50%;
left: 50%;
width: 160%;
height: 160%;
padding: .2rem;
position: absolute;
border-radius: .6rem;
background: rgb(255 255 255 / 5%);
transform: translate(-50%, -50%) rotate(45deg);
transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.footer .followMe i:hover::after {
background: rgb(210 128 33 / 10%);
transform: translate(-50%, -50%) rotate(90deg);
}
.footer .copyright {
display: flex;
margin-bottom: 1rem;
justify-content: center;
color: rgb(255 255 255 / 50%);
}
.footer .copyright span {
cursor: pointer;
color: #d28021;
}
/* ---------------- Footer Section End ---------------- */
.backToTop {
opacity: 0;
right: 1rem;
bottom: 1rem;
width: 2.5rem;
display: grid;
color: #fff;
height: 2.5rem;
cursor: pointer;
position: fixed;
place-items: center;
pointer-events: none;
border-radius: 0.4rem;
background: #021422;
transition: opacity 0.3s ease-in-out;
}
.backToTop.show {
opacity: 1;
pointer-events: auto;
}
@media (max-width: 665px) {
.navbar nav ul {
top: 0%;
z-index: 1;
left: -100%;
width: 100%;
height: 100vh;
position: absolute;
align-items: center;
background: #010910;
flex-direction: column;
justify-content: center;
transition: left 0.4s ease-in-out;
}
.navbar nav ul.show {
left: 0;
}
.navbar nav ul li {
font-size: 1.2rem;
margin: clamp(1rem, 4vh, 1.8rem) 0;
}
.menuBtn {
display: flex;
}
.services-section .cards {
display: grid;
grid-template-columns: auto auto;
}
}
@media (max-width: 480px) {
.services-section .cards {
display: grid;
overflow-x: hidden;
margin: 0 1rem;
grid-template-columns: auto;
}
.services-section .cards .card {
width: 20rem;
max-width: 20rem;
}
}
@media (max-width: 800px) {
.about-section {
flex-wrap: wrap;
}
.skillContainer {
width: calc(100% - 3rem);
}
.about-section .sectionTitle {
padding-top: 3.8rem;
}
.about-section .sectionTitle {
text-align: center;
font-size: clamp(3rem, 4vw, 5rem);
}
.about-section :is(.skills, .details) {
height: auto;
}
.about-section {
height: 100%;
}
.welcomeAction button:last-child {
padding: 0.4rem 1rem !important;
}
.about-section .image {
height: 70vh;
margin-top: 3rem;
margin-bottom: 2rem;
background-size: 25rem;
background-position-y: 0%;
}
.about-section .details {
padding-top: 1rem;
}
}
Javascript Code
var typed = new Typed('.auto-type', {
strings: ["Developer.",
"Designer.",
"Blogger.",
"Freelancer."],
smartBackspace: true,
typeSpeed: 100,
typeSpeed: 100,
backSpeed: 50,
loop: true,
})
let btn = document.querySelector('.menuBtn')
let menu = document.querySelector('.navbar nav ul')
let links = document.querySelectorAll('.navbar nav ul li')
let navbar = document.querySelector('.navbar')
let backToTop = document.querySelector('.backToTop')
let progressPercent = document.querySelectorAll('.percent')
links.forEach(link => {
link.addEventListener('click', e => {
let id = e.target.getAttribute('id')
if(id == 'home'){
window.scrollTo(0, 0)
}
})
})
btn.addEventListener('click', function () {
btn.classList.toggle('active')
menu.classList.toggle('show')
})
backToTop.addEventListener('click', function () {
window.scrollTo(0, 0)
})
function setNavbarClass() {
if (window.scrollY > 167) {
navbar.classList.add('active')
backToTop.classList.add('show')
} else {
navbar.classList.remove('active')
backToTop.classList.remove('show')
}
}
function progress() {
progressPercent.forEach(percentDiv => {
if (window.scrollY >= 533) {
let percent = percentDiv.dataset.percent
percentDiv.style.width = percent
}
})
}
progress()
setNavbarClass()
window.addEventListener('scroll', (e) => {
setNavbarClass()
progress()
})
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
nav: true,
margin: 10,
center: true,
autoplay: true,
autoplayTimeout: 1500,
responsive: {
0: {
items: 1
},
540: {
items: 2
},
960: {
items: 3
},
1200: {
items: 4
},
1500: {
items: 5
}
}
});
Top comments (0)