projects.html

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

<head>
  <meta charset="UTF-8">
  <title>Ethan's Planned Projects - Frosty Volcano Summit</title>
  <link href="/assets/main.css" rel="stylesheet" type="text/css">
  <link href="/assets/eggs.css" rel="stylesheet" type="text/css">
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-EGBMJBFWQF"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-EGBMJBFWQF');
  </script>
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
  <link rel="manifest" type="application/manifest+json" href="/site.webmanifest">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta id="meta-title" property="og:title" content="Frosty Volcano Summit">
  <meta id="meta-desc" property="og:description"
    content="This is Ethan's official website. On this page you can find information about his planned projects.">
  <meta id="meta-image" name="og:image" itemprop="image" content="https://fire-ethan.github.io/images/meta.png">
  <meta property="og:site_name" content="Frosty Volcano Summit | fire-ethan.github.io">
  <meta property="twitter:card" content="summary_large_image">
  <meta name="theme-color" content="#14d8ee">
  <script src="/app/lib/jquery-4.0.0.min.js" defer></script>
  <script>
    // Block rendering for a millisecond to pull the theme before the DOM draws
    if (localStorage.getItem("site-theme") === "alt") {
      const link = document.createElement("link");
      link.id = "theme-link";
      link.rel = "stylesheet";
      link.href = "/assets/alt-theme.css";
      document.head.appendChild(link);
    } else if (!localStorage.getItem("site-theme")) {
      localStorage.setItem("site-theme", "alt");
    }
  </script>
</head>

