index.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>
    <!-- Hero Section Start -->
    <section id="home" class="pt-40 lg:pt-28 lg:pb-0">
      <div class="container">
        <!-- Description -->
        <div class="flex w-screen flex-wrap">
          <h1 class="flex w-full justify-center text-center font-Fredericka text-3xl md:text-5xl">Hello,<br> I'm
            Syariful
            Musthofa.
          </h1>
          <p class="w-full mt-6 px-6 text-center font-Forum font-medium md:text-base lg:w-1/2 lg:mx-auto lg:text-lg">
            I'm
            a Data
            Analyst &
            Machine
            Learning
            Enthusiast.
            With ability to develop model machine learning and data driven decision making. This is my
            personal
            website
            showcasing
            variety of my latest ventures on stuff I'm doing! </p>
        </div>

        <!-- About Button -->
        <div class=" w-1/2 my-5 box-border flex justify-center mx-auto group md:w-screen">
          <div class="text-sm font-Forum  h-full flex justify-center button-33 md:w-4/12 lg:w-2/12 lg:text-base">
            <a class="w-full py-1" href="/about.html">More about me →</a>
          </div>
        </div>
      </div>
    </section>
    <!-- Hero Section End -->

    <!-- Ablity Section Start -->
    <section id="Doing">
      <!-- <h2 class="flex justify-center font-Nunito font-bold text-4xl mt-20 mb-6">What I Do</h2> -->
      <span class="relative flex justify-center mt-20 mb-6 lg:mt-14">
        <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 hidden lg:inline">
        </div>
        </div>

        <span
          class="relative z-10  px-6 font-Nunito font-bold text-3xl lg:text-xl lg:bg-white lg:rounded-2xl lg:py-3 lg:px-12 lg:shadow-shadow2">What
          I
          Do</span>
      </span>
      <!-- Cards Container -->
      <div class="flex flex-col gap-4 md:flex-row md:gap-3 md:px-7 lg:mx-28 lg:gap-7">
        <!-- Card 1 -->
        <div class="relative block overflow-hidden rounded-lg border border-gray-100 p-4 mx-10 bg-white md:mx-0">
          <span
            class="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 "></span>

          <div class="flex justify-between gap-4">
            <div>
              <h3 class="text-base text-gray-900 font-bold font-Nunito">
                Data Analyst
              </h3>
              <p class="mt-1 text-xs font-medium text-gray-600 opacity-65 font-Nunito">Making data to driven decision
                making</p>
            </div>
          </div>

          <div class="mt-4">
            <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>
          </div>
        </div>
        <!-- End Card 1 -->

        <!-- Card 2 -->
        <div class="relative block overflow-hidden rounded-lg border border-gray-100 p-4 mx-10 bg-white md:mx-0">
          <span
            class="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 "></span>

          <div class="flex justify-between gap-4">
            <div>
              <h3 class="text-base text-gray-900 font-bold font-Nunito">
                Machine Learning Engineer
              </h3>
              <p class="mt-1 text-xs font-medium text-gray-600 opacity-65 font-Nunito">CreatingML models
                to solve real world problems.
              </p>
            </div>
          </div>

          <div class="mt-4">
            <p class="text-pretty text-sm text-gray-950 font-Forum lg:text-base">
              Building ML models, starting from data analysis, model development, and deployment according
              to business understanding.
            </p>
          </div>
        </div>
        <!-- End Card 2 -->

        <!-- Card 3 -->
        <div class="relative block overflow-hidden rounded-lg border border-gray-100 p-4 mx-10 bg-white md:mx-0">
          <span
            class="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 "></span>

          <div class="flex justify-between gap-4">
            <div>
              <h3 class="text-base text-gray-900 font-bold font-Nunito">
                Front-End Web Developer
              </h3>
              <p class="mt-1 text-xs font-medium text-gray-600 opacity-65 font-Nunito">Develop front-end of a website.
              </p>
            </div>
          </div>

          <div class="mt-4">
            <p class="text-pretty text-sm text-gray-950 font-Forum lg:text-base">
              Develop PWA (progressive web application) using HTML, Vanila CSS, Bootstrap, Tailwind, Node Package
              Manager (NPM), Node.Js, & etc.
            </p>
          </div>
        </div>
        <!-- End Card 3 -->

      </div>
      <!-- End Cards Container -->
    </section>
    <!-- Ability Section end -->

    <!-- Portofolios Section Start -->
    <section id="portofolios" class="lg:w-screen ">
      <h2 class="flex justify-center font-Nunito font-bold text-4xl pt-20 lg:pt-20">Featured Portofolios</h2>

      <div
        class="w-screen flex flex-col gap-4 py-4 px-4 lg:flex-row lg:flex-wrap lg:pr-8 lg:justify-center lg:py-6 lg:gap-6 font-Nunito">

        <!-- Start Card Left -->
        <div
          class="flex bg-white w-full lg:w-[48%] lg:box-border shadow-sm transition ease-in-out duration-500 hover:shadow-shadow85 hover:-translate-y-1 hover:-translate-x-1">
          <div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
            <time datetime="2022-10-10"
              class="flex items-center justify-between gap-4 text-xs font-bold uppercase text-gray-900">
              <span>2023</span>
              <span class="w-px flex-1 bg-gray-900/10"></span>
              <span>June</span>
            </time>
          </div>

          <div class="hidden sm:block sm:basis-56">
            <img alt=""
              src="https://images.unsplash.com/photo-1633158829585-23ba8f7c8caf?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              class="aspect-square h-full w-full object-cover" />
          </div>

          <div class="flex flex-1 flex-col justify-between">
            <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
              <h3 class="font-bold capitalize text-gray-900 te">Credit Scoring Analysis</h3>
              <p class="mt-2 line-clamp-6 text-sm/relaxed text-gray-700">
                Credit scoring analysis involves using historical data to predict the credit risk of potential
                borrowers. The goal of this project is to develop a predictive model that can assess whether a borrower
                is low-risk or high-risk based on certain attributes.
              </p>
            </div>

            <div class="sm:flex sm:items-end sm:justify-end">
              <a href="https://github.com/SyarifulMsth/Credit-Scoring-Analysis-Project" target="_blank"
                class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold uppercase text-gray-900 transition hover:bg-yellow-400">
                Code on GitHub
              </a>
            </div>
          </div>
        </div>
        <!-- End Card Left -->

        <!-- Start Card Right  -->
        <div
          class="flex bg-white w-full lg:w-[48%] shadow-sm transition ease-in-out duration-500 hover:shadow-shadow85 hover:-translate-y-1 hover:translate-x-1">
          <div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
            <time datetime="2022-10-10"
              class="flex items-center justify-between gap-4 text-xs font-bold uppercase text-gray-900">
              <span>2024</span>
              <span class="w-px flex-1 bg-gray-900/10"></span>
              <span>April</span>
            </time>
          </div>

          <div class="hidden sm:block sm:basis-56">
            <img alt=""
              src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              class="aspect-square h-full w-full object-cover" />
          </div>

          <div class="flex flex-1 flex-col justify-between">
            <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
              <h3 class="font-bold capitalize text-gray-900 te">Employee Retention Rate Analytics - Human Resource (HR)
                Department </h3>
              <p class="mt-2 line-clamp-6 text-sm/relaxed text-gray-700">
                Data science project on case studies of problems in the Human Resources (HR) Department.
              </p>
            </div>

            <div class="sm:flex sm:items-end sm:justify-end">
              <a href="https://github.com/SyarifulMsth/Employee-attrition-analytics" target="_blank"
                class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold uppercase text-gray-900 transition hover:bg-yellow-400">
                Code on GitHub
              </a>
            </div>
          </div>
        </div>
        <!-- End Card Right -->

        <!-- Start Card Left -->
        <div
          class="flex bg-white w-full lg:w-[48%] lg:box-border shadow-sm transition ease-in-out duration-500 hover:shadow-shadow85 hover:-translate-y-1 hover:-translate-x-1">
          <div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
            <time datetime="2022-10-10"
              class="flex items-center justify-between gap-4 text-xs font-bold uppercase text-gray-900">
              <span>2024</span>
              <span class="w-px flex-1 bg-gray-900/10"></span>
              <span>April</span>
            </time>
          </div>

          <div class="hidden sm:block sm:basis-56">
            <img alt=""
              src="https://raw.githubusercontent.com/SyarifulMsth/Spotify-Music-Recommendation-System/main/images/music.avif"
              class="aspect-square h-full w-full object-cover" />
          </div>

          <div class="flex flex-1 flex-col justify-between">
            <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
              <h3 class="font-bold capitalize text-gray-900 te">Music Recommendation System [Spotify Dataset]</h3>
              <p class="mt-2 line-clamp-6 text-sm/relaxed text-gray-700">
                Machine learning project using the Content Based Filtering algorithm to help provide music
                recommendations to users based on genre.
              </p>
            </div>

            <div class="sm:flex sm:items-end sm:justify-end">
              <a href="https://github.com/SyarifulMsth/Spotify-Music-Recommendation-System" target="_blank"
                class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold uppercase text-gray-900 transition hover:bg-yellow-400">
                Code on GitHub
              </a>
            </div>
          </div>
        </div>
        <!-- End Card Left -->

        <!-- Start Card Right  -->
        <div
          class="flex bg-white w-full lg:w-[48%] shadow-sm transition ease-in-out duration-500 hover:shadow-shadow85 hover:-translate-y-1 hover:translate-x-1">
          <div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
            <time datetime="2022-10-10"
              class="flex items-center justify-between gap-4 text-xs font-bold uppercase text-gray-900">
              <span>2024</span>
              <span class="w-px flex-1 bg-gray-900/10"></span>
              <span>April</span>
            </time>
          </div>

          <div class="hidden sm:block sm:basis-56">
            <img alt=""
              src="https://images.unsplash.com/photo-1524178232363-1fb2b075b655?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              class="aspect-square h-full w-full object-cover" />
          </div>

          <div class="flex flex-1 flex-col justify-between">
            <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
              <h3 class="font-bold capitalize text-gray-900 te">Students' Performance Analysis</h3>
              <p class="mt-2 line-clamp-6 text-sm/relaxed text-gray-700">
                Data Science Project: Students' Dropout and Academic Success Analysis.
              </p>
            </div>

            <div class="sm:flex sm:items-end sm:justify-end">
              <a href="https://github.com/SyarifulMsth/Students-Dropout-and-Academic-Success-Analysis" target="_blank"
                class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold uppercase text-gray-900 transition hover:bg-yellow-400">
                Code on GitHub
              </a>
            </div>
          </div>
        </div>
        <!-- End Card Right -->

        <!-- Start Card Left -->
        <div
          class="flex bg-white w-full lg:w-[48%] lg:box-border shadow-sm transition ease-in-out duration-500 hover:shadow-shadow85 hover:-translate-y-1 hover:-translate-x-1">
          <div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
            <time datetime="2022-10-10"
              class="flex items-center justify-between gap-4 text-xs font-bold uppercase text-gray-900">
              <span>2024</span>
              <span class="w-px flex-1 bg-gray-900/10"></span>
              <span>April</span>
            </time>
          </div>

          <div class="hidden sm:block sm:basis-56">
            <img alt=""
              src="https://images.unsplash.com/photo-1516575901726-efcb7a9895a0?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              class="aspect-square h-full w-full object-cover" />
          </div>

          <div class="flex flex-1 flex-col justify-between">
            <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
              <h3 class="font-bold capitalize text-gray-900 te">Diabetes Predictive Analytics </h3>
              <p class="mt-2 line-clamp-6 text-sm/relaxed text-gray-700">
                Machine learning project using Random Forest Classification and Hyperparameter Tuning Grid Search to
                predict whether someone suffers from diabetes or not.
              </p>
            </div>

            <div class="sm:flex sm:items-end sm:justify-end">
              <a href="https://github.com/SyarifulMsth/predictive-analytics-of-diabetes" target="_blank"
                class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold uppercase text-gray-900 transition hover:bg-yellow-400">
                Code on GitHub
              </a>
            </div>
          </div>
        </div>
        <!-- End Card Left -->

        <!-- Start Card Right  -->
        <div
          class="flex bg-white w-full lg:w-[48%] shadow-sm transition ease-in-out duration-500 hover:shadow-shadow85 hover:-translate-y-1 hover:translate-x-1">
          <div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
            <time datetime="2022-10-10"
              class="flex items-center justify-between gap-4 text-xs font-bold uppercase text-gray-900">
              <span>2024</span>
              <span class="w-px flex-1 bg-gray-900/10"></span>
              <span>April</span>
            </time>
          </div>

          <div class="hidden sm:block sm:basis-56">
            <img alt=""
              src="https://images.unsplash.com/photo-1612232134966-a9b076b9fbe7?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              class="aspect-square h-full w-full object-cover" />
          </div>

          <div class="flex flex-1 flex-col justify-between">
            <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
              <h3 class="font-bold capitalize text-gray-900 te">Emotion Analysis Using NLP Classification Methods </h3>
              <p class="mt-2 line-clamp-6 text-sm/relaxed text-gray-700">
                Machine learning project using natural language processing (NLP) algorithms to predict a person's
                emotions.
              </p>
            </div>

            <div class="sm:flex sm:items-end sm:justify-end">
              <a href="https://github.com/SyarifulMsth/Emotion-Analysis" target="_blank"
                class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold uppercase text-gray-900 transition hover:bg-yellow-400">
                Code on GitHub
              </a>
            </div>
          </div>
        </div>
        <!-- End Card Right -->

        <!-- Start Card Left -->
        <div
          class="flex bg-white w-full lg:w-[48%] lg:box-border shadow-sm transition ease-in-out duration-500 hover:shadow-shadow85 hover:-translate-y-1 hover:-translate-x-1">
          <div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
            <time datetime="2022-10-10"
              class="flex items-center justify-between gap-4 text-xs font-bold uppercase text-gray-900">
              <span>2023</span>
              <span class="w-px flex-1 bg-gray-900/10"></span>
              <span>December</span>
            </time>
          </div>

          <div class="hidden sm:block sm:basis-56">
            <img alt=""
              src="https://images.unsplash.com/photo-1686278895718-26a2331d7297?q=80&w=1475&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              class="aspect-square h-full w-full object-cover" />
          </div>

          <div class="flex flex-1 flex-col justify-between">
            <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
              <h3 class="font-bold capitalize text-gray-900 te">TaniCerdas Apps 🌱</h3>
              <p class="mt-2 line-clamp-6 text-sm/relaxed text-gray-700">
                TaniCerdas is an application based on AI with a web platform that is here to help
                solve problems in the agricultural sector. This application was built using the DenseNet1212 transfer
                learning Convolutional Neural Network (CNN) architecture with Tensorflow.
              </p>
            </div>

            <div class="sm:flex sm:items-end sm:justify-end">
              <a href="https://github.com/SyarifulMsth/TaniCerdas" target="_blank"
                class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold uppercase text-gray-900 transition hover:bg-yellow-400">
                Code on GitHub
              </a>
            </div>
          </div>
        </div>
        <!-- End Card Left -->

        <!-- Start Card Right  -->
        <div
          class="flex bg-white w-full lg:w-[48%] shadow-sm transition ease-in-out duration-500 hover:shadow-shadow85 hover:-translate-y-1 hover:translate-x-1">
          <div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
            <time datetime="2022-10-10"
              class="flex items-center justify-between gap-4 text-xs font-bold uppercase text-gray-900">
              <span>2024</span>
              <span class="w-px flex-1 bg-gray-900/10"></span>
              <span>January</span>
            </time>
          </div>

          <div class="hidden sm:block sm:basis-56">
            <img alt=""
              src="https://images.unsplash.com/photo-1599707367072-cd6ada2bc375?q=80&w=1633&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              class="aspect-square h-full w-full object-cover" />
          </div>

          <div class="flex flex-1 flex-col justify-between">
            <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
              <h3 class="font-bold capitalize text-gray-900">Diamond Price Prediction💎
              </h3>
              <p class="mt-2 line-clamp-6 text-sm/relaxed text-gray-700">
                Predictive Analytics Portfolio Project: Case Study of Diamond Price Prediction. This case aims to
                predict
                diamond prices based on several special features. These features include carat, size, cut shape, color
                and
                clarity level of diamonds
              </p>
            </div>

            <div class="sm:flex sm:items-end sm:justify-end">
              <a href="https://github.com/SyarifulMsth/predictive-analytics" target="_blank"
                class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold uppercase text-gray-900 transition hover:bg-yellow-400">
                Code on GitHub
              </a>
            </div>
          </div>
        </div>
        <!-- End Card Right -->

        <!-- Start Card Left -->
        <div
          class="flex bg-white w-full lg:w-[48%] lg:box-border shadow-sm transition ease-in-out duration-500 hover:shadow-shadow85 hover:-translate-y-1 hover:-translate-x-1">
          <div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
            <time datetime="2022-10-10"
              class="flex items-center justify-between gap-4 text-xs font-bold uppercase text-gray-900">
              <span>2024</span>
              <span class="w-px flex-1 bg-gray-900/10"></span>
              <span>April</span>
            </time>
          </div>

          <div class="hidden sm:block sm:basis-56">
            <img alt=""
              src="https://images.unsplash.com/photo-1599658880436-c61792e70672?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              class="aspect-square h-full w-full object-cover" />
          </div>

          <div class="flex flex-1 flex-col justify-between">
            <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
              <h3 class="font-bold capitalize text-gray-900 te">Brazillian E-Commerce Data Analysis</h3>
              <p class="mt-2 line-clamp-6 text-sm/relaxed text-gray-700">
                Brazillian E-Commerce Data Analysis is a data analyst project which is a project to carry out data
                analysis to find out important insights in the data, including customers market segmentation, sellers
                market segmentation, order status performance, payments type trend, customer satisfaction, and RFM
                Analysis. The stages of this project include Business Understanding, Project Preparation, Data
                Understanding, and Exploratory Data Analysis. This repository contains the source code and documentation
                for the CoffeeBid application.
              </p>
            </div>

            <div class="sm:flex sm:items-end sm:justify-end">
              <a href="https://github.com/SyarifulMsth/Brazillian-E-Commerce-Data-Analysis" target="_blank"
                class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold uppercase text-gray-900 transition hover:bg-yellow-400">
                Code on GitHub
              </a>
            </div>
          </div>
        </div>
        <!-- End Card Left -->

        <!-- Start Card Right  -->
        <div
          class="flex bg-white w-full lg:w-[48%] shadow-sm transition ease-in-out duration-500 hover:shadow-shadow85 hover:-translate-y-1 hover:translate-x-1">
          <div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
            <time datetime="2022-10-10"
              class="flex items-center justify-between gap-4 text-xs font-bold uppercase text-gray-900">
              <span>2021</span>
              <span class="w-px flex-1 bg-gray-900/10"></span>
              <span>December</span>
            </time>
          </div>

          <div class="hidden sm:block sm:basis-56">
            <img alt=""
              src="https://images.unsplash.com/photo-1506880018603-83d5b814b5a6?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              class="aspect-square h-full w-full object-cover" />
          </div>

          <div class="flex flex-1 flex-col justify-between">
            <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
              <h3 class="font-bold capitalize text-gray-900 te">Jendela Dunia </h3>
              <p class="mt-2 line-clamp-6 text-sm/relaxed text-gray-700">
                Jendela Dunia App is a Progressive Web App (PWA) built to help book readers predict and monitor their
                book reading progress.
              </p>
            </div>

            <div class="sm:flex sm:items-end sm:justify-end">
              <a href="https://github.com/SyarifulMsth/Capstone-Project-SIB-2021" target="_blank"
                class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold uppercase text-gray-900 transition hover:bg-yellow-400">
                Code on GitHub
              </a>
            </div>
          </div>
        </div>
        <!-- End Card Right -->

        <!-- Start Card Left -->
        <div
          class="flex bg-white w-full lg:w-[48%] lg:box-border shadow-sm transition ease-in-out duration-500 hover:shadow-shadow85 hover:-translate-y-1 hover:-translate-x-1">
          <div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
            <time datetime="2022-10-10"
              class="flex items-center justify-between gap-4 text-xs font-bold uppercase text-gray-900">
              <span>2023</span>
              <span class="w-px flex-1 bg-gray-900/10"></span>
              <span>June</span>
            </time>
          </div>

          <div class="hidden sm:block sm:basis-56">
            <img alt=""
              src="https://images.unsplash.com/photo-1607681034512-1c9c5fbda608?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              class="aspect-square h-full w-full object-cover" />
          </div>

          <div class="flex flex-1 flex-col justify-between">
            <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
              <h3 class="font-bold capitalize text-gray-900 te">CoffeeBid</h3>
              <p class="mt-2 line-clamp-6 text-sm/relaxed text-gray-700">
                CoffeeBid is a revolutionary marketplace platform that aims to transform the marketing of coffee
                products, benefiting both coffee farmers and buyers. This repository contains the source code and
                documentation for the CoffeeBid application.
              </p>
            </div>

            <div class="sm:flex sm:items-end sm:justify-end">
              <a href="https://github.com/coffeebid-capstone/CoffeeBid-ML" target="_blank"
                class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold uppercase text-gray-900 transition hover:bg-yellow-400">
                Code on GitHub
              </a>
            </div>
          </div>
        </div>
        <!-- End Card Left -->

      </div>

    </section>
    <!-- Portofolios Section End -->

  </main>

  <footer class="w-screen bg-white mt-14 border-t-0 border-slate-500 md:w-screen lg:mt-20">
    <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-sky-500">Syariful Musthofa</span>,
        using <span class="lg:pl-0 md:pl-1 underline 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>