Sito Web del portfolio: Abdulrehman - Sviluppatore e designer Web

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

7 November 2024

Effetto animazione passaggio del mouse sul testo

3 January 2025

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Abdulrehman's Portfolio</title>
    <link
      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
      rel="stylesheet"
    /></head
  >
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
*{
      font-family: "Poppins", sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      text-decoration: none;
      border: none;
      outline: none;

}
:root{
    --bg-color:#1f242d;
    --second-bg-color:#323946;
    --main-color:#7cf03d;
    --white-color:#fff;
    --disabled-color:#fff3;

}
html{
    font-size: 62.5%;
}
body{
    color: var(--white-color); 
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 2rem 9%;
background: var(--bg-color);
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
visibility: hidden;
opacity: 0;
}
header.active{
animation: show-header 2.5s linear forwards;
animation-delay: 1.2s;
}

@keyframes show-header{
    100%{
        visibility: visible;
        opacity: 1;
    }
}
.logo{
    font-size: 3rem;
    color: var(--white-color);
    font-weight: 700;
   
}
nav a{
    font-size: 2rem;
    color: var(--white-color);
    font-weight: 500;
    margin-left: 3.5rem;
    transition: 0.5s;
}
nav a:hover,
nav a.active{
    color: var(--main-color);
}
#menu-icon {
font-size: 4rem;
display: none;
}
 .bars-box{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    
}
.bars-box .bar{
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    animation: hide-bars .5s ease-in-out both;
 animation-delay: calc(0.1s * var(--i));

}
@keyframes hide-bars {
0%{
    transform: translateY(0);
}
100%{
    transform: translateY(-100%);
}

} 
.bars-box.active .bar{
animation: show-bars .5s ease-in-out both;
 animation-delay: calc(0.1s * var(--i));

}
@keyframes show-bars {
0%{
    transform: translateY(-100%);
}
100%{
    transform: translateY(0);
}

}

section{
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 10rem 9% 2rem;
    /* background: var(--bg-color);  */
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
}
section.active{
  animation: show-content 1.5s linear forwards;
  animation-delay: 1.6s;
}
@keyframes show-content {
     100%{
          visibility: visible;
    opacity: 1;
    overflow: auto;
     }
}
.home{

display: flex;
     align-items: center;
   gap: 5rem;}

.home-detail h1 {
font-size: 4rem;
}
.home-detail h2 {
display: inline-block;
font-size: 3.2rem;
margin-top: -1rem;
}
.home-detail h2 span{
    position: relative
    ;
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: 0.1rem var(--main-color);
    animation: display-text 16s linear infinite;
    animation-delay: calc(-4s * var(--i));
}
    @keyframes display-text{
    25%,100%{
        display: none;
    }
}
.home-detail h2 span::before{
    content: attr(data-text);
    position: absolute;
    width: 0;
    border-right: 0.2rem solid var(--main-color);
    color: var(--main-color);
    white-space: nowrap;
    overflow: hidden;
    animation: fill-text 4s linear infinite;

}

@keyframes fill-text{
    10%,100%{
        width: 0;
    }
    70%,90%{
        width:100%;
    }
}
.home-detail p{
    font-size: 1.6rem;
    margin: 1rem 0 2.5rem;
} 
.home-detail .btn-sci{
    display: flex;
    align-items: center;
}
.btn{
    display: inline-block;
    padding: 1rem 3rem;
    background: var(--main-color);
    border: 0.2rem solid var(--main-color);
    border-radius: 4rem;
    box-shadow: 0 0 1rem var(--main-color);
    font-size: 1.6rem;
    color: var(--bg-color);
    font-weight: 500;
    transition: 0.5s;
}
.btn:hover{
    background: transparent;
    color: var(--main-color);
    box-shadow: none;
}
.home-detail .btn-sci .sci{
    margin-left: 2rem;
}
.home-detail .btn-sci .sci a{
    display: inline-flex;
    padding: 0.8rem;
    border: 0.2rem solid var(--main-color);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--main-color);
    margin: 0 0.8rem;
    transition: 0.5s;
}
.home-detail .btn-sci .sci a:hover{
    background: var(--main-color);
    color: var(--bg-color);
    box-shadow: 0 0 1rem var(--main-color);
}
.home-img .img-box{
    position: relative;
    width: 32vw;
    height: 32vh;
    border-radius: 50%;
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

}

.home-img .img-box::before, 
.home-img .img-box::after
{
content: "";
position: absolute;
width: 50rem;
height: 50rem;
background: conic-gradient(transparent,transparent,transparent,var(--main-color));
transform: rotate(0deg);
animation: rotate-border 10s linear infinite;

}
.home-img .img-box::after{
    animation-delay: -5s;
}
@keyframes rotate-border{
    100%{
        transform: rotate(360deg);
    }
}

