about.html

<!DOCTYPE html>
<html lang="en" class="scroll-smooth overflow-x-hidden">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Syariful Musthofa</title>
  <link href="/dist/output.css" rel="stylesheet">
  <link rel="icon" type="image/x-icon" href="/dist/img/tab-icons/icons.png">
  <!-- Font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Forum&family=Fredericka+the+Great&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
    rel="stylesheet">
  <link
    href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap"
    rel="stylesheet">
  <link
    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet">
  <!-- Fredericka the Great : font-weight: 400;  font-style: normal; -->
  <!-- Forum : font-weight: 300-900;  font-style: normal; -->
  <!-- Nunito Sans : font-weight: 200-1000;  font-style: normal; -->
  <!-- Poppins : font-weight: 100 - 900; font-style: normal and italic -->

</head>

<body id="main" class="bg-repeat z-1 box-border" style="background-image: url(/dist/img/background.png);">
  <!-- Header Start -->
  <header class="bg-white absolute top-0 left-0 w-full flex items-center z-10">
    <div class="container">
      <div class="flex items-center justify-between relative">
        <div class="pr-12 flex justify-center ">
          <div class=" text-black block py-6 pl-20 font-Fredericka text-xl">
            <span class="md:px-1 text-pink-500">∘</span>
            <span class="md:px-1 text-yellow-500">∘</span>
            <span class="md:px-1 text-green-500">∘</span>
            <a href="#home">SYARIFUL</a>
            <span class="md:px-1 text-green-500">∘</span>
            <span class="md:px-1 text-yellow-500">∘</span>
            <span class="md:px-1 text-pink-500">∘</span>
          </div>
        </div>
        <div class="flex items-center px-4">
          <button id="hamburger" name="hamburger" type="button" class="block absolute right-4 lg:hidden">
            <span class="hamburger-line transition duration-300 ease-in-out origin-top-left"></span>
            <span class="hamburger-line transition duration-300 ease-in-out"></span>
            <span class="hamburger-line transition duration-300 ease-in-out origin-bottom-left"></span>
          </button>

          <nav id="nav-menu"
            class="hidden absolute py-5 bg-white font-Poppins shadow-shadow2 rounded-lg max-w-[180px] w-full right-4 top-full lg:bg-transparent lg:block lg:static lg:max-w-full lg:shadow-none lg:rounded-none lg:justify-center ">
            <ul class="block lg:flex ">
              <li class="group"><a href="/#main"
                  class="text-base text-black py-2 px-2 mx-8 flex justify-center group-hover:bg-black group-hover:text-white group-hover:shadow-shadow85 lg:w-full transition ease-in-out duration-500">Home</a>
              </li>
              <li class="group"><a href="/#portofolios"
                  class="text-base text-black py-2 px-2 mx-8 flex justify-center border-y lg:border-y-0 lg:border-x  group-hover:bg-black group-hover:text-white group-hover:shadow-shadow85 lg:w-full transition ease-in-out duration-500">Portofolios</a>
              </li>
              <li class="group"><a href="/about.html"
                  class="text-base text-black py-2 px-2 mx-8 flex justify-center group-hover:bg-black group-hover:text-white group-hover:shadow-shadow85 lg:w-full transition ease-in-out duration-500">About</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </header>
  <!-- Header End -->

  <main>

    <!-- About Me Start -->
    <section id="about" class="pt-36 px-[8%] md:min-h-svh lg:min-h-full lg:pt-40 lg:px-[20%]">
      <div class="relative rounded-lg border border-gray-100 bg-white p-10 ">
        <span class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 "></span>

        <!-- Description Start -->
        <h2 class="text-gray-900 font-Fredericka text-4xl text-center pb-4">
          About Me
        </h2>
        <p class="text-left text-lg font-Forum pb-10">
          Hi there! 👋 Welcome to my profile. Nice to meet you! My name is Syariful Musthofa. I'm a data analyst &
          machine learning enthusiast based in Indonesia. I am proficient in using various machine learning technologies
          and data analytics tools to extract valuable insights and support decision-making.
          <br><br>
          In the slack time, you might find me: writing, watching movies, hiking, scrolling through Quora, playing DOTA
          2 in SEA servers, and even keep coding, since coding is jalan ninjaku!
          <br><br>
          You can find me on <span class="md:pl-1 underline decoration-2 decoration-blue-400 font-semibold"><a
              href="https://github.com/SyarifulMsth" target="_blank">Github</a></span>, and
          <span class="md:pl-1 underline decoration-2 decoration-sky-400 font-semibold"><a
              href="https://www.linkedin.com/in/syariful-musthofa/" target="_blank">Linkedin</a></span>. Here is my
          <span class="md:pl-1 underline decoration-2 decoration-red-400 font-semibold"><a
              href="https://drive.google.com/file/d/1oCPReZutkW9ZLwylqhVqQWaOgeiVvysT/view?usp=sharing"
              target="_blank">Resume</a></span> if you need it!

        </p>
        <!-- Description End -->

        <!-- Tech Stack Start -->
        <!-- <h2 class="text-gray-900 font-Fredericka text-4xl text-center pb-4">
          Tech Stack
        </h2>
        <p class="text-pretty text-sm text-gray-950 font-Forum lg:text-base">
          Data analysis to enable data-driven decision-making. Have experience and have used SQL, Excel, Python,
          Tableau, & etc.
        </p> -->

        <!-- Contact Me Start -->
        <h2 class="text-gray-900 font-Fredericka text-4xl text-center pb-4">
          Contact Me
        </h2>
        <p class="text-left text-lg font-Forum pb-10">
          Want to contact me about anything? You can contact me via email at
          <span class="underline decoration-2 decoration-green-400 font-semibold"><a href="syarifulmsth@gmail.com"
              target="_blank">syarifulmsth@gmail.com</a></span>,
          <span class="underline decoration-2 decoration-sky-400 font-semibold"><a
              href="https://www.linkedin.com/in/syariful-musthofa/" target="_blank">Telegram</a></span>,
          or through
          <span class="underline decoration-2 decoration-sky-400 font-semibold"><a
              href="https://www.linkedin.com/in/syariful-musthofa/" target="_blank">Discord</a></span>.
        </p>
        <!-- Contact Me End -->

      </div>
    </section>


  </main>

  <footer class="w-screen bg-white mt-14 border-t-0 border-slate-500 md:w-screen lg:mt-16 bottom-0 ">
    <span class="relative flex justify-center">
      <div
        class="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-transparent bg-gradient-to-r from-transparent via-gray-500 to-transparent opacity-75">
      </div>
    </span>

    <!-- Copyright  -->
    <div class="flex flex-col justify-center px-7 py-6">
      <p class="text-center font-light font-Forum">Created with 🔥 by
        <span class="lg:pl-0 md:pl-1 underline decoration-2 decoration-sky-500">Syariful Musthofa</span>,
        using <span class="lg:pl-0 md:pl-1 underline decoration-2 decoration-green-400">
          <a href="https://tailwindcss.com" target="_blank">Tailwind CSS.</a></span>
      </p>
    </div>

  </footer>

  <script src="dist/js/script.js"></script>

</body>

</html>