<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AdityaKapal362's Space</title>
  <link rel="stylesheet" href="/css/style.css">
  <link rel="shortcut icon" type="image/png" href="/mine/kapallogo.png">
  <!-- Open Graph Meta Tags -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="AdityaKapal362's Space">
  <meta name="twitter:description" content="A space where a css nerd play around with css.">
  <meta name="twitter:image" content="https://adityakapal362.github.io/mine/kapallogo.png">
</head>
<body>
  
  <!-- Toolbar -->
  <div id="toolbar" class="toolbar hidden">
    <span class="toolbar-title">AdityaKapal362's Space</span>
    <div class="toolbar-menu">
      <img src="/mine/menu-icon.png" alt="Menu" class="toolbar-menu-icon">
    </div>
  </div>

  <!-- Menu -->
  <ul class="dropdown-menu">
    <li><a href="#">My Posts</a></li>
    <li><a href="#">Timeline</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">About Me</a></li>
  </ul>

  <!-- Header Section -->
  <header class="hero">
    <div class="welcome-image">
      <img src="/mine/kapallogo.png">
    </div>
    <div class="fade-effect"></div>
    <a href="#introduction" class="scroll-arrow">
      &#x2193;
    </a>
  </header>

  <!-- My Bio Section -->
  <section id="introduction" class="mybio">
    <div class="profile-image">
      <img src="/mine/pfp.jpg" alt="Oh you found me.. fine! im a Java addict, its because i only knows Java, please keep it quiet!">
    </div>
    <h2>AdityaKapal362</h2>
    <p class="campus"><i>HTML & CSS Nerd</i></p>
  </section>

  <!-- Divider -->
  <div class="divider"></div>

  <!-- Introduction Section -->
  <section class="introduction">
    <p>
      Hello! My name is Aditya Putra Ramadhan, known as AdityaKapal362, a passionate developer from Indonesia. You dont have to know much about me, but sure i love photography and explore something new.
    </p>
    <p>
      Im an introvert, curious with something new type, and a self-learning programmer. I have a dream to make my own startup company. Currently studying at <a href="https://www.linkedin.com/school/trisakti-institute-of-transportation-and-logistics-itl-trisakti" class="soft-purple-link">Institute of Transportation & Logistics Trisakti</a> as International Air Transport Management student. In my free time, im enjoys listening to spotify and honing my coding skills.
    </p>
  </section>

  <!-- Projects Section -->
