PageSourceSearch

https://jgthms.com/

html jgthms.com collected 2026-10-03 20:20:24 UTC 122,898 bytes, 3,328 lines download raw bytes

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    
6<script>
7      (function () {
8        var theme = localStorage.getItem("theme");
9        if (theme === "light" || theme === "dark") {
10          document.documentElement.setAttribute("data-theme", theme);
11        }
12      })();
13    </script>
13
14    <title>Jeremy Thomas – CSS Guru</title>
15    <meta name="description" content="Jeremy Thomas is a frontend developer from 🇫🇷 Bordeaux, living in 🇬🇧 Manchester. He's a 🎨 designer, 🔨 developer, 👨‍🏫 code teacher and ❤️ open source contributor. 👍" />
16
17    <meta property="og:type" content="website" />
18    <meta property="og:url" content="https://jgthms.com/" />
19    <meta property="og:site_name" content="Jeremy Thomas" />
20    <meta property="og:title" content="Jeremy Thomas – CSS Guru" />
21    <meta property="og:description" content="Jeremy Thomas is a frontend developer from 🇫🇷 Bordeaux, living in 🇬🇧 Manchester. He's a 🎨 designer, 🔨 developer, 👨‍🏫 code teacher and ❤️ open source contributor. 👍" />
22    <meta
23      property="og:image"
24      content="https://jgthms.com/assets/images/share.png"
25    />
26    <meta property="og:image:width" content="1200" />
27    <meta property="og:image:height" content="630" />
28
29    <meta name="twitter:card" content="summary_large_image" />
30    <meta name="twitter:site" content="@jgthms" />
31    <meta name="twitter:title" content="Jeremy Thomas – CSS Guru" />
32    <meta name="twitter:description" content="Jeremy Thomas is a frontend developer from 🇫🇷 Bordeaux, living in 🇬🇧 Manchester. He's a 🎨 designer, 🔨 developer, 👨‍🏫 code teacher and ❤️ open source contributor. 👍" />
33    <meta
34      name="twitter:image"
35      content="https://jgthms.com/assets/images/share.png"
36    />
37
38    <meta name="google-adsense-account" content="ca-pub-1681185685897605">
39
40    <link
41      rel="apple-touch-icon"
42      sizes="180x180"
43      href="https://jgthms.com/favicons/apple-touch-icon.png"
44    />
45    <link
46      rel="icon"
47      type="image/png"
48      sizes="32x32"
49      href="https://jgthms.com/favicons/favicon-32x32.png"
50    />
51    <link
52      rel="icon"
53      type="image/png"
54      sizes="16x16"
55      href="https://jgthms.com/favicons/favicon-16x16.png"
56    />
57    <link rel="shortcut icon" href="https://jgthms.com/favicons/favicon.ico" />
58    <link rel="manifest" href="https://jgthms.com/favicons/manifest.json" />
59    <link
60      rel="mask-icon"
61      href="https://jgthms.com/favicons/safari-pinned-tab.svg"
62      color="#ff2450"
63    />
64    <meta name="msapplication-TileColor" content="#ff2450" />
65    <meta
66      name="msapplication-config"
67      content="https://jgthms.com/favicons/browserconfig.xml"
68    />
69    <meta name="theme-color" content="#ffffff" />
70
71    <link rel="preconnect" href="https://fonts.googleapis.com" />
72    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
73    <link
74      rel="stylesheet"
75      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
76    />
77    <link
78      rel="stylesheet"
79      href="https://jgthms.com/style.css?v=1790873296"
80    />
81  </head>
82  <body>
83    <header class="header">
84  <div class="header-me">
85    <a href="https://jgthms.com/" class="bounce-fade-in icon jt">
86      <svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
87<rect width="600" height="600" rx="60" fill="#FF2450"/>
88<path fill-rule="evenodd" clip-rule="evenodd" d="M380 273.333L346.667 406.667C340 433.333 373.333 433.333 373.333 433.333C359.112 426.223 360 406.667 360 406.667C360 406.667 360 380 386.667 380C386.667 380 413.333 380 413.333 406.667C413.333 460 360 460 360 460C360 460 273.333 460 298.667 380L326.667 273.333H290L273.333 340C260 393.333 206.667 393.333 206.667 393.333C206.667 393.333 140 394.975 140 340C140 313.333 166.667 313.333 166.667 313.333C193.333 313.333 193.333 340 193.333 340C193.333 340 193.333 366.667 166.667 366.667C166.667 366.667 206.667 380 220 340L253.333 206.667H226.667C226.667 206.667 186.667 206.667 160 233.333C160 233.333 160 166.667 226.667 166.667H333.333C333.333 166.667 373.333 166.667 400 140C400 140 400 206.667 333.333 206.667H306.667L300 233.333H406.667C406.667 233.333 446.667 233.333 460 220C460 220 458.667 273.333 406.667 273.333H380Z" fill="#310736"/>
89</svg>
90
91    </a>
92
93    <div class="stack header-about">
94      <strong class="delay-1 bounce-slide-down name-jt">Jeremy T.</strong>
95      <strong class="delay-1 bounce-slide-down name-jeremy-thomas"
96        >Jeremy Thomas</strong
97      >
98      <em class="delay-2 bounce-slide">CSS Guru</em>
99    </div>
100  </div>
101
102  <nav class="nav">
103    
104  <div class="link is-active">
105    <div
106      class="stack link-lift"
107      style="view-transition-name: link-lift-work;"
108    >
109      <a href="https://jgthms.com/">Work</a>
110      <strong>Work</strong>
111    </div>
112  </div>
113   
114  <div class="link">
115    <div
116      class="stack link-lift"
117      style="view-transition-name: link-lift-book;"
118    >
119      <a href="https://jgthms.com/css-in-44-minutes-ebook/">Book</a>
120      <strong>Book</strong>
121    </div>
122  </div>
123   
124  <div class="link">
125    <div
126      class="stack link-lift"
127      style="view-transition-name: link-lift-mail;"
128    >
129      <a href="https://jgthms.com/mail/">Mail</a>
130      <strong>Mail</strong>
131    </div>
132  </div>
133  
134  <div class="link is-past">
135    <a href="https://past.jgthms.com/" target="_blank"
136      >
137      <span>Past</span>
138      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path opacity=".4" d="M64 240C64 195.8 99.8 160 144 160L224 160C241.7 160 256 174.3 256 192C256 209.7 241.7 224 224 224L144 224C135.2 224 128 231.2 128 240L128 496C128 504.8 135.2 512 144 512L400 512C408.8 512 416 504.8 416 496L416 416C416 398.3 430.3 384 448 384C465.7 384 480 398.3 480 416L480 496C480 540.2 444.2 576 400 576L144 576C99.8 576 64 540.2 64 496L64 240z"/><path d="M352 96C352 78.3 366.3 64 384 64L544 64C561.7 64 576 78.3 576 96L576 256C576 273.7 561.7 288 544 288C526.3 288 512 273.7 512 256L512 173.3L310.6 374.7C298.1 387.2 277.8 387.2 265.3 374.7C252.8 362.2 252.8 341.9 265.3 329.4L466.7 128L384 128C366.3 128 352 113.7 352 96z"/></svg>
139    </a>
140  </div>
141</nav>
142
143
144  <div class="themes" role="group" aria-label="Theme">
145  <button
146    type="button"
147    class="theme-option is-system reset"
148    title="System theme"
149    data-theme-option="system"
150  >
151    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path opacity=".4" d="M133.3 133.3C126.7 139.2 124 148.3 126.1 156.9C128.3 165.5 135 172.2 143.6 174.4C152.2 176.5 161.3 173.8 167.2 167.2C173.8 161.3 176.5 152.2 174.4 143.6C172.2 135 165.5 128.3 156.9 126.1C148.3 124 139.2 126.7 133.3 133.3zM288 320C288 337.7 302.3 352 320 352C337.7 352 352 337.7 352 320C352 302.3 337.7 288 320 288C302.3 288 288 302.3 288 320zM472.7 472.7C466.1 478.6 463.4 487.7 465.5 496.3C467.7 504.9 474.4 511.6 483 513.8C491.6 515.9 500.7 513.2 506.6 506.6C513.2 500.7 515.9 491.6 513.8 483C511.6 474.4 504.9 467.7 496.3 465.5C487.7 463.4 478.6 466.1 472.7 472.7z"/><path d="M227.9 81.1C235.4 89.5 241.3 98.8 245.6 108.7C268.9 100.5 293.9 96.1 320 96.1C443.7 96.1 544 196.4 544 320.1C544 363.3 531.8 403.6 510.6 437.8C490.4 429.7 466.5 433.8 450.1 450.2C428.2 472.1 428.2 507.5 450.1 529.4C472 551.3 507.4 551.3 529.3 529.4C548.7 510 550.9 479.8 535.8 457.9C561.3 418.1 576 370.8 576 320.1C576 178.7 461.4 64.1 320 64.1C287.5 64.1 256.5 70.1 227.9 81.2zM394.4 531.4C371.1 539.6 346.1 544 320 544C196.3 544 96 443.7 96 320C96 276.8 108.2 236.5 129.4 202.3C149.6 210.4 173.5 206.3 189.9 189.9C211.8 168 211.8 132.6 189.9 110.7C168 88.8 132.6 88.8 110.7 110.7C91.3 130.1 89.1 160.3 104.2 182.2C78.7 222 64 269.3 64 320C64 461.4 178.6 576 320 576C352.5 576 383.5 570 412.1 558.9C404.6 550.5 398.7 541.2 394.4 531.3zM448 320C448 390.7 390.7 448 320 448C249.3 448 192 390.7 192 320C192 249.3 249.3 192 320 192C342.9 192 364.4 198 383 208.5C379.8 221.7 383.3 236.1 393.5 246.4C403.7 256.7 418.3 260.2 431.4 256.9C442 275.6 448 297.1 448 320zM457 237.3C465.2 222.1 463 202.7 450.1 189.9C437.2 177.1 417.9 174.8 402.7 183C378.6 168.4 350.2 160 320 160C231.6 160 160 231.6 160 320C160 408.4 231.6 480 320 480C408.4 480 480 408.4 480 320C480 289.7 471.6 261.4 457 237.3zM288 320C288 302.3 302.3 288 320 288C337.7 288 352 302.3 352 320C352 337.7 337.7 352 320 352C302.3 352 288 337.7 288 320zM384 320C384 284.7 355.3 256 320 256C284.7 256 256 284.7 256 320C256 355.3 284.7 384 320 384C355.3 384 384 355.3 384 320zM167.3 133.3C173.9 139.2 176.6 148.3 174.5 156.9C172.3 165.5 165.6 172.2 157 174.4C148.4 176.5 139.3 173.8 133.4 167.2C126.8 161.3 124.1 152.2 126.2 143.6C128.4 135 135.1 128.3 143.7 126.1C152.3 124 161.4 126.7 167.3 133.3zM472.7 472.7C478.6 466.1 487.7 463.4 496.3 465.5C504.9 467.7 511.6 474.4 513.8 483C515.9 491.6 513.2 500.7 506.6 506.6C500.7 513.2 491.6 515.9 483 513.8C474.4 511.6 467.7 504.9 465.5 496.3C463.4 487.7 466.1 478.6 472.7 472.7z"/></svg>
152  </button>
153  <button
154    type="button"
155    class="theme-option is-light reset"
156    title="Light theme"
157    data-theme-option="light"
158  >
159    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path opacity=".4" d="M224 320C224 373 267 416 320 416C373 416 416 373 416 320C416 267 373 224 320 224C267 224 224 267 224 320z"/><path d="M320 496C328.8 496 336 503.2 336 512L336 592C336 600.8 328.8 608 320 608C311.2 608 304 600.8 304 592
159L304 512C304 503.2 311.2 496 320 496zM172.9 444.4C179.1 438.2 189.3 438.2 195.6 444.4C201.9 450.6 201.8 460.8 195.6 467.1L139 523.7C132.8 529.9 122.6 529.9 116.4 523.7C110.2 517.5 110.2 507.3 116.4 501.1L173 444.5zM444.4 444.4C450.6 438.2 460.8 438.2 467.1 444.4L523.7 501C529.9 507.2 529.9 517.4 523.7 523.6C517.5 529.8 507.3 529.8 501.1 523.6L444.5 467C438.3 460.8 438.3 450.6 444.5 444.3zM320 448C249.3 448 192 390.7 192 320C192 249.3 249.3 192 320 192C390.7 192 448 249.3 448 320C448 390.7 390.7 448 320 448zM320 224C267 224 224 267 224 320C224 373 267 416 320 416C373 416 416 373 416 320C416 267 373 224 320 224zM128 304C136.8 304 144 311.2 144 320C144 328.8 136.8 336 128 336L48 336C39.2 336 32 328.8 32 320C32 311.2 39.2 304 48 304L128 304zM592 304C600.8 304 608 311.2 608 320C608 328.8 600.8 336 592 336L512 336C503.2 336 496 328.8 496 320C496 311.2 503.2 304 512 304L592 304zM116.3 116.3C122.5 110.1 132.7 110.1 138.9 116.3L195.5 172.9C201.7 179.1 201.7 189.3 195.5 195.6C189.3 201.9 179.1 201.8 172.8 195.6L116.3 139C110.1 132.8 110.1 122.6 116.3 116.4zM501 116.3C507.2 110.1 517.4 110.1 523.6 116.3C529.8 122.5 529.8 132.7 523.6 138.9L467 195.5C460.8 201.7 450.6 201.7 444.3 195.5C438 189.3 438.1 179.1 444.3 172.8L501 116.3zM320 32C328.8 32 336 39.2 336 48L336 128C336 136.8 328.8 144 320 144C311.2 144 304 136.8 304 128L304 48C304 39.2 311.2 32 320 32z"/></svg>
160  </button>
161  <button
162    type="button"
163    class="theme-option is-dark reset"
164    title="Dark theme"
165    data-theme-option="dark"
166  >
167    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path opacity=".4" d="M112 352C112 449.2 190.8 528 288 528C310.2 528 331.5 523.9 351.1 516.4C266.4 489.7 205 410.5 205 317C205 263.9 224.8 215.5 257.3 178.7C174.7 193.2 112 265.3 112 352z"/><path d="M503.8 153.8L492.8 115.2L454.2 104.2C450.6 103.2 448 99.8 448 96C448 92.2 450.5 88.9 454.2 87.8L492.8 76.8L503.8 38.2C504.8 34.6 508.2 32 512 32C515.8 32 519.1 34.5 520.2 38.2L531.2 76.8L569.8 87.8C573.4 88.8 576 92.2 576 96C576 99.8 573.5 103.1 569.8 104.2L531.2 115.2L520.2 153.8C519.2 157.4 515.8 160 512 160C508.2 160 504.9 157.5 503.8 153.8zM435.8 390.8L419.2 332.8L361.2 316.2C355.7 314.6 352 309.6 352 304C352 298.4 355.8 293.3 361.2 291.8L419.2 275.2L435.8 217.2C437.4 211.7 442.4 208 448 208C453.6 208 458.7 211.8 460.2 217.2L476.8 275.2L534.8 291.8C540.3 293.4 544 298.4 544 304C544 309.6 540.2 314.7 534.8 316.2L476.8 332.8L460.2 390.8C458.6 396.3 453.6 400 448 400C442.4 400 437.3 396.2 435.8 390.8zM427 477.5C435.8 476.8 444.2 481.7 447.8 489.8C451.4 497.9 449.6 507.4 443.2 513.6C439.2 517.5 435 521.2 430.7 524.7C392 556.7 342.2 576 288 576C164.3 576 64 475.7 64 352C64 228.3 164.3 128 288 128C298.9 128 309.6 128.8 320.1 130.3C326 131.1 331.9 132.2 337.6 133.5C346.3 135.5 352.8 142.7 353.8 151.5C354.8 160.3 350.3 168.8 342.3 172.8C289.3 199.2 253 253.9 253 317C253 405.9 325.1 478 414 478C418.4 478 422.7 477.8 426.9 477.5zM205 317C205 263.9 224.8 215.5 257.3 178.7C174.7 193.2 112 265.3 112 352C112 449.2 190.8 528 288 528C310.2 528 331.5 523.9 351.1 516.4C266.4 489.7 205 410.5 205 317z"/></svg>
168  </button>
169</div>
170
171</header>
172
173
174<div class="stack hero">
175  <h1 class="stack home">
176    <div class="title home-title split-words">
177      <p>I build design systems and code websites for leaders and brands all around
178      the world.</p>
179
180      <p>Within my 20 years of experience, my professional work and open source
181      contributions have already impacted millions of people.</p>
182    </div>
183  </h1>
184</div>
185
186<style>
187  em {
188    /* display: none; */
189    font-style: normal;
190  }
191</style>
192
193<div class="stack work">
194  <nav class="list filters">
195      <div class="link link-filter is-active" data-filter="all">
196        <div class="stack link-lift">
197          <button class="reset">All</button>
198          <strong>All</strong>
199        </div>
200      </div>
201
202      <div class="link link-filter" data-filter="selected">
203        <div class="stack link-lift">
204          <button class="reset">Best</button>
205          <strong>Best</strong>
206        </div>
207      </div>
208
209      <!-- <em>・</em> -->
210
211      <div class="link link-sorting is-active" data-sorting="latest">
212        <div class="stack link-lift">
213          <button class="reset">Latest</button>
214          <strong>Latest</strong>
215        </div>
216      </div>
217
218      <div class="link link-sorting" data-sorting="popular">
219        <div class="stack link-lift">
220          <button class="reset">Popular</button>
221          <strong>Popular</strong>
222        </div>
223      </div>
224
225      <div style="margin-inline-start: auto !important;" class="link link-layout is-active" data-layout="list">
226        <div class="stack link-lift">
227          <button class="reset">List</button>
228          <strong>List</strong>
229        </div>
230      </div>
231
232      <div class="link link-layout" data-layout="grid">
233        <div class="stack link-lift">
234          <button class="reset">Grid</button>
235          <strong>Grid</strong>
236        </div>
237      </div>
238
239      <div class="tags">
240        <button class="link reset tags-trigger">
241          <div class="stack link-lift">
242            <span class="reset">Tags (<span class="tag-count">0</span>)</span>
243            <strong>Tags (<span class="tag-count">0</span>)</strong>
244          </div>
245        </button>
246
247        <div class="tags-panel">
248          
249          
250          
251          <label class="tag">
252            <input type="checkbox" name="tag" value="android" />
253            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M131.2 125.9C136.5 125.4 141.8 126.5 146.5 128.9C151.2 131.3 155.1 135.1 157.8 139.7C174.8 169.2 192 198.6 209 228.1C212.5 226.7 216 225.4 219.5 224.2C250.8 213.3 283.7 207.6 316.9 207.3C317.9 207.3 319 207.3 320.1 207.3C358.2 207.3 396.3 214.3 431.7 228.4L483 139.7C484.8 136.5 487.3 133.7 490.2 131.5C493.1 129.3 496.4 127.6 500 126.7C503.1 125.9 506.4 125.6 509.6 125.9C513.8 126.3 517.9 127.6 521.5 129.7C525.5 132.1 528.8 135.4 531.2 139.4C533.2 142.8 534.5 146.6 535 150.6C535.5 154.6 535.1 158.6 533.8 162.3C533.2 164.2 532.4 166 531.4 167.8L481.7 253.6C501.2 265.8 519.3 280.1 535.6 296.4C547.9 308.6 559.1 321.8 569.1 335.9C577.3 347.4 584.7 359.5 591.3 372.1C608.8 405.7 619.9 442.6 624 480.2L16 480.2C20.1 442.5 31.2 405.7 48.7 372.1C63.2 344.2 82.1 318.6 104.4 296.4C120.9 280 139.1 265.5 158.9 253.3L109.4 167.9C105.7 161.5 104.7 153.8 106.6 146.7C108.5 139.6 113 133.6 119.3 129.9C122.9 127.7 127 126.4 131.2 126.1zM198.5 341.7C186.3 333.6 168.4 339.2 158.4 354.2C148.4 369.2 150.2 388 162.3 396.1C174.4 404.2 192.4 398.6 202.4 383.6C212.4 368.6 210.6 349.8 198.5 341.7zM482.1 354.2C472.1 339.2 454.2 333.6 442 341.7C429.8 349.8 428.1 368.6 438.1 383.6C448.1 398.6 466 404.2 478.2 396.1C490.4 388 492.1 369.2 482.1 354.2z"/></svg>
254            Android
255          </label>
256          
257          
258          
259          <label class="tag">
260            <input type="checkbox" name="tag" value="branding" />
261            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M528 322.2C528 324.9 527 327.4 523.8 330.2C520 333.3 513.7 336 506 336L408 336C355 336 312 379 312 432C312 438.8 312.7 445.4 314.1 451.8C317.4 467.5 324.3 482.9 328.5 492.4L328.5 492.4C329.2 494 329.9 495.4 330.4 496.7C335.4 508.2 336 512.1 336 513.8C336 519.1 334.1 523.3 332.2 525.6C331.3 526.7 330.6 527.2 330.2 527.4C329.9 527.6 329.4 527.7 328.6 527.8C325.7 527.9 322.9 528 320 528C205.1 528 112 434.9 112 320C112 205.1 205.1 112 320 112C434.9 112 528 205.1 528 320C528 320.7 528 321.4 528 322.2zM576 322.7C576 321.8 576 320.9 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576C323.5 576 327.1 575.9 330.6 575.8C362.4 574.5 384 545.7 384 513.8C384 499.3 377.9 485.5 371.9 471.8C367.6 462 363.2 452.1 361.1 441.9C360.4 438.7 360.1 435.4 360.1 432C360.1 405.5 381.6 384 408.1 384L506 384C542.5 384 575.7 359.2 576.1 322.7zM224 320C224 302.3 209.7 288 192 288C174.3 288 160 302.3 160 320C160 337.7 174.3 352 192 352C209.7 352 224 337.7 224 320zM224 256C241.7 256 256 241.7 256 224C256 206.3 241.7 192 224 192C206.3 192 192 206.3 192 224C192 241.7 206.3 256 224 256zM352 192C352 174.3 337.7 160 320 160C302.3 160 288 174.3 288 192C288 209.7 302.3 224 320 224C337.7 224 352 209.7 352 192zM416 256C433.7 256 448 241.7 448 224C448 206.3 433.7 192 416 192C398.3 192 384 206.3 384 224C384 241.7 398.3 256 416 256z"/></svg>
262            Branding
263          </label>
264          
265          
266          
267          <label class="tag">
268            <input type="checkbox" name="tag" value="css" />
269            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M544 96L480 464L256.7 544L64 464L83.6 369.2L165.6 369.2L157.6 409.8L274 454.2L408.1 409.8L426.9 312.7L93.5 312.7L109.5 230.7L443.2 230.7L453.7 178L120.3 178L136.6 96L544 96z"/></svg>
270            CSS
271          </label>
272          
273          
274          
275          <label class="tag">
276            <input type="checkbox" name="tag" value="design" />
277            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M142 159.8C142 106.9 184.9 64 237.8 64L402.2 64C455.1 64 498 106.9 498 159.8C498 193.3 480.8 222.8 454.8 239.9C480.8 257 498 286.5 498 320C498 372.9 455.1 415.8 402.2 415.8L400.1 415.8C375.3 415.8 352.7 406.4 335.7 390.9L335.7 479.2C335.7 532.8 291.7 576 238.3 576C185.5 576 142 533.2 142 480.2C142 446.7 159.2 417.2 185.2 400.1C159.2 383 142 353.5 142 320C142 286.5 159.2 257 185.2 239.9C159.2 222.8 142 193.3 142 159.8zM304.3 255.6L237.8 255.6C202.2 255.6 173.4 284.4 173.4 320C173.4 355.4 202 384.2 237.4 384.4L304.3 384.4L304.3 255.6zM335.7 320C335.7 355.6 364.5 384.4 400.1 384.4L402.2 384.4C437.8 384.4 466.6 355.6 466.6 320C466.6 284.4 437.8 255.6 402.2 255.6L400.1 255.6C364.5 255.6 335.7 284.4 335.7 320zM237.8 415.8L237.4 415.8C202 416 173.4 444.8 173.4 480.2C173.4 515.6 202.6 544.6 238.3 544.6C274.6 544.6 304.3 515.2 304.3 479.1L304.3 415.7L237.8 415.7zM237.8 95.4C202.2 95.4 173.4 124.2 173.4 159.8C173.4 195.4 202.2 224.2 237.8 224.2L304.3 224.2L304.3 95.4L237.8 95.4zM335.7 224.2L402.2 224.2C437.8 224.2 466.6 195.4 466.6 159.8C466.6 124.2 437.8 95.4 402.2 95.4L335.7 95.4L335.7 224.2z"/></svg>
278            Design
279          </label>
280          
281          
282          
283          <label class="tag">
284            <input type="checkbox" name="tag" value="dreamweaver" />
285            <svg xmlns="http://www.w3.org/2000/svg" width="240" height="234" viewBox="0 0 240 234" fill="none">
286  <g clip-path="url(#clip0_125_117)">
287    <path d="M53.7002 79.2998C58.2001 79.1998 62.6005 79.9002 66.9004 81.2002C74.9002 83.6003 81.2001 89.6006 84 97.4004C85.5999 101.9 86.3998 106.7 86.2998 111.5C86.2998 116.6 85.5004 121.7 83.9004 126.5C82.5004 130.6 80.2 134.4 77.2002 137.6C74.2002 140.7 70.7001 143 66.7002 144.4C62.3002 146 57.6996 146.8 53.0996 146.7C51.8997 146.7 50.7997 146.7 49.7998 146.6C48.8999 146.5 47.8999 146.5 47 146.4C46.0001 146.3 45.0002 146.3 43.9004 146.3V79.5996C45.6001 79.4996 47.1998 79.4004 48.5996 79.4004C49.9996 79.3004 51.7002 79.2998 53.7002 79.2998Z" fill="black"/>
288    <path fill-rule="evenodd" clip-rule="evenodd" d="M197.5 0C221 0 240 19 240 42.5V191.5C240 215 221 234 197.5 234H42.5C19 234 0 215 0 191.5V42.5C0 19 19 0 42.5 0H197.5ZM53.7002 60.2002C49.2002 60.2002 45 60.1998 41 60.2998C37 60.3998 33.5996 60.4 30.5996 60.5C27.7 60.5 25.4003 60.6002 23.9004 60.7002H23.7998C23.1999 60.8003 22.6998 61.4 22.7998 62V164.4C22.7999 165.4 23.1 166 23.7998 166C25.4998 166.1 28.0998 166.1 31.5996 166.2C34.9996 166.3 38.7998 166.3 42.7998 166.3H54.0996C59.2996 166.3 64.5 165.6 69.5 164.3C74.7 162.9 79.7002 160.8 84.2002 158C88.8001 155.1 93 151.5 96.5 147.3C100.3 142.7 103.2 137.5 105.1 131.9C107.3 125.301 108.3 118.4 108.2 111.4C108.2 101.401 106.2 92.6003 102.2 84.9004C98.1002 77.2004 91.7996 70.8998 84.0996 66.7998C76.0997 62.3999 65.8999 60.2002 53.7002 60.2002ZM202.6 84.7998C201.9 84.7999 201.5 85.2 201.3 86.0996C199.9 91.9996 198.7 97.5 197.6 102.5C196.5 107.6 195.5 112.1 194.8 116.2C194 120.3 193.3 124 192.7 127.4C192 130.8 191.5 133.8 191.1 136.5C190.7 139.2 190.3 141.6 189.8 143.6H189.5C189.4 141.9 189.1 140.2 188.8 138.5C188.4 136.4 187.9 133.9 187.5 130.8C187.1 127.8 186.4 124.1 185.6 119.9C184.7 115.6 183.7 110.7 182.6 105.2C181.4 99.7002 180 93.3 178.3 86C178.2 85.3 177.9 84.9004 177.3 84.9004H157.7C157.1 84.9004 156.7 85.0002 156.6 85.2002C156.4 85.6002 156.2 86.1001 156.2 86.5C154.3 93.6 152.7 99.9004 151.6 105.4C150.4 111 149.4 115.8 148.5 120C147.6 124.2 146.9 127.8 146.3 130.9C145.7 134 145.2 136.5 144.8 138.4C144.5 140 144.3 141.5 144.1 143.1H143.8C143.5 141.3 143.1 138.899 142.6 136.1C142.1 133.3 141.4 129.599 140.7 125.1C140 120.6 138.9 115.2 137.6 108.8C136.3 102.4 134.6 94.7999 132.6 86C132.5 85.3 132 85 131.1 85H112.2C111.1 85 110.7 85.3999 111 86.2998L130.5 163.6C130.7 164 130.9 164.4 131.2 164.7C131.6 164.9 132.1 165.1 132.6 165H151.3C152.2 165 152.699 164.5 152.899 163.4C154.399 157.5 155.8 152 157 147C158.3 142 159.399 137.4 160.399 133.2C161.399 129 162.4 124.8 163.2 120.7C164.1 116.6 165 112.3 166 107.9H166.1C166.4 110 166.899 112.5 167.399 115.5C167.999 118.5 168.7 122.1 169.5 126.4C170.3 130.7 171.4 135.9 172.7 142.1C174 148.2 175.6 155.4 177.5 163.4C177.6 163.8 177.8 164.2 178.1 164.6C178.4 164.9 178.9 165.1 179.3 165H198C198.5 165.1 198.899 164.9 198.899 164.4C199.199 164.1 199.4 163.7 199.5 163.3L221.1 86.2002C221.3 85.3002 221 84.7998 220.1 84.7998H202.6Z" fill="black"/>
289  </g>
290  <defs>
291    <clipPath id="clip0_125_117">
292      <rect width="240" height="234" fill="white"/>
293    </clipPath>
294  </defs>
295</svg>
296            Dreamweaver
297          </label>
298          
299          
300          
301          <label class="tag">
302            <input type="checkbox" name="tag" value="game" />
303            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M192 112C183.2 112 176 119.2 176 128L176 480C176 506.5 197.5 528 224 528L416 528C442.5 528 464 506.5 464 480L464 128C464 119.2 456.8 112 448 112L192 112zM128 128C128 92.7 156.7 64 192 64L448 64C483.3 64 512 92.7 512 128L512 480C512 533 469 576 416 576L224 576C171 576 128 533 128 480L128 128zM360 400C373.3 400 384 410.7 384 424C384 437.3 373.3 448 360 448C346.7 448 336 437.3 336 424C336 410.7 346.7 400 360 400zM384 376C384 362.7 394.7 352 408 352C421.3 352 432 362.7 432 376C432 389.3 421.3 400 408 400C394.7 400 384 389.3 384 376zM256 352C264.8 352 272 359.2 272 368L272 384L288 384C296.8 384 304 391.2 304 400C304 408.8 296.8 416 288 416L272 416L272 432C272 440.8 264.8 448 256 448C247.2 448 240 440.8 240 432L240 416L224 416C215.2 416 208 408.8 208 400C208 391.2 215.2 384 224 384L240 384L240 368C240 359.2 247.2 352 256 352zM240 160L400 160C408.8 160 416 167.2 416 176L416 288C416 305.7 401.7 320 384 320L256 320C238.3 320 224 305.7 224 288L224 176C224 167.2 231.2 160 240 160z"/></svg>
304            Game
305          </label>
306          
307          
308          
309          <label class="tag">
310            <input type="checkbox" name="tag" value="html" />
311            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M128 96L162.9 491.8L319.5 544L477.1 491.8L512 96L128 96zM436.2 223.9L252.4 223.9L256.5 273.3L432.1 273.3L418.5 421.7L320.6 448.7L320.6 449L319.5 449L220.8 421.7L214.8 345.9L262.5 345.9L266 384L319.5 398.5L373.2 384L379.2 321.8L212.3 321.8L199.5 176.2L440.6 176.2L436.2 223.9z"/></svg>
312            HTML
313          </label>
314          
315          
316          
317          <label class="tag">
318            <input type="checkbox" name="tag" value="ios" />
319            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M447.1 332.7C446.9 296 463.5 268.3 497.1 247.9C478.3 221 449.9 206.2 412.4 203.3C376.9 200.5 338.1 224 323.9 224C308.9 224 274.5 204.3 247.5 204.3C191.7 205.2 132.4 248.8 132.4 337.5C132.4 363.7 137.2 390.8 146.8 418.7C159.6 455.4 205.8 545.4 254 543.9C279.2 543.3 297 526 329.8 526C361.6 526 378.1 543.9 406.2 543.9C454.8 543.2 496.6 461.4 508.8 424.6C443.6 393.9 447.1 334.6 447.1 332.7zM390.5 168.5C417.8 136.1 415.3 106.6 414.5 96C390.4 97.4 362.5 112.4 346.6 130.9C329.1 150.7 318.8 175.2 321 202.8C347.1 204.8 370.9 191.4 390.5 168.5z"/></svg>
320            iOS
321          </label>
322          
323          
324          
325          <label class="tag">
326            <input type="checkbox" name="tag" value="javascript" />
327            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M96 96L96 544L544 544L544 96L96 96zM339.8 445.4C339.8 489 314.2 508.9 276.9 508.9C243.2 508.9 223.7 491.5 213.7 470.4L248 449.7C254.6 461.4 260.6 471.3 275.1 471.3C288.9 471.3 297.7 465.9 297.7 444.8L297.7 301.7L339.8 301.7L339.8 445.4zM439.4 508.9C400.3 508.9 375 490.3 362.7 465.9L397 446.1C406 460.8 417.8 471.7 438.5 471.7C455.9 471.7 467.1 463 467.1 450.9C467.1 436.5 455.7 431.4 436.4 422.9L425.9 418.4C395.5 405.5 375.4 389.2 375.4 354.9C375.4 323.3 399.5 299.3 437 299.3C463.8 299.3 483 308.6 496.8 333L464 354C456.8 341.1 449 336 436.9 336C424.6 336 416.8 343.8 416.8 354C416.8 366.6 424.6 371.7 442.7 379.6L453.2 384.1C489 399.4 509.1 415.1 509.1 450.3C509.1 488.1 479.3 508.9 439.4 508.9z"/></svg>
328            JavaScript
329          </label>
330          
331          
332          
333          <label class="tag">
334            <input type="checkbox" name="tag" value="love" />
335            <svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
336<g clip-path="url(#clip0_78_674)">
337<path d="M34.1307 7.23343C57.6475 -4.77548 86.0656 -1.71194 106.18 15.5547C106.196 15.5697 106.214 15.5798 106.23 15.5948L106.229 15.5957C107.247 16.4944 108.234 17.4259 109.191 18.3887C109.191 18.3887 101.346 32.0893 92.9393 45.5772C89.2909 41.2918 84.4809 38.5133 80.8202 37.6367C72.3142 35.6029 66.7707 40.9212 64.0369 44.6534C61.303 40.921 55.7598 35.6024 47.2547 37.6367C35.449 40.4629 11.6922 63.0837 53.4696 92.1826C40.3625 104.482 27.3415 116.113 27.2723 116.175C12.8354 105.962 2.72851 90.0673 0.476404 71.9405C-2.74858 46.0006 10.6299 19.2355 34.1307 7.23343Z" fill="#27AAE1"/>
338<path fill-rule="evenodd" clip-rule="evenodd" d="M109.192 18.3889C130.599 39.8708 134.378 74.2763 117.193 99.7493C102.613 121.355 75.1307 132.438 49.6427 126.335C41.6079 124.401 34.015 120.953 27.2723 116.175L27.2726 116.173C34.7416 107.257 42.2112 98.3409 49.6808 89.425C53.7127 92.4927 58.4656 95.6406 64.0362 98.8499C108.802 73.0589 100.824 51.3197 89.339 42.0881L109.192 18.3889ZM64.0138 98.8635H64.0597C64.052 98.8591 64.0439 98.8543 64.0362 98.8499C64.0288 98.8541 64.0212 98.8592 64.0138 98.8635Z" fill="#27AAE1"/>
339</g>
340<defs>
341<clipPath id="clip0_78_674">
342<rect width="128" height="128" fill="white"/>
343</clipPath>
344</defs>
345</svg>
346
347            LÖVE
348          </label>
349          
350          
351          
352          <label class="tag">
353            <input type="checkbox" name="tag" value="lua" />
354            <svg width="725" height="725" viewBox="0 0 725 725" fill="none" xmlns="http://www.w3.org/2000/svg">
355<g clip-path="url(#clip0_78_683)">
356<path d="M579.8 489.7C579.8 498.9 577.1 504.4 569 511.9C557.9 522 544.6 527.2 528.6 527.2C507.4 527.2 495 517.1 495 499.8C495 481.9 507.1 472.7 536.1 468.5C564.8 464.6 570.7 463.3 579.8 459.1V489.7Z" fill="#000080"/>
357<path fill-rule="evenodd" clip-rule="evenodd" d="M362.5 0.599609C562.3 0.599609 724.5 162.801 724.5 362.601C724.5 562.4 562.3 724.601 362.5 724.601C162.7 724.601 0.500264 562.4 0.5 362.601C0.5 162.801 162.7 0.599609 362.5 0.599609ZM293.101 504.399C293.101 532.799 314.3 551 347.5 551C372.6 551 388.5 542.2 404.5 519.7V543.5H428.9V372.8H401.9V469.6C401.9 504.5 383.6 527.3 355.3 527.3C333.8 527.3 320.101 514.2 320.101 493.7V372.8H293.101V504.399ZM542.6 367.9C517.8 367.9 497.299 375.1 485.899 387.8C478.1 396.6 474.9 406.4 474.2 423.3H501.6C503.9 402.4 516.3 393 541.7 393C566.1 393 579.8 402.1 579.8 418.4V425.6C579.8 437 573 441.9 551.5 444.5C513.1 449.4 507.2 450.7 496.8 454.9C476.9 463 466.8 478.3 466.8 500.5C466.8 531.5 488.3 551 522.8 551C544.3 551 561.6 543.5 580.8 525.9C582.7 543.2 591.2 551 608.8 551C614.4 551 618.6 550.4 627.399 548.1V527.6C624.4 528.3 623.1 528.3 621.5 528.3C612 528.3 606.8 523.4 606.8 514.9V414.5C606.8 384.2 584.6 367.9 542.6 367.9ZM116.8 543.5H264.399V516.8H147.1V306H116.8V543.5ZM512.5 106.601C454 106.601 406.5 154.101 406.5 212.601C406.5 271.1 454 318.601 512.5 318.601C571 318.601 618.5 271.1 618.5 212.601C618.5 154.101 571 106.601 512.5 106.601Z" fill="#000080"/>
358</g>
359<defs>
360<clipPath id="clip0_78_683">
361<rect width="725" height="725" fill="white"/>
362</clipPath>
363</defs>
364</svg>
365
366            Lua
367          </label>
368          
369          
370          
371          <label class="tag">
372            <input type="checkbox" name="tag" value="open source" />
373            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M266.1 392.7C266.1 413.6 255.2 447.8 229.4 447.8C203.6 447.8 192.7 413.6 192.7 392.7C192.7 371.8 203.6 337.6 229.4 337.6C255.2 337.6 266.1 371.8 266.1 392.7zM560 342.2C560 374.1 556.8 407.9 542.5 437.2C504.6 513.8 400.4 512 325.8 512C250 512 139.6 514.7 100.2 437.2C85.6 408.2 80 374.1 80 342.2C80 300.3 93.9 260.7 121.5 228.6C116.3 212.8 113.8 196.2 113.8 179.8C113.8 158.3 118.7 147.5 128.4 128C173.7 128 202.7 137 237.2 164C266.2 157.1 296 154 325.9 154C352.9 154 380.1 156.9 406.3 163.2C440.3 136.5 469.3 128 514.1 128C523.9 147.5 528.7 158.3 528.7 179.8C528.7 196.2 526.1 212.5 521 228C548.5 260.4 560 300.3 560 342.2zM495.7 392.7C495.7 348.8 469 310.1 422.2 310.1C403.3 310.1 385.2 313.5 366.2 316.1C351.3 318.4 336.4 319.3 321.1 319.3C305.9 319.3 291 318.4 276 316.1C257.3 313.5 239 310.1 220 310.1C173.2 310.1 146.5 348.8 146.5 392.7C146.5 480.5 226.9 494 296.9 494L345.1 494C415.4 494 495.7 480.6 495.7 392.7zM413.1 337.6C387.3 337.6 376.4 371.8 376.4 392.7C376.4 413.6 387.3 447.8 413.1 447.8C438.9 447.8 449.8 413.6 449.8 392.7C449.8 371.8 438.9 337.6 413.1 337.6z"/></svg>
374            Open Source
375          </label>
376          
377          
378          
379          <label class="tag">
380            <input type="checkbox" name="tag" value="photoshop" />
381            <svg xmlns="http://www.w3.org/2000/svg" width="240" height="234" viewBox="0 0 240 234" fill="none">
382  <g clip-path="url(#clip0_125_130)">
383    <path d="M86.7002 79.2002C90.8001 79.1002 94.8001 79.7002 98.5 81.2002C101.4 82.3002 103.8 84.3004 105.5 86.9004C107.1 89.6003 107.9 92.7 107.8 95.7998C107.8 100.2 106.8 103.6 104.7 106.1C102.5 108.6 99.7 110.5 96.5 111.4C92.8 112.6 88.9 113.2 85 113.2H79.7002C78.5002 113.2 77.1998 113.1 75.7998 113V79.4004C76.4998 79.3004 77.9004 79.1998 79.9004 79.2998C81.8003 79.1998 84.1004 79.2002 86.7002 79.2002Z" fill="black"/>
384    <path fill-rule="evenodd" clip-rule="evenodd" d="M197.5 0C221 0 240 19 240 42.5V191.5C240 215 221 234 197.5 234H42.5C19 234 0 215 0 191.5V42.5C0 19 19 0 42.5 0H197.5ZM172.1 84.2998C165 84.2998 159.099 85.3998 154.399 87.7998C150.1 89.7998 146.399 93.0001 143.899 97C141.7 100.7 140.5 104.8 140.5 109.1C140.4 112.6 141.2 
384116.1 142.8 119.3C144.7 122.7 147.3 125.6 150.399 127.8C154.799 130.8 159.5 133.2 164.6 135C169.499 136.9 172.799 138.4 174.399 139.7C175.999 141 176.8 142.3 176.8 143.7C176.8 145.5 175.7 147.2 174.1 147.9C172.3 148.8 169.6 149.3 165.8 149.3C161.8 149.3 157.8 148.8 154 147.8C149.6 146.8 145.5 145.2 141.6 142.9C141.3 142.7 141 142.6 140.7 142.8C140.4 143 140.3 143.4 140.3 143.7V161.1C140.2 161.899 140.7 162.6 141.399 163C144.599 164.5 148.1 165.6 151.6 166.2C156.1 167.1 160.6 167.5 165.2 167.5C172.4 167.5 178.4 166.4 183.3 164.3C187.8 162.5 191.7 159.4 194.5 155.4C197.1 151.5 198.499 146.8 198.399 142.1C198.499 138.5 197.7 135 196.1 131.8C194.2 128.4 191.5 125.6 188.2 123.5C183.4 120.5 178.2 118 172.8 116.2C170.4 115.2 168 114.1 165.7 112.9C164.4 112.2 163.2 111.3 162.3 110.2C161.7 109.4 161.3 108.5 161.3 107.6C161.3 106.7 161.6 105.7 162.1 104.9C162.8 103.9 163.9 103.2 165.2 102.9C167.1 102.4 169.2 102.1 171.2 102.2C175 102.2 178.7 102.7 182.399 103.5C185.799 104.2 189 105.3 192 106.9C192.4 107.1 192.9 107.1 193.8 106.9C194.1 106.7 194.3 106.3 194.3 105.9V89.5996C194.3 89.1998 194.2 88.8002 194.1 88.4004C193.9 88.0004 193.5 87.6 193.1 87.5C190.4 86.4001 187.5 85.6002 184.5 85.2002C180.4 84.6002 176.2 84.2998 172.1 84.2998ZM86 59.5C83.0001 59.5 80.0002 59.4996 76.9004 59.5996C73.8005 59.6996 70.9001 59.6998 68.2002 59.7998C65.5002 59.8998 62.9996 59.9 60.5996 60C58.2998 60.1 56.6999 60.0996 55 60.0996C54.3 60.0996 54 60.5002 54 61.2002V164.1C54 165 54.4002 165.4 55.2002 165.4H74.5996C75.2996 165.3 75.8002 164.7 75.7002 164V131.9C77.6001 131.9 79 131.9 80 132C81 132.1 82.6 132.1 85 132.1C93.2 132.1 100.7 131.2 107.5 128.7C114 126.3 119.6 122.1 123.6 116.5C127.6 110.9 129.6 103.8 129.6 95.2002C129.6 90.7002 128.8 86.4002 127.3 82.2002C125.7 77.9002 123.2 73.9998 120 70.7998C116.2 67.0999 111.6 64.2996 106.6 62.5996C101 60.4997 94.1998 59.5 86 59.5Z" fill="black"/>
385  </g>
386  <defs>
387    <clipPath id="clip0_125_130">
388      <rect width="240" height="234" fill="white"/>
389    </clipPath>
390  </defs>
391</svg>
392            Photoshop
393          </label>
394          
395          
396          
397          <label class="tag">
398            <input type="checkbox" name="tag" value="rails" />
399            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M232.5 136L320 229L407.5 136L232.5 136zM447.9 163.1L375.6 240L504.6 240L448 163.1zM497.9 288L142.1 288L320 484.3L497.9 288zM135.5 240L264.5 240L192.2 163.1L135.6 240zM569.8 280.1L337.8 536.1C333.3 541.1 326.8 544 320 544C313.2 544 306.8 541.1 302.2 536.1L70.2 280.1C62.5 271.6 61.9 258.9 68.7 249.7L180.7 97.7C185.2 91.6 192.4 87.9 200 87.9L440 87.9C447.6 87.9 454.8 91.5 459.3 97.7L571.3 249.7C578.1 258.9 577.4 271.6 569.8 280.1z"/></svg>
400            Rails
401          </label>
402          
403          
404          
405          <label class="tag">
406            <input type="checkbox" name="tag" value="react" />
407            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M482.2 241.2C476.8 239.4 471.4 237.7 466 236.1C466.9 232.4 467.7 228.7 468.5 225C480.8 165.4 472.7 117.5 445.4 101.7C419.1 86.6 376.2 102.3 332.8 140.1C328.5 143.8 324.3 147.7 320.3 151.6C317.6 149 314.8 146.4 312 143.9C266.5 103.5 220.9 86.5 193.6 102.4C167.4 117.6 159.6 162.7 170.6 219.1C171.7 224.7 172.9 230.2 174.3 235.8C167.9 237.6 161.6 239.6 155.7 241.7C102.3 260.2 64 289.4 64 319.6C64 350.8 104.8 382.1 160.3 401.1C164.8 402.6 169.3 404.1 173.9 405.4C172.4 411.4 171.1 417.3 169.9 423.4C159.4 478.9 167.6 522.9 193.8 538C220.8 553.6 266.2 537.6 310.4 498.9C313.9 495.8 317.4 492.6 320.9 489.2C325.3 493.5 329.9 497.6 334.5 501.6C377.3 538.4 419.6 553.3 445.7 538.2C472.7 522.6 481.5 475.3 470.1 417.7C469.2 413.3 468.2 408.8 467.1 404.2C470.3 403.3 473.4 402.3 476.5 401.3C534.2 382.2 576 351.3 576 319.6C576 289.3 536.6 259.9 482.2 241.2zM346.9 156.3C384.1 123.9 418.8 111.2 434.6 120.3C451.5 130 458 169.2 447.4 220.7C446.7 224.1 446 227.4 445.1 230.7C422.9 225.7 400.4 222.1 377.8 220.1C364.8 201.5 350.6 183.7 335.2 167C339.1 163.3 342.9 159.8 346.9 156.3zM231.2 371.5C236.3 380.2 241.5 388.9 247 397.4C231.4 395.7 215.9 393.2 200.6 389.9C205 375.5 210.5 360.6 216.9 345.4C221.5 354.2 226.2 362.9 231.2 371.5zM200.9 251.2C215.3 248 230.6 245.4 246.5 243.4C241.2 251.7 236 260.2 231.1 268.8C226.2 277.3 221.4 286 216.9 294.8C210.6 279.9 205.3 265.3 200.9 251.2zM228.3 320.1C234.9 306.3 242.1 292.8 249.7 279.5C257.3 266.2 265.5 253.3 274.1 240.6C289.1 239.5 304.4 238.9 320 238.9C335.6 238.9 351 239.5 365.9 240.6C374.4 253.2 382.5 266.1 39
4070.2 279.3C397.9 292.5 405.1 306 411.9 319.7C405.2 333.5 398 347.1 390.3 360.5C382.7 373.8 374.6 386.7 366.1 399.5C351.2 400.6 335.7 401.1 320 401.1C304.3 401.1 289.1 400.6 274.4 399.7C265.7 387 257.5 374 249.8 360.7C242.1 347.4 235 333.9 228.3 320.1zM408.9 371.3C414 362.5 418.8 353.6 423.5 344.6C429.9 359.1 435.5 373.8 440.4 388.9C424.9 392.4 409.2 395.1 393.4 396.9C398.8 388.5 403.9 379.9 408.9 371.3zM423.3 294.8C418.6 286 413.8 277.2 408.8 268.6C403.9 260.1 398.8 251.7 393.5 243.4C409.6 245.4 425 248.1 439.4 251.4C434.8 266.2 429.4 280.6 423.3 294.8zM320.2 182.3C330.7 193.7 340.6 205.7 349.8 218.1C330 217.2 310.1 217.2 290.3 218.1C300.1 205.2 310.2 193.2 320.2 182.3zM204.2 121C221 111.2 258.3 125.2 297.6 160C300.1 162.2 302.6 164.6 305.2 167C289.7 183.7 275.4 201.5 262.3 220.1C239.7 222.1 217.3 225.6 195.1 230.5C193.8 225.4 192.7 220.2 191.6 215C182.2 166.6 188.4 130.1 204.2 121zM179.7 384.6C175.5 383.4 171.4 382.1 167.3 380.7C146 374 121.8 363.4 104.3 349.5C94.2 342.5 87.4 331.7 85.5 319.6C85.5 301.3 117.1 277.9 162.7 262C168.4 260 174.2 258.2 180 256.5C186.8 278.2 195 299.5 204.5 320.1C194.9 341 186.6 362.6 179.7 384.6zM296.3 482.6C279.8 497.7 260.7 509.7 239.9 517.9C228.8 523.2 216 523.7 204.6 519.2C188.7 510 182.1 474.7 191.1 427.2C192.2 421.6 193.4 416 194.8 410.5C217.2 415.3 239.8 418.6 262.7 420.3C275.9 439 290.4 456.9 305.9 473.7C302.7 476.8 299.5 479.8 296.3 482.6zM320.8 458.3C310.6 447.3 300.4 435.1 290.5 422C300.1 422.4 310 422.6 320 422.6C330.3 422.6 340.4 422.4 350.4 421.9C341.2 434.6 331.3 446.7 320.8 458.3zM451.5 488.3C450.6 500.5 444.6 511.9 435 519.6C419.1 528.8 385.2 516.8 348.6 485.4C344.4 481.8 340.2 477.9 335.9 473.9C351.2 457 365.3 439.1 378.1 420.3C401 418.4 423.8 414.9 446.3 409.8C447.3 413.9 448.2 418 449 422C453.9 443.6 454.7 466.1 451.5 488.3zM469.7 380.8C466.9 381.7 464.1 382.6 461.2 383.4C454.2 361.6 445.6 340.3 435.7 319.6C445.3 299.2 453.4 278.2 460.2 256.7C465.4 258.2 470.4 259.8 475.2 261.4C521.8 277.4 554.5 301.2 554.5 319.4C554.5 339 519.6 364.3 469.7 380.8zM320 365.8C345.3 365.8 365.8 345.3 365.8 320C365.8 294.7 345.3 274.2 320 274.2C294.7 274.2 274.2 294.7 274.2 320C274.2 345.3 294.7 365.8 320 365.8z"/></svg>
408            React
409          </label>
410          
411          
412          
413          <label class="tag">
414            <input type="checkbox" name="tag" value="scss" />
415            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M301.8 442.9L301.8 442.9zM550.9 355.9C530.8 355.9 510.9 360.5 492.9 369.4C487 357.5 480.9 347.1 479.9 339.3C478.7 330.2 477.4 324.8 478.8 314C480.2 303.2 486.5 287.9 486.4 286.8C486.3 285.7 485 280.2 472.1 280.1C459.2 280 448.1 282.6 446.8 286C444.5 292.2 442.7 298.6 441.5 305.1C439.2 316.8 415.7 358.6 402.4 380.4C398 371.9 394.3 364.4 393.5 358.4C392.3 349.3 391 343.9 392.4 333.1C393.8 322.3 400.1 307 400 305.9C399.9 304.8 398.6 299.3 385.7 299.2C372.8 299.1 361.7 301.7 360.4 305.1C359.1 308.5 357.7 316.5 355.1 324.2C352.5 331.9 321.2 401.5 313 419.6C308.8 428.8 305.2 436.2 302.6 441.2C302.2 442 301.9 442.5 301.7 442.9C302 442.4 302.2 441.9 302.2 442.1C300 446.4 298.7 448.8 298.7 448.8L298.7 448.9C297 452.1 295.1 455 294.2 455C293.6 455 292.3 446.6 294.5 435.1C299.2 410.9 310.3 373.3 310.2 372C310.1 371.3 312.3 364.8 302.9 361.3C293.8 358 290.5 363.5 289.7 363.5C288.9 363.5 288.3 365.5 288.3 365.5C288.3 365.5 298.4 323.1 268.9 323.1C250.5 323.1 224.9 343.3 212.3 361.6C204.4 365.9 187.3 375.2 169.3 385.1C162.4 388.9 155.3 392.8 148.6 396.5C148.1 396 147.7 395.5 147.2 395C111.4 356.8 45.3 329.8 48.1 278.5C49.1 259.8 55.6 210.7 175.2 151.1C273.2 102.3 351.5 115.7 365 145.5C384.4 188 323.1 267.1 221.3 278.5C182.5 282.8 162.1 267.8 157 262.2C151.7 256.3 150.9 256 148.9 257.1C145.6 258.9 147.7 264.1 148.9 267.2C151.9 275.1 164.4 289.1 185.7 296.1C204.4 302.2 249.9 305.6 304.9 284.3C366.7 260.5 414.8 194.2 400.7 138.7C386.3 82.3 292.8 63.8 204.4 95.2C151.7 113.9 94.7 143.3 53.7 181.6C5 227.2-2.8 266.9 .4 283.5C11.8 342.4 93 380.8 125.5 409.2C123.9 410.1 122.4 410.9 121 411.7C104.7 419.8 42.8 452.2 27.3 486.4C9.8 525.2 30.2 553 43.6 556.8C85.4 568.4 128.2 547.5 151.2 513.2C174.2 478.9 171.4 434.1 160.8 413.7C160.7 413.4 160.5 413.2 160.4 412.9C164.6 410.4 168.9 407.9 173.2 405.4C181.5 400.5 189.6 396 196.7 392.1C192.7 402.9 189.8 415.9 188.3 434.7C186.5 456.7 195.6 485.2 207.4 496.4C212.6 501.3 218.9 501.4 222.8 501.4C236.6 501.4 242.8 490 249.7 476.4C258.2 459.8 265.7 440.5 265.7 440.5C265.7 440.5 256.3 492.7 282 492.7C291.4 492.7 300.8 480.6 305 474.4L305 474.5C305 474.5 305.2 474.1 305.7 473.3C306.7 471.8 307.2 470.9 307.2 470.9L307.2 470.6C311 464.1 319.3 449.2 331.8 424.6C348 392.8 363.5 353.1 363.5 353.1C365 361.8 367.1 370.4 369.7 378.9C372.5 388.4 378.4 398.8 383.1 408.9C379.3 414.1 377 417.1 377 417.1C377 417.2 377 417.2 377.1 417.3C374.1 421.3 370.7 425.6 367.2 429.8C354.4 445 339.2 462.4 337.2 467.4C334.8 473.3 335.4 477.7 340 481.1C343.4 483.7 349.4 484.1 355.7 483.6C367.2 482.8 375.3 480 379.2 478.2C386.4 475.6 393.2 472.1 399.4 467.6C411.9 458.4 419.5 445.2 418.8 427.8C418.4 418.2 415.3 408.6 411.5 399.6C412.6 398 413.8 396.3 414.9 394.6C434.7 365.7 450 334 450 334C451.5 342.7 453.6 351.3 456.2 359.8C458.6 367.9 463.3 376.8 467.6 385.5C449 400.6 437.5 418.1 433.5 429.6C426.1 450.9 431.9 460.5 442.8 462.7C447.7 463.7 454.7 461.4 459.9 459.2C467.6 456.6 474.9 452.9 481.5 448.1C494 438.9 506.1 426 505.3 408.5C505 400.6 502.8 392.7 499.9 385.
4151C515.6 378.5 536 374.9 562 377.9C617.7 384.4 628.6 419.2 626.5 433.7C624.4 448.2 612.7 456.3 608.8 458.7C604.9 461.1 603.7 462 604 463.8C604.5 466.4 606.3 466.3 609.6 465.7C614.2 464.9 638.8 453.9 639.9 427C641.5 393 608.8 355.6 550.9 355.9L550.9 355.9zM121.8 500.6C103.4 520.7 77.6 528.3 66.5 521.9C54.6 515 59.3 485.4 82 464C95.8 451 113.6 439 125.4 431.6C128.1 430 132 427.6 136.8 424.7C137.6 424.2 138 424 138 424C138.9 423.4 139.9 422.9 140.9 422.3C149.2 452.7 141.2 479.5 121.8 500.6L121.8 500.6zM256.2 409.2C249.8 424.9 236.3 464.9 228.1 462.8C221.1 461 216.8 430.5 226.7 400.5C231.7 385.4 242.3 367.4 248.6 360.4C258.7 349.1 269.8 345.5 272.4 350C275.9 355.9 260.2 399.4 256.2 409.2zM367.2 462.2C364.5 463.6 362 464.5 360.8 463.8C359.9 463.3 361.9 461.4 361.9 461.4C361.9 461.4 375.8 446.5 381.3 439.7C384.5 435.7 388.2 431 392.2 425.8C392.2 426.3 392.3 426.8 392.3 427.4C392.2 445.3 375 457.4 367.2 462.2L367.2 462.2zM452.8 442.7C450.8 441.3 451.1 436.6 457.8 422C460.4 416.3 466.4 406.7 476.8 397.5C478 401 478.6 404.6 478.7 408.3C478.6 430.8 462.5 439.2 452.8 442.7L452.8 442.7z"/></svg>
416            SCSS
417          </label>
418          
419          
420          
421          <label class="tag">
422            <input type="checkbox" name="tag" value="teaching" />
423            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M192 144C222.9 144 248 118.9 248 88C248 57.1 222.9 32 192 32C161.1 32 136 57.1 136 88C136 118.9 161.1 144 192 144zM176 576L176 416C176 407.2 183.2 400 192 400C200.8 400 208 407.2 208 416L208 576C208 593.7 222.3 608 240 608C257.7 608 272 593.7 272 576L272 240L400 240C417.7 240 432 225.7 432 208C432 190.3 417.7 176 400 176L384 176L384 128L576 128L576 320L384 320L384 288L320 288L320 336C320 362.5 341.5 384 368 384L592 384C618.5 384 640 362.5 640 336L640 112C640 85.5 618.5 64 592 64L368 64C341.5 64 320 85.5 320 112L320 176L197.3 176C151.7 176 108.8 197.6 81.7 234.2L14.3 324.9C3.8 339.1 6.7 359.1 20.9 369.7C35.1 380.3 55.1 377.3 65.7 363.1L112 300.7L112 576C112 593.7 126.3 608 144 608C161.7 608 176 593.7 176 576z"/></svg>
424            Teaching
425          </label>
426          
427          
428          
429          <label class="tag">
430            <input type="checkbox" name="tag" value="typescript" />
431            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M112.8 96L527.2 96C536.5 96 544 103.5 544 112.8L544 527.2C544 536.5 536.5 544 527.2 544L112.8 544C103.5 544 96 536.5 96 527.2L96 112.8C96 103.5 103.5 96 112.8 96zM345 334.3L345 297.6L185.6 297.6L185.6 334.3L242.5 334.3L242.5 497.9L287.8 497.9L287.8 334.3L345 334.3zM363.1 493.6C370.4 497.3 379 500.1 389 502C399 503.9 409.5 504.8 420.5 504.8C431.3 504.8 441.5 503.8 451.2 501.7C460.9 499.6 469.4 496.3 476.7 491.6C484 486.9 489.8 480.7 494.1 473.2C498.4 465.7 500.5 456.2 500.5 445C500.5 436.9 499.3 429.8 496.8 423.7C494.3 417.6 490.9 412.2 486.3 407.4C481.7 402.6 476.2 398.4 469.8 394.6C463.4 390.8 456.1 387.3 448.1 383.9C442.2 381.5 436.9 379.1 432.2 376.8C427.5 374.5 423.5 372.2 420.3 369.8C417.1 367.4 414.5 364.9 412.7 362.3C410.9 359.7 410 356.6 410 353.3C410 350.2 410.8 347.5 412.4 345C414 342.5 416.2 340.4 419.1 338.6C422 336.8 425.6 335.5 429.8 334.5C434 333.5 438.7 333 443.9 333C447.6 333 451.6 333.3 455.8 333.8C460 334.3 464.2 335.2 468.4 336.4C472.6 337.6 476.7 339 480.7 340.8C484.7 342.6 488.4 344.6 491.7 346.9L491.7 305.1C484.9 302.5 477.4 300.6 469.3 299.3C461.2 298 451.9 297.4 441.4 297.4C430.7 297.4 420.6 298.5 411 300.8C401.4 303.1 393 306.6 385.8 311.5C378.6 316.4 372.8 322.5 368.6 330C364.4 337.5 362.3 346.5 362.3 356.9C362.3 370.2 366.2 381.6 373.9 391C381.6 400.4 393.4 408.4 409.1 414.9C415.3 417.4 421 419.9 426.4 422.3C431.8 424.7 436.4 427.2 440.2 429.8C444 432.4 447.2 435.2 449.4 438.3C451.6 441.4 452.8 444.9 452.8 448.8C452.8 451.7 452.1 454.4 450.7 456.8C449.3 459.2 447.2 461.4 444.3 463.2C441.4 465 437.9 466.4 433.6 467.5C429.3 468.6 424.3 469 418.6 469C408.9 469 399.2 467.3 389.7 463.9C380.2 460.5 371.3 455.4 363.1 448.6L363.1 493.3z"/></svg>
432            TypeScript
433          </label>
434          
435          
436          
437          <label class="tag">
438            <input type="checkbox" name="tag" value="ux" />
439            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M425.8 64C425.8 195.6 345.1 240.8 285.6 273.4C285 273.7 284.5 274 284 274.3C230.2 304.5 195.3 324.1 194.4 396.3L96.3 396.3C96.3 264.8 177 219.6 236.5 187C291.3 157.2 326.8 137 326.8 64L425.8 64zM365.3 366.6C420.1 336.8 455.6 316.6 455.6 243.6L553.6 243.6C553.6 375.2 472.9 420.3 413.4 453C358.6 482.8 323.1 503 323.1 576L225.1 576C225.1 444.4 305.8 399.2 365.3 366.6z"/></svg>
440            UX
441          </label>
442          
443          
444          
445          <label class="tag">
446            <input type="checkbox" name="tag" value="wordpress" />
447            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->
447<path d="M320 72C183 72 72 183 72 320C72 457 183 568 320 568C457 568 568 457 568 320C568 183 457 72 320 72zM97 320C97 287.7 103.9 257 116.3 229.3L222.7 520.7C148.3 484.5 97 408.2 97 320zM320 543C298.1 543 277 539.8 257 533.9L323.9 339.5L392.4 527.3C392.9 528.4 393.4 529.4 394 530.4C370.9 538.5 346 543 320 543zM350.7 215.5C364.1 214.8 376.2 213.4 376.2 213.4C388.2 212 386.8 194.3 374.8 195C374.8 195 338.7 197.8 315.4 197.8C293.5 197.8 256.7 195 256.7 195C244.7 194.3 243.3 212.7 255.3 213.4C255.3 213.4 266.7 214.8 278.7 215.5L313.4 310.7L264.6 457L183.4 215.5C196.8 214.8 208.9 213.4 208.9 213.4C220.9 212 219.5 194.3 207.5 195C207.5 195 171.4 197.8 148.1 197.8C143.9 197.8 139 197.7 133.7 197.5C173.6 137 242.1 97 320 97C378 97 430.9 119.2 470.6 155.5C469.6 155.4 468.7 155.3 467.7 155.3C445.8 155.3 430.3 174.4 430.3 194.9C430.3 213.3 440.9 228.8 452.2 247.2C460.7 262 470.6 281.1 470.6 308.7C470.6 327.8 463.3 349.9 453.6 380.8L431.4 455.1L350.7 215.5zM432.1 512.7L500.2 315.8C512.9 284 517.2 258.6 517.2 235.9C517.2 227.7 516.7 220.1 515.7 213C533.1 244.8 543 281.2 543 320C543 402.3 498.4 474.1 432.1 512.7z"/></svg>
448            WordPress
449          </label>
450          
451          <button class="reset tag-reset">Reset</button>
452        </div>
453    </div>
454  </nav>
455
456  <section class="stack projects">
457    <a class="visit" aria-hidden="true" tabindex="-1">
458      <span class="visit-body">
459        <span>Visit</span>
460        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M480 144C488.8 144 496 151.2 496 160L496 480C496 488.8 488.8 496 480 496L160 496C151.2 496 144 488.8 144 480L144 160C144 151.2 151.2 144 160 144L480 144zM544 160C544 124.7 515.3 96 480 96L160 96C124.7 96 96 124.7 96 160L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 160zM368 360C368 373.3 378.7 384 392 384C405.3 384 416 373.3 416 360L416 248C416 234.7 405.3 224 392 224L280 224C266.7 224 256 234.7 256 248C256 261.3 266.7 272 280 272L334.1 272L231.1 375C221.7 384.4 221.7 399.6 231.1 408.9C240.5 418.2 255.7 418.3 265 408.9L368 305.9L368 360z"/></svg>
461      </span>
462    </a>
463
464    <div class="preview" aria-hidden="true">
465      <div class="preview-container">
466        <div class="preview-grid"></div>
467      </div>
468    </div>
469
470       
471     
472     
473     
474     
475     
476     
477     
478     
479     
480      
481
482    <article
483      class="stack project is-selected"
484      id="hopera"
485      data-type="game"
486      data-tags="love,lua,game"
487      data-rank="10"
488      data-share="https://jgthms.com/projects/hopera/share.png"
489      data-preview="https://jgthms.com/projects/hopera/preview.png"
490    >
491      <div class="project-body">
492        <div class="project-border"></div>
493
494        <div class="project-main">
495          <figure class="icon project-icon">
496            <img
497              src="https://jgthms.com/projects/hopera/icon.png"
498              alt=""
499              loading="eager"
500              decoding="async"
501            />
502          </figure>
503
504          <div class="stack project-heading">
505            <h3 class="project-title">Hopera</h3>
506
507            <p class="project-description">
507A musical soothing rhythmic game</p>
508
509            <p class="list project-tags">
510              <span class="project-tag"
511                ><em>/</em
512                ><strong>LÖVE</strong></span
513              ><span class="project-tag"
514                ><em>/</em
515                ><strong>Lua</strong></span
516              ><span class="project-tag"
517                ><em>/</em
518                ><strong>Game</strong></span
519              ><span class="project-tag"
520                ><em>/</em><strong>2026</strong></span
521              >
522            </p>
523          </div>
524
525          
526          <a
527            class="project-link"
528            href="https://jgthms.com/hopera/"
529            target="_blank"
530            rel="noopener"
531            >Visit</a
532          >
533          
534        </div>
535      </div>
536    </article>
537      
538     
539     
540     
541     
542     
543     
544     
545      
546
547    <article
548      class="stack project is-selected"
549      id="chordscrush"
550      data-type="game"
551      data-tags="react,typescript,game"
552      data-rank="8"
553      data-share="https://jgthms.com/projects/chordscrush/share.png"
554      data-preview="https://jgthms.com/projects/chordscrush/preview.png"
555    >
556      <div class="project-body">
557        <div class="project-border"></div>
558
559        <div class="project-main">
560          <figure class="icon project-icon">
561            <img
562              src="https://jgthms.com/projects/chordscrush/icon.png"
563              alt=""
564              loading="eager"
565              decoding="async"
566            />
567          </figure>
568
569          <div class="stack project-heading">
570            <h3 class="project-title">ChordsCrush</h3>
571
572            <p class="project-description">A musical chord training game</p>
573
574            <p class="list project-tags">
575              <span class="project-tag"
576                ><em>/</em
577                ><strong>React</strong></span
578              ><span class="project-tag"
579                ><em>/</em
580                ><strong>TypeScript</strong></span
581              ><span class="project-tag"
582                ><em>/</em
583                ><strong>Game</strong></span
584              ><span class="project-tag"
585                ><em>/</em><strong>2026</strong></span
586              >
587            </p>
588          </div>
589
590          
591          <a
592            class="project-link"
593            href="https://chordscrush.com/"
594            target="_blank"
595            rel="noopener"
596            >Visit</a
597          >
598          
599        </div>
600      </div>
601    </article>
602      
603     
604     
605     
606     
607     
608     
609     
610     
611     
612     
613     
614     
615     
616     
617     
618     
619     
620     
621     
622     
623     
624     
625     
626     
627     
628     
629     
630     
631     
632     
633     
634     
635     
636      
637
638    <article
639      class="stack project"
640      id="picknplace-js"
641      data-type="opensource"
642      data-tags="javascript,ux"
643      data-rank="34"
644      data-share="https://jgthms.com/projects/picknplace-js/share.png"
645      data-preview="https://jgthms.com/projects/picknplace-js/preview.png"
646    >
647      <div class="project-body">
648        <div class="project-border"></div>
649
650        <div class="project-main">
651          <figure class="icon project-icon">
652            <img
653              src="https://jgthms.com/projects/picknplace-js/icon.png"
654              alt=""
655              loading="eager"
656              decoding="async"
657            />
658          </figure>
659
660          <div class="stack project-heading">
661            <h3 class="project-title">picknplace.js</h3>
662
663            <p class="project-description">A viable drag and drop alternative</p>
664
665            <p class="list project-tags">
666              <span class="project-tag"
667                ><em>/</em
668                ><strong>JavaScript</strong></span
669              ><span class="project-tag"
670                ><em>/</em
671                ><strong>UX</strong></span
672              ><span class="project-tag"
673                ><em>/</em><strong>2025</strong></span
674              >
675            </p>
676          </div>
677
678          
679          <a
680            class="project-link"
681            href="https://jgthms.com/picknplace.js/"
682            target="_blank"
683            rel="noopener"
684            >Visit</a
685          >
686          
687        </div>
688      </div>
689    </article>
690      
691     
692     
693     
694     
695     
696     
697     
698     
699     
700     
701     
702      
703
704    <article
705      class="stack project"
706      id="equatile"
707      data-type="game"
708      data-tags="typescript,react,ios,android,game"
709      data-rank="12"
710      data-share="https://jgthms.com/projects/equatile/share.png"
711      data-preview="https://jgthms.com/projects/equatile/preview.png"
712    >
713      <div class="project-body">
714        <div class="project-border"></div>
715
716        <div class="project-main">
717          <figure class="icon project-icon">
718            <img
719              src="https://jgthms.com/projects/equatile/icon.png"
720              alt=""
721              loading="lazy"
722              decoding="async"
723            />
724          </figure>
725
726          <div class="stack project-heading">
727            <h3 class="project-title">Equatile</h3>
728
729            <p class="project-description">A math-based mobile puzzle game</p>
730
731            <p class="list project-tags">
732              <span class="project-tag"
733                ><em>/</em
734                ><strong>TypeScript</strong></span
735              ><span class="project-tag"
736                ><em>/</em
737                ><strong>React</strong></span
738              ><span class="project-tag"
739                ><em>/</em
740                ><strong>iOS</strong></span
741              ><span class="project-tag"
742                ><em>/</em
743                ><strong>Android</strong></span
744              ><span class="project-tag"
745                ><em>/</em
746                ><strong>Game</strong></span
747              ><span class="project-tag"
748                ><em>/</em><strong>2025</strong></span
749              >
750            </p>
751          </div>
752
753          
754          <a
755            class="project-link"
756            href="https://jgthms.com/equatile/play/"
757            target="_blank"
758            rel="noopener"
759            >Visit</a
760          >
761          
762        </div>
763      </div>
764    </article>
765      
766     
767     
768     
769     
770     
771     
772     
773     
774     
775     
776     
777     
778     
779     
780     
781     
782     
783     
784      
785
786    <article
787      class="stack project"
788      id="pollenboard"
789      data-type="personal"
790      data-tags="ios,javascript"
791      data-rank="19"
792      data-share="https://jgthms.com/projects/pollenboard/share.png"
793      data-preview="https://jgthms.com/projects/pollenboard/preview.png"
794    >
795      <div class="project-body">
796        <div class="project-border"></div>
797
798        <div class="project-main">
799          <figure class="icon project-icon">
800            <img
801              src="https://jgthms.com/projects/pollenboard/icon.png"
802              alt=""
803              loading="lazy"
804              decoding="async"
805            />
806          </figure>
807
808          <div class="stack project-heading">
809            <h3 class="project-title">pollenboard</h3>
810
811            <p class="project-description">An iOS, Apple Watch, and Raspberry Pi padel scoring app</p>
812
813            <p class="list project-tags">
814              <span class="project-tag"
815                ><em>/</em
816                ><strong>iOS</strong></span
817              ><span class="project-tag"
818                ><em>/</em
819                ><strong>JavaScript</strong></span
820              ><span class="project-tag"
821                ><em>/</em><strong>2025</strong></span
822              >
823            </p>
824          </div>
825
826          
827          <a
828            class="project-link"
829            href="https://www.youtube.com/watch?v=p-OdHQ8uH_E"
830            target="_blank"
831            rel="noopener"
832            >Visit</a
833          >
834          
835        </div>
836      </div>
837    </article>
838      
839     
840      
841
842    <article
843      class="stack project is-selected"
844      id="css-masterclass-io"
845      data-type="personal"
846      data-tags="rails,react,css,javascript"
847      data-rank="2"
848      data-share="https://jgthms.com/projects/css-masterclass-io/share.png"
849      data-preview="https://jgthms.com/projects/css-masterclass-io/preview.png"
850    >
851      <div class="project-body">
852        <div class="project-border"></div>
853
854        <div class="project-main">
855          <figure class="icon project-icon">
856            <img
857              src="https://jgthms.com/projects/css-masterclass-io/icon.png"
858              alt=""
859              loading="lazy"
860              decoding="async"
861            />
862          </figure>
863
864          <div class="stack project-heading">
865            <h3 class="project-title">CSS Masterclass</h3>
866
867            <p class="project-description">My very own CSS Masterclass with interactive courses and educational videos</p>
868
869            <p class="list project-tags">
870              <span class="project-tag"
871                ><em>/</em
872                ><strong>Rails</strong></span
873              ><span class="project-tag"
874                ><em>/</em
875                ><strong>React</strong></span
876              ><span class="project-tag"
877                ><em>/</em
878                ><strong>CSS</strong></span
879              ><span class="project-tag"
880                ><em>/</em
881                ><strong>JavaScript</strong></span
882              ><span class="project-tag"
883                ><em>/</em><strong>2024</strong></span
884              >
885            </p>
886          </div>
887
888          
889          <a
890            class="project-link"
891            href="https://cssmasterclass.io/"
892            target="_blank"
893            rel="noopener"
894            >Visit</a
895          >
896          
897        </div>
898      </div>
899    </article>
900      
901     
902     
903     
904     
905     
906     
907     
908     
909     
910     
911     
912     
913     
914     
915     
916     
917     
918     
919     
920     
921     
922     
923     
924     
925     
926     
927     
928     
929     
930     
931     
932     
933      
934
935    <article
936      class="stack project"
937      id="tally"
938      data-type="client"
939      data-tags="react,css,javascript"
940      data-rank="33"
941      data-share="https://jgthms.com/projects/tally/share.png"
942      data-preview="https://jgthms.com/projects/tally/preview.png"
943    >
944      <div class="project-body">
945        <div class="project-border"></div>
946
947        <div class="project-main">
948          <figure class="icon project-icon">
949            <img
950              src="https://jgthms.com/projects/tally/icon.png"
951              alt=""
952              loading="lazy"
953              decoding="async"
954            />
955          </figure>
956
957          <div class="stack project-heading">
958            <h3 class="project-title">Tally</h3>
959
960            <p class="project-description">The app that saves sounds, especially the voices of the people you care about</p>
961
962            <p class="list project-tags">
963              <span class="project-tag"
964                ><em>/</em
965                ><strong>React</strong></span
966              ><span class="project-tag"
967                ><em>/</em
968                ><strong>CSS</strong></span
969              ><span class="project-tag"
970                ><em>/</em
971                ><strong>JavaScript</strong></span
972              ><span class="project-tag"
973                ><em>/</em><strong>2022</strong></span
974              >
975            </p>
976          </div>
977
978          
979        </div>
980      </div>
981    </article>
982      
983     
984     
985     
986     
987     
988     
989     
990     
991     
992     
993     
994     
995     
996     
997     
998     
999     
1000     
1001     
1002     
1003     
1004     
1005     
1006     
1007     
1008     
1009      
1010
1011    <article
1012      class="stack project"
1013      id="futureme"
1014      data-type="client"
1015      data-tags="design,css"
1016      data-rank="27"
1017      data-share="https://jgthms.com/projects/futureme/share.png"
1018      data-preview="https://jgthms.com/projects/futureme/preview.png"
1019    >
1020      <div class="project-body">
1021        <div class="project-border"></div>
1022
1023        <div class="project-main">
1024          <figure class="icon project-icon">
1025            <img
1026              src="https://jgthms.com/projects/futureme/icon.png"
1027              alt=""
1028              loading="lazy"
1029              decoding="async"
1030            />
1031          </figure>
1032
1033          <div class="stack project-heading">
1034            <h3 class="project-title">FutureMe</h3>
1035
1036            <p class="project-description">Write a letter to your future self</p>
1037
1038            <p class="list project-tags">
1039              <span class="project-tag"
1040                ><em>/</em
1041                ><strong>Design</strong></span
1042              ><span class="project-tag"
1043                ><em>/</em
1044                ><strong>CSS</strong></span
1045              ><span class="project-tag"
1046                ><em>/</em><strong>2021</strong></span
1047              >
1048            </p>
1049          </div>
1050
1051          
1052          <a
1053            class="project-link"
1054            href="https://www.futureme.org/"
1055            target="_blank"
1056            rel="noopener"
1057            >Visit</a
1058          >
1059          
1060        </div>
1061      </div>
1062    </article>
1063      
1064     
1065     
1066     
1067     
1068     
1069     
1070     
1071     
1072     
1073     
1074     
1075     
1076     
1077     
1078     
1079     
1080     
1081     
1082     
1083     
1084     
1085      
1086
1087    <article
1088      class="stack project"
1089      id="f1-standings"
1090      data-type="opensource"
1091      data-tags="design,css"
1092      data-rank="22"
1093      data-share="https://jgthms.com/projects/f1-standings/share.png"
1094      data-preview="https://jgthms.com/projects/f1-standings/preview.png"
1095    >
1096      <div class="project-body">
1097        <div class="project-border"></div>
1098
1099        <div class="project-main">
1100          <figure class="icon project-icon">
1101            <img
1102              src="https://jgthms.com/projects/f1-standings/icon.png"
1103              alt=""
1104              loading="lazy"
1105              decoding="async"
1106            />
1107          </figure>
1108
1109          <div class="stack project-heading">
1110            <h3 class="project-title">F1 Standings</h3>
1111
1112            <p class="project-description">A mobile-friendly home for the F1 driver standings, team standings, and races calendar</p>
1113
1114            <p class="list project-tags">
1115              <span class="project-tag"
1116                ><em>/</em
1117                ><strong>Design</strong></span
1118              ><span class="project-tag"
1119                ><em>/</em
1120                ><strong>CSS</strong></span
1121              ><span class="project-tag"
1122                ><em>/</em><strong>2021</strong></span
1123              >
1124            </p>
1125          </div>
1126
1127          
1128          <a
1129            class="project-link"
1130            href="https://jgthms.com/f1-standings/"
1131            target="_blank"
1132            rel="noopener"
1133            >Visit</a
1134          >
1135          
1136        </div>
1137      </div>
1138    </article>
1139      
1140     
1141     
1142     
1143     
1144     
1145     
1146     
1147     
1148     
1149     
1150     
1151     
1152     
1153     
1154     
1155     
1156     
1157     
1158     
1159     
1160     
1161     
1162     
1163     
1164     
1165     
1166     
1167     
1168     
1169     
1170     
1171     
1172     
1173     
1174     
1175     
1176     
1177      
1178
1179    <article
1180      class="stack project"
1181      id="football-tables"
1182      data-type="opensource"
1183      data-tags="design,css"
1184      data-rank="38"
1185      data-share="https://jgthms.com/projects/football-tables/sh
1185are.png"
1186      data-preview="https://jgthms.com/projects/football-tables/preview.png"
1187    >
1188      <div class="project-body">
1189        <div class="project-border"></div>
1190
1191        <div class="project-main">
1192          <figure class="icon project-icon">
1193            <img
1194              src="https://jgthms.com/projects/football-tables/icon.png"
1195              alt=""
1196              loading="lazy"
1197              decoding="async"
1198            />
1199          </figure>
1200
1201          <div class="stack project-heading">
1202            <h3 class="project-title">Football Tables</h3>
1203
1204            <p class="project-description">Classic and alternative tables for the European football leagues</p>
1205
1206            <p class="list project-tags">
1207              <span class="project-tag"
1208                ><em>/</em
1209                ><strong>Design</strong></span
1210              ><span class="project-tag"
1211                ><em>/</em
1212                ><strong>CSS</strong></span
1213              ><span class="project-tag"
1214                ><em>/</em><strong>2020</strong></span
1215              >
1216            </p>
1217          </div>
1218
1219          
1220          <a
1221            class="project-link"
1222            href="https://jgthms.com/football-tables/"
1223            target="_blank"
1224            rel="noopener"
1225            >Visit</a
1226          >
1227          
1228        </div>
1229      </div>
1230    </article>
1231      
1232     
1233     
1234     
1235     
1236     
1237     
1238     
1239     
1240      
1241
1242    <article
1243      class="stack project is-selected"
1244      id="lego"
1245      data-type="client"
1246      data-tags="typescript,css,react"
1247      data-rank="9"
1248      data-share="https://jgthms.com/projects/lego/share.png"
1249      data-preview="https://jgthms.com/projects/lego/preview.png"
1250    >
1251      <div class="project-body">
1252        <div class="project-border"></div>
1253
1254        <div class="project-main">
1255          <figure class="icon project-icon">
1256            <img
1257              src="https://jgthms.com/projects/lego/icon.png"
1258              alt=""
1259              loading="lazy"
1260              decoding="async"
1261            />
1262          </figure>
1263
1264          <div class="stack project-heading">
1265            <h3 class="project-title">LEGO</h3>
1266
1267            <p class="project-description">Building a design system for the building blocks of boundless imagination</p>
1268
1269            <p class="list project-tags">
1270              <span class="project-tag"
1271                ><em>/</em
1272                ><strong>TypeScript</strong></span
1273              ><span class="project-tag"
1274                ><em>/</em
1275                ><strong>CSS</strong></span
1276              ><span class="project-tag"
1277                ><em>/</em
1278                ><strong>React</strong></span
1279              ><span class="project-tag"
1280                ><em>/</em><strong>2020</strong></span
1281              >
1282            </p>
1283          </div>
1284
1285          
1286        </div>
1287      </div>
1288    </article>
1289      
1290     
1291     
1292     
1293     
1294     
1295     
1296     
1297     
1298     
1299     
1300     
1301     
1302     
1303     
1304     
1305     
1306     
1307     
1308     
1309     
1310     
1311     
1312     
1313     
1314     
1315     
1316     
1317     
1318     
1319     
1320      
1321
1322    <article
1323      class="stack project"
1324      id="fabula"
1325      data-type="client"
1326      data-tags="branding,design,react,javascript"
1327      data-rank="31"
1328      data-share="https://jgthms.com/projects/fabula/share.png"
1329      data-preview="https://jgthms.com/projects/fabula/preview.png"
1330    >
1331      <div class="project-body">
1332        <div class="project-border"></div>
1333
1334        <div class="project-main">
1335          <figure class="icon project-icon">
1336            <img
1337              src="https://jgthms.com/projects/fabula/icon.png"
1338              alt=""
1339              loading="lazy"
1340              decoding="async"
1341            />
1342          </figure>
1343
1344          <div class="stack project-heading">
1345            <h3 class="project-title">Fabula</h3>
1346
1347            <p class="project-description">A frontend app to create personalized colorful books for children</p>
1348
1349            <p class="list project-tags">
1350              <span class="project-tag"
1351                ><em>/</em
1352                ><strong>Branding</strong></span
1353              ><span class="project-tag"
1354                ><em>/</em
1355                ><strong>Design</strong></span
1356              ><span class="project-tag"
1357                ><em>/</em
1358                ><strong>React</strong></span
1359              ><span class="project-tag"
1360                ><em>/</em
1361                ><strong>JavaScript</strong></span
1362              ><span class="project-tag"
1363                ><em>/</em><strong>2019</strong></span
1364              >
1365            </p>
1366          </div>
1367
1368          
1369          <a
1370            class="project-link"
1371            href="https://jgthms.com/fabula/single"
1372            target="_blank"
1373            rel="noopener"
1374            >Visit</a
1375          >
1376          
1377        </div>
1378      </div>
1379    </article>
1380      
1381     
1382     
1383     
1384     
1385     
1386     
1387     
1388     
1389     
1390     
1391     
1392     
1393     
1394     
1395     
1396     
1397     
1398     
1399     
1400     
1401     
1402     
1403      
1404
1405    <article
1406      class="stack project is-selected"
1407      id="netspeak-games"
1408      data-type="client"
1409      data-tags="branding,design,css"
1410      data-rank="23"
1411      data-share="https://jgthms.com/projects/netspeak-games/share.png"
1412      data-preview="https://jgthms.com/projects/netspeak-games/preview.png"
1413    >
1414      <div class="project-body">
1415        <div class="project-border"></div>
1416
1417        <div class="project-main">
1418          <figure class="icon project-icon">
1419            <img
1420              src="https://jgthms.com/projects/netspeak-games/icon.png"
1421              alt=""
1422              loading="lazy"
1423              decoding="async"
1424            />
1425          </figure>
1426
1427          <div class="stack project-heading">
1428            <h3 class="project-title">Netspeak Games</h3>
1429
1430            <p class="project-description">Branding and web design for a London-based remote-first games studio</p>
1431
1432            <p class="list project-tags">
1433              <span class="project-tag"
1434                ><em>/</em
1435                ><strong>Branding</strong></span
1436              ><span class="project-tag"
1437                ><em>/</em
1438                ><strong>Design</strong></span
1439              ><span class="project-tag"
1440                ><em>/</em
1441                ><strong>CSS</strong></span
1442              ><span class="project-tag"
1443                ><em>/</em><strong>2019</strong></span
1444              >
1445            </p>
1446          </div>
1447
1448          
1449          <a
1450            class="project-link"
1451            href="https://netspeakgames.com/"
1452            target="_blank"
1453            rel="noopener"
1454            >Visit</a
1455          >
1456          
1457        </div>
1458      </div>
1459    </article>
1460      
1461     
1462     
1463     
1464     
1465     
1466     
1467     
1468     
1469     
1470     
1471     
1472     
1473     
1474     
1475     
1476      
1477
1478    <article
1479      class="stack project is-selected"
1480      id="javascript-in-14-minutes"
1481      data-type="opensource"
1482      data-tags="javascript,teaching,open source"
1483      data-rank="16"
1484      data-share="https://jgthms.com/projects/javascript-in-14-minutes/share.png"
1485      data-preview="https://jgthms.com/projects/javascript-in-14-minutes/preview.png"
1486    >
1487      <div class="project-body">
1488        <div class="project-border"></div>
1489
1490        <div class="project-main">
1491          <figure class="icon project-icon">
1492            <img
1493              src="https://jgthms.com/projects/javascript-in-14-minutes/icon.png"
1494              alt=""
1495              loading="lazy"
1496              decoding="async"
1497            />
1498          </figure>
1499
1500          <div class="stack project-heading">
1501            <h3 class="project-title">JavaScript in 14 minutes</h3>
1502
1503            <p class="project-description">Learn the basics of JavaScript in 14 minutes with this interactive tutorial</p>
1504
1505            <p class="list project-tags">
1506              <span class="project-tag"
1507                ><em>/</em
1508                ><strong>JavaScript</strong></span
1509              ><span class="project-tag"
1510                ><em>/</em
1511                ><strong>Teaching</strong></span
1512              ><span class="project-tag"
1513                ><em>/</em
1514                ><strong>Open Source</strong></span
1515              ><span class="project-tag"
1516                ><em>/</em><strong>2018</strong></span
1517              >
1518            </p>
1519          </div>
1520
1521          
1522          <a
1523            class="project-link"
1524            href="https://jgthms.com/javascript-in-14-minutes/"
1525            target="_blank"
1526            rel="noopener"
1527            >Visit</a
1528          >
1529          
1530        </div>
1531      </div>
1532    </article>
1533      
1534     
1535     
1536     
1537     
1538     
1539     
1540      
1541
1542    <article
1543      class="stack project is-selected"
1544      id="html-reference"
1545      data-type="opensource"
1546      data-tags="html,teaching,open source"
1547      data-rank="7"
1548      data-share="https://jgthms.com/projects/html-reference/share.png"
1549      data-preview="https://jgthms.com/projects/html-reference/preview.png"
1550    >
1551      <div class="project-body">
1552        <div class="project-border"></div>
1553
1554        <div class="project-main">
1555          <figure class="icon project-icon">
1556            <img
1557              src="https://jgthms.com/projects/html-reference/icon.png"
1558              alt=""
1559              loading="lazy"
1560              decoding="async"
1561            />
1562          </figure>
1563
1564          <div class="stack project-heading">
1565            <h3 class="project-title">HTML Reference</h3>
1566
1567            <p class="project-description">A free guide to all HTML elements and attributes</p>
1568
1569            <p class="list project-tags">
1570              <span class="project-tag"
1571                ><em>/</em
1572                ><strong>HTML</strong></span
1573              ><span class="project-tag"
1574                ><em>/</em
1575                ><strong>Teaching</strong></span
1576              ><span class="project-tag"
1577                ><em>/</em
1578                ><strong>Open Source</strong></span
1579              ><span class="project-tag"
1580                ><em>/</em><strong>2017</strong></span
1581              >
1582            </p>
1583          </div>
1584
1585          
1586          <a
1587            class="project-link"
1588            href="https://htmlreference.io/"
1589            target="_blank"
1590            rel="noopener"
1591            >Visit</a
1592          >
1593          
1594        </div>
1595      </div>
1596    </article>
1597      
1598     
1599     
1600     
1601     
1602      
1603
1604    <article
1605      class="stack project is-selected"
1606      id="css-reference"
1607      data-type="opensource"
1608      data-tags="css,teaching,open source"
1609      data-rank="5"
1610      data-share="https://jgthms.com/projects/css-reference/share.png"
1611      data-preview="https://jgthms.com/projects/css-reference/preview.png"
1612    >
1613      <div class="project-body">
1614        <div class="project-border"></div>
1615
1616        <div class="project-main">
1617          <figure class="icon project-icon">
1618            <img
1619              src="https://jgthms.com/projects/css-reference/icon.png"
1620              alt=""
1621              loading="lazy"
1622              decoding="async"
1623            />
1624          </figure>
1625
1626          <div class="stack project-heading">
1627            <h3 class="project-title">CSS Reference</h3>
1628
1629            <p class="project-description">A free visual guide to CSS</p>
1630
1631            <p class="list project-tags">
1632              <span class="project-tag"
1633                ><em>/</em
1634                ><strong>CSS</strong></span
1635              ><span class="project-tag"
1636                ><em>/</em
1637                ><strong>Teaching</strong></span
1638              ><span class="project-tag"
1639                ><em>/</em
1640                ><strong>Open Source</strong></span
1641              ><span class="project-tag"
1642                ><em>/</em><strong>2017</strong></span
1643              >
1644            </p>
1645          </div>
1646
1647          
1648          <a
1649            class="project-link"
1650            href="https://cssreference.io/"
1651            target="_blank"
1652            rel="noopener"
1653            >Visit</a
1654          >
1655          
1656        </div>
1657      </div>
1658    </article>
1659      
1660     
1661     
1662      
1663
1664    <article
1665      class="stack project is-selected"
1666      id="web-design-in-4-minutes"
1667      data-type="opensource"
1668      data-tags="html,css,open source"
1669      data-rank="3"
1670      data-share="https://jgthms.com/projects/web-design-in-4-minutes/share.png"
1671      data-preview="https://jgthms.com/projects/web-design-in-4-minutes/preview.png"
1672    >
1673      <div class="project-body">
1674        <div class="project-border"></div>
1675
1676        <div class="project-main">
1677          <figure class="icon project-icon">
1678            <img
1679              src="https://jgthms.com/projects/web-design-in-4-minutes/icon.png"
1680              alt=""
1681              loading="lazy"
1682              decoding="async"
1683            />
1684          </figure>
1685
1686          <div class="stack project-heading">
1687            <h3 class="project-title">Web Design in 4 minutes</h3>
1688
1689            <p class="project-description">Innovative interactive web design tutorial</p>
1690
1691            <p class="list project-tags">
1692              <span class="project-tag"
1693                ><em>/</em
1694                ><strong>HTML</strong></span
1695              ><span class="project-tag"
1696                ><em>/</em
1697                ><strong>CSS</strong></span
1698              ><span class="project-tag"
1699                ><em>/</em
1700                ><strong>Open Source</strong></span
1701              ><span class="project-tag"
1702                ><em>/</em><strong>2017</strong></span
1703              >
1704            </p>
1705          </div>
1706
1707          
1708          <a
1709            class="project-link"
1710            href="https://jgthms.com/web-design-in-4-minutes/"
1711            target="_blank"
1712            rel="noopener"
1713            >Visit</a
1714          >
1715          
1716        </div>
1717      </div>
1718    </article>
1719      
1720     
1721     
1722     
1723     
1724     
1725     
1726     
1727     
1728     
1729     
1730     
1731     
1732     
1733     
1734     
1735     
1736     
1737     
1738     
1739     
1740     
1741     
1742     
1743     
1744     
1745     
1746     
1747     
1748     
1749     
1750     
1751     
1752     
1753     
1754      
1755
1756    <article
1757      class="stack project"
1758      id="code-at-uni"
1759      data-type="personal"
1760      data-tags="teaching,design,css,javascript"
1761      data-rank="35"
1762      data-share="https://jgthms.com/projects/code-at-uni/share.png"
1763      data-preview="https://jgthms.com/projects/code-at-uni/preview.png"
1764    >
1765      <div class="project-body">
1766        <div class="project-border"></div>
1767
1768        <div class="project-main">
1769          <figure class="icon project-icon">
1770            <img
1771              src="https://jgthms.com/projects/code-at-uni/icon.png"
1772              alt=""
1773              loading="lazy"
1774              decoding="async"
1775            />
1776          </figure>
1777
1778          <div class="stack project-heading">
1779            <h3 class="project-title">Code at Uni</h3>
1780
1781            <p class="project-description">Teaching CSS and JavaScript courses for Code at Uni in London</p>
1782
1783            <p class="list project-tags">
1784              <span class="project-tag"
1785                ><em>/</em
1786                ><strong>Teaching</strong></span
1787              ><span class="project-tag"
1788                ><em>/</em
1789                ><strong>Design</strong></span
1790              ><span class="project-tag"
1791                ><em>/</em
1792                ><strong>CSS</strong></span
1793              ><span class="project-tag"
1794                ><em>/</em
1795                ><strong>JavaScript</strong></span
1796              ><span class="project-tag"
1797                ><em>/</em><strong>2016</strong></span
1798              >
1799            </p>
1800          </div>
1801
1802          
1803          <a
1804            class="project-link"
1805            href="https://jgthms.com/js-course-syllabus/"
1806            target="_blank"
1807            rel="noopener"
1808            >Visit</a
1809          >
1810          
1811        </div>
1812      </div>
1813    </article>
1814      
1815     
1816     
1817     
1818     
1819     
1820     
1821     
1822     
1823     
1824     
1825     
1826     
1827     
1828     
1829     
1830     
1831     
1832     
1833     
1834     
1835     
1836     
1837     
1838     
1839     
1840     
1841     
1842     
1843      
1844
1845    <article
1846      class="stack project"
1847      id="arnaud-benard"
1848      data-type="client"
1849      data-tags="branding,design,css"
1850      data-rank="29"
1851      data-share="https://jgthms.com/projects/arnaud-benard/share.png"
1852      data-preview="https://jgthms.com/projects/arnaud-benard/preview.png"
1853    >
1854      <div class="project-body">
1855        <div class="project-border"></div>
1856
1857        <div class="project-main">
1858          <figure class="icon project-icon">
1859            <img
1860              src="https://jgthms.com/projects/arnaud-benard/icon.png"
1861              alt=""
1862              loading="lazy"
1863              decoding="async"
1864            />
1865          </figure>
1866
1867          <div class="stack project-heading">
1868            <h3 class="project-title">Arnaud Benard</h3>
1869
1870            <p class="project-description">Data Science Freelancer</p>
1871
1872            <p class="list project-tags">
1873              <span class="project-tag"
1874                ><em>/</em
1875                ><strong>Branding</strong></span
1876              ><span class="project-tag"
1877                ><em>/</em
1878                ><strong>Design</strong></span
1879              ><span class="project-tag"
1880                ><em>/</em
1881                ><strong>CSS</strong></span
1882              ><span class="project-tag"
1883                ><em>/</em><strong>2016</strong></span
1884              >
1885            </p>
1886          </div>
1887
1888          
1889          <a
1890            class="project-link"
1891            href="https://jgthms.com/arnaudbenard/"
1892            target="_blank"
1893            rel="noopener"
1894            >Visit</a
1895          >
1896          
1897        </div>
1898      </div>
1899    </article>
1900      
1901     
1902     
1903     
1904     
1905     
1906     
1907     
1908     
1909     
1910     
1911     
1912     
1913     
1914     
1915     
1916     
1917     
1918     
1919     
1920     
1921     
1922     
1923     
1924     
1925     
1926     
1927     
1928     
1929     
1930     
1931     
1932     
1933     
1934     
1935     
1936      
1937
1938    <article
1939      class="stack project"
1940      id="wysiwyg-css"
1941      data-type="opensource"
1942      data-tags="open source,design,css"
1943      data-rank="36"
1944      data-share="https://jgthms.com/projects/wysiwyg-css/share.png"
1945      data-preview="https://jgthms.com/projects/wysiwyg-css/preview.png"
1946    >
1947      <div class="project-body">
1948        <div class="project-border"></div>
1949
1950        <div class="project-main">
1951          <figure class="icon project-icon">
1952            <img
1953              src="https://jgthms.com/projects/wysiwyg-css/icon.png"
1954              alt=""
1955              loading="lazy"
1956              decoding="async"
1957            />
1958          </figure>
1959
1960          <div class="stack project-heading">
1961            <h3 class="project-title">wysiwyg.css</h3>
1962
1963            <p class="project-description">Style generated content with a single CSS class</p>
1964
1965            <p class="list project-tags">
1966              <span class="project-tag"
1967                ><em>/</em
1968                ><strong>Open Source</strong></span
1969              ><span class="project-tag"
1970                ><em>/</em
1971                ><strong>Design</strong></span
1972              ><span class="project-tag"
1973                ><em>/</em
1974                ><strong>CSS</strong></span
1975              ><span class="project-tag"
1976                ><em>/</em><strong>2016</strong></span
1977              >
1978            </p>
1979          </div>
1980
1981          
1982          <a
1983            class="project-link"
1984            href="https://jgthms.com/wysiwyg.css/"
1985            target="_blank"
1986            rel="noopener"
1987            >Visit</a
1988          >
1989          
1990        </div>
1991      </div>
1992    </article>
1993      
1994     
1995     
1996     
1997     
1998     
1999     
2000     
2001     
2002     
2003     
2004     
2005     
2006     
2007     
2008     
2009     
2010     
2011     
2012     
2013      
2014
2015    <article
2016      class="stack project"
2017      id="minireset-css"
2018      data-type="opensource"
2019      data-tags="css,open source"
2020      data-rank="20"
2021      data-share="https://jgthms.com/projects/minireset-css/share.png"
2022      data-preview="https://jgthms.com/projects/minireset-css/preview.png"
2023    >
2024      <div class="project-body">
2025        <div class="project-border"></div>
2026
2027        <div class="project-main">
2028          <figure class="icon project-icon">
2029            <img
2030              src="https://jgthms.com/projects/minireset-css/icon.png"
2031              alt=""
2032              loading="lazy"
2033              decoding="async"
2034            />
2035          </figure>
2036
2037          <div class="stack project-heading">
2038            <h3 class="project-title">minireset.css</h3>
2039
2040            <p class="project-description">A tiny modern CSS reset</p>
2041
2042            <p class="list project-tags">
2043              <span class="project-tag"
2044                ><em>/</em
2045                ><strong>CSS</strong></span
2046              ><span class="project-tag"
2047                ><em>/</em
2048                ><strong>Open Source</strong></span
2049              ><span class="project-tag"
2050                ><em>/</em><strong>2016</strong></span
2051              >
2052            </p>
2053          </div>
2054
2055          
2056          <a
2057            class="project-link"
2058            href="https://jgthms.com/minireset.css/"
2059            target="_blank"
2060            rel="noopener"
2061            >Visit</a
2062          >
2063          
2064        </div>
2065      </div>
2066    </article>
2067      
2068     
2069     
2070     
2071     
2072     
2073     
2074     
2075     
2076     
2077     
2078     
2079     
2080     
2081     
2082     
2083     
2084     
2085      
2086
2087    <article
2088      class="stack project"
2089      id="css-art-science"
2090      data-type="opensource"
2091      data-tags="html,css,teaching,open source"
2092      data-rank="18"
2093      data-share="https://jgthms.com/projects/css-art-science/share.png"
2094      data-preview="https://jgthms.com/projects/css-art-science/preview.png"
2095    >
2096      <div class="project-body">
2097        <div class="project-border"></div>
2098
2099        <div class="project-main">
2100          <figure class="icon project-icon">
2101            <img
2102              src="https://jgthms.com/projects/css-art-science/icon.png"
2103              alt=""
2104              loading="lazy"
2105              decoding="async"
2106            />
2107          </figure>
2108
2109          <div class="stack project-heading">
2110            <h3 class="project-title">CSS : l’Art et la Science</h3>
2111
2112            <p class="project-description">Un parcours initiatique à l'intégration Web</p>
2113
2114            <p class="list project-tags">
2115              <span class="project-tag"
2116                ><em>/</em
2117                ><strong>HTML</strong></span
2118              ><span class="project-tag"
2119                ><em>/</em
2120                ><strong>CSS</strong></span
2121              ><span class="project-tag"
2122                ><em>/</em
2123                ><strong>Teaching</strong></span
2124              ><span class="project-tag"
2125                ><em>/</em
2126                ><strong>Open Source</strong></span
2127              ><span class="project-tag"
2128                ><em>/</em><strong>2016</strong></span
2129              >
2130            </p>
2131          </div>
2132
2133          
2134          <a
2135            class="project-link"
2136            href="https://jgthms.com/css-art-science/"
2137            target="_blank"
2138            rel="noopener"
2139            >Visit</a
2140          >
2141          
2142        </div>
2143      </div>
2144    </article>
2145      
2146      
2147
2148    <article
2149      class="stack project is-selected"
2150      id="bulma"
2151      data-type="opensource"
2152      data-tags="css,design,scss"
2153      data-rank="1"
2154      data-share="https://jgthms.com/projects/bulma/share.png"
2155      data-preview="https://jgthms.com/projects/bulma/preview.png"
2156    >
2157      <div class="project-body">
2158        <div class="project-border"></div>
2159
2160        <div class="project-main">
2161          <figure class="icon project-icon">
2162            <img
2163              src="https://jgthms.com/projects/bulma/icon.png"
2164              alt=""
2165              loading="lazy"
2166              decoding="async"
2167            />
2168          </figure>
2169
2170          <div class="stack project-heading">
2171            <h3 class="project-title">Bulma</h3>
2172
2173            <p class="project-description">The Modern CSS Framework</p>
2174
2175            <p class="list project-tags">
2176              <span class="project-tag"
2177                ><em>/</em
2178                ><strong>CSS</strong></span
2179              ><span class="project-tag"
2180                ><em>/</em
2181                ><strong>Design</strong></span
2182              ><span class="project-tag"
2183                ><em>/</em
2184                ><strong>SCSS</strong></span
2185              ><span class="project-tag"
2186                ><em>/</em><strong>2016</strong></span
2187              >
2188            </p>
2189          </div>
2190
2191          
2192          <a
2193            class="project-link"
2194            href="https://bulma.io/"
2195            target="_blank"
2196            rel="noopener"
2197            >Visit</a
2198          >
2199          
2200        </div>
2201      </div>
2202    </article>
2203      
2204     
2205     
2206     
2207     
2208     
2209     
2210     
2211     
2212     
2213     
2214     
2215     
2216     
2217      
2218
2219    <article
2220      class="stack project is-selected"
2221      id="marksheet"
2222      data-type="opensource"
2223      data-tags="html,css,teaching"
2224      data-rank="14"
2225      data-share="https://jgthms.com/projects/marksheet/share.png"
2226      data-preview="https://jgthms.com/projects/marksheet/preview.png"
2227    >
2228      <div class="project-body">
2229        <div class="project-border"></div>
2230
2231        <div class="project-main">
2232          <figure class="icon project-icon">
2233            <img
2234              src="https://jgthms.com/projects/marksheet/icon.png"
2235              alt=""
2236              loading="lazy"
2237              decoding="async"
2238            />
2239          </figure>
2240
2241          <div class="stack project-heading">
2242            <h3 class="project-title">MarkSheet</h3>
2243
2244            <p class="project-description">A complete and free HTML & CSS tutorial</p>
2245
2246            <p class="list project-tags">
2247              <span class="project-tag"
2248                ><em>/</em
2249                ><strong>HTML</strong></span
2250              ><span class="project-tag"
2251                ><em>/</em
2252                ><strong>CSS</strong></span
2253              ><span class="project-tag"
2254                ><em>/</em
2255                ><strong>Teaching</strong></span
2256              ><span class="project-tag"
2257                ><em>/</em><strong>2015</strong></span
2258              >
2259            </p>
2260          </div>
2261
2262          
2263          <a
2264            class="project-link"
2265            href="https://marksheet.io/"
2266            target="_blank"
2267            rel="noopener"
2268            >Visit</a
2269          >
2270          
2271        </div>
2272      </div>
2273    </article>
2274      
2275     
2276     
2277     
2278     
2279     
2280      
2281
2282    <article
2283      class="stack project is-selected"
2284      id="ivan-ballini-estates"
2285      data-type="client"
2286      data-tags="wordpress,branding,css,javascript"
2287      data-rank="6"
2288      data-share="https://jgthms.com/projects/ivan-ballini-estates/share.png"
2289      data-preview="https://jgthms.com/projects/ivan-ballini-estates/preview.png"
2290    >
2291      <div class="project-body">
2292        <div class="project-border"></div>
2293
2294        <div class="project-main">
2295          <figure class="icon project-icon">
2296            <img
2297              src="https://jgthms.com/projects/ivan-ballini-estates/icon.png"
2298              alt=""
2299              loading="lazy"
2300              decoding="async"
2301            />
2302          </figure>
2303
2304          <div class="stack project-heading">
2305            <h3 class="project-title">Ivan Ballini Estates</h3>
2306
2307            <p class="project-description">Real Estate, modern and gorgeous</p>
2308
2309            <p class="list project-tags">
2310              <span class="project-tag"
2311                ><em>/</em
2312                ><strong>WordPress</strong></span
2313              ><span class="project-tag"
2314                ><em>/</em
2315                ><strong>Branding</strong></span
2316              ><span class="project-tag"
2317                ><em>/</em
2318                ><strong>CSS</strong></span
2319              ><span class="project-tag"
2320                ><em>/</em
2321                ><strong>JavaScript</strong></span
2322              ><span class="project-tag"
2323                ><em>/</em><strong>2014</strong></span
2324              >
2325            </p>
2326          </div>
2327
2328          
2329          <a
2330            class="project-link"
2331            href="https://ivanballiniestates.com/"
2332            target="_blank"
2333            rel="noopener"
2334            >Visit</a
2335          >
2336          
2337        </div>
2338      </div>
2339    </article>
2340      
2341     
2342     
2343     
2344     
2345     
2346     
2347     
2348     
2349     
2350     
2351     
2352     
2353     
2354     
2355     
2356     
2357     
2358     
2359     
2360     
2361     
2362     
2363     
2364      
2365
2366    <article
2367      class="stack project is-selected"
2368      id="the-bbx"
2369      data-type="personal"
2370      data-tags="photoshop,css,javascript"
2371      data-rank="24"
2372      data-share="https://jgthms.com/projects/the-bbx/share.png"
2373      data-preview="https://jgthms.com/projects/the-bbx/preview.png"
2374    >
2375      <div class="project-body">
2376        <div class="project-border"></div>
2377
2378        <div class="project-main">
2379          <figure class="icon project-icon">
2380            <img
2381              src="https://jgthms.com/projects/the-bbx/icon.png"
2382              alt=""
2383              loading="lazy"
2384              decoding="async"
2385            />
2386          </figure>
2387
2388          <div class="stack project-heading">
2389            <h3 class="project-title">The bbx</h3>
2390
2391            <p class="project-description">My one-page animated personal portfolio</p>
2392
2393            <p class="list project-tags">
2394              <span class="project-tag"
2395                ><em>/</em
2396                ><strong>Photoshop</strong></span
2397              ><span class="project-tag"
2398                ><em>/</em
2399                ><strong>CSS</strong></span
2400              ><span class="project-tag"
2401                ><em>/</em
2402                ><strong>JavaScript</strong></span
2403              ><span class="project-tag"
2404                ><em>/</em><strong>2013</strong></span
2405              >
2406            </p>
2407          </div>
2408
2409          
2410          <a
2411            class="project-link"
2412            href="https://jgthms.com/the-bbx/"
2413            target="_blank"
2414            rel="noopener"
2415            >Visit</a
2416          >
2417          
2418        </div>
2419      </div>
2420    </article>
2421      
2422     
2423     
2424     
2425     
2426     
2427     
2428     
2429     
2430     
2431     
2432     
2433     
2434     
2435     
2436     
2437     
2438     
2439     
2440     
2441     
2442     
2443     
2444     
2445     
2446     
2447      
2448
2449    <article
2450      class="stack project"
2451      id="le-guide-wordpress"
2452      data-type="personal"
2453      data-tags="html,css,teaching,wordpress"
2454      data-rank="26"
2455      data-share="https://jgthms.com/projects/le-guide-wordpress/share.png"
2456      data-preview="https://jgthms.com/projects/le-guide-wordpress/preview.png"
2457    >
2458      <div class="project-body">
2459        <div class="project-border"></div>
2460
2461        <div class="project-main">
2462          <figure class="icon project-icon">
2463            <img
2464              src="https://jgthms.com/projects/le-guide-wordpress/icon.png"
2465              alt=""
2466              loading="lazy"
2467              decoding="async"
2468            />
2469          </figure>
2470
2471          <div class="stack project-heading">
2472            <h3 class="project-title">Le Guide WordPress</h3>
2473
2474            <p class="project-description">My WordPress tutorial that teaches creating themes from scratch</p>
2475
2476            <p class="list project-tags">
2477              <span class="project-tag"
2478                ><em>/</em
2479                ><strong>HTML</strong></span
2480              ><span class="project-tag"
2481                ><em>/</em
2482                ><strong>CSS</strong></span
2483              ><span class="project-tag"
2484                ><em>/</em
2485                ><strong>Teaching</strong></span
2486              ><span class="project-tag"
2487                ><em>/</em
2488                ><strong>WordPress</strong></span
2489              ><span class="project-tag"
2490                ><em>/</em><strong>2012</strong></span
2491              >
2492            </p>
2493          </div>
2494
2495          
2496          <a
2497            class="project-link"
2498            href="https://wordpress.bbxdesign.com/"
2499            target="_blank"
2500            rel="noopener"
2501            >Visit</a
2502          >
2503          
2504        </div>
2505      </div>
2506    </article>
2507      
2508     
2509     
2510     
2511     
2512     
2513     
2514     
2515     
2516     
2517     
2518     
2519     
2520      
2521
2522    <article
2523      class="stack project is-selected"
2524      id="louis-vuitton"
2525      data-type="client"
2526      data-tags="design,ios"
2527      data-rank="13"
2528      data-share="https://jgthms.com/projects/louis-vuitton/share.png"
2529      data-preview="https://jgthms.com/projects/louis-vuitton/preview.png"
2530    >
2531      <div class="project-body">
2532        <div class="project-border"></div>
2533
2534        <div class="project-main">
2535          <figure class="icon project-icon">
2536            <img
2537              src="https://jgthms.com/projects/louis-vuitton/icon.png"
2538              alt=""
2539              loading="lazy"
2540              decoding="async"
2541            />
2542          </figure>
2543
2544          <div class="stack project-heading">
2545            <h3 class="project-title">Louis Vuitton</h3>
2546
2547            <p class="project-description">Building an iPad app for in-store bag customization</p>
2548
2549            <p class="list project-tags">
2550              <span class="project-tag"
2551                ><em>/</em
2552                ><strong>Design</strong></span
2553              ><span class="project-tag"
2554                ><em>/</em
2555                ><strong>iOS</strong></span
2556              ><span class="project-tag"
2557                ><em>/</em><strong>2011</strong></span
2558              >
2559            </p>
2560          </div>
2561
2562          
2563        </div>
2564      </div>
2565    </article>
2566      
2567     
2568     
2569     
2570     
2571     
2572     
2573     
2574     
2575     
2576     
2577     
2578     
2579     
2580     
2581      
2582
2583    <article
2584      class="stack project is-selected"
2585      id="cambodia-vietnam-2010"
2586      data-type="personal"
2587      data-tags="design,html,css"
2588      data-rank="15"
2589      data-share="https://jgthms.com/projects/cambodia-vietnam-2010/share.png"
2590      data-preview="https://jgthms.com/projects/cambodia-vietnam-2010/preview.png"
2591    >
2592      <div class="project-body">
2593        <div class="project-border"></div>
2594
2595        <div class="project-main">
2596          <figure class="icon project-icon">
2597            <img
2598              src="https://jgthms.com/projects/cambodia-vietnam-2010/icon.png"
2599              alt=""
2600              loading="lazy"
2601              decoding="async"
2602            />
2603          </figure>
2604
2605          <div class="stack project-heading">
2606            <h3 class="project-title">Cambodia Vietnam 2010</h3>
2607
2608            <p class="project-description">An interactive trip summary of an 18-day journey through South-East Asia</p>
2609
2610            <p class="list project-tags">
2611              <span class="project-tag"
2612                ><em>/</em
2613                ><strong>Design</strong></span
2614              ><span class="project-tag"
2615                ><em>/</em
2616                ><strong>HTML</strong></span
2617              ><span class="project-tag"
2618                ><em>/</em
2619                ><strong>CSS</strong></span
2620              ><span class="project-tag"
2621                ><em>/</em><strong>2010</strong></span
2622              >
2623            </p>
2624          </div>
2625
2626          
2627          <a
2628            class="project-link"
2629            href="https://jgthms.com/cambodia-vietnam-2010/"
2630            target="_blank"
2631            rel="noopener"
2632            >Visit</a
2633          >
2634          
2635        </div>
2636      </div>
2637    </article>
2638      
2639     
2640     
2641     
2642     
2643     
2644     
2645     
2646     
2647     
2648     
2649      
2650
2651    <article
2652      class="stack project is-selected"
2653      id="microsoft"
2654      data-type="client"
2655      data-tags="css,javascript"
2656      data-rank="11"
2657      data-share="https://jgthms.com/projects/microsoft/share.png"
2658      data-preview="https://jgthms.com/projects/microsoft/preview.png"
2659    >
2660      <div class="project-body">
2661        <div class="project-border"></div>
2662
2663        <div class="project-main">
2664          <figure class="icon project-icon">
2665            <img
2666              src="https://jgthms.com/projects/microsoft/icon.png"
2667              alt=""
2668              loading="lazy"
2669              decoding="async"
2670            />
2671          </figure>
2672
2673          <div class="stack project-heading">
2674            <h3 class="project-title">Microsoft</h3>
2675
2676            <p class="project-description">Building an interactive JS website for the launch of Internet Explorer 9</p>
2677
2678            <p class="list project-tags">
2679              <span class="project-tag"
2680                ><em>/</em
2681                ><strong>CSS</strong></span
2682              ><span class="project-tag"
2683                ><em>/</em
2684                ><strong>JavaScript</strong></span
2685              ><span class="project-tag"
2686                ><em>/</em><strong>2010</strong></span
2687              >
2688            </p>
2689          </div>
2690
2691          
2692        </div>
2693      </div>
2694    </article>
2695      
2696     
2697     
2698     
2699     
2700     
2701     
2702     
2703     
2704     
2705     
2706     
2707     
2708     
2709     
2710     
2711     
2712     
2713     
2714     
2715     
2716      
2717
2718    <article
2719      class="stack project is-selected"
2720      id="australie-trip"
2721      data-type="personal"
2722      data-tags="photoshop,css,wordpress"
2723      data-rank="21"
2724      data-share="https://jgthms.com/projects/australie-trip/share.png"
2725      data-preview="https://jgthms.com/projects/australie-trip/preview.png"
2726    >
2727      <div class="project-body">
2728        <div class="project-border"></div>
2729
2730        <div class="project-main">
2731          <figure class="icon project-icon">
2732            <img
2733              src="https://jgthms.com/projects/australie-trip/icon.png"
2734              alt=""
2735              loading="lazy"
2736              decoding="async"
2737            />
2738          </figure>
2739
2740          <div class="stack project-heading">
2741            <h3 class="project-title">Australie Trip</h3>
2742
2743            <p class="project-description">Travel diary for a special friend</p>
2744
2745            <p class="list project-tags">
2746              <span class="project-tag"
2747                ><em>/</em
2748                ><strong>Photoshop</strong></span
2749              ><span class="project-tag"
2750                ><em>/</em
2751                ><strong>CSS</strong></span
2752              ><span class="project-tag"
2753                ><em>/</em
2754                ><strong>WordPress</strong></span
2755              ><span class="project-tag"
2756                ><em>/</em><strong>2010</strong></span
2757              >
2758            </p>
2759          </div>
2760
2761          
2762          <a
2763            class="project-link"
2764            href="https://jgthms.com/australie-trip/"
2765            target="_blank"
2766            rel="noopener"
2767            >Visit</a
2768          >
2769          
2770        </div>
2771      </div>
2772    </article>
2773      
2774     
2775     
2776     
2777     
2778     
2779     
2780     
2781     
2782     
2783     
2784     
2785     
2786     
2787     
2788     
2789     
2790     
2791     
2792     
2793     
2794     
2795     
2796     
2797     
2798     
2799     
2800     
2801     
2802     
2803     
2804     
2805      
2806
2807    <article
2808      class="stack project"
2809      id="task-this"
2810      data-type="personal"
2811      data-tags="photoshop,css"
2812      data-rank="32"
2813      data-share="https://jgthms.com/projects/task-this/share.png"
2814      data-preview="https://jgthms.com/projects/task-this/preview.png"
2815    >
2816      <div class="project-body">
2817        <div class="project-border"></div>
2818
2819        <div class="project-main">
2820          <figure class="icon project-icon">
2821            <img
2822              src="https://jgthms.com/projects/task-this/icon.png"
2823              alt=""
2824              loading="lazy"
2825              decoding="async"
2826            />
2827          </figure>
2828
2829          <div class="stack project-heading">
2830            <h3 class="project-title">Task This</h3>
2831
2832            <p class="project-description">My first iPhone app website redesign</p>
2833
2834            <p class="list project-tags">
2835              <span class="project-tag"
2836                ><em>/</em
2837                ><strong>Photoshop</strong></span
2838              ><span class="project-tag"
2839                ><em>/</em
2840                ><strong>CSS</strong></span
2841              ><span class="project-tag"
2842                ><em>/</em><strong>2010</strong></span
2843              >
2844            </p>
2845          </div>
2846
2847          
2848          <a
2849            class="project-link"
2850            href="https://jgthms.com/task-this/"
2851            target="_blank"
2852            rel="noopener"
2853            >Visit</a
2854          >
2855          
2856        </div>
2857      </div>
2858    </article>
2859      
2860     
2861     
2862     
2863     
2864     
2865     
2866     
2867     
2868     
2869     
2870     
2871     
2872     
2873     
2874     
2875     
2876     
2877     
2878     
2879     
2880     
2881     
2882     
2883     
2884      
2885
2886    <article
2887      class="stack project is-selected"
2888      id="editions-magellan"
2889      data-type="client"
2890      data-tags="branding,design,rails"
2891      data-rank="25"
2892      data-share="https://jgthms.com/projects/editions-magellan/share.png"
2893      data-preview="https://jgthms.com/projects/editions-magellan/preview.png"
2894    >
2895      <div class="project-body">
2896        <div class="project-border"></div>
2897
2898        <div class="project-main">
2899          <figure class="icon project-icon">
2900            <img
2901              src="https://jgthms.com/projects/editions-magellan/icon.png"
2902              alt=""
2903              loading="lazy"
2904              decoding="async"
2905            />
2906          </figure>
2907
2908          <div class="stack project-heading">
2909            <h3 class="project-title">Editions Magellan</h3>
2910
2911            <p class="project-description">Branding and Rails website for a Paris travel book editor</p>
2912
2913            <p class="list project-tags">
2914              <span class="project-tag"
2915                ><em>/</em
2916                ><strong>Branding</strong></span
2917              ><span class="project-tag"
2918                ><em>/</em
2919                ><strong>Design</strong></span
2920              ><span class="project-tag"
2921                ><em>/</em
2922                ><strong>Rails</strong></span
2923              ><span class="project-tag"
2924                ><em>/</em><strong>2009</strong></span
2925              >
2926            </p>
2927          </div>
2928
2929          
2930          <a
2931            class="project-link"
2932            href="https://jgthms.com/editions-magellan/"
2933            target="_blank"
2934            rel="noopener"
2935            >Visit</a
2936          >
2937          
2938        </div>
2939      </div>
2940    </article>
2941      
2942     
2943     
2944     
2945     
2946     
2947     
2948     
2949     
2950     
2951     
2952     
2953     
2954     
2955     
2956     
2957     
2958      
2959
2960    <article
2961      class="stack project is-selected"
2962      id="bbxdesign"
2963      data-type="personal"
2964      data-tags="wordpress,photoshop,css"
2965      data-rank="17"
2966      data-share="https://jgthms.com/projects/bbxdesign/share.png"
2967      data-preview="https://jgthms.com/projects/bbxdesign/preview.png"
2968    >
2969      <div class="project-body">
2970        <div class="project-border"></div>
2971
2972        <div class="project-main">
2973          <figure class="icon project-icon">
2974            <img
2975              src="https://jgthms.com/projects/bbxdesign/icon.png"
2976              alt=""
2977              loading="lazy"
2978              decoding="async"
2979            />
2980          </figure>
2981
2982          <div class="stack project-heading">
2983            <h3 class="project-title">bbxdesign</h3>
2984
2985            <p class="project-description">My personal WordPress blog</p>
2986
2987            <p class="list project-tags">
2988              <span class="project-tag"
2989                ><em>/</em
2990                ><strong>WordPress</strong></span
2991              ><span class="project-tag"
2992                ><em>/</em
2993                ><strong>Photoshop</strong></span
2994              ><span class="project-tag"
2995                ><em>/</em
2996                ><strong>CSS</strong></span
2997              ><span class="project-tag"
2998                ><em>/</em><strong>2007</strong></span
2999              >
3000            </p>
3001          </div>
3002
3003          
3004          <a
3005            class="project-link"
3006            href="https://bbxdesign.com"
3007            target="_blank"
3008            rel="noopener"
3009            >Visit</a
3010          >
3011          
3012        </div>
3013      </div>
3014    </article>
3015      
3016     
3017     
3018     
3019     
3020     
3021     
3022     
3023     
3024     
3025     
3026     
3027     
3028     
3029     
3030     
3031     
3032     
3033     
3034     
3035     
3036     
3037     
3038     
3039     
3040     
3041     
3042     
3043      
3044
3045    <article
3046      class="stack project is-selected"
3047      id="bbxworld"
3048      data-type="personal"
3049      data-tags="design,css"
3050      data-rank="28"
3051      data-share="https://jgthms.com/projects/bbxworld/share.png"
3052      data-preview="https://jgthms.com/projects/bbxworld/preview.png"
3053    >
3054      <div class="project-body">
3055        <div class="project-border"></div>
3056
3057        <div class="project-main">
3058          <figure class="icon project-icon">
3059            <img
3060              src="https://jgthms.com/projects/bbxworld/icon.png"
3061              alt=""
3062              loading="lazy"
3063              decoding="async"
3064            />
3065          </figure>
3066
3067          <div class="stack project-heading">
3068            <h3 class="project-title">bbxworld</h3>
3069
3070            <p class="project-description">My first ever CSS website</p>
3071
3072            <p class="list project-tags">
3073              <span class="project-tag"
3074                ><em>/</em
3075                ><strong>Design</strong></span
3076              ><span class="project-tag"
3077                ><em>/</em
3078                ><strong>CSS</strong></span
3079              ><span class="project-tag"
3080                ><em>/</em><strong>2007</strong></span
3081              >
3082            </p>
3083          </div>
3084
3085          
3086          <a
3087            class="project-link"
3088            href="https://jgthms.com/bbxworld/"
3089            target="_blank"
3090            rel="noopener"
3091            >Visit</a
3092          >
3093          
3094        </div>
3095      </div>
3096    </article>
3097      
3098     
3099     
3100     
3101     
3102     
3103     
3104     
3105     
3106     
3107     
3108     
3109     
3110     
3111     
3112     
3113     
3114     
3115     
3116     
3117     
3118     
3119     
3120     
3121     
3122     
3123     
3124     
3125     
3126     
3127     
3128     
3129     
3130     
3131     
3132     
3133     
3134      
3135
3136    <article
3137      class="stack project"
3138      id="golf-de-margaux"
3139      data-type="personal"
3140      data-tags="html,css,design"
3141      data-rank="37"
3142      data-share="https://jgthms.com/projects/golf-de-margaux/share.png"
3143      data-preview="https://jgthms.com/projects/golf-de-margaux/preview.png"
3144    >
3145      <div class="project-body">
3146        <div class="project-border"></div>
3147
3148        <div class="project-main">
3149          <figure class="icon project-icon">
3150            <img
3151              src="https://jgthms.com/projects/golf-de-margaux/icon.png"
3152              alt=""
3153              loading="lazy"
3154              decoding="async"
3155            />
3156          </figure>
3157
3158          <div class="stack project-heading">
3159            <h3 class="project-title">Golf de Margaux</h3>
3160
3161            <p class="project-description">A school project with interactive Flash golf courses</p>
3162
3163            <p class="list project-tags">
3164              <span class="project-tag"
3165                ><em>/</em
3166                ><strong>HTML</strong></span
3167              ><span class="project-tag"
3168                ><em>/</em
3169                ><strong>CSS</strong></span
3170              ><span class="project-tag"
3171                ><em>/</em
3172                ><strong>Design</strong></span
3173              ><span class="project-tag"
3174                ><em>/</em><strong>2006</strong></span
3175              >
3176            </p>
3177          </div>
3178
3179          
3180          <a
3181            class="project-link"
3182            href="https://jgthms.com/golf-de-margaux/"
3183            target="_blank"
3184            rel="noopener"
3185            >Visit</a
3186          >
3187          
3188        </div>
3189      </div>
3190    </article>
3191      
3192     
3193     
3194     
3195     
3196     
3197     
3198     
3199     
3200     
3201     
3202     
3203     
3204     
3205     
3206     
3207     
3208     
3209     
3210     
3211     
3212     
3213     
3214     
3215     
3216     
3217     
3218     
3219     
3220     
3221      
3222
3223    <article
3224      class="stack project"
3225      id="4l-trophy"
3226      data-type="personal"
3227      data-tags="design,dreamweaver"
3228      data-rank="30"
3229      data-share="https://jgthms.com/projects/4l-trophy/share.png"
3230      data-preview="https://jgthms.com/projects/4l-trophy/preview.png"
3231    >
3232      <div class="project-body">
3233        <div class="project-border"></div>
3234
3235        <div class="project-main">
3236          <figure class="icon project-icon">
3237            <img
3238              src="https://jgthms.com/projects/4l-trophy/icon.png"
3239              alt=""
3240              loading="lazy"
3241              decoding="async"
3242            />
3243          </figure>
3244
3245          <div class="stack project-heading">
3246            <h3 class="project-title">4L Trophy</h3>
3247
3248            <p class="project-description">The first website I ever built, before I knew what CSS was</p>
3249
3250            <p class="list project-tags">
3251              <span class="project-tag"
3252                ><em>/</em
3253                ><strong>Design</strong></span
3254              ><span class="project-tag"
3255                ><em>/</em
3256                ><strong>Dreamweaver</strong></span
3257              ><span class="project-tag"
3258                ><em>/</em><strong>2005</strong></span
3259              >
3260            </p>
3261          </div>
3262
3263          
3264          <a
3265            class="project-link"
3266            href="https://jgthms.com/4ltrophy/accueil.htm"
3267            target="_blank"
3268            rel="noopener"
3269            >Visit</a
3270          >
3271          
3272        </div>
3273      </div>
3274    </article>
3275    
3276
3277    
3278    <div class="stack project-group" data-type="game">
3279      <h2 class="project-group-title">Games</h2>
3280      <div class="project-grid"></div>
3281    </div>
3282    
3283    <div class="stack project-group" data-type="client">
3284      <h2 class="project-group-title">
3284Client Work</h2>
3285      <div class="project-grid"></div>
3286    </div>
3287    
3288    <div class="stack project-group" data-type="opensource">
3289      <h2 class="project-group-title">Open Source</h2>
3290      <div class="project-grid"></div>
3291    </div>
3292    
3293    <div class="stack project-group" data-type="personal">
3294      <h2 class="project-group-title">Personal</h2>
3295      <div class="project-grid"></div>
3296    </div>
3297    
3298  </section>
3299
3300  <dialog class="sheet">
3301    <img class="sheet-image" alt="" />
3302    <div class="stack sheet-body">
3303      <a class="sheet-visit reset" target="_blank" rel="noopener"
3304        >Visit project <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M480 144C488.8 144 496 151.2 496 160L496 480C496 488.8 488.8 496 480 496L160 496C151.2 496 144 488.8 144 480L144 160C144 151.2 151.2 144 160 144L480 144zM544 160C544 124.7 515.3 96 480 96L160 96C124.7 96 96 124.7 96 160L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 160zM368 360C368 373.3 378.7 384 392 384C405.3 384 416 373.3 416 360L416 248C416 234.7 405.3 224 392 224L280 224C266.7 224 256 234.7 256 248C256 261.3 266.7 272 280 272L334.1 272L231.1 375C221.7 384.4 221.7 399.6 231.1 408.9C240.5 418.2 255.7 418.3 265 408.9L368 305.9L368 360z"/></svg></a
3305      >
3306    </div>
3307  </dialog>
3308</div>
3309
3310    <footer class="footer">
3311      <a href="https://github.com/jgthms" target="_blank" class="svg is-github">
3312        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M266.1 392.7C266.1 413.6 255.2 447.8 229.4 447.8C203.6 447.8 192.7 413.6 192.7 392.7C192.7 371.8 203.6 337.6 229.4 337.6C255.2 337.6 266.1 371.8 266.1 392.7zM560 342.2C560 374.1 556.8 407.9 542.5 437.2C504.6 513.8 400.4 512 325.8 512C250 512 139.6 514.7 100.2 437.2C85.6 408.2 80 374.1 80 342.2C80 300.3 93.9 260.7 121.5 228.6C116.3 212.8 113.8 196.2 113.8 179.8C113.8 158.3 118.7 147.5 128.4 128C173.7 128 202.7 137 237.2 164C266.2 157.1 296 154 325.9 154C352.9 154 380.1 156.9 406.3 163.2C440.3 136.5 469.3 128 514.1 128C523.9 147.5 528.7 158.3 528.7 179.8C528.7 196.2 526.1 212.5 521 228C548.5 260.4 560 300.3 560 342.2zM495.7 392.7C495.7 348.8 469 310.1 422.2 310.1C403.3 310.1 385.2 313.5 366.2 316.1C351.3 318.4 336.4 319.3 321.1 319.3C305.9 319.3 291 318.4 276 316.1C257.3 313.5 239 310.1 220 310.1C173.2 310.1 146.5 348.8 146.5 392.7C146.5 480.5 226.9 494 296.9 494L345.1 494C415.4 494 495.7 480.6 495.7 392.7zM413.1 337.6C387.3 337.6 376.4 371.8 376.4 392.7C376.4 413.6 387.3 447.8 413.1 447.8C438.9 447.8 449.8 413.6 449.8 392.7C449.8 371.8 438.9 337.6 413.1 337.6z"/></svg>
3313      </a>
3314      <a href="https://jgthms.com/" class="svg"> <svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
3315<path fill-rule="evenodd" clip-rule="evenodd" d="M280 173.333H306.667C358.667 173.333 360 120 360 120C346.667 133.333 306.667 133.333 306.667 133.333H200L206.667 106.667H233.333C300 106.667 300 40 300 40C273.333 66.6667 233.333 66.6667 233.333 66.6667H126.667C60 66.6667 60 133.333 60 133.333C86.6667 106.667 126.667 106.667 126.667 106.667H153.333L120 240C106.667 280 66.6667 266.667 66.6667 266.667C93.3333 266.667 93.3333 240 93.3333 240C93.3333 240 93.3333 213.333 66.6667 213.333C66.6667 213.333 40 213.333 40 240C40 294.975 106.667 293.333 106.667 293.333C106.667 293.333 160 293.333 173.333 240L190 173.333H226.667L198.667 280C173.333 360 260 360 260 360C260 360 313.333 360 313.333 306.667C313.333 280 286.667 280 286.667 280C260 280 260 306.667 260 306.667C260 306.667 259.112 326.223 273.333 333.333C273.333 333.333 240 333.333 246.667 306.667L280 173.333Z" fill="#310736"/>
3316</svg>
3317 </a>
3318      <a href="https://x.com/jgthms" target="_blank" class="svg is-x">
3319        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M453.2 112L523.8 112L369.6 288.2L551 528L409 528L297.7 382.6L170.5 528L99.8 528L264.7 339.5L90.8 112L236.4 112L336.9 244.9L453.2 112zM428.4 485.8L467.5 485.8L215.1 152L173.1 152L428.4 485.8z"/></svg>
3320      </a>
3321    </footer>
3322    
3322<script
3323      src="https://jgthms.com/assets/js/main.js?v=1790873296"
3324      defer
3325    ></script>
3325
3326  
3326<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"1f5fb13ce57249feac971cbf5dd5ba1e","r":1,"spa":2}' crossorigin="anonymous"></script>
3326
3327</body>
3328</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.