.home-img .img-box .img-item{
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    border-radius: 50%;
    border: 0.01rem solid var(--bg-color);
    display: flex;
     justify-content: center;
    z-index: 1;
    overflow: hidden;
    
}
.home-img .img-box .img-item img{ 
    position: absolute;
     top: 3rem;
    display: block;
     width: 85%; 
     object-fit: cover; 
    mix-blend-mode: lighten;
        border: 50%;
        object-fit:cover;
}
.heading{
    font-size: 4.5rem;
    text-align: center;
    margin-bottom: 2rem;
}
.heading span{
    color: var(--main-color);
}
.services-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 2rem;

}
.services-container .services-box{
    padding: 3rem 2.5rem;
    background: var(--second-bg-color);
    border: 0.2rem solid var(--second-bg-color);
    border-radius: 1rem;
    transition: 0.5s;
}
.services-container .services-box:hover{
border-color: var(--main-color);
transform: scale(1.09);
}
.services-box .icon{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.services-box .icon i {
    font-size: 4.5rem;
    transition: 0.5s;
}
.services-box:hover .icon :not(a i) {
color: var(--main-color);
}
.services-box .icon a {
    display: inline-flex;
    background: var(--white-color);
    border-radius: 50%;
    padding: 1rem;
}
.services-box:hover .icon a {
background: var(--main-color);
}
.services-box .icon a i{
    font-size: 3rem;
    color: var(--bg-color);
    transform: rotate(225deg);
}
.services-box .icon a:hover i{
    transform: rotate(180deg);
}
.services-box h3{
    font-size: 3rem;
    margin: 0.5rem 0 2rem;
transition: 0.5s;
}
.services-box:hover h3{
    color: var(--main-color);
}
.services-box h3{
    font-size: 1.6rem;
}
.resume-container{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 5rem;
}
.resume-box h2{
font-size: 4.5rem;
}
.resume-box p{
font-size: 1.6rem;
}
.resume-box .desc{
margin: 2rem 0 2.5rem;
}
.resume-box .resume-btn{
    width: 100%;
    height: 5.3rem;
    border: 0.2rem solid var(--second-bg-color);
    background: var(--second-bg-color);
    font-size: 1.6rem;
    color: var(--white-color);
    font-weight: 500;
    margin-bottom: 2rem;
    border-radius: 0.8rem;
    cursor: pointer;
}
.resume-box .resume-btn.active{
    border-color: var(--main-color);
    color: var(--main-color);
}
.resume-detail{
    display: none;
}
.resume-detail.active{
  display: block;
}
.resume-box .heading{
    font-size: 3.5rem;
    text-align: left;
}
/* 40:00 */
.resume-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 2rem;
    height: 45rem;
    overflow:auto;
}
.resume-list::-webkit-scrollbar {
    width: .7rem;
   
}
.resume-list::-webkit-scrollbar-thumb{
    background: var(--main-color);
    border-radius: 1rem;

}
/* .resume-list:hover::-webkit-scrollbar-thumb{
    background: var(--main-color);
} */
.resume-list .resume-item{
    background: var(--second-bg-color);
    border-radius: 0.8rem;
    padding: 3rem 2.5rem;
    height: calc((45rem-2rem)/2);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.resume-item .year{
    color: var(--main-color);
}

/* 47:00 */
.resume-item h3{
    font-size: 2.2rem;
}
.resume-item .company{
    position: relative;
    margin-left: 2rem;
    margin-bottom: 2rem;

}
.resume-item .company::before{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.5rem;
    background: var(--main-color);
    border-radius: 50%;
    margin-left: -2rem;
}
/* 51:00 */
/* 53:00 */
.resume-detail.skills .resume-list{
    grid-template-columns: repeat(auto-fit,minmax(15rem, 1fr));
    height: auto;
    overflow: visible;
}
.resume-detail.skills .resume-item{
 position: relative;
align-items: center;
height: auto;

}
.resume-detail.skills .resume-item i{
    font-size: 8.5rem;
    transition: 0.5s;

}
.resume-detail.skills .resume-item:hover i{
  color: var(--main-color);
}
.resume-detail.skills .resume-item span{
  position: absolute;
  top: -20%;
  background: var(--white-color);
  color: var(--bg-color);
  font-size: 1.6rem;
  padding: 0.5rem 1rem;
  border-radius: 0.6rem;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  transition: 0.2s;
}
.resume-detail.skills .resume-item:hover span{
top: -25%;
opacity: 1;
transform: scale(1);
}
.resume-detail.about .resume-list{
    height: auto;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
}
.resume-detail.about .resume-item{
height: auto;
padding: 0 0 .5rem;
background: transparent;

}
.resume-detail.about .resume-item p{
    color: var(--main-color);
}
.resume-detail.about .resume-item p span{
    color: var(--white-color);
    margin-left: 1rem;
    font-size: 1.8rem;
}
.portfolio-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}
.portfolio-detail{
display: none;
}
.portfolio-detail.active{
display: block;
}
.portfolio-box .numb{
    font-size: 8rem;
    -webkit-text-stroke: 0.07rem var(--white-color);
    color: transparent;
    line-height: 1;

}
.portfolio-box h3{
    font-size: 3.5rem;
    margin: 0.8rem 0 2rem;
}
.portfolio-box p{
    font-size: 1.6rem;
}
.portfolio-box .tech{
    margin: 2rem 0;
    color: var(--main-color);
    border-bottom: 0.1rem solid var(--white-color);
    padding-bottom: 2rem;
}
.portfolio-box .live-github a {
     position: relative;
     display: inline-flex;
     padding: 1.3rem;
     font-size: 3rem;
     color: var(--white-color);
     border-radius: 50%;
     background: var(--second-bg-color);
transition: 0.5s;
}
.portfolio-box .live-github a:hover {
color: var(--main-color);
}
.portfolio-box .live-github a:first-child {
    margin-right: 1.5rem;
}
.portfolio-box .live-github a:first-child i {
    transform: rotate(135deg);

}
.portfolio-box .live-github a span{
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    font-size: 1.6rem;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    pointer-events: none;
    background: var(--white-color);
    color: var(--bg-color);
    opacity: 0;
    
    transition: 0.3s;
} 
.portfolio-box .live-github a:hover span{
opacity: 1;
transform: translateX(-50%) scale(1);
top: -70%;
}
.portfolio-box .portfolio-carousel{
    width: 100%;
    height: 45rem;
    border-radius: 1rem;
    overflow: hidden;
}
.portfolio-carousel .img-slide {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: 2rem;
height: inherit;
transition: 0.5s;

}
.portfolio-carousel .img-item {
    height: inherit;
}
.portfolio-carousel .img-item img {
   display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1rem;
}
.portfolio-box .navigation{
    text-align: right;
    margin-top: 2rem;
}
.portfolio-box .navigation button{
   display: inline-flex;
   padding: 0.4rem;
   background: var(--second-bg-color);
   border: 0.2rem solid var(--main-color);
   border-radius: 0.6rem;
   font-size: 4rem;
    color: var(--main-color);
    cursor: pointer;
}
.portfolio-box .navigation .arrow-right{
margin-left: 1.5rem;
}
/* 1:14 */
.portfolio-box .navigation button.disabled{

border-color: var(--second-bg-color);
    color: var(--disabled-color);
}
/* 1:17 */
.contact-container{
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 3rem;
}
.contact-container .contact-box:first-child{
    align-self: center;
}
 .contact-box h2{
    font-size: 4.5rem;
 }
 .contact-box p{
    font-size: 1.6rem;
 }
 .contact-box desc{
   margin: 1.5rem 0 2.5rem ;
 }
  .contact-box .contact-detail{
display: flex;
align-items: center;
margin: 2rem 0;
  }
  .contact-detail i{
    display: inline-flex;
    background: var(--second-bg-color);
    color: var(--main-color);
    font-size: 3rem;
    padding: 1.2rem;
    border-radius: 0.6rem;
    margin-right: 1.5rem;
  }
  .contact-detail .detail p:first-child{
    color: var(--main-color);

}
  .contact-box form{
    background: var(--second-bg-color);
    padding: 2.5rem 3.5rem 3.5rem;
    border-radius: 1rem;
    text-align: center;
  }
  .contact-box .heading{
font-size: 3.5rem;
  }
    .contact-box .field-box{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
    }
      .contact-box .field-box textarea{
grid-column: 1 / -1;
height: 26rem;
resize: none;
      }
       .contact-box .field-box textarea,
        .contact-box .field-box input{
            padding: 1.5rem;
            background: var(--bg-color);
            border: 0.15rem solid var(--bg-color);
            border-radius: 0.6rem;
            font-size: 1.6rem;
            color: var(--white-color);
        }
          .contact-box .field-box textarea:focus,
        .contact-box .field-box input:focus{
            border-color: var(--main-color);
        }
        .contact-box .btn{
            margin-top: 2rem;
            cursor: pointer;
        }
        @media  screen and (max-width: 1200px) {
            html{
                font-size: 55%;
            }
        }
        @media  screen and (max-width: 992px) {
            header{
                padding: 2rem 4%;
            }
            section{
                padding: 10rem 4% 2rem;
            }
        }
          @media  screen and (max-width: 810px) {
            .contact-box .field-box {
                grid-template-columns: 1fr;
            }
        }
          @media  screen and (max-width: 786px) {
            #menu-icon{
                display: block;
            }
            nav{
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                padding: 1rem 0;
                background: var(--bg-color);
                border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
                box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
                text-align: center;
                display: none;
            }
            nav.active{
                display: block;
            }
            nav a{
                display: block;
                margin: 4rem 0;
            }
            .home{
                flex-direction: column-reverse;
                justify-content: center;
                gap: 2rem;
            }
            .home-img .img-box {
height: 35rem;
width: 35rem;
            }
            .resume-container,
            .portfolio-container,
            .contact-container{ 
                grid-template-columns: 1fr;
            }
              .resume-container{
                gap: 3rem;
              }
              .portfolio-container .portfolio-box:first-child{
order: 1;
              }
              .contact-box .field-box{
grid-template-columns: repeat(2, 1fr);
              }
        }
        @media  screen and (max-width: 600px) {
           .home-img .img-box{
            width: 30rem;
            height: 30rem;
           }
             .contact-box .field-box{
grid-template-columns: 1fr;
              }
        }
        @media  screen and (max-width: 450px) {
          html{
            font-size: 50%;
          }
        }
        @media  screen and (max-width: 400px) {
         .home-detail, .resume-box h2, .resume-box .heading, .resume-box .desc, .resume-detail.about .resume-item{
            text-align: center;
         } 
         .home-detail .btn-sci{
            flex-direction: column-reverse;
         }
         .home-detail .btn-sci .sci{
            margin-left: 0;
            margin-bottom: 2rem;
         }
         .contact-box form{
            padding: 2.5rem 3rem 3.5rem;
         }
         .contact-box h2{
           font-size: 3.5rem;
         }
        }
  </style>

