TheQuantifier.github.io/about.html at main · TheQuantifier/TheQuantifier.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>About – The Quantifier</title>

  <meta name="description" content="Learn more about The Quantifier — a mathematician, developer, and creative thinker exploring the intersections of logic, design, and imagination." />
  <meta name="author" content="John Hand" />

  <link rel="icon" type="image/png" href="images/favicon.png" />
  <link rel="stylesheet" href="styles/default.css" />
  <link rel="stylesheet" href="styles/about.css" />
</head>
<script>
  (function () {
    const DURATION = 100; // keep in sync with --fade-duration

    // Mark page as ready (fade in)
    function ready() {
      // In case we returned from bfcache, remove fading state
      document.body.classList.remove('is-fading');
      document.body.classList.add('is-ready');
    }

    // On normal load & bfcache restore
    window.addEventListener('DOMContentLoaded', ready);
    window.addEventListener('pageshow', (e) => {
      if (e.persisted) ready();
    });

    // Only intercept safe, same-tab, same-origin links
    function shouldIntercept(a) {
      if (!a) return false;
      const url = new URL(a.href, location.href);
      if (url.origin !== location.origin) return false;    // external
      if (a.target && a.target !== '_self') return false;  // new tab/window
      if (a.hasAttribute('download')) return false;        // download
      if (a.getAttribute('href')?.startsWith('#')) return false; // in-page
      return true;
    }

    document.addEventListener('click', (e) => {
      const a = e.target.closest('a');
      if (!shouldIntercept(a)) return;

      // Respect reduced motion
      const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

      e.preventDefault();
      if (!prefersReduced) {
        document.body.classList.add('is-fading');
        setTimeout(() => (location.href = a.href), DURATION);
      } else {
        location.href = a.href;
      }
    });
  })();
</script>
<body>
  <!-- ==================== HEADER ==================== -->
  <header class="thin-header">
    <div class="header-bar">
      <div class="header-left">
        <h1 class="site-title">The Quantifier</h1>
        <span class="tagline">Math • Code • Game • Repeat</span>
      </div>

      <nav aria-label="Main Navigation">
        <ul class="nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html"  class="active">About</a></li>
          <li><a href="blog.html">Blog</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- ==================== BANNER ==================== -->
  <section class="banner">
    <img src="images/about-banner.jpg" alt="Abstract geometric banner" />
    <div class="banner-overlay">
      <h2>About The Quantifier</h2>
      <p>Where logic meets imagination.</p>
    </div>
  </section>

  <!-- ==================== MAIN ==================== -->
  <main class="container about-page">
    <section class="profile">
      <div class="profile-photo">
        <img src="images/profile.jpg" alt="Portrait of The Quantifier" />
      </div>
      <div class="profile-text">
        <h2>Hello, I’m <span class="highlight">John Hand</span></h2>
        <p>
          I’m a mathematics major, programmer, and creative mind who enjoys blending analytical reasoning with art and storytelling.
          Whether it’s solving an elegant proof, designing a new RPG system, or exploring philosophy over coffee, I’m always quantifying the world around me.
        </p>
        <p>
          This site — <strong>The Quantifier</strong> — is my home on the web.
          It’s where I share thoughts, experiments, and projects that connect logic and creativity.
        </p>

        <div class="social-icons">
          <a href="https://github.com/TheQuantifier" target="_blank" title="GitHub">
            <img src="images/icon_github.svg" alt="GitHub Icon" />
          </a>
          <a href="https://www.youtube.com/@TheQuantifier" target="_blank" title="YouTube">
            <img src="images/icon_youtube.svg" alt="YouTube Icon" />
          </a>
          <a href="mailto:jhandalex100@gmail.com" title="Email">
            <img src="images/icon_email.svg" alt="Email Icon" />
          </a>
          <a href="https://linkedin.com/in/johnahand" target="_blank" title="LinkedIn">
            <img src="images/icon_linkedin.png" alt="LinkedIn Icon" />
          </a>
        </div>
      </div>
    </section>

    <section class="about-details">
      <h3>What I Do</h3>
      <p>
        I create, teach, and explore. My work spans mathematics, software development, and digital design — with a focus on clarity, structure, and storytelling.
        I’m currently developing an RPG game in Godot Engine, studying advanced math topics like differential equations and topology, and managing creative projects under <strong>Manus Webworks</strong>.
      </p>

      <h3>Beyond the Screen</h3>
      <p>
        Outside of academics and coding, I enjoy hiking, swimming, and exploring philosophical questions about meaning and discovery.
        I also love working with my community — whether it’s helping students as a tutor or leading campus events as part of UNCC’s Honors and Residence Life programs.
      </p>
    </section>
  </main>

  <!-- ==================== FOOTER ==================== -->
  <footer>
    <div class="container footer-content">
      <p>&copy; <span id="year"></span> The Quantifier. All rights reserved.</p>
      <p class="credit">Site by <strong>Manus Webworks</strong></p>
    </div>
  </footer>

  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
  </script>
</body>
</html>