Portfolio Website: Abdulrehman - Web Developer & Designer

75 abdulrehmanahmed301

Im Editor öffnen Veröffentlichen Sie Ihren Code

Portfolio Website: Abdulrehman - Web Developer & Designer

Empfohlen

22 November 2024

App-Karte herunterladen

28 June 2025

HTML-Vorlage für die Miami Bike Rental-Website

18 October 2025

HTML-Weiter-Schaltfläche mit SVG-Pfeil

HTML

<!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>

Empfohlen

App-Karte herunterladen

HTML-Vorlage für die Miami Bike Rental-Website

HTML-Weiter-Schaltfläche mit SVG-Pfeil

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS