index.html

<!DOCTYPE HTML>
<html>

<head>
  <title>ZethalMC</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="assets/css/main.css" />
  <link rel="stylesheet" href="assets/css/gallery.css" />
  <meta name="description" content="ZethalMC (Zethal_)'s personal portfolio website." />
  <meta name="author" content="Zethal_" />
  <noscript>
    <link rel="stylesheet" href="assets/css/noscript.css" />
  </noscript>
</head>

<body class="is-preload">

  <div id="wrapper">

    <header id="header">
      <div class="logo">
        <span class="	fab fa-centos" style="font-size: 90px;"></span>
      </div>
      <div class="content">
        <div class="inner">
          <h1>ZethalMC</h1>
          <p><i>"Building dreams, one block at a time."</i></p>
        </div>
      </div>
      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#servers">Servers</a></li>
        </ul>
      </nav>
      <ul>
        <a href='#mc-utilities'>Minecraft Utilities</a>
      </ul>
    </header>

    <div id="main">

      <article id="about">
        <h2 class="major">About</h2>
        <span class="image main"><img src="images/npic01.png" alt="" /></span>
        <p>Hello there, my name is ZethalMC. When I'm not navigating the challenges of high school, you'll likely find
          me immersed in the world of programming, gaming, and exploring the fascinating field of AI. The languages I'm
          familiar with include Python, HTML, CSS, and JavaScript. I love creating digital landscapes, bringing things
          to life, and experimenting with artificial intelligence.
          <br><br>
          On the gaming front, my playground is mainly Minecraft, and I've crafted many adventures in this game. You can
          catch me hanging out on Discord too, where I'm always up for a chat about really everything.
          <br><br>
          In the pursuit of my interests, I find beauty in perfection, symmetry, and neatness, although I'm not one to
          lose sleep over it. I appreciate order, but I'm not afraid to embrace a bit of chaos if it leads to a more
          exciting outcome.
          <br><br>
          As I navigate through high school, I'm eagerly anticipating the future and the opportunities it holds for both
          my programming endeavors and gaming adventures. I'm looking forward to the insights and adventures that are
          waiting for me, even though my list of accomplishments is still evolving.
        </p>
      </article>

      <article id="projects">
        <h2 class="major">Projects</h2>
        <span class="image main"><img src="images/npic03.png" alt="" /></span>
        <h2>ZethalMC's Projects</h2>

        <table>
          <thead>
            <tr>
              <th>Project Name</th>
              <th>Description</th>
              <th>Link</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Eleysae Website</td>
              <td>Website for Eleysae, the town of the Boaterists on the <a href="https://stoneworks.gg"
                  target="_blank">Stoneworks</a>
                Minecraft server.</td>
              <td><button
                  onclick="window.location.href='https:\/\/zethalmc.com/stoneworks/rathnir/eleysae/index.html'" target="_blank">View
                  Project</button></td>
            </tr>
            <tr>
              <td>Book Converter</td>
              <td>A web-based tool designed to convert ebooks, articles, and other written content into
                Stendhal-compatible books for Minecraft, allowing users to easily import and share their favorite texts
                in-game.</td>
              <td><button onclick="window.location.href='https:\/\/zethalmc.com/mc-utilities/book-converter'">View
                  Project</button></td>
            </tr>
            <!-- More rows for additional projects here. -->
          </tbody>
        </table>

        <p>Stay tuned for more projects in the future!</p>
        </p>
      </article>

      <article id="contact">
        <h2 class="major">Contact</h2>
        <span class="image main"><img src="images/npic02.jpg" alt="" /></span>

        <ul>
          <li><span class="fas fa-at"></span>&nbsp;<strong>Email:</strong> <a
              href="mailto:ZethalMC@gmail.com">ZethalMC@gmail.com</a></li>
          <li><span class="fab fa-discord"></span>&nbsp;<strong>Discord:</strong> Zethal_</li>
          <li><span class="fas fa-id-card"></span>&nbsp;<strong>NameMC:</strong> <a
              href="https://namemc.com/profile/zethal_.1" target="_blank">Zethal_</a></li>
          <li><span class="fab fa-github"></span>&nbsp;<strong>GitHub:</strong> <a href="https://github.com/ZethalMC"
              target="_blank">ZethalMC on GitHub</a></li>
        </ul>
        <p>Discord is the place to get a quick reply. You can call me Zethal_, Zethal, or simply Ze.</p>
      </article>

      <article id="servers">
        <ul>
          <h2 class="mayor">Servers</h2>
          <p>The servers I play in.</p>
          <div id="server-buttons" class="left">
            <button onclick="window.location.href='#stoneworks'" class="button">
              <img src="images/stoneworks.png" alt="stoneworks-img"
                style="width: 32px; height: 32px; vertical-align: middle;">
              Stoneworks
            </button>
            <br><br>
            <button onclick="window.location.href='letsurvivx/index.html'" class="button" formtarget="_blank">
              <img src="images/letsurvivx.png" alt="letsurvivx-img"
                style="width: 32px; height: 32px; vertical-align: middle; border-radius: 20px;">
              LetSurvivX
            </button>
          </div>
        </ul>
      </article>

      <article id="stoneworks">
        <ul>
          <h2 class="mayor">Stoneworks</h2>
          <p>I am an enthusiastic player on the Stoneworks Minecraft server, where I am especially active in writing,
            roleplay and developing lore, called <b>community
              storytelling</b>. As a moderator on Stoneworks, I also help to maintain a fair and
            positive environment, to ensure players of a friendly environment on Discord, as well as in the Minecraft
            server.
            <br><br>
            One of my passions on Stoneworks is writing lore. I take great pleasure in developing
            history, culture and science. Additionally, I enjoy creating stories for various guilds and corporations
            affiliated with Stoneworks, which I am sometimes hired to by people.
            <br><br>
            For me, the Stoneworks community is truly remarkable. It is full of creative and truly dedicated
            individuals, most of whom share a love of lore, art and role-playing. The events on the server are always a
            highlight for me. These provide opportunities for me to participate in large-scale roleplaying and, more
            importantly, to create new lore to write about. Being part of this community has been an incredibly
            enjoyable experience and I am excited to continue contributing to its growth and success.
          </p>
        </ul>
      </article>

      <article id="mc-utilities">
        <ul>
          <h2 class="mayor">Minecraft Utilities</h2>
          <p>These are the utilities I made or adapted.</p>
          <button onclick="window.location.href='https:\/\/zethalmc.com/mc-utilities/book-converter.html'"
            class="button">Book
            Converter</button>
        </ul>
      </article>

    </div>

    <footer id="footer">
      <p class="copyright"><a href="#contact">Contact</a> | Follow me on <a href="https://namemc.com/profile/Zethal_.1"
          target="_blank">NameMC</a>.</p>
      <p class="copyright" xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a
          property="dct:title" rel="cc:attributionURL" href="http://zethalmc.com">ZethalMC.com</a> by <a
          rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://github.com/ZethalMC">ZethalMC
          (Zethal_)</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1"
          target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-SA 4.0<img
            style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
            src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img
            style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
            src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img
            style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
            src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt=""></a></p>
    </footer>

  </div>

  <div id="bg"></div>

  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/browser.min.js"></script>
  <script src="assets/js/breakpoints.min.js"></script>
  <script src="assets/js/util.js"></script>
  <script src="assets/js/main.js"></script>
  <script src="assets/js/expandgallery.js"></script>

</body>

</html>