<body>
  <header class="active">
      <a href="#" class="logo">AL REHMAN DEVELOPER </a>
      <i class="bx bx-menu" id="menu-icon"></i>
      <nav>
        <a href="#" class="active">Home</a>
        <a href="#">Services</a>
        <a href="#">Resume</a>
        <a href="#">Portfolio</a>
        <a href="#">Contact</a>
      </nav>
    </header>

<section class="home active">
      <div class="home-detail">
        <h1 class="home-detail">Abdul Rehman Ahmed</h1>
        <h2>
          I'M A
          <span style="--i: 3" data-text="FULL STACK DEVELOPER"
            >FULL STACK DEVELOPER</span
          ><span style="--i: 2" data-text="UI/UX DESIGNER">UI/UX DESIGNER</span>
          <span style="--i: 1" data-text="GRAPHIC DESIGNER">
            GRAPHIC DESIGNER</span
          >
        </h2>
        <p>
          I'm a passionate web developer with a strong focus on creating
          responsive, user-friendly websites and web applications. I specialize
          in modern technologies like HTML, CSS, JavaScript, and frameworks such
          as React and Node.js, delivering clean, efficient code and seamless
          user experiences.
        </p>
        <div class="btn-sci">
          <a href="#" class="btn">Download CV</a>
          <div class="sci">
            <a href="https://github.com/abdulrehmanahmed0" target="_blank"><i class="bx bxl-github"></i></a>
            <a href="https://www.linkedin.com/in/abdul-rehman-ahmed-61b35a376?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app" target="_blank"><i class="bx bxl-linkedin" target="_blank"></i></a>
            <a href="https://www.instagram.com/pov.him.01/" target="_blank"><i class="bx bxl-instagram"></i></a>
            <a href="#"><i class="bx bxl-youtube"></i></a>
          </div>
        </div>
      </div>
      <div class="home-img">
        <div class="img-box">
          <div class="img-item">
            <img src="https://media.licdn.com/dms/image/v2/D4E03AQH9Ni9kb5Z-ow/profile-displayphoto-scale_200_200/B4EZgxLrPNGUAY-/0/1753171804091?e=2147483647&v=beta&t=IDnJOvrspC_jCXTsNyQMAZ2jyqLmjuPyQ6Z5kr-PUco" alt="MY PICTURE" height="400" width="400" />
          </div>
        </div>
      </div>
    </section>

