gtbr-site/index.html at main · CSVillain/gtbr-site · 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
150
151
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Tommy Lowe" />
  <title>GTBR | Tommy Lowe</title>
  <script>document.documentElement.classList.add('js');</script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Sora:wght@400;500;600&display=swap"
    rel="stylesheet"
  />
  <link rel="stylesheet" href="./base.css" />
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>

  <div class="grid-overlay" aria-hidden="true"></div>
  <div class="neural-bg" aria-hidden="true">
    <canvas id="hero-orb-canvas"></canvas>
  </div>

  <header class="site-header" id="top">
    <div class="site-header-inner shell">
      <a class="brand" href="#top">GTBR</a>
      <nav class="site-nav" aria-label="Primary">
        <a href="#work">Projects</a>
        <a href="#architecture">Principles</a>
        <a href="#contact">Contact</a>
      </nav>
    </div>
  </header>

  <main id="main">
    <section class="hero hero-orb" id="hero">
      <div class="hero-orb-copy shell">
        <h1><span id="hero-prefix-text" class="hero-prefix-text">get the basics </span><span id="hero-final-word" class="hero-final-word"></span></h1>
      </div>
    </section>

    <section class="work shell" id="work" aria-labelledby="work-subheading">
      <h2 id="work-subheading" class="section-heading">Projects</h2>
      <div class="module-grid" id="project-cards"></div>
    </section>

    <section class="diagram shell principles" id="architecture" aria-labelledby="principles-subheading">
      <h2 id="principles-subheading" class="section-heading">Principles</h2>

      <div class="principles-layout reveal" aria-label="Principle detail panel">
        <div class="principles-tabs" role="tablist" aria-label="Principles">
          <button
            class="principle-tab"
            type="button"
            role="tab"
            id="principle-tab-logic"
            aria-controls="principle-panel"
            aria-selected="false"
            tabindex="0"
            data-principle="logic"
            data-summary="When complexity rises, I default to structure: smaller parts, clear boundaries, and reusable patterns. That discipline keeps solutions practical in the short term and resilient in the long term."
            data-bullets="Structure and sustainability come before speed for its own sake.|Evidence, not instinct alone, decides the direction.|Only essential complexity stays; the rest gets removed."
          >
            Logic
          </button>
          <button
            class="principle-tab"
            type="button"
            role="tab"
            id="principle-tab-clarity"
            aria-controls="principle-panel"
            aria-selected="false"
            tabindex="-1"
            data-principle="clarity"
            data-summary="Progress is hard when people are interpreting the same work in different ways. I reduce that risk by making intent, language, and expectations unmistakably clear."
            data-bullets="Analytics shape the message, not just the reporting layer.|Plain language is preferred, with jargon used only when it adds precision.|Transparency builds trust faster than certainty theater."
          >
            Clarity
          </button>
          <button
            class="principle-tab"
            type="button"
            role="tab"
            id="principle-tab-scale"
            aria-controls="principle-panel"
            aria-selected="false"
            tabindex="-1"
            data-principle="scale"
            data-summary="Context changes, but good architecture should not collapse when it does. I design for small starts and larger futures so growth feels like extension, not reinvention."
            data-bullets="Specific needs are respected without sacrificing scalability.|Reusable modules create leverage across different problem sizes.|Change is absorbed by evolving the system, not discarding previous value."
          >
            Scale
          </button>
          <button
            class="principle-tab"
            type="button"
            role="tab"
            id="principle-tab-growth"
            aria-controls="principle-panel"
            aria-selected="false"
            tabindex="-1"
            data-principle="growth"
            data-summary="Finished does not mean fixed in place. I treat every release as a checkpoint, then improve both the work and my own thinking through what it teaches next."
            data-bullets="New challenges are used as deliberate learning opportunities.|Tacit knowledge is captured so judgment improves over time.|Experimentation is used to test ideas quickly and keep what proves itself in practice."
          >
            Growth
          </button>
          <button
            class="principle-tab"
            type="button"
            role="tab"
            id="principle-tab-value"
            aria-controls="principle-panel"
            aria-selected="false"
            tabindex="-1"
            data-principle="value"
            data-summary="Not all work deserves equal attention. I measure effort against impact, then commit where it creates lasting improvement instead of short-lived activity."
            data-bullets="Hard truths are faced early so priorities stay real.|Quality is protected by refusing shortcuts that create hidden costs.|Long-term outcomes outweigh short-term optics."
          >
            Value
          </button>
        </div>

        <div class="principles-signal" aria-hidden="true">
          <span class="principles-signal-node" data-principle="logic"></span>
          <span class="principles-signal-node" data-principle="clarity"></span>
          <span class="principles-signal-node" data-principle="scale"></span>
          <span class="principles-signal-node" data-principle="growth"></span>
          <span class="principles-signal-node" data-principle="value"></span>
        </div>

        <article class="principle-panel" id="principle-panel" role="tabpanel" aria-label="Principle details">
          <h3 id="principle-panel-heading" class="principle-panel-heading"></h3>
          <p id="principle-panel-summary"></p>
          <ul id="principle-panel-list"></ul>
        </article>
      </div>
    </section>
  </main>

  <footer class="site-footer shell" id="contact">
    <h2 id="contact-subheading" class="section-heading">Contact</h2>
    <p class="contact-intro reveal">Want to chat?</p>
    <p class="reveal">Email <a href="mailto:hello@gtbr.co.uk">hello@gtbr.co.uk</a>.</p>
    <p class="footnote reveal">&copy; <span id="year"></span> GTBR</p>
  </footer>

  <script src="./main.js" defer></script>
</body>
</html>