PageSourceSearch

https://tigeroakes.com/projects/

html tigeroakes.com collected 2026-09-25 20:16:36 UTC 63,809 bytes, 6 lines download raw bytes

1<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><title>Projects | Tiger Oakes</title><meta name="description" content="Projects created &#38; worked on by Tiger Oakes"><link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any"><link rel="icon" type="image/png" href="/favicon_x16.png" sizes="16x16"><link rel="icon" type="image/png" href="/favicon_x48.png" sizes="48x48"><link rel="icon" type="image/png" href="/favicon_x512.png" sizes="512x512"><link rel="canonical" href="https://tigeroakes.com/projects/"><link rel="manifest" href="/site.webmanifest"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><meta name="theme-color" content="#032030"><meta name="monetization" content="$ilp.uphold.com/p2WKq3nJHA8w">
1<script src="https://cdn.usefathom.com/script.js" data-site="CSXBFPSZ" defer></script>
1<link rel="preload" href="/font/rubik/rubik-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/font/cascadia-code/CascadiaMono-Variable.woff2" as="font" type="font/woff2" crossorigin>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tiger Oakes","item":"https://tigeroakes.com/"},{"@type":"ListItem","position":2,"name":"Projects"}]}</script>
1<link rel="stylesheet" href="/_astro/_slug_.CdkMaq2M.css">
2<style>/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.button:after{inset:calc(var(--spacing,.25rem)*0);border-style:var(--tw-border-style);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-sha
2dow);content:"";opacity:0;border-width:2px;border-color:currentColor;position:absolute}.button:hover:after,.button:focus:after{opacity:1}.button:active:after{opacity:.5}@media (prefers-reduced-motion:no-preference){.button:after{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
3.buttons[data-astro-cid-lughywwi]{grid-area:buttons}
4.pipe-item:after{content:" | ";margin:0 .2em}.pipe-item:last-child:after{content:none}
5</style></head> <body class="bg-slate-800 text-slate-200"> <header class="safe-px-4 max-w-site mx-auto flex flex-wrap items-stretch justify-between gap-y-4 py-4"> <div class="flex grow pr-2"> <a class="logo__container" href="/"> <img src="/_astro/logo-on-dark.CZBNbD_N_Z1X3t4k.svg" alt="Tiger Oakes" loading="lazy" decoding="async" fetchpriority="auto" width="160" height="32" class="-mt-[4px] block"> </a> </div>  <nav class="mx-auto flex flex-wrap items-stretch gap-x-2 gap-y-6"> <a class="accent-block--bottom relative px-2" href="/posts/"> Blog </a><h1 class="contents font-sans font-normal tracking-normal"> <a class="accent-block--bottom relative px-2" href="/projects/" aria-current="page"> Projects </a> </h1><a class="accent-block--bottom relative px-2" href="/talks/"> Talks </a><a class="accent-block--bottom relative px-2" href="/resume/"> Resume </a> </nav> </header> <main class="safe-px-2 flex flex-wrap gap-4 py-2" style="--block-scale: 1"> <article style="--accent: #987EFF;background-image: url(&#34;/_astro/background.BZNOtR18_ZG7rUo.jpeg&#34;);;animation-delay:0ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.9v8CBuMB_ZqVd3r.svg, /_astro/logo.9v8CBuMB_ZqVd3r.svg 1x, /_astro/logo.9v8CBuMB_Zdqhrv.svg 2x, /_astro/logo.9v8CBuMB_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.9v8CBuMB_ZqVd3r.svg" srcset="/_astro/logo.9v8CBuMB_ZqVd3r.svg 1x, /_astro/logo.9v8CBuMB_Zdqhrv.svg 2x, /_astro/logo.9v8CBuMB_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./microsoft-loop/"> Microsoft Loop </a> </h3> <p class="mb-2 text-lg"> Collaborate on ideas live across apps </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/typescript/"> TypeScript </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/react/"> React </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/css/"> CSS </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/accessibility/"> Accessibility </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/cicd/"> CI/CD </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./microsoft-loop/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">
5Details</a><a href="https://loop.microsoft.com" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Open app</a> </div>  </div> </div> </article><article style="--accent: #E22850;background-image: url(&#34;/_astro/background.l9sQsOxA_1Ny5wp.jpeg&#34;);;animation-delay:200ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.BMasNkJx_ZqVd3r.svg, /_astro/logo.BMasNkJx_ZqVd3r.svg 1x, /_astro/logo.BMasNkJx_Zdqhrv.svg 2x, /_astro/logo.BMasNkJx_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.BMasNkJx_ZqVd3r.svg" srcset="/_astro/logo.BMasNkJx_ZqVd3r.svg 1x, /_astro/logo.BMasNkJx_Zdqhrv.svg 2x, /_astro/logo.BMasNkJx_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./mozilla-firefox/"> Mozilla Firefox </a> </h3> <p class="mb-2 text-lg"> Firefox Preview PWA and TWA support </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/android/"> Android </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/kotlin/"> Kotlin </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/pwa/"> PWA </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/trusted-web-activities/">
5 Trusted Web Activities </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./mozilla-firefox/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Play Store</a><a href="https://github.com/mozilla-mobile/fenix" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #2a70ea;background-image: url(&#34;/_astro/background.D40o5FB-_qSNNl.jpeg&#34;);;animation-delay:400ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.2lGTRUiI_ZqVd3r.svg, /_astro/logo.2lGTRUiI_ZqVd3r.svg 1x, /_astro/logo.2lGTRUiI_Zdqhrv.svg 2x, /_astro/logo.2lGTRUiI_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.2lGTRUiI_ZqVd3r.svg" srcset="/_astro/logo.2lGTRUiI_ZqVd3r.svg 1x, /_astro/logo.2lGTRUiI_Zdqhrv.svg 2x, /_astro/logo.2lGTRUiI_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./google/"> Google Chrome </a> </h3> <p class="mb-2 text-lg"> Chrome APK size breakdown </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/android/"> Android </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/javascript/"> JavaScript </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/python/"> Python </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/accessibility/"> Accessibility </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/web-workers/"> Web Workers </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/streams/"> Streams </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/canvas-api/"> Canvas API </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./google/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Case study</a><a href="https://chromium.googlesource.com/chromium/src.git/+/master/tools/binary_size/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #DBA824;background-image: url(&#34;/_astro/background.DRzIC0U__Z183zpU.jpeg&#34;);;animation-delay:600ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.DOst7p7A_ZqVd3r.svg, /_astro/logo.DOst7p7A_ZqVd3r.svg 1x, /_astro/logo.DOst7p7A_Zdqhrv.svg 2x, /_astro/logo.DOst7p7A_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.DOst7p7A_ZqVd3r.svg" srcset="/_astro/logo.DOst7p7A_ZqVd3r.svg 1x, /_astro/logo.DOst7p7A_Zdqhrv.svg 2x, /_astro/logo.DOst7p7A_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./maskable/"> Maskable.app </a> </h3> <p class="mb-2 text-lg"> Implementing, writing, and creating tooling for new web feature </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/pwa/"> PWA </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/javascript/"> JavaScript </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/canvas-api/"> Canvas API </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/css/"> CSS </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/pwa/"> PWA </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./maskable/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">
5Details</a><a href="https://maskable.app" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Open app</a><a href="https://github.com/NotWoods/maskable" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #13a689;background-image: url(&#34;/_astro/background.BO0vGuop_1FcrMv.jpeg&#34;);;animation-delay:800ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.DlW6SDe6_ZqVd3r.svg, /_astro/logo.DlW6SDe6_ZqVd3r.svg 1x, /_astro/logo.DlW6SDe6_Zdqhrv.svg 2x, /_astro/logo.DlW6SDe6_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.DlW6SDe6_ZqVd3r.svg" srcset="/_astro/logo.DlW6SDe6_ZqVd3r.svg 1x, /_astro/logo.DlW6SDe6_Zdqhrv.svg 2x, /_astro/logo.DlW6SDe6_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./microsoft-edge/"> Microsoft Edge </a> </h3> <p class="mb-2 text-lg"> Improving PWA management </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/c/"> C++ </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/typescript/"> TypeScript </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/react/"> React </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/pwa/"> PWA </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/accessibility/"> Accessibility </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./microsoft-edge/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a> </div>  </div> </div> </article><article style="--accent: #4d74ab;background-image: url(&#34;/_astro/background.BjasufhU_Z1OpGeu.jpeg&#34;);;animation-delay:1000ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.BgdQZQLZ_ZqVd3r.svg, /_astro/logo.BgdQZQLZ_ZqVd3r.svg 1x, /_astro/logo.BgdQZQLZ_Zdqhrv.svg 2x, /_astro/logo.BgdQZQLZ_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.BgdQZQLZ_ZqVd3r.svg" srcset="/_astro/logo.BgdQZQLZ_ZqVd3r.svg 1x, /_astro/logo.BgdQZQLZ_Zdqhrv.svg 2x, /_astro/logo.BgdQZQLZ_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./big-island-buses/"> Big Island Buses </a> </h3> <p class="mb-2 text-lg"> Bus schedule software </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/javascript/"> JavaScript </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/nodejs/"> Node.js </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/indexeddb/"> IndexedDB </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/google-maps/"> Google Maps </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/gtfs/"> GTFS </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./big-island-buses/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Case study</a><a href="https://notwoods.github.io/big-island-buses/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Open app</a><a href="https://github.com/NotWoods/big-island-buses" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">
5Code</a> </div>  </div> </div> </article><article style="--accent: #429A46;background-image: url(&#34;/_astro/background.DU-twVdE_1JTXzV.jpeg&#34;);;animation-delay:1200ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.D8139xHt_Z1VaTrW.avif, /_astro/logo.D8139xHt_Z1VaTrW.avif 1x, /_astro/logo.D8139xHt_ZfN2m4.avif 2x, /_astro/logo.D8139xHt_1UfbLo.avif 4x" type="image/avif" sizes="128px"><source srcset="/_astro/logo.D8139xHt_Z1raPVI.webp, /_astro/logo.D8139xHt_Z1raPVI.webp 1x, /_astro/logo.D8139xHt_ec19a.webp 2x, /_astro/logo.D8139xHt_2pffhC.webp 4x" type="image/webp" sizes="128px"><source srcset="/_astro/logo.D8139xHt_ZKkBiW.png, /_astro/logo.D8139xHt_ZKkBiW.png 1x, /_astro/logo.D8139xHt_U2fLV.png 2x, /_astro/logo.D8139xHt_Z1Y6DSx.png 4x" type="image/png" sizes="128px">  <img src="/_astro/logo.D8139xHt_ZKkBiW.png" srcset="/_astro/logo.D8139xHt_ZKkBiW.png 1x, /_astro/logo.D8139xHt_U2fLV.png 2x, /_astro/logo.D8139xHt_Z1Y6DSx.png 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./cell-wall/"> CellWall </a> </h3> <p class="mb-2 text-lg"> Interactive multi-device display art piece. </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/android/"> Android </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/geckoview/"> GeckoView </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/usb/"> USB </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/websockets/"> WebSockets </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/raspberry-pi/"> Raspberry Pi </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./cell-wall/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a><a href="https://github.com/NotWoods/cell-wall" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #4d4d4d;background-image: url(&#34;/_astro/background.2xlnbLeE_20PGbA.jpeg&#34;);;animation-delay:1400ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.CEVIz1Kj_m4ko0.avif, /_astro/logo.CEVIz1Kj_m4ko0.avif 1x, /_astro/logo.CEVIz1Kj_22rctS.avif 2x, /_astro/logo.CEVIz1Kj_ZQGHbA.avif 4x" type="image/avif" sizes="128px"><source srcset="/_astro/logo.CEVIz1Kj_Q4nTe.webp, /_astro/logo.CEVIz1Kj_Q4nTe.webp 1x, /_astro/logo.CEVIz1Kj_2wrg07.webp 2x, /_astro/logo.CEVIz1Kj_ZmGDFm.webp 4x" type="image/webp" sizes="128px"><source srcset="/_astro/logo.CEVIz1Kj_1wTCx0.png, /_astro/logo.CEVIz1Kj_1wTCx0.png 1x, /_astro/logo.CEVIz1Kj_Z1QTDb3.png 2x, /_astro/logo.CEVIz1Kj_j8zWp.png 4x" type="image/png" sizes="128px">  <img src="/_astro/logo.CEVIz1Kj_1wTCx0.png" srcset="/_astro/logo.CEVIz1Kj_1wTCx0.png 1x, /_astro/logo.CEVIz1Kj_Z1QTDb3.png 2x, /_astro/logo.CEVIz1Kj_j8zWp.png 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./unity-polygon/"> Polygon2D Editor </a> </h3> <p class="mb-2 text-lg"> Level-building tool for Unity </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/c/"> C# </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/unity/"> Unity </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./unity-polygon/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">
5Details</a><a href="https://github.com/NotWoods/unity-polygon-2d-editor" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #d32323;background-image: url(&#34;/_astro/background.gkBiOmyQ_Z1POiMH.jpeg&#34;);;animation-delay:1600ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.dbb2W3VR_ZqVd3r.svg, /_astro/logo.dbb2W3VR_ZqVd3r.svg 1x, /_astro/logo.dbb2W3VR_Zdqhrv.svg 2x, /_astro/logo.dbb2W3VR_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.dbb2W3VR_ZqVd3r.svg" srcset="/_astro/logo.dbb2W3VR_ZqVd3r.svg 1x, /_astro/logo.dbb2W3VR_Zdqhrv.svg 2x, /_astro/logo.dbb2W3VR_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./yelp/"> Yelp </a> </h3> <p class="mb-2 text-lg"> Describe Your Project </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/python/"> Python </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/react/"> React </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/redux/"> Redux </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/sql/"> SQL </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/jquery/"> jQuery </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./yelp/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Case study</a> </div>  </div> </div> </article><article style="--accent: #107D9E;background-image: url(&#34;/_astro/background.QXz0zc4J_Z2eEqs0.jpeg&#34;);;animation-delay:1800ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.CpVGKz7n_ZqVd3r.svg, /_astro/logo.CpVGKz7n_ZqVd3r.svg 1x, /_astro/logo.CpVGKz7n_Zdqhrv.svg 2x, /_astro/logo.CpVGKz7n_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.CpVGKz7n_ZqVd3r.svg" srcset="/_astro/logo.CpVGKz7n_ZqVd3r.svg 1x, /_astro/logo.CpVGKz7n_Zdqhrv.svg 2x, /_astro/logo.CpVGKz7n_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./mockk-guidebook/"> MockK Guidebook </a> </h3> <p class="mb-2 text-lg"> All-in-one guide to Kotlin mocking library </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/kotlin/"> Kotlin </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/android/"> Android </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/mockk/"> MockK </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./mockk-guidebook/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a><a href="https://notwoods.github.io/mockk-guidebook/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Read</a> </div>  </div> </div> </article><article style="--accent: #5575FF;background-image: url(&#34;/_astro/background.BxAkyYzH_ITMaF.jpeg&#34;);;animation-delay:2000ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.Db6DmJoy_P55R4.avif, /_astro/logo.Db6DmJoy_P55R4.avif 1x, /_astro/logo.Db6DmJoy_2vrWWW.avif 2x, /_astro/logo.Db6DmJoy_ZnFVHw.avif 4x" type="image/avif" sizes="128px"><source srcset="/_astro/logo.Db6DmJoy_1k59ni.webp, /_astro/logo.Db6DmJoy_1k59ni.webp 1x, /_astro/logo.Db6DmJoy_Z24J7kK.webp 2x, /_astro/logo.Db6DmJoy_6j6MH.webp 4x" type="image/webp" sizes="128px"><source srcset="/_astro/logo.Db6DmJoy_20Uo14.png, /_astro/logo.Db6DmJoy_20Uo14.png 1x, /_astro/logo.Db6DmJoy_Z1nSRGY.png 2x, /_astro/logo.Db6DmJoy_M9lqt.png 4x" type="image/png" sizes="128px">  <img src="/_astro/logo.Db6DmJoy_20Uo14.png" srcset="/_astro/logo.Db6DmJoy_20Uo14.png 1x, /_astro/logo.Db6DmJoy_Z1nSRGY.png 2x, /_astro/logo.Db6DmJoy_M9lqt.png 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./spherical-geometry/"> Spherical Geometry </a> </h3> <p class="mb-2 text-lg"> Library for latitude/longitude math </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/javascript/"> JavaScript </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/google-maps/"> Google Maps </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/nodejs/"> Node.js </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./spherical-geometry/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">
5Details</a><a href="https://github.com/NotWoods/spherical-geometry-js" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #ff3333;background-image: url(&#34;/_astro/background.DVdaIOQL_Z1sTL4D.jpeg&#34;);;animation-delay:2200ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.Cd1FvT4a_ZqVd3r.svg, /_astro/logo.Cd1FvT4a_ZqVd3r.svg 1x, /_astro/logo.Cd1FvT4a_Zdqhrv.svg 2x, /_astro/logo.Cd1FvT4a_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.Cd1FvT4a_ZqVd3r.svg" srcset="/_astro/logo.Cd1FvT4a_ZqVd3r.svg 1x, /_astro/logo.Cd1FvT4a_Zdqhrv.svg 2x, /_astro/logo.Cd1FvT4a_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./rollup/"> Rollup </a> </h3> <p class="mb-2 text-lg"> JavaScript module bundler </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/typescript/"> TypeScript </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/javascript/"> JavaScript </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/es-modules/"> ES Modules </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./rollup/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a><a href="https://github.com/rollup/plugins" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #37474f;background-image: url(&#34;/_astro/background.i1OejcVG_Zbqyxm.jpeg&#34;);;animation-delay:2400ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.BTjqpU1Y_14RVea.avif, /_astro/logo.BTjqpU1Y_14RVea.avif 1x, /_astro/logo.BTjqpU1Y_Z2jVktS.avif 2x, /_astro/logo.BTjqpU1Y_Z8S6lq.avif 4x" type="image/avif" sizes="128px"><source srcset="/_astro/logo.BTjqpU1Y_1yRYJo.webp, /_astro/logo.BTjqpU1Y_1yRYJo.webp 1x, /_astro/logo.BTjqpU1Y_Z1OVgXE.webp 2x, /_astro/logo.BTjqpU1Y_l6W9N.webp 4x" type="image/webp" sizes="128px"><source srcset="/_astro/logo.BTjqpU1Y_2fIena.png, /_astro/logo.BTjqpU1Y_2fIena.png 1x, /_astro/logo.BTjqpU1Y_Z1962kS.png 2x, /_astro/logo.BTjqpU1Y_11WbMz.png 4x" type="image/png" sizes="128px">  <img src="/_astro/logo.BTjqpU1Y_2fIena.png" srcset="/_astro/logo.BTjqpU1Y_2fIena.png 1x, /_astro/logo.BTjqpU1Y_Z1962kS.png 2x, /_astro/logo.BTjqpU1Y_11WbMz.png 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./color-breakdown/"> Color Breakdown </a> </h3> <p class="mb-2 text-lg"> Color-identifying Progressive Web App </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/javascript/"> JavaScript </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/service-workers/"> Service Workers </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/canvas-api/"> Canvas API </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/pwa/"> PWA </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./color-breakdown/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">
5Details</a><a href="https://notwoods.github.io/color-breakdown/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Open app</a><a href="https://github.com/NotWoods/color-breakdown" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #6b9f93;background-image: url(&#34;/_astro/background.D7sK3dWg_ZCCHeD.jpeg&#34;);;animation-delay:2600ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.BvmwyS6P_ZqVd3r.svg, /_astro/logo.BvmwyS6P_ZqVd3r.svg 1x, /_astro/logo.BvmwyS6P_Zdqhrv.svg 2x, /_astro/logo.BvmwyS6P_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.BvmwyS6P_ZqVd3r.svg" srcset="/_astro/logo.BvmwyS6P_ZqVd3r.svg 1x, /_astro/logo.BvmwyS6P_Zdqhrv.svg 2x, /_astro/logo.BvmwyS6P_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./latch-on/"> Latch On </a> </h3> <p class="mb-2 text-lg"> Rope swinging game </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/c/"> C# </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/unity/"> Unity </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/box2d/"> Box2D </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./latch-on/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a><a href="https://notwoods.github.io/latch-on/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Download</a><a href="https://github.com/NotWoods/latch-on" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #4db6ac;background-image: url(&#34;/_astro/background.DnRspvs__Z2rUwsc.jpeg&#34;);;animation-delay:2800ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.BL6h0biJ_ZqVd3r.svg, /_astro/logo.BL6h0biJ_ZqVd3r.svg 1x, /_astro/logo.BL6h0biJ_Zdqhrv.svg 2x, /_astro/logo.BL6h0biJ_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.BL6h0biJ_ZqVd3r.svg" srcset="/_astro/logo.BL6h0biJ_ZqVd3r.svg 1x, /_astro/logo.BL6h0biJ_Zdqhrv.svg 2x, /_astro/logo.BL6h0biJ_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./soil-topargraphy/"> Soil TopARgraphy </a> </h3> <p class="mb-2 text-lg"> Educational AR application </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/c/"> C# </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/unity/"> Unity </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/ar/"> AR </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/vuforia/"> Vuforia </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/mapbox/"> Mapbox </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./soil-topargraphy/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">
5Details</a> </div>  </div> </div> </article><article style="--accent: #d4a745;background-image: url(&#34;/_astro/background.CtuEUlm5_1dIVbE.jpeg&#34;);;animation-delay:3000ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.DkgavLwQ_ZqVd3r.svg, /_astro/logo.DkgavLwQ_ZqVd3r.svg 1x, /_astro/logo.DkgavLwQ_Zdqhrv.svg 2x, /_astro/logo.DkgavLwQ_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.DkgavLwQ_ZqVd3r.svg" srcset="/_astro/logo.DkgavLwQ_ZqVd3r.svg 1x, /_astro/logo.DkgavLwQ_Zdqhrv.svg 2x, /_astro/logo.DkgavLwQ_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./oml-contracting/"> Oakes Management LLC </a> </h3> <p class="mb-2 text-lg"> Construction portfolio </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/css-3d/"> CSS 3D </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/javascript/"> JavaScript </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./oml-contracting/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a><a href="https://omlhawaii.com/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">View site</a><a href="https://github.com/omlhawaii/omlhawaii.github.io" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #3b7448;background-image: url(&#34;/_astro/background.DuD3yP8g_Z1blhoS.jpeg&#34;);;animation-delay:3200ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.BeuVkGKh_Z2a6vR2.avif, /_astro/logo.BeuVkGKh_Z2a6vR2.avif 1x, /_astro/logo.BeuVkGKh_ZtIDL9.avif 2x, /_astro/logo.BeuVkGKh_1Gjzmj.avif 4x" type="image/avif" sizes="128px"><source srcset="/_astro/logo.BeuVkGKh_Z1F6slN.webp, /_astro/logo.BeuVkGKh_Z1F6slN.webp 1x, /_astro/logo.BeuVkGKh_goJ5.webp 2x, /_astro/logo.BeuVkGKh_2bjCRx.webp 4x" type="image/webp" sizes="128px"><source srcset="/_astro/logo.BeuVkGKh_ZYgdI2.png, /_astro/logo.BeuVkGKh_ZYgdI2.png 1x, /_astro/logo.BeuVkGKh_G6DmQ.png 2x, /_astro/logo.BeuVkGKh_Z2d2giC.png 4x" type="image/png" sizes="128px">  <img src="/_astro/logo.BeuVkGKh_ZYgdI2.png" srcset="/_astro/logo.BeuVkGKh_ZYgdI2.png 1x, /_astro/logo.BeuVkGKh_G6DmQ.png 2x, /_astro/logo.BeuVkGKh_Z2d2giC.png 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./ubc-farm/"> UBC Farm </a> </h3> <p class="mb-2 text-lg"> Farm research database </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/javascript/"> JavaScript </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/nodejs/"> Node.js </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/sql/"> SQL </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/react/"> React </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/redux/"> Redux </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/jsts/"> JSTS </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./ubc-farm/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">
5Details</a><a href="https://github.com/ubc-farm" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #c79a6a;background-image: url(&#34;/_astro/background.DM3AromM_ZlibCk.jpeg&#34;);;animation-delay:3400ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.Bv6RhJ3o_ZqVd3r.svg, /_astro/logo.Bv6RhJ3o_ZqVd3r.svg 1x, /_astro/logo.Bv6RhJ3o_Zdqhrv.svg 2x, /_astro/logo.Bv6RhJ3o_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.Bv6RhJ3o_ZqVd3r.svg" srcset="/_astro/logo.Bv6RhJ3o_ZqVd3r.svg 1x, /_astro/logo.Bv6RhJ3o_Zdqhrv.svg 2x, /_astro/logo.Bv6RhJ3o_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./pass-the-bomb/"> Pass the Bomb </a> </h3> <p class="mb-2 text-lg"> Hackathon multiplayer word game </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/nodejs/"> Node.js </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/websockets/"> WebSockets </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/hammerjs/"> Hammer.js </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./pass-the-bomb/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a><a href="https://pass-the-bomb.glitch.me" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Open app</a><a href="https://github.com/NotWoods/pass-the-bomb" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #7dc36b;background-image: url(&#34;/_astro/background.DfOKmplz_117W2O.jpeg&#34;);;animation-delay:3600ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.2RgDiYVK_ZqVd3r.svg, /_astro/logo.2RgDiYVK_ZqVd3r.svg 1x, /_astro/logo.2RgDiYVK_Zdqhrv.svg 2x, /_astro/logo.2RgDiYVK_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.2RgDiYVK_ZqVd3r.svg" srcset="/_astro/logo.2RgDiYVK_ZqVd3r.svg 1x, /_astro/logo.2RgDiYVK_Zdqhrv.svg 2x, /_astro/logo.2RgDiYVK_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./insightful-energy/"> Insightful Energy </a> </h3> <p class="mb-2 text-lg"> Interactive information </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/javascript/"> JavaScript </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/filereader-api/"> FileReader API </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/csv-parsing/"> CSV Parsing </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./insightful-energy/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a><a href="https://notwoods.github.io/insightful-energy/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">View site</a><a href="https://github.com/NotWoods/insightful-energy" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">
5Code</a> </div>  </div> </div> </article><article style="--accent: #F59B31;background-image: url(&#34;/_astro/background.1Xvt1SHw_YL74Y.jpeg&#34;);;animation-delay:3800ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.B21EAdpC_ZqVd3r.svg, /_astro/logo.B21EAdpC_ZqVd3r.svg 1x, /_astro/logo.B21EAdpC_Zdqhrv.svg 2x, /_astro/logo.B21EAdpC_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.B21EAdpC_ZqVd3r.svg" srcset="/_astro/logo.B21EAdpC_ZqVd3r.svg 1x, /_astro/logo.B21EAdpC_Zdqhrv.svg 2x, /_astro/logo.B21EAdpC_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./gameclock/"> GameClock </a> </h3> <p class="mb-2 text-lg"> Chess clocker timer web app </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/pwa/"> PWA </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/javascript/"> JavaScript </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./gameclock/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a><a href="https://notwoods.github.io/gameclock/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Open app</a><a href="https://github.com/NotWoods/gameclock" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #28a0c5;background-image: url(&#34;/_astro/background.Sk0U8W6E_Z1esiW2.jpeg&#34;);;animation-delay:4000ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.BU9yGGil_6R3On.avif, /_astro/logo.BU9yGGil_6R3On.avif 1x, /_astro/logo.BU9yGGil_1MeUUg.avif 2x, /_astro/logo.BU9yGGil_Z16SXKd.avif 4x" type="image/avif" sizes="128px"><source srcset="/_astro/logo.BU9yGGil_AR7kB.webp, /_astro/logo.BU9yGGil_AR7kB.webp 1x, /_astro/logo.BU9yGGil_2heYqu.webp 2x, /_astro/logo.BU9yGGil_ZBSUeY.webp 4x" type="image/webp" sizes="128px"><source srcset="/_astro/logo.BU9yGGil_1hHlXn.png, /_astro/logo.BU9yGGil_1hHlXn.png 1x, /_astro/logo.BU9yGGil_Z276TJF.png 2x, /_astro/logo.BU9yGGil_3VjnM.png 4x" type="image/png" sizes="128px">  <img src="/_astro/logo.BU9yGGil_1hHlXn.png" srcset="/_astro/logo.BU9yGGil_1hHlXn.png 1x, /_astro/logo.BU9yGGil_Z276TJF.png 2x, /_astro/logo.BU9yGGil_3VjnM.png 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./bit-ball/"> Bit Ball </a> </h3> <p class="mb-2 text-lg"> 9th grade physics game </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/lua/"> Lua </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/corona-sdk/"> Corona SDK </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/box2d/"> Box2D </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./bit-ball/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">
5Details</a><a href="https://github.com/NotWoods/bit-ball#installation" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Download</a><a href="https://github.com/NotWoods/bit-ball" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #ef4444;background-image: url(&#34;/_astro/background.Fz88na-M_ZIySIF.jpeg&#34;);;animation-delay:4200ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.CeiNeCbG_ZqVd3r.svg, /_astro/logo.CeiNeCbG_ZqVd3r.svg 1x, /_astro/logo.CeiNeCbG_Zdqhrv.svg 2x, /_astro/logo.CeiNeCbG_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.CeiNeCbG_ZqVd3r.svg" srcset="/_astro/logo.CeiNeCbG_ZqVd3r.svg 1x, /_astro/logo.CeiNeCbG_Zdqhrv.svg 2x, /_astro/logo.CeiNeCbG_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./last-finger-standing/"> Last Finger Standing </a> </h3> <p class="mb-2 text-lg"> Pick first player for board games </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/css-3d/"> CSS 3D </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/pointer-api/"> Pointer API </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/vibration-api/"> Vibration API </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./last-finger-standing/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a><a href="https://games.tigeroakes.com/last-finger-standing/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Open app</a><a href="https://github.com/NotWoods/games/tree/main/last-finger-standing" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #491576;background-image: url(&#34;/_astro/background.DutfSvQo_1c8RuU.jpeg&#34;);;animation-delay:4400ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.CQLZicLG_Z5wDOv.avif, /_astro/logo.CQLZicLG_Z5wDOv.avif 1x, /_astro/logo.CQLZicLG_1zPdgn.avif 2x, /_astro/logo.CQLZicLG_Z1jiGp6.avif 4x" type="image/avif" sizes="128px"><source srcset="/_astro/logo.CQLZicLG_osoFI.webp, /_astro/logo.CQLZicLG_osoFI.webp 1x, /_astro/logo.CQLZicLG_24PgLB.webp 2x, /_astro/logo.CQLZicLG_ZOiCSR.webp 4x" type="image/webp" sizes="128px"><source srcset="/_astro/logo.CQLZicLG_15iDju.png, /_astro/logo.CQLZicLG_15iDju.png 1x, /_astro/logo.CQLZicLG_Z2jvCoy.png 2x, /_astro/logo.CQLZicLG_Z8sog6.png 4x" type="image/png" sizes="128px">  <img src="/_astro/logo.CQLZicLG_15iDju.png" srcset="/_astro/logo.CQLZicLG_15iDju.png 1x, /_astro/logo.CQLZicLG_Z2jvCoy.png 2x, /_astro/logo.CQLZicLG_Z8sog6.png 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./pwa-builder/"> PWABuilder </a> </h3> <p class="mb-2 text-lg"> Packaging PWAs for Android and Play Store </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/pwa/"> PWA </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/android/"> Android </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/javascript/"> JavaScript </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./pwa-builder/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">
5Details</a><a href="https://github.com/GoogleChromeLabs/bubblewrap" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #5d829c;background-image: url(&#34;/_astro/background.SJau4ctY_29ymQw.jpeg&#34;);;animation-delay:4600ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.CU8q9zTr_ZqVd3r.svg, /_astro/logo.CU8q9zTr_ZqVd3r.svg 1x, /_astro/logo.CU8q9zTr_Zdqhrv.svg 2x, /_astro/logo.CU8q9zTr_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.CU8q9zTr_ZqVd3r.svg" srcset="/_astro/logo.CU8q9zTr_ZqVd3r.svg 1x, /_astro/logo.CU8q9zTr_Zdqhrv.svg 2x, /_astro/logo.CU8q9zTr_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./quest-kit/"> Quest Kit </a> </h3> <p class="mb-2 text-lg"> The adventure&#39;s toolkit for the Quest TTRPG </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/firebase/"> Firebase </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/svelte/"> Svelte </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/pdfjs/"> PDF.js </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./quest-kit/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a><a href="https://questkit.app/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Open app</a> </div>  </div> </div> </article><article style="--accent: #c3a242;background-image: url(&#34;/_astro/background.ByCerZFB_Z1n2UgL.jpeg&#34;);;animation-delay:4800ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.B71ZKc8S_1hgcTH.avif, /_astro/logo.B71ZKc8S_1hgcTH.avif 1x, /_astro/logo.B71ZKc8S_Z27y3Nl.avif 2x, /_astro/logo.B71ZKc8S_3uak7.avif 4x" type="image/avif" sizes="128px"><source srcset="/_astro/logo.B71ZKc8S_1LggpV.webp, /_astro/logo.B71ZKc8S_1LggpV.webp 1x, /_astro/logo.B71ZKc8S_Z1Cy0i7.webp 2x, /_astro/logo.B71ZKc8S_xudPl.webp 4x" type="image/webp" sizes="128px"><source srcset="/_astro/logo.B71ZKc8S_2s6v3H.png, /_astro/logo.B71ZKc8S_2s6v3H.png 1x, /_astro/logo.B71ZKc8S_ZVHKEl.png 2x, /_astro/logo.B71ZKc8S_1ekst7.png 4x" type="image/png" sizes="128px">  <img src="/_astro/logo.B71ZKc8S_2s6v3H.png" srcset="/_astro/logo.B71ZKc8S_2s6v3H.png 1x, /_astro/logo.B71ZKc8S_ZVHKEl.png 2x, /_astro/logo.B71ZKc8S_1ekst7.png 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6">
5 <a class="accent-block--left relative" href="./the-golden-quest/"> The Golden Quest </a> </h3> <p class="mb-2 text-lg"> Alexa adventure game </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/alexa-sdk/"> Alexa SDK </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/typescript/"> TypeScript </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/nodejs/"> Node.js </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./the-golden-quest/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a><a href="https://www.amazon.com/Janet-Chen-The-Golden-Quest/dp/B06XW5JXXX" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Amazon</a><a href="https://devpost.com/software/nwhacks-2017-s2acyf" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Devpost</a><a href="https://github.com/NotWoods/the-golden-quest" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Code</a> </div>  </div> </div> </article><article style="--accent: #8b8790;background-image: url(&#34;/_astro/background.D1BQIqvm_23ecxP.jpeg&#34;);;animation-delay:5000ms" class="bg-cover bg-center bg-no-repeat text-slate-200 shadow-md text-shadow project-panel motion-safe:animate-fade-in flex max-w-full shrink-0 grow-2 flex-col"> <div class="backdrop-blur-xs px-4 py-2"> <div class="max-w-site mx-auto py-4 safe-px-4 w-full">  <picture class="w-32 h-32 mx-auto grow-0 shrink-0"> <source srcset="/_astro/logo.CHmrxcQI_ZqVd3r.svg, /_astro/logo.CHmrxcQI_ZqVd3r.svg 1x, /_astro/logo.CHmrxcQI_Zdqhrv.svg 2x, /_astro/logo.CHmrxcQI_Z1cij1B.svg 4x" type="image/svg+xml" sizes="128px">  <img src="/_astro/logo.CHmrxcQI_ZqVd3r.svg" srcset="/_astro/logo.CHmrxcQI_ZqVd3r.svg 1x, /_astro/logo.CHmrxcQI_Zdqhrv.svg 2x, /_astro/logo.CHmrxcQI_Z1cij1B.svg 4x" alt sizes="128px" loading="lazy" decoding="async" fetchpriority="auto" width="128" height="128" class="h-32 w-32"> </picture> <h3 class="text-2xl font-normal mb-1 mt-6"> <a class="accent-block--left relative" href="./travel/"> Tiger x Daphne&#39;s Travels </a> </h3> <p class="mb-2 text-lg"> Travel guide with Notion CMS </p> <ul class="leading-normal opacity-80 mt-auto text-sm">  <li class="pipe-item inline"> <a class="hover:underline" href="/tags/typescript/"> TypeScript </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/astro/"> Astro </a> </li><li class="pipe-item inline"> <a class="hover:underline" href="/tags/notion-api/"> Notion API </a> </li>  </ul>  <div class="buttons flex flex-wrap gap-2 mt-3 justify-center" data-astro-cid-lughywwi> <a href="./travel/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Details</a><a href="https://travel.tigerxdaphne.com/" data-astro-cid-lughywwi="true" class="button relative shadow-sm text-center whitespace-nowrap px-6 py-2 bg-accent">Read</a> </div>  </div> </div> </article> </main> <footer class="m-8 flex flex-wrap justify-center"> <a class="accent-block--bottom relative mx-2 my-4 leading-6" href="/cdn-cgi/l/email-protection#85e6eaebf1e4e6f1c5f1ece2e0f7eae4eee0f6abe6eae8">contact<wbr>@tigeroakes.com</a> <div class="flex"> <a class="accent-block--bottom relative mx-2 my-4" title="GitHub" href="https://github.com/NotWoods"> <img class="block" width="24" height="24" alt="GitHub" src="/contact/github.svg" loading="lazy"> </a><a class="accent-block--bottom relative mx-2 my-4" title="LinkedIn" href="https://linkedin.com/in/tigeroakes"> <img class="block" width="24" height="24" alt="LinkedIn" src="/contact/linkedin.svg" loading="lazy"> </a><a class="accent-block--bottom relative mx-2 my-4" title="Bluesky" href="https://bsky.app/profile/notwoods.bsky.social"> <img class="block" width="24" height="24" alt="Bluesky" src="/contact/bluesky.svg" loading="lazy"> </a><a class="accent-block--bottom relative mx-2 my-4" title="Mastodon" href="https://hachyderm.io/@notwoods"> <img class="block" width="24" height="24" alt="Mastodon" src="/contact/mastodon.svg" loading="lazy"> </a> </div> </footer>
vendor: 109 bytes, line 5
5 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
5<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":"76ee5d39f6564fe4b37aea7592aa151f","r":1,"spa":2}' crossorigin="anonymous"></script>
5
6</body></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.