DEV Community

Cover image for Responsive Personal Portfolio design using HTML, CSS, and Javascript
Ashutosh Tiwari
Ashutosh Tiwari

Posted on • Originally published at incoderweb.blogspot.com

Responsive Personal Portfolio design using HTML, CSS, and Javascript

#html #css #javascript #incoder

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:

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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
        }
    }
});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

chrissiku profile image

Update and delete records on a DWN

Chris Siku -

chrissiku profile image

Connect to Web5 and on a DWN in Web5

Chris Siku -

chrissiku profile image

Query and Read records on a DWN

Chris Siku -

mnkow profile image

From Monolith to Monorepo: A Next.js Migration Story

Michal Kowalkowski -