<section class="projects">
  <h2>My Projects</h2>
  <div class="project-list">
    <div class="project-item">
      <img class="project-thumbnail" src="/mine/projects/s2dge/thumbnail.jpg" alt="Sketchware 2D Thumbnail">
      <div class="project-content">
        <h3><img class="project-icon" src="/mine/projects/s2dge/icon.png" alt="Icon">Sketchware 2D Game Engine</h3>
        <p>A full functioning 2d game project that made specificly for Sketchware. Providing the essential tools and functionalities to build 2D games directly in Sketchware by leveraging the platform's block-based coding environment and custom logic.</p>
        <div class="project-badges">
          <img src="https://img.shields.io/badge/Java-ED8B00?style=flat&logo=openjdk&logoColor=white" alt="Java Badge" class="badge">
          <img src="https://img.shields.io/badge/open--source-10b804" alt="Open-source Badge" class="badge">
        </div>
      </div>
    </div>
    <div class="project-item">
      <img class="project-thumbnail" src="/mine/projects/sh-recovery/thumbnail.jpg" alt="SH Recovery Thumbnail">
      <div class="project-content">
        <h3><img class="project-icon" src="/mine/projects/sh-recovery/icon.png" alt="Recovery Icon">SH Recovery</h3>
        <p>A lightweight tool to make a backup of your Sketchware projects in one tap. Adopting modified material UI, SH Recovery functionalities also known by most Sketchware users. Not only backup or restore, but it has tools like clone, cleaner, manage collections, and recover broken projects</p>
        <div class="project-badges">
          <img src="https://img.shields.io/badge/Java-ED8B00?style=flat&logo=openjdk&logoColor=white" alt="Java Badge" class="badge">
          <img src="https://img.shields.io/badge/closed--source-292929" alt="Closed-source Badge" class="badge">
        </div>
      </div>
    </div>
    <div class="project-item">
      <img class="project-thumbnail" src="/mine/projects/tekogram/thumbnail.jpg" alt="Tekogram Thumbnail">
      <div class="project-content">
        <h3><img class="project-icon" src="/mine/projects/tekogram/icon.png" alt="Tekogram Icon">Tekogram</h3>
        <p>A complete WhatsApp app clone UI, has the status green circular feature like an actual Instagram's status page.</p>
        <div class="project-badges">
          <img src="https://img.shields.io/badge/Java-ED8B00?style=flat&logo=openjdk&logoColor=white" alt="Java Badge" class="badge">
          <img src="https://img.shields.io/badge/open--source-10b804" alt="Open-source Badge" class="badge">
        </div>
      </div>
    </div>
    <div class="project-item">
      <img class="project-thumbnail" src="/mine/projects/wa-bot/thumbnail.jpg" alt="WhatsApp Bot Thumbnail">
      <div class="project-content">
        <h3><img class="project-icon" src="/mine/projects/wa-bot/icon.png" alt="WhatsApp Bot Icon">WhatsApp Bot</h3>
        <p>A bot that runs as android app using Android's notification utility and answer it directly like a quick-reply. Can only do basic reply, like text only, but you can improvise it to use it like a Dictionary, Scrapper, and more useful things.</p>
        <div class="project-badges">
          <img src="https://img.shields.io/badge/Java-ED8B00?style=flat&logo=openjdk&logoColor=white" alt="Java Badge" class="badge">
          <img src="https://img.shields.io/badge/open--source-10b804" alt="Open-source Badge" class="badge">
        </div>
      </div>
    </div>
    <div class="project-item">
      <img class="project-thumbnail" src="/mine/projects/kplayer/thumbnail.jpg" alt="KPlayer Thumbnail">
      <div class="project-content">
        <h3><img class="project-icon" src="/mine/projects/kplayer/icon.png" alt="KPlayer Icon">K' Player</h3>
        <p>A very simple and basic music player app i have ever made, no special feature tho.</p>
        <div class="project-badges">
          <img src="https://img.shields.io/badge/Java-ED8B00?style=flat&logo=openjdk&logoColor=white" alt="Java Badge" class="badge">
          <img src="https://img.shields.io/badge/open--source-10b804" alt="Open-source Badge" class="badge">
        </div>
      </div>
    </div>
    <div class="project-item">
      <img class="project-thumbnail" src="/mine/projects/sgestudio/thumbnail.jpg" alt="SGE Studio Thumbnail">
      <div class="project-content">
        <h3><img class="project-icon" src="/mine/projects/sgestudio/icon.png" alt="SGE Studio Icon">SGE Studio</h3>
        <p>An rpg map maker app specificly made for Sketchware2DGameEngine, has custom export feature too.</p>
        <div class="project-badges">
          <img src="https://img.shields.io/badge/Java-ED8B00?style=flat&logo=openjdk&logoColor=white" alt="Java Badge" class="badge">
          <img src="https://img.shields.io/badge/open--source-10b804" alt="Open-source Badge" class="badge">
        </div>
      </div>
    </div>
    <div class="project-item">
      <img class="project-thumbnail" src="/mine/projects/krhythm/thumbnail.jpg" alt="KRhythm Thumbnail">
      <div class="project-content">
        <h3><img class="project-icon" src="/mine/projects/krhythm/icon.png" alt="KRhythm Icon">K' Rhythm</h3>
        <p>A basic rhythm game that only has 1 mode, like guitar heroes but.. but what?</p>
        <div class="project-badges">
          <img src="https://img.shields.io/badge/Java-ED8B00?style=flat&logo=openjdk&logoColor=white" alt="Java Badge" class="badge">
          <img src="https://img.shields.io/badge/open--source-10b804" alt="Open-source Badge" class="badge">
        </div>
      </div>
    </div>
    <div class="project-item">
      <img class="project-thumbnail" src="/mine/projects/spritesplitter/thumbnail.jpg" alt="Sprite Splitter Thumbnail">
      <div class="project-content">
        <h3><img class="project-icon" src="/mine/projects/spritesplitter/icon.png" alt="Sprite Splitter Icon">Sprite Splitter</h3>
        <p>A tool to split a single image into pieces, multi format image supported. Mainly this app used by 2d rpg game devs who are lazy to split their image assets programmatically :D</p>
        <div class="project-badges">
          <img src="https://img.shields.io/badge/Java-ED8B00?style=flat&logo=openjdk&logoColor=white" alt="Java Badge" class="badge">
          <img src="https://img.shields.io/badge/closed--source-292929" alt="Closed-source Badge" class="badge">
        </div>
      </div>
    </div>
    <div class="project-item">
      <img class="project-thumbnail" src="/mine/projects/sforum/thumbnail.jpg" alt="Sketchware Forum Thumbnail">
      <div class="project-content">
        <h3><img class="project-icon" src="/mine/projects/sforum/icon.png" alt="Sketchware Forum Icon">Sketchware Forum</h3>
        <p>An unofficial Sketchware Forum app that left abandoned by me for 4 years, it has beautiful landing page design made by me</p>
        <div class="project-badges">
          <img src="https://img.shields.io/badge/Java-ED8B00?style=flat&logo=openjdk&logoColor=white" alt="Java Badge" class="badge">
          <img src="https://img.shields.io/badge/open--source-10b804" alt="Open-source Badge" class="badge">
        </div>
      </div>
    </div>
    <div class="project-item">
      <img class="project-thumbnail" src="/mine/projects/s3dge/thumbnail.jpg" alt="S3DGE Thumbnail">
      <div class="project-content">
        <h3><img class="project-icon" src="/mine/projects/s3dge/icon.png" alt="S3DGE Icon">Sketchware 3D Game Engine</h3>
        <p>A working 3d renderer made with pure java for sketchware, it was a ported big 3d library from github to be usable in sketchware original.</p>
        <div class="project-badges">
          <img src="https://img.shields.io/badge/Java-ED8B00?style=flat&logo=openjdk&logoColor=white" alt="Java Badge" class="badge">
          <img src="https://img.shields.io/badge/open--source-10b804" alt="Open-source Badge" class="badge">
        </div>
      </div>
    </div>
  </div>
</section>

  <!-- Social Media Links -->
  <section class="social-media">
    <a href="https://discord.gg/4BAtnZSD" target="_blank">
      <img src="https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Discord">
    </a>
    <a href="https://open.spotify.com/playlist/1q6tNgsqMuDQxYArvk7yJO?si=mRpNhkYBTgiR1Xwq3VAPuA&pi=x2Okc7YQSvaDW" target="_blank">
      <img src="https://img.shields.io/badge/Spotify-1ED760?&style=for-the-badge&logo=spotify&logoColor=white" alt="Spotify">
    </a>
    <a href="https://www.linkedin.com/in/adityakapal362" target="_blank">
      <img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn">
    </a>
  </section>

  <!-- Footer -->
  <footer>
    <p>Copyright &copy; 2024 <u>AdityaKapal362</u></p>
  </footer>
  
  <script src="/js/kapal362.js"></script>
</body>
</html>