index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Mason Aldrich is a student developer interested in programming, web development, and building small projects." />
    <title>Mason Aldrich | Developer Profile</title>
    <link rel="icon" href="assets/mason.ico" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/mobile.css" />
  </head>
  <body>
    <div class="loading-screen" aria-label="Loading portfolio" role="status"><div class="loader-box"><div class="loader-label">INITIALIZING PLAYER PROFILE</div><div class="loader-track"><div class="loader-bar"></div></div></div></div>
    <header class="site-header"><nav class="nav" aria-label="Primary navigation"><a class="brand" href="./">Mason Aldrich</a><button class="menu-toggle" type="button" aria-expanded="false" aria-controls="site-nav">Menu</button><div class="nav-links" id="site-nav"><a class="nav-link active" href="./" data-page="home">Home</a><a class="nav-link" href="./blog/" data-page="blog">Blog</a><a class="nav-link" href="./projects/" data-page="projects">Projects</a><a class="nav-link" href="./about/" data-page="about">About</a><a class="nav-link" href="./contact/" data-page="contact">Contact</a></div></nav></header>
    <main>
      <section class="hero" aria-labelledby="home-title"><div class="hero-copy reveal"><p class="eyebrow">PLAYER 01 / STUDENT DEVELOPER</p><h1 id="home-title">Mason<br />Aldrich</h1><p class="hero-subtitle">Building small things with code.</p><p class="hero-text">I’m a high school student exploring programming and web development. I write Python, experiment with HTML and CSS, and turn curious ideas into projects that teach me something new.</p><ul class="tag-list" aria-label="Languages I use"><li>Python</li><li>HTML</li><li>CSS</li></ul><div class="hero-actions"><a class="button button-primary" href="./projects/">Launch Projects</a><a class="button button-secondary" href="./about/">View Profile</a></div></div><div class="hero-visual reveal"><img src="assets/mason.jpeg" alt="Portrait of Mason Aldrich" /></div></section>
      <section class="panel reveal" aria-labelledby="focus-title"><div class="panel-header"><p class="eyebrow">ACTIVE LOADOUT</p><h2 id="focus-title">What I’m focused on</h2></div><div class="panel-grid"><article class="panel-card"><p class="eyebrow">01 / BUILD</p><h3>Programming</h3><p>Learning fundamentals through real projects and repeatable practice.</p></article><article class="panel-card"><p class="eyebrow">02 / SHIP</p><h3>Web Development</h3><p>Creating lightweight websites with clear structure and intentional design.</p></article><article class="panel-card"><p class="eyebrow">03 / GROW</p><h3>Open Learning</h3><p>Debugging, experimenting, and sharing what I learn along the way.</p></article></div></section>
    </main>
    <footer class="site-footer"><p>© 2026 Mason Aldrich</p><p>STATUS: ONLINE / BUILT WITH HTML, CSS &amp; JS</p></footer>
    <script src="js/script.js"></script>
  </body>
</html>