<!doctype html>
<html lang="en">

<head>
  <!-- Title of The Page -->
  <title>Ahmad Saparudin - Software Developer</title>
  <!-- Meta Informations -->
  <meta charset="utf-8">
  <meta name="description" content="Personal Portfolio Ahmad Saparudin">
  <meta name="keywords"
    content="Ahmad Saparudin, Personal Portfolio HTML Template , template, bootstrap 5, ui template kit, Ahmad Saparudin Personal Portfolio, html, css">
  <meta name="author" content="Ahmad Saparudin">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Favicon -->
  <link type="image/x-icon" rel="shortcut icon" href="assets/images/logo/portfolio.png" />
  <!-- Font CSS -->
  <link type="text/css" rel="stylesheet" href="assets/fonts/font.css" />
  <!-- Font-Awesome All CSS -->
  <link type="text/css" rel="stylesheet" href="assets/css/all.css" />
  <!-- Bootstrap CSS -->
  <link type="text/css" rel="stylesheet" href="assets/css/bootstrap.min.css" />
  <!-- Owlcarousel CSS -->
  <link type="text/css" rel="stylesheet" href="assets/css/owl.carousel.min.css" />
  <!-- Fancybox CSS -->
  <link type="text/css" rel="stylesheet" href="assets/css/jquery.fancybox.min.css" />
  <!-- Animate CSS -->
  <link type="text/css" rel="stylesheet" href="assets/css/animate.min.css" />
  <!-- colors CSS -->
  <link rel="stylesheet" type="text/css" href="assets/css/colors.css" />
  <!-- Styles CSS -->
  <link type="text/css" rel="stylesheet" href="assets/css/styles.css" />
  <!-- Live Style Switcher - demo only -->
  <link id="style-switch" href="assets/css/colors/orange.css" media="screen" rel="stylesheet" type="text/css">
  <!-- Responsive CSS -->
  <link type="text/css" rel="stylesheet" href="assets/css/responsive.css" />
  <!-- Custom CSS -->
  <style>
    .img-article {
      width: 100%;
      /* Set the width to 100% of the container */
      height: 200px;
      /* Set a fixed height */
      overflow: hidden;
      /* Hide the overflow */
      position: relative;
      /* Position relative for absolute positioning of img */
    }

    .img-article img {
      width: 100%;
      /* Ensure the image fills the container width */
      height: auto;
      /* Maintain aspect ratio */
      position: absolute;
      /* Position absolute to allow centering */
      top: 50%;
      /* Move the image down by 50% of its height */
      left: 50%;
      /* Move the image right by 50% of its width */
      transform: translate(-50%, -50%);
      /* Center the image */
      object-fit: cover;
      /* Crop the image to fit the container */
    }
  </style>
</head>