<section class="services ">
      <h2 class="heading">MY <span>SERVICES</span></h2>
      <div class="services-container">
        <div class="services-box">
          <div class="icon">
            <i class="bx bx-code-alt"></i>
            <a href="#"><i class="bx bx-left-arrow-alt"></i></a>
          </div>
          <h3>WEB DEVELOPMENT</h3>
          <p>
            "Transforming ideas into reality! As a skilled full stack web
            developer, I craft innovative, scalable, and user-centric web
            applications that drive results. Let's build something amazing
            together!" p>
          </p>
        </div>

<div class="services-box">
          <div class="icon">
            <i class="bx bxs-paint"></i>
            <a href="#"><i class="bx bx-left-arrow-alt"></i></a>
          </div>
          <h3>UI/UX DESIGNING</h3>
          <p>
            Elevating user experiences! As a skilled UI/UX designer, I craft
            intuitive, visually stunning, and user-centered designs that drive
            engagement and conversions. Let's create something beautiful
            together!
      </p>
        </div>
        <div class="services-box">
          <div class="icon">
            <i class="bx bx-palette"></i>
            <a href="#"><i class="bx bx-left-arrow-alt"></i></a>
          </div>
          <h3>GRAPHIC DESIGNING</h3>
          <p>
            "Visual storytelling at its best! As a creative graphic designer, I
            craft stunning visuals that capture attention, convey messages, and
            leave a lasting impression. Let's design something amazing
            together!"
          </p>
        </div>
        <div class="services-box">
          <div class="icon">
            <i class="bx bx-trending-up"></i>
            <a href="#"><i class="bx bx-left-arrow-alt"></i></a>
          </div>
          <h3>SEO</h3>
          <p>
            "Boosting online visibility! As a seasoned SEO expert, I optimize
            websites to rank higher, drive more traffic, and increase
            conversions. Let's get found online!"
          </p>
        </div>
        <div class="services-box">
          <div class="icon">
            <i class="bx bx-slideshow"></i>
            <a href="#"><i class="bx bx-left-arrow-alt"></i></a>
          </div>
          <h3>VIDEO EDITING</h3>
          <p>
            "Transforming raw footage into cinematic magic! As a skilled video
            editor, I craft compelling stories, enhance visuals, and bring your
            vision to life. Let's edit something amazing together!"
          </p>
        </div>
        <div class="services-box">
          <div class="icon">
            <i class="bx bx-camera"></i>
            <a href="#"><i class="bx bx-left-arrow-alt"></i></a>
          </div>
          <h3>PHOTOGRAPHY</h3>
          <p>
            "Capturing life's precious moments! As a skilled photographer, I
            freeze time, tell stories, and preserve memories through the lens.
            Let's create some stunning visuals together!"
          </p>
        </div>
      </div>
    </section>
    <section class="resume ">
      <div class="resume-container">
        <div class="resume-box">
          <h2>WHY HIRE ME?</h2>
          <p class="desc">Why hire me? As a seasoned full stack web developer, I offer: <br>
✨Expertise in multiple programming languages and frameworks <br>
✨Proven track record of delivering high-quality web applications <br>
✨Strong understanding of UI/UX principles <br>
✨Excellent problem-solving skills <br>
✨Fast turnaround times and reliable communication <br>
Let's build something amazing together! 
</p>
<button class="resume-btn active">Experience</button>
<button class="resume-btn">Education</button>
<button class="resume-btn">Skills</button>
<button class="resume-btn">About Me</button>
        </div>
        <div class="resume-box">
          <div class="resume-detail experience active">
            <h2 class="heading">MY <span>EXPERIENCE</span></h2>
            <p class="desc">"Transformational Web Developer | 2+ Years of Experience <br>

Delivering innovative, scalable, and user-centric web applications that drive results. Expertise in: <br>

✨Front-end & Back-end Development <br>
✨Multiple Programming Languages (JavaScript, Python, PHP) <br>
✨Popular Frameworks (React, Angular, Node.js) <br>
✨UI/UX Principles <br>

Proven track record of delivering high-quality solutions on time. Let's build something amazing together!"
</p>
<div class="resume-list">
  <div class="resume-item">
    <p class="year">2025 - Present</p>
    <h3>Frontend Developer</h3>
    <p class="company">Microsoft</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maio.</p>
</div>
  <div class="resume-item">
    <p class="year">2024 - 2025</p>
    <h3>Fullstack Developer </h3>
    <p class="company">Google</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maio.</p>
</div>
  <div class="resume-item">
    <p class="year">2023 - 2024</p>
    <h3>Backend Developer </h3>
    <p class="company">Youtube</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maio.</p>
</div>
  <div class="resume-item">
    <p class="year">2022 - 2023</p>
    <h3>Backend Developer </h3>
    <p class="company">Instagram</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maio.</p>
</div>
  <div class="resume-item">
    <p class="year">2021 - 2022</p>
    <h3>Backend Developer </h3>
    <p class="company">Twitter</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maio.</p>
</div>
  <div class="resume-item">
    <p class="year">2021 - 2022</p>
    <h3>Backend Developer </h3>
    <p class="company">Twitter</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maio.</p>
  </div>
</div>
</div>
          <div class="resume-detail education">
            <h2 class="heading">MY <span>EDUCATION</span></h2>
            <p class="desc">"Transformational Web Developer | 2+ Years of Experience <br>

Delivering innovative, scalable, and user-centric web applications that drive results. Expertise in: <br>

✨Front-end & Back-end Development <br>
✨Multiple Programming Languages (JavaScript, Python, PHP) <br>
✨Popular Frameworks (React, Angular, Node.js) <br>
✨UI/UX Principles <br>

Proven track record of delivering high-quality solutions on time. Let's build something amazing together!"
</p>
<div class="resume-list">
  <div class="resume-item">
    <p class="year">2024</p>
    <h3>Programming Course</h3>
    <p class="company">Online Course</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, amet.</p>
  </div>
  <div class="resume-item">
    <p class="year">2022-2023</p>
    <h3>Programming Course</h3>
    <p class="company">Online Course</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, amet.</p>
  </div>
  <div class="resume-item">
    <p class="year">2020</p>
    <h3>Programming Course</h3>
    <p class="company">Online Course</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, amet.</p>
  </div>
  <div class="resume-item">
    <p class="year">2017-2018</p>
    <h3>Programming Course</h3>
    <p class="company">Online Course</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, amet.</p>
  </div>
  <div class="resume-item">
    <p class="year">2015-2017</p>
    <h3>Programming Course</h3>
    <p class="company">Online Course</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, amet.</p>
  </div>
  <div class="resume-item">
    <p class="year">2012-2015</p>
    <h3>Programming Course</h3>
    <p class="company">Online Course</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, amet.</p>
  </div>
</div>
          </div>
          <div class="resume-detail skills">
            <h2 class="heading">MY <span>SKILLS</span></h2>
            <p class="desc">"Transformational Web Developer | 2+ Years of Experience <br>

Delivering innovative, scalable, and user-centric web applications that drive results. Expertise in: <br>

✨Front-end & Back-end Development <br>
✨Multiple Programming Languages (JavaScript, Python, PHP) <br>
✨Popular Frameworks (React, Angular, Node.js) <br>
✨UI/UX Principles <br>

Proven track record of delivering high-quality solutions on time. Let's build something amazing together!"
</p>
<div class="resume-list">
  <div class="resume-item">
    <i class='bx bxl-html5'></i>
    <span>HTML 5</span>
  </div>
  <div class="resume-item">
    <i class='bx bxl-css3' ></i>
    <span>CSS 3</span>
  </div>
  <div class="resume-item">
    <i class='bx bxl-javascript' ></i>
    <span>JAVA SCRIPT</span>
  </div>
  <div class="resume-item">
    <i class='bx bxl-react' ></i>
    <span>React.js</span>
  </div>
  <div class="resume-item">
    <i class='bx bxl-vuejs' ></i>
    <span>Vue.js</span>
  </div>
  <div class="resume-item">
    <i class='bx bxl-tailwind-css' ></i>
    <span>Tailwind CSS</span>
  </div>
  <div class="resume-item">
    <i class='bx bxl-nodejs' ></i>
    <span>Node.js</span>
  </div>
  <div class="resume-item">
    <i class='bx bxl-mongodb' ></i>
    <span>MongoDB</span>
  </div>
</div>
          </div>
          <div class="resume-detail about">
            <h2 class="heading">ABOUT <span>ME</span></h2>
            <p class="desc">"Transformational Web Developer | 2+ Years of Experience <br>

Delivering innovative, scalable, and user-centric web applications that drive results. Expertise in: <br>

✨Front-end & Back-end Development <br>
✨Multiple Programming Languages (JavaScript, Python, PHP) <br>
✨Popular Frameworks (React, Angular, Node.js) <br>
✨UI/UX Principles <br>

Proven track record of delivering high-quality solutions on time. Let's build something amazing together!"
</p>
<div class="resume-list">
  <div class="resume-item">
    <p>Name
      <span>Abdul Rehman Ahmed </span>
    </p>
  </div>
  <div class="resume-item">
    <p>Gender
      <span>Male </span>
    </p>
  </div>
  <div class="resume-item">
    <p>Age
      <span> 17 Years</span>
    </p>
  </div>
  <div class="resume-item">
    <p>Level
      <span>Professional </span>
    </p>
  </div>
  <div class="resume-item">
    <p>City
      <span>Islamabad </span>
    </p>
  </div>
  <div class="resume-item">
    <p>Nationality
      <span>Pakistani</span>
    </p>
  </div>
  <div class="resume-item">
    <p>Experience
      <span> 10+ Years</span>
    </p>
  </div>
  <div class="resume-item">
    <p>Full Time
      <span> Availability</span>
    </p>
  </div>
  <div class="resume-item">
    <p>Freelancing
      <span> Availability</span>
    </p>
  </div>
  <div class="resume-item">
    <p>Phone
      <span>+92 303 9931703 </span>
    </p>
  </div>
  <div class="resume-item">
    <p>Availability
      <span>24/7</span>
    </p>
  </div>
  <div class="resume-item">
    <p>Languages
      <span>English , Urdu</span>
    </p>
  </div>