<body id="_bg">
  <header>Upcoming Project Plans</header>
  <main>
    <div id="back"></div>
    <div id="grassBox">
      <section class="project-list">
        <h2>Featured Projects</h2>

        <article class="project-card">
          <h3 class="project-title">(untitled) Legend of Zelda inspired game</h3>

          <dl class="project-details">
            <dt>Type:</dt>
            <dd>Game</dd>

            <dt>Languages:</dt>
            <dd>C, Raylib</dd>
          </dl>
          
          <p class="project-description">
            This project should take much less than a day, but I am still searching for the original Python game I made in 2023 for a class assignment. It is based on the original The Legend of Zelda. This project may be private unless I can minimise the intellectual property usage.
          </p>
        </article>

        <div class="egg" data-egg="fvsProjs_afterProj1"></div>

        <article class="project-card">
          <h3 class="project-title">Crossfading Music Player Engine</h3>

          <dl class="project-details">
            <dt>Type:</dt>
            <dd>NPM Package</dd>

            <dt>Languages:</dt>
            <dd>Typescript, React</dd>
          </dl>

          <p class="project-description">
            Another, but less lightweight, library for creating a crossfading music player engine in web applications.
            This will help to break off the size of the main Frosty Volcano Summit codebase and allow for easier
            maintenance and updates.
          </p>
        </article>

        <div class="egg" data-egg="fvsProjs_afterProj2"></div>

        <article class="project-card">
          <h3 class="project-title">Fading Page Background Engine</h3>

          <dl class="project-details">
            <dt>Type:</dt>
            <dd>NPM Package</dd>

            <dt>Languages:</dt>
            <dd>Typescript, React</dd>
          </dl>

          <p class="project-description">
            A lightweight library for creating a fading page background engine in web applications. This will help to
            break off the size of the main Frosty Volcano Summit codebase and allow for easier maintenance and updates.
          </p>
        </article>
        <div class="egg" data-egg="fvsProjs_afterProj3"></div>

        <article class="project-card">
          <h3 class="project-title">Easter Egg Engine</h3>

          <dl class="project-details">
            <dt>Type:</dt>
            <dd>NPM Package</dd>

            <dt>Languages:</dt>
            <dd>Typescript, React</dd>
          </dl>

          <p class="project-description">
            A larger library for creating an easter egg engine in web applications. The whole idea is adding hidden
            features and surprises to web applications to incentivise user engagement. This will help to break off the
            size of the main Frosty Volcano Summit codebase and allow for easier maintenance and updates.
          </p>
        </article>

        <div class="egg" data-egg="fvsProjs_afterProj4"></div>

        <article class="project-card">
          <h3 class="project-title">Frosty Volcano Summit 2.0</h3>

          <dl class="project-details">
            <dt>Type:</dt>
            <dd>Website</dd>

            <dt>Languages:</dt>
            <dd>Typescript, React</dd>
          </dl>

          <p class="project-description">
            A complete rewrite of the Frosty Volcano Summit website, with a focus on performance, accessibility, and
            modern web development practices. This will help to break off the size of the main Frosty Volcano Summit
            codebase and allow for easier maintenance and updates.
          </p>
        </article>

        <div class="egg" data-egg="fvsProjs_afterProj5"></div>

        <article class="project-card">
          <h3 class="project-title">ACNH Apps 2.0</h3>

          <dl class="project-details">
            <dt>Type:</dt>
            <dd>Website</dd>

            <dt>Languages:</dt>
            <dd>Typescript, React</dd>
          </dl>

          <p class="project-description">
            A complete rewrite of the ACNH Apps website, with a focus on performance, accessibility, and modern web
            development practices. The JavaScript codebase will be rewritten in TypeScript, and the website will be
            rebuilt using React.
          </p>
        </article>

        <div class="egg" data-egg="fvsProjs_afterProj6"></div>

        <article class="project-card">
          <h3 class="project-title">Ethan's ACNH Website 2.0</h3>

          <dl class="project-details">
            <dt>Type:</dt>
            <dd>Website</dd>

            <dt>Languages:</dt>
            <dd>Typescript, React</dd>
          </dl>

          <p class="project-description">
            A complete rewrite of Ethan's ACNH Website, with a focus on performance, accessibility, and modern web
            development practices. This will help to break off the size of the main Frosty Volcano Summit codebase and
            allow for easier maintenance and updates.
          </p>
        </article>

        <div class="egg" data-egg="fvsProjs_afterProj7"></div>

        <article class="project-card">
          <h3 class="project-title">Tomodachi Album</h3>

          <dl class="project-details">
            <dt>Type:</dt>
            <dd>Web App + Native Desktop App</dd>

            <dt>Languages:</dt>
            <dd>Typescript, React | Rust (likely Raylib, no WebAssembly)</dd>
          </dl>

          <p class="project-description">
            A brand new project that allows users to upload their personal photos and organise a slideshow inspired by
            the Family Album from Tomodachi Life (Nintendo, 2014). The web app will be built using React and TypeScript,
            while the native desktop app will be built using Rust for performance and cross-platform compatibility.
            While this project could be revolutionary, it is being saved to last to ensure the maintenance of all other
            projects are taken care of first. I have not learnt Rust yet and so it will be quite a task. This should
            likely be the most fun project I make.
          </p>
        </article>

        <div class="egg" data-egg="fvsProjs_afterProj8"></div>

        <article class="project-card">
          <h3 class="project-title">Pat the Stable Dog</h3>

          <dl class="project-details">
            <dt>Type:</dt>
            <dd>Native Desktop App + Web App</dd>

            <dt>Languages:</dt>
            <dd>Rust or C++ with Raylib -> WebAssembly</dd>
          </dl>

          <p class="project-description">
            A brand new project that allows users to finally pat the damn dog from The Legend of Zelda: Breath of the
            Wild (Nintendo, 2017). The native desktop app will be built using either Rust or C++ with Raylib for
            performance and cross-platform compatibility. While this project could be revolutionary, it is being saved
            to last to ensure the maintenance of all other projects are taken care of first. I have not learnt Rust or
            C++ yet and so it will be quite a task. This idea has been suggested by others. It could also become quite
            popular.
          </p>
        </article>

        <div class="egg" data-egg="fvsProjs_afterProj9"></div>

        <article class="project-card">
          <h3 class="project-title">COMP1010 Project Rewrite</h3>

          <dl class="project-details">
            <dt>Type:</dt>
            <dd>Native Desktop App, maybe Web App</dd>

            <dt>Languages:</dt>
            <dd>C++</dd>
          </dl>

          <p class="project-description">
            A future assignment rewrite for the unit COMP1010 (Fundamentals of Computer Science), and no other details
            are known. The original assignment is going to be written in Java.
          </p>
        </article>

        <div class="egg" data-egg="fvsProjs_afterProj10"></div>
      </section>

      <br><br>
      <p id="verseBox"></p>
      <br>
      
      <div id="update-banner"
        style="display: none; background: #ffce00; color: #000; padding: 12px; text-align: center; font-weight: bold; position: fixed; top: 0; width: 100%; z-index: 9999;">
        🚀 A new application update is available!
        <button id="refresh-btn"
          style="margin-left: 15px; padding: 4px 10px; cursor: pointer; font-weight: bold;">Update Now</button>
      </div>

      <div class="app-build-info">
        <p>Last deployment: <span id="deploy-time">Loading metadata...</span></p>
      </div>
    </div>

    <form id="optForm"></form>
    <div class="flex">
      <div id="audctrls"></div>
      <div id="eggMenu"></div>
      <div id="copy"></div>
      <div id="install"></div>
    </div>
    <audio id="music"></audio>
  </main>
  <footer id="footer" class="bottom"></footer>
</body>
<script type="module" src="/app/dist/index.js"></script>

</html>