<body oncontextmenu="return false;">
  <!-- Body Part Start -->
  <div class="gaspar" data-magic-cursor="show" data-color="crimson">
    <!-- Pre-Loader Start-->
    <div id="preloader">
      <div class="loader_line"></div>
    </div>
    <!-- Pre-Loader end -->
    <!-- Header-section Start-->
    <div class="header-holder services-section text-center animate__animated animate__zoomIn">
      <div class="navigation">
        <ul class="nav">
          <li class="list active">
            <a href="#home" class="active">
              <span class="icon">
                <i class="fas fa-house-user"></i>
              </span>
              <div class="social__tooltip social__tooltip-bottom">Home</div>
            </a>
          </li>
          <li class="list">
            <a href="#about">
              <span class="icon">
                <i class="fas fa-user-alt"></i>
              </span>
              <div class="social__tooltip social__tooltip-bottom">About</div>
            </a>
          </li>
          <li class="list">
            <a href="#portfolio">
              <span class="icon">
                <i class="fas fa-briefcase"></i>
              </span>
              <div class="social__tooltip social__tooltip-bottom">Portfolio</div>
            </a>
          </li>
          <li class="list">
            <a href="#blog">
              <span class="icon">
                <i class="fas fa-file"></i>
              </span>
              <div class="social__tooltip social__tooltip-bottom">Article</div>
            </a>
          </li>
          <li class="list">
            <a href="#contact">
              <span class="icon">
                <i class="fas fa-phone-alt"></i>
              </span>
              <div class="social__tooltip social__tooltip-bottom">Contact</div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- Header-section End-->
    <!-- section-part Start -->
    <div class="container ">
      <!-- Index-page Start -->
      <section id="home" class="section active">
        <div class="homecolor-box"></div>
        <div class="common_bg animate__animated animate__zoomIn">
          <div class="container m-auto">
            <div class="row align-items-center">
              <!-- Profile-Pic -->
              <div class=" col-xl-5 col-lg-6 col-md-6 col-12">
                <div class="home-profile animate__animated animate__fadeInLeft animate__delay-1s">
                  <img src="#" alt="home-profile" id="profile_photo">
                </div>
              </div>
              <!-- Profile-Pic End-->
              <!-- Profile-Information -->
              <div class="col-xl-7 col-lg-6 col-md-6 col-12">
                <div class="home-content">
                  <P class="common-desctiption animate__animated animate__fadeInDown animate__delay-1s">
                    Get to know me
                  </P>
                  <h1 class="common-title animate__animated animate__fadeInDown animate__delay-1s" id="name"></h1>
                  <div class="animated-bar animate__animated animate__fadeInDown animate__delay-2s">
                  </div>
                  <div class="animated-text animate__animated animate__fadeInDown animate__delay-2s" id="title">
                  </div>
                  <!-- Social media icons-->
                  <div class="fixed-block animate__animated animate__jackInTheBox animate__delay-2-5s">
                    <ul class="list-unstyled social-icons p-3 social_media">
                      <!-- Social links will be loaded here -->
                    </ul>
                  </div>
                  <p class="lorem-text animate__animated animate__zoomIn animate__delay-2-5s" id="description"></p>
                  <div class="home-btn">
                    <a href="#contact" data-section-index="1"
                      class="clickbtn hire-me animate__animated animate__fadeInTopLeft animate__delay-3s ">Hire
                      me</a>
                    <a href="#about" data-section-index="1"
                      class="clickbtn about-us animate__animated animate__fadeInTopRight animate__delay-3s">about
                      me </a>
                  </div>
                </div>
              </div>
              <!-- Profile-Information End -->
            </div>
          </div>
        </div>
      </section>
      <!-- Index-page End -->

      <!-- About Section Start -->
      <section id="about" class="section ">
        <div class="homecolor-box"></div>
        <div class="common_bg animate__animated animate__fadeInDown">
          <div class="container">
            <div class="about-content">
              <!-- About Title Start-->
              <div class="row ">
                <div class="col-12 ">
                  <div class="section-title animate__animated animate__fadeInDown animate__delay-1s">
                    <P class="common-desctiption">my intro</P>
                    <h1 class="common-title">About <span>Me</span></h1>
                    <div class="animated-bar"></div>
                  </div>
                </div>
              </div>
              <!-- About Title End -->
              <!-- About-Me -->
              <div class="row single-section">
                <div class="col-lg-4 profile-photo animate__animated animate__fadeInLeft animate__delay-2s ">
                  <div class="row">
                    <div class="col-12 d-block col-sm-none">
                      <img id="profile_picture" class="img-fluid main-img-mobile" alt="my picture">
                    </div>
                  </div>
                </div>
                <div class="col-lg-8 col-sm-12">
                  <div class="row personal-info animate__animated animate__fadeInRight animate__delay-2s">

                    <div class="col-12">
                      <h5 class="personal-title">who am <span>i ?</span></h5>
                      <h3 class="personal-title" id="introduce"></h3>
                      <p class="info" id="introduce_description"></p>
                    </div>

                    <div class="row align-items-center">
                      <div class="col-lg-12">
                        <h3 class="personal-infotitle">personal <span>informations</span></h3>
                      </div>

                      <div class="col-lg-6">
                        <ul class="about-you ">
                          <li>
                            <span class="title">first name :</span>
                            <span class="value" id="first_name"></span>
                          </li>
                          <li>
                            <span class="title">last name :</span>
                            <span class="value" id="last_name"></span>
                          </li>
                          <li>
                            <span class="title">address :</span>
                            <span class="value" id="address"></span>
                          </li>
                          <li>
                            <span class="title">From :</span>
                            <span class="value" id="from"></span>
                          </li>
                          <li>
                            <span class="title">Age :</span>
                            <span class="value" id="age"></span>
                          </li>
                        </ul>
                      </div>
                      <div class="col-lg-6">
                        <ul class="about-you ">
                          <li>
                            <span class="title">E-mail :</span>
                            <span class="value"><a href="#" id="email"></a></span>
                          </li>
                          <li>
                            <span class="title">Phone :</span>
                            <span class="value"><a href="#" id="phone"></a></span>
                          </li>
                          <li>
                            <span class="title">WhatsApp :</span>
                            <span class="value"><a href="#" id="whatsapp"></a></span>
                          </li>
                          <li>
                            <span class="title">Langages :</span>
                            <span class="value" id="languages"></span>
                          </li>
                          <li>
                            <span class="title">Freelance :</span>
                            <span class="value" id="freelance"></span>
                          </li>
                        </ul>
                      </div>

                      <div class="col-lg-12">
                        <div class="About-btn">
                          <!-- Social media icons-->
                          <div class="col-lg-7 col-sm-6 col-12">
                            <ul class="list-unstyled social-icons social_media"></ul>
                          </div>
                        </div>
                      </div>

                      <div class="col-12" style="margin-top:25px">
                        <a class="clickbtn download-cv" href="#" target="_BLANK" id="download_cv">Resume / Curriculum
                          Vitae <i class="fas fa-file-alt" aria-hidden="true"></i></a>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
              <!-- About-Me End -->
            </div>
          </div>
        </div>
      </section>
      <!-- About Section End -->

      <!-- Protfolio Section Start-->
      <section id="portfolio" class="section">
        <div class="homecolor-box"></div>
        <div class="common_bg animate__animated animate__fadeInLeft">
          <div class="container">
            <div class="protfolio-section text-center  ">
              <!-- Protfolio-Title Start -->
              <div class="row">
                <div class="col-12">
                  <div class="section-title animate__animated animate__fadeInDown animate__delay-1s">
                    <P class="common-desctiption">Showcasing some of my best work</P>
                    <h1 class="common-title">My <span>Portfolio</span></h1>
                    <div class="animated-bar"></div>
                  </div>
                </div>
              </div>
              <!-- Protfolio-Title Start -->
              <!-- Protfolio nav-button start  -->
              <!-- <div class="row">
                <div class="col-lg-12">
                  <div class="portfolio-menu animate__animated animate__fadeInUp animate__delay-2s">
                    <nav class="controls ">
                      <button type="button" class="control clickbtn" data-filter="all">All</button>
                      <button type="button" class="control clickbtn"
                        data-filter=".webdevelopment ">WebDevelopment</button>
                      <button type="button" class="control clickbtn" data-filter=".webdesign ">Web Design</button>
                      <button type="button" class="control clickbtn" data-filter=".graphic ">Graphic Design</button>
                      <button type="button" class="control clickbtn" data-filter=".uiuxdesign ">UI-UX Design</button>
                    </nav>
                  </div>
                </div>
              </div> -->
              <!-- Protfolio nav-button End  -->
              <!-- Portfolio Mix Content Start -->
              <div class="row portfolio-list animate__zoomIn animate__animated animate__delay-3s">
                <div class="container">
                  <ul class="row ps-0" id="projects"></ul>
                </div>
              </div>
              <!-- Portfolio Mix Content End -->
            </div>
          </div>
        </div>
      </section>
      <!-- Protfolio Section End -->

      <!-- Blog section Start -->
      <section id="blog" class="section">
        <div class="homecolor-box"></div>
        <div class="common_bg animate__animated animate__fadeInDown">
          <div class="container">
            <!-- Blog-Section Title -->
            <div class="blog-section text-center">
              <div class="row ">
                <div class="col-12">
                  <div class="section-title animate__animated animate__bounceInDown animate__delay-1s">
                    <P class="common-desctiption">Check out my latest journal articles</P>
                    <h1 class="common-title">My <span>articles</span></h1>
                    <div class="animated-bar"></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Blog-Section Title End -->
            <!-- Blog-Content Box Start -->
            <div class="blog-section animate__animated animate__fadeInUp animate__delay-2s">
              <div class="row justify-content-center" id="articles">
              </div>
            </div>
            <!-- Blog-Content Box End -->
          </div>
        </div>
      </section>
      <!-- Blog section End -->

      <!-- Contact section Start -->
      <section id="contact" class="section">
        <div class="homecolor-box"></div>
        <div class="common_bg animate__animated animate__zoomIn">
          <div class="container">
            <!-- Contact-page Start -->
            <div class="contact-section">
              <!-- Contact-Section Title -->
              <div class="row">
                <div class="col-12">
                  <div class="section-title animate__animated animate__fadeInDown animate__delay-1s">
                    <P class="common-desctiption">Feel free to contact me anytimes</P>
                    <h1 class="common-title">my <span>contact</span></h1>
                    <div class="animated-bar"></div>
                  </div>
                </div>
              </div>
              <!-- Contact-Section Title End-->
              <!-- Contact Form Start -->
              <div class="contact-section">
                <div class="row">
                  <!-- Contact form -->
                  <div class="col-lg-7 col-12 ">
                    <form class="contact-form animate__animated animate__fadeInLeft animate__delay-2s" id="contact-form"
                      onsubmit="return false">
                      <h4 class="content-title">contact me</h4>
                      <div class="row">
                        <div class="col-12 form-group form-message">
                          <textarea class="form-control" id="contact-message" name="message" placeholder="Message"
                            rows="10" required=""></textarea>
                        </div>
                        <div class="col-12 mb-4 form-submit">
                          <button class="clickbtn button-main button-scheme" id="contact-submit" type="submit"
                            onclick="kirim_pesan()">Send Message</button>
                        </div>
                      </div>
                    </form>
                  </div>
                  <script type="text/javascript">
                    let $whatsapp = ""

                    function kirim_pesan() {
                      let $msg = $("#contact-message").val();
                      if ($msg == "" || $msg.length == 0)
                        return alert("Pesan belum diinput!")
                      else {
                        let url = "https://wa.me/" + $whatsapp + "?text=" + $msg
                        window.open(url, '_blank').focus();
                      }
                    }
                  </script>
                  <!-- Contact form End -->
                  <!-- Contact info -->
                  <div class="col-lg-5 col-12 ">
                    <div class="contact-info animate__animated animate__fadeInRight animate__delay-3s">
                      <h4 class="content-title">Contact Info</h4>
                      <p class="info-description" id="freelance_description"></p>
                      <ul class="list-unstyled list-info" style="display: inline-grid">
                        <li>
                          <div class="media d-flex align-items-center"><span class="info-icon"><i
                                class="fas fa-user-alt"></i></span>
                            <div class="media-body info-details">
                              <h6 class="info-type">Full Name</h6><span class="info-value" id="full_name"></span>
                            </div>
                          </div>
                        </li>
                        <li>
                          <div class="media d-flex align-items-center"><span class="info-icon"><i
                                class="fas fa-map-pin"></i></span>
                            <div class="media-body info-details">
                              <h6 class="info-type">Location</h6><span class="info-value" id="location"></span>
                            </div>
                          </div>
                        </li>
                        <li>
                          <div class="media d-flex align-items-center"><span class="info-icon"><i
                                class="fas fa-phone-alt"></i></span>
                            <div class="media-body info-details">
                              <h6 class="info-type">Call Me</h6><span class="info-value"><a href="#"
                                  id="call-me"></a></span>
                            </div>
                          </div>
                        </li>
                        <li>
                          <div class="media d-flex align-items-center"><span class="info-icon"><i
                                class="fas fa-envelope"></i></span>
                            <div class="media-body info-details">
                              <h6 class="info-type">Email Me</h6><span class="info-value"><a href="#"
                                  id="email-me"></a></span>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <!-- Social media icons-->
                    <div class="fixed-block d-flex animate__animated animate__jackInTheBox animate__delay-3s">
                      <ul class="list-unstyled social-icons p-3 social_media">
                      </ul>
                    </div>
                  </div>
                  <!-- Contact info End -->
                </div>
              </div>
              <!-- map -->
              <!-- <div class="row">
                <div class="col-12">
                  <div class="map animate__animated animate__fadeInRight animate__delay-4s">
                    <iframe
                      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d19845.82732713224!2d-0.3162034543774074!3d51.55487883052924!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876116207a6d0bd%3A0xaf7016a2cadb21e4!2sWembley%2C%20UK!5e0!3m2!1sen!2sin!4v1645179715804!5m2!1sen!2sin"
                      style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                  </div>
                </div>
              </div> -->
              <!-- map end -->
              <!-- Contact-Footer -->
              <div class="row justify-content-center animate__animated animate__fadeInUp animate__delay-5s">
                <div class="col-lg-6 text-center">
                  <h5 class="footer">Copyright&copy; &#160;
                    <script>
                      document.write(new Date().getFullYear())
                    </script><a> Ahmad Saparudin</a>&#160;&#160;<i
                      class="fas fa-heart animate__animated animate__pulse animate__faster animate__infinite  infinite"></i>&#160;&#160;All
                    rigths reserved
                  </h5>
                </div>
              </div>
              <!-- Contact-Footer End -->
            </div>
            <!-- Contact-page End -->
          </div>
        </div>
      </section>
      <!-- Contact section End -->

    </div>
    <!-- section-part End-->
    <!-- Mouse-Cursor -->
    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>
    <!-- Mouse-Cursor End-->
  </div>
  <!-- Body Part End -->

  <!-- Optional JavaScript -->
  <!-- Jquery Js -->
  <script src="assets/js/jquery.min.js"></script>
  <!-- <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script> -->
  <!-- Bootstrap Js -->
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <!-- Jquery FancyBox Js -->
  <script src="assets/js/jquery.fancybox.min.js"></script>
  <!-- Mixitup Js -->
  <script src="assets/js/mixitup.min.js"></script>
  <!-- Owlcarousel Js -->
  <script src="assets/js/owl.carousel.min.js"></script>
  <!-- Jquery Countdown Js -->
  <script src="assets/js/jquery.countdown.min.js"></script>
  <!-- Wow Js -->
  <script src="assets/js/wow.min.js"></script>
  <!-- colors JS -->
  <script src="assets/js/color.js"></script>
  <!-- Style.switch JS -->
  <script src="assets/js/style.switch.js"></script>
  <!-- Custom Js -->
  <script src="assets/js/custom.js"></script>

  <script>
    const customDomain = 'https://ahmadworks.gifguild.my.id';
    $(document).ready(function () {
      const randomNumber = Math.floor(Math.random() * 1000000);
      $.getJSON(`data.json?v=${randomNumber}`, function (data) {
        $whatsapp = data.contact.whatsapp;
        $('#profile_photo').attr('src', data.profile_photo).attr('alt', data.profile_photo_alt);
        $('#profile_picture').attr('src', data.profile_picture).attr('alt', data
          .profile_picture_alt);
        $('#name').text(data.name);
        $('#full_name').text(data.full_name);
        $('#title').text(data.title);
        $('#description').text(data.description);
        $('#resume').attr('href', data.resume);
        $('#introduce').html(data.introduce);
        $('#introduce_description').text(data.introduce_description);
        $('#freelance').text(data.freelance);
        $('#languages').text(data.languages);
        $('#skills').text(data.skills);
        $('#first_name').text(data.first_name);
        $('#last_name').text(data.last_name);
        $('#address').text(data.address);
        $('#from').text(data.from);
        $('#email').text(data.contact.email).attr('href', 'mailto:' + data.contact.email).attr(
          'target', '_blank');
        $('#phone').text(data.contact.phone).attr('href', 'tel:' + data.contact.phone).attr(
          'target', '_blank');
        $('#whatsapp').text(data.contact.whatsapp).attr('href', 'https://wa.me/' + data.contact
          .whatsapp).attr('target', '_blank');
        $('#download_cv').attr('href', data.resume).attr('target', '_blank');
        $('#freelance_description').text(data.freelance_description);
        $('#email-me').text(data.contact.email).attr('href', 'mailto:' + data.contact.email).attr(
          'target', '_blank');
        $('#call-me').text(data.contact.phone).attr('href', 'tel:' + data.contact.phone).attr(
          'target', '_blank');
        $('#location').text(data.address);

        data.socialLinks.forEach(function (link) {
          $('.social_media').append(`
            <li><a href="${link.url}" target="_blank"><i class="${link.icon}"></i></a></li>
          `);
        });

        // Calculate age
        const birthdate = new Date(data.birthdate);
        const today = new Date();
        let age = today.getFullYear() - birthdate.getFullYear();
        const monthDiff = today.getMonth() - birthdate.getMonth();
        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthdate.getDate())) {
          age--;
        }
        $('#age').text(`${age} years`);

        data.projects.forEach(function (project) {
          $('#projects').append(`
              <li class="mix webdevelopment col-xl-3 col-lg-4 col-md-6">
                <a title="click to zoom-in" href="${project.image}"
                  data-caption="${project.description}"
                  data-size="1200x600">
                  <img src="${project.thumbnail}" alt="Image description" />
                  <div class="info">
                    <h3 class="title">${project.title}</h3>
                    <span class="post">${project.technology}</span>
                  </div>
                </a>
              </li>
            `);
        });

        data.title.forEach(function (title) {
          $('#title').append(`
              <h3>${title}</h3>
            `);
        });

        data.articles.forEach(function (article) {
          $('#articles').append(`
              <div class="col-lg-4 col-md-6 col-sm-12">
                  <div class="single-post">
                    <div class="ih-item square effect ">
                      <a href="${article.link}" target="_BLANK">
                        <div class="img-article"><img src="${article.image}" alt="img"></div>
                      </a>
                    </div>
                    <div class="card-body post-content">
                      <div class="content-date">${article.date}</div>
                      <div class="content-title">
                        <h5><a href="${article.link}"
                            target="_BLANK">${article.title}</a></h5>
                      </div>
                      <div class="content-description">
                        <p>${article.description}</p>
                      </div>
                    </div>
                  </div>
                </div>
            `);
        });

        // Disable right-click
        $(document).on("contextmenu", function (e) {
          e.preventDefault();
        });

        // Disable F12, Ctrl+Shift+I
        $(document).keydown(function (e) {
          if (e.keyCode == 123 || (e.ctrlKey && e.shiftKey && e.keyCode == 73)) {
            return false;
          }
        });
      });
    });
  </script>
  <script src="./assets/js/ahmad.js"></script>
</body>

</html>