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.