</div>

</div>
      </div>
    </section>

<section class="portfolio ">
      <h2 class="heading">
        Latest
        <span>Project</span>
      </h2>
      <div class="portfolio-container">
        <div class="portfolio-box">
          <div class="portfolio-detail active ">
            <p class="numb">01</p>
            <h3>Frontend Project</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam est necessitatibus, incidunt itaque et quaerat?</p>
            <div class="tech"><p>HTML 5 , CSS 3 , JavaScript</p></div>
            <div class="live-github">
              <a href="#"><i class='bx bx-arrow-back'></i><span>Live Project</span></a>
              <a href="#"><i class='bx bxl-github' ></i><span>Github Repository</span></a>
            </div>
          </div>
          <div class="portfolio-detail">
            <p class="numb">02</p>
             <h3>Full Stack Project</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam est necessitatibus, incidunt itaque et quaerat?</p>
            <div class="tech"><p>MongoDB , Express.js , React.js , Node.js</p></div>
            <div class="live-github">
              <a href="#"><i class='bx bx-arrow-back'></i><span>Live Project</span></a>
              <a href="#"><i class='bx bxl-github' ></i><span>Github Repository</span></a>
            </div>

</div>
          <div class="portfolio-detail">
            <p class="numb">03</p>
             <h3>Frontend Project</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam est necessitatibus, incidunt itaque et quaerat?</p>
            <div class="tech"><p>React.js , Tailwind CSS</p></div>
            <div class="live-github">
              <a href="#"><i class='bx bx-arrow-back'></i><span>Live Project</span></a>
              <a href="#"><i class='bx bxl-github' ></i><span>Github Repository</span></a>
            </div>

</div>
          <div class="portfolio-detail">
            <p class="numb">04</p>
             <h3>Full Stack Project</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam est necessitatibus, incidunt itaque et quaerat?</p>
            <div class="tech"><p>MongoDB , Express.js , AngularJS , Node.js</p></div>
            <div class="live-github">
              <a href="#"><i class='bx bx-arrow-back'></i><span>Live Project</span></a>
              <a href="#"><i class='bx bxl-github' ></i><span>Github Repository</span></a>
            </div>

</div>
          <div class="portfolio-detail">
            <p class="numb">05</p>
             <h3>Frontend Project</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam est necessitatibus, incidunt itaque et quaerat?</p>
            <div class="tech"><p>Vue.js , Tailwind CSS</p></div>
            <div class="live-github">
              <a href="#"><i class='bx bx-arrow-back'></i><span>Live Project</span></a>
              <a href="#"><i class='bx bxl-github' ></i><span>Github Repository</span></a>
            </div>

</div>
          <div class="portfolio-detail">
            <p class="numb">06</p>
             <h3>Full Stack Project</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam est necessitatibus, incidunt itaque et quaerat?</p>
            <div class="tech"><p>MongoDB , Express.js , Node.js , Vue.js</p></div>
            <div class="live-github">
              <a href="#"><i class='bx bx-arrow-back'></i><span>Live Project</span></a>
              <a href="#"><i class='bx bxl-github' ></i><span>Github Repository</span></a>
            </div>

</div>
        </div>
        <div class="portfolio-box">
          <div class="portfolio-carousel">
            <div class="img-slide">
              <div class="img-item">
                <img src="portfolio1.jpg" >
              </div>
              <div class="img-item">
                <img src="portfolio2.jpg">
              </div>
              <div class="img-item">
                <img src="portfolio3.jpg">
              </div>
              <div class="img-item">
                <img src="portfolio4.jpg">
              </div>
              <div class="img-item">
                <img src="portfolio5.jpg">
              </div>
              <div class="img-item">
                <img src="portfolio6.jpg">
              </div>
            </div>
          </div>
<div class="navigation">
  <button class="arrow-left disabled"><i class='bx bx-chevron-left' ></i></button>
  <button class="arrow-right"><i class='bx bx-chevron-right' ></i></button>
