website

website/src/components/home/Hero.astro (1339B)

---

---
// The landing section: the name, which decodes itself bit by bit on load
// (src/scripts/home/decode.js), in front of a wall of my C code
// (src/scripts/home/wall.js, with the code in src/data/wall.js). data-file
// follows the window the wall's cursor is in.
import "../../styles/home/hero.css";
---
<section class="hero" id="top" data-file="cube.c" data-mode="C" aria-labelledby="hero-name">
  <canvas class="hero-wall" aria-hidden="true"></canvas>
  <div class="hero-in">
    <div class="hero-id">
      <h1 class="hero-name" id="hero-name">Michael Neuper</h1>
      <p class="hero-lede">Computer science student at Stellenbosch University. I like low-level software, electronics and the maths underneath both, and I do almost all of it in Emacs.</p>
      <ul class="legend" aria-label="Colour key used across the site">
        <li data-cat="hw">hardware</li>
        <li data-cat="sw">software</li>
        <li data-cat="math">maths</li>
        <li data-cat="sec">security</li>
      </ul>
    </div>
  </div>
</section>

<script>
  import { initDecode } from "../../scripts/home/decode.js";
  import { initWall } from "../../scripts/home/wall.js";

  initDecode().catch((err) => {
    console.error(err);
    document.documentElement.classList.remove("boot");
  });
  initWall().catch((err) => console.error(err));
</script>