</div>
        </div>
      </div>
    </section>
    <section class="contact ">
      <div class="contact-container">
        <div class="contact-box">
          <h2>Let's Work Together</h2>
          <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ad tenetur magnam consequuntur maiores quis ab quisquam voluptates necessitatibus vitae.</p>
          <div class="contact-detail">
            <i class='bx bxs-phone'></i>
            <div class="detail">
              <p>Phone</p>
              <p>+92 303 9931703</p>
            </div>
          </div>
          <div class="contact-detail">
           <i class='bx bxs-envelope' ></i>
            <div class="detail">
              <p>Email</p>
              <p>abdulrehmanahmed301@gmail.com</p>
            </div>
          </div>
          <div class="contact-detail">
         <i class='bx bxs-map'></i>
            <div class="detail">
              <p>Address</p>
              <p>Islamabad , Pakistan</p>
            </div>
          </div>
        </div>
       <div class="contact-box">
        <form action="">
          <h2 class="heading">Contact <span>Me!</span></h2>
          <div class="field-box">
           <input type="text" placeholder="Full Name" required>
           <input type="email" placeholder="Email Address" required>
           <input type="text" placeholder="Phone Number" required>
           <input type="text" placeholder="Email Subject" required>
           <input name="" id="" placeholder="Your Message" required/>
          </div>
          <button type="submit" class="btn">Send Message</button>
        </form>
       </div>
      </div>
    </section>
 
<script>
  const navLinks = document.querySelectorAll('header nav a');
const logoLinks = document.querySelector('.logo');
const sections = document.querySelectorAll('section');
const menuIcon = document.querySelector('#menu-icon');
const navbar = document.querySelector('header nav');

menuIcon.addEventListener('click', () => {
  menuIcon.classList.toggle('bx-x');
  navbar.classList.toggle('active');
})

const activePage = () => {
  const header = document.querySelector('header');
  const barsBox = document.querySelector('.bars-box');

header.classList.remove('active');
setTimeout(() => {
  header.classList.add('active');
}, 1100);
  navLinks.forEach (link => {
    link.classList.remove('active');
});
barsBox.classList.remove('active');
setTimeout(() => {
  barsBox.classList.add('active');
}, 1100);
 sections.forEach (section => {
    section.classList.remove('active');
});
  menuIcon.classList.remove('bx-x');
  navbar.classList.remove('active');
}

navLinks.forEach ((link, idx) => {
    link.addEventListener('click', () => {
      if(!link.classList.contains('active')) {
        activePage();
        
        link.classList.add('active');

setTimeout(() => {
          sections[idx].classList.add('active');
        }, 1100);
 }
    });
  });
   
logoLink.addEventListener('click', () => {
   if(!navlinks[0].classList.contains('active')) {
        activePage();

navlinks[0].classList.contains('active');
         setTimeout(() => {
          sections[0].classList.add('active');
        }, 1100);
      }
});

const resumeBtns = document.querySelectorAll('.resume-btn');

resumeBtns.forEach((btn, idx) => {
  btn.addEventListener('click', () => {
    const resumeDetails = document.querySelectorAll('.resume-detail');
    
    resumeBtns.forEach(btn => {
      btn.classList.remove('active');
    });
    btn.classList.add('active');

resumeDetails.forEach(detail => {
      detail.classList.remove('active');
    });
    resumeDetails[idx].classList.add('active');
  });
});

const arrowRight = document.querySelector('.portfolio-box .navigation .arrow-right');
const arrowLeft = document.querySelector('.portfolio-box .navigation .arrow-left');

var index=0;
 
const activePortfolio = () => {
  const imgSlide = document.querySelector('.portfolio-carousel .img-slide');
const portfolioDetails = document.querySelectorAll('.portfolio-detail');

imgSlide.style.transform = `translateX(calc(${index * -100}% - ${index * 2}rem))`;
  portfolioDetails.forEach(detail => {
    detail.classList.remove('active');
  });
  portfolioDetails[index].classList.add('active')
}

arrowRight.addEventListener('click', () => {
if (index < 4){
    index++;
    arrowLeft.classList.remove('disabled');
  }
  else { 
    index = 5;
    arrowRight.classList.add('disabled');
 }

activePortfolio();
} );
arrowLeft.addEventListener('click', () => {
if (index > 1){
    index--;
    arrowRight.classList.remove('disabled');
  }
  else { 
    index = 0;
    arrowLeft.classList.add('disabled');
 }

activePortfolio();
});

</script>
  </body>
</html>

Sito Web del portfolio: Abdulrehman - Sviluppatore e designer Web

Consigliato

Effetto animazione passaggio del mouse sul testo

Un codice di Landingpage1

MODULO DI NOLEGGIO AUTO

HTML

CSS

JS

Consigliato

Effetto animazione passaggio del mouse sul testo

Un codice di Landingpage1

MODULO DI NOLEGGIO AUTO

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS