Jonathon Scott
Home
Projects
Contact
KeyFindr
Play/learn piano in any major or minor key
JavaScript
View GitHub Repository
</div></section><section class="prose prose-invert prose-lg mx-auto max-w-4xl px-6 py-16"><h1 class="mb-4 mt-10 text-3xl font-bold text-white">🎹 KeyFindr</h1> <p class="leading-relaxed text-gray-300"><strong>KeyFindr</strong> is one of my earliest projects (built in 2020) — a fully interactive, one-octave piano written entirely in <strong>HTML</strong>, <strong>CSS</strong>, and <strong>vanilla JavaScript</strong>. It’s designed to help musicians and producers explore scales, chords, and key relationships visually and intuitively.</p> <hr/> <h2 class="mb-3 mt-8 text-2xl font-semibold text-white">🚀 Features</h2> <ul class="list-disc pl-6 text-gray-300"> <li> <p class="leading-relaxed text-gray-300"><strong>Dynamic Piano Visualization:</strong> A one-octave piano rendered in HTML that highlights notes dynamically based on user input.</p> </li> <li> <p class="leading-relaxed text-gray-300"><strong>Key and Scale Selection:</strong> Choose a <strong>root note</strong> ('A–G') and a <strong>scale type</strong> (Major, Minor, Blues, or Harmonic Minor). The app highlights all notes belonging to that key directly on the piano.</p> </li> <li> <p class="leading-relaxed text-gray-300"><strong>Chord Highlighting:</strong> Displays the chords within the selected key — for example, if you’re “in the key of E♯,” you’ll see the <strong>I, IV, and V</strong> chords highlighted for quick reference. Perfect for understanding progressions like <strong>1–4–5</strong> and building riffs or melodies that fit naturally within the scale.</p> </li> <li> <p class="leading-relaxed text-gray-300"><strong>Scale Playback:</strong> Plays the entire selected scale automatically so you can hear the tonality and intervals clearly.</p> </li> <li> <p class="leading-relaxed text-gray-300"><strong>Learn by Doing:</strong> Built as a visual learning tool for myself when I was studying music theory, it’s since become a fun way to reinforce scale and chord knowledge — hands-on and intuitive.</p> </li> </ul> <hr/> <h2 class="mb-3 mt-8 text-2xl font-semibold text-white">🎧 Background</h2> <p class="leading-relaxed text-gray-300">In 2020, I developed <strong>KeyFindr</strong> while teaching myself music theory. After just a few weeks of learning, I built this app to bridge the gap between <em>theory and intuition</em> — letting me <em>see</em> and <em>hear</em> how different keys and chord progressions work.</p> <p class="leading-relaxed text-gray-300">Even now, <strong>KeyFindr</strong> continues to help me explore new scales, chords, and progressions that I haven’t yet memorized.</p> <hr/> <h2 class="mb-3 mt-8 text-2xl font-semibold text-white">🛠️ Tech Stack</h2> <ul class="list-disc pl-6 text-gray-300"> <li><strong>HTML5</strong></li> <li><strong>CSS3</strong></li> <li><strong>Vanilla JavaScript</strong></li> </ul> <p class="leading-relaxed text-gray-300">No frameworks. No libraries. 100% hand-coded.</p> <hr/> <h2 class="mb-3 mt-8 text-2xl font-semibold text-white">🎯 Purpose</h2> <p class="leading-relaxed text-gray-300"><strong>KeyFindr</strong> is more than a piano — it’s a visual and auditory tool for learning and creating music. Whether you’re experimenting with chord progressions or trying to understand how different keys interact, KeyFindr provides an immediate, interactive way to <em>feel</em> music theory in action.</p></section></div><footer class="border-t border-gray-800 bg-[#0E1215] pt-12 text-gray-300"><div class="mx-auto grid max-w-6xl grid-cols-1 gap-y-8 px-6 md:grid-cols-3 md:gap-8 md:gap-y-0"><div class="col-span-3 rounded-xl bg-[#191E24] p-6 shadow"><h2 class="text-6xl font-light text-white">Jonathon<br/> Scott</h2><p class="mt-2 text-gray-400">Software Engineer, Product Designer, and Avid Gamer.</p><div class="mt-4 flex items-center gap-4"><a href="https://github.com/jonathonmcclen" target="_blank" rel="noopener noreferrer" class="text-gray-400 transition-colors hover:text-[#FF3908]"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://medium.com/@jonathonmcclendon" target="_blank" rel="noopener noreferrer" class="text-gray-400 transition-colors hover:text-[#FF3908]"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M180.5,74.262C80.813,74.262,0,155.633,0,256S80.819,437.738,180.5,437.738,361,356.373,361,256,280.191,74.262,180.5,74.262Zm288.25,10.646c-49.845,0-90.245,76.619-90.245,171.095s40.406,171.1,90.251,171.1,90.251-76.619,90.251-171.1H559C559,161.5,518.6,84.908,468.752,84.908Zm139.506,17.821c-17.526,0-31.735,68.628-31.735,153.274s14.2,153.274,31.735,153.274S640,340.631,640,256C640,171.351,625.785,102.729,608.258,102.729Z"></path></svg></a><a href="https://www.instagram.com/bootcamp.boi.io" target="_blank" rel="noopener noreferrer" class="text-gray-400 transition-colors hover:text-[#FF3908]"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a><a target="_blank" rel="noopener noreferrer" class="text-gray-400 transition-colors hover:text-[#FF3908]"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg></a><a href="https://www.threads.com/@bootcamp.boi.io" target="_blank" rel="noopener noreferrer" class="text-gray-400 transition-colors hover:text-[#FF3908]"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z"></path></svg></a><a href="https://www.linkedin.com/in/jonathonmcclen/" target="_blank" rel="noopener noreferrer" class="text-gray-400 transition-colors hover:text-[#FF3908]"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg></a></div><div class="mt-10 flex flex-col items-center gap-4 sm:flex-row"><a href="mailto:jonathonscott688@gmail.com" class="flex w-full items-center justify-center gap-2 rounded-full bg-[#FF3908] px-6 py-3 text-lg font-semibold leading-tight text-white shadow-md transition-colors duration-200 hover:bg-[#e63900] sm:w-auto">Contact</a><a type="button" class="flex w-full items-center justify-center gap-2 rounded-full border-2 border-[#FF3908] bg-transparent px-6 py-3 text-lg font-semibold leading-tight text-[#FF3908] transition-colors duration-200 hover:bg-[#FF3908] hover:text-white sm:w-auto" href="/resume.pdf" download="Jonathon_McClendon_Resume.pdf">Download CV</a></div></div></div><div class="mt-10 border-t border-gray-800 py-6 text-center text-sm text-gray-500">© <!-- -->2026<!-- --> Jonathon Scott. All rights reserved.</div></footer></main><!--/$--></main><script src="/_next/static/chunks/webpack-ad1f7fac69111ae4.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/media/3a9fd9773111cd4d-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n3:HL[\"/_next/static/css/2ae3d66760b42ab2.css\",\"style\"]\n4:HL[\"/_next/static/css/22cff6285434138d.css\",\"style\"]\n5:HL[\"/_next/static/css/2780b80db9f6599d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"6:I[12433,[],\"\"]\n8:I[17523,[],\"ClientPageRoot\"]\n9:I[62674,[\"9846\",\"static/chunks/a57d9bf0-4662f1d6531acf2d.js\",\"9498\",\"static/chunks/9498-f5b90a37eb3fcc82.js\",\"4663\",\"static/chunks/4663-420274c8f698c3fc.js\",\"8012\",\"static/chunks/8012-4decadbb18b8fff3.js\",\"1355\",\"static/chunks/app/jonathon-dev/projects/%5Bslug%5D/page-27a65c5d299536ee.js\"],\"default\",1]\na:I[90176,[],\"\"]\nc:I[39414,[],\"\"]\nd:I[78680,[\"9846\",\"static/chunks/a57d9bf0-4662f1d6531acf2d.js\",\"9583\",\"static/chunks/app/jonathon-dev/layout-cc1221e7656c11f3.js\"],\"default\",1]\ne:I[22225,[\"3185\",\"static/chunks/app/layout-f33a0a53c4438a9b.js\"],\"\"]\nf:I[98664,[\"3185\",\"static/chunks/app/layout-f33a0a53c4438a9b.js\"],\"default\"]\n10:I[69498,[\"9498\",\"static/chunks/9498-f5b90a37eb3fcc82.js\",\"4663\",\"static/chunks/4663-420274c8f698c3fc.js\",\"9404\",\"static/chunks/app/jonathon-dev/projects/page-dbd706145a54aaf3.js\"],\"\"]\n11:I[24663,[\"9498\",\"static/chunks/9498-f5b90a37eb3fcc82.js\",\"4663\",\"static/chunks/4663-420274c8f698c3fc.js\",\"9404\",\"static/chunks/app/jonathon-dev/projects/page-dbd706145a54aaf3.js\"],\"Image\"]\n14:I[78528,[],\"\"]\nb:[\"slug\",\"keyfindr\",\"d\"]\n12:{\"src\":\"/_next/static/media/Logo.cfb6d066.svg\",\"height\":939,\"width\":1474,\"blurWidth\":0,\"blurHeight\":0}\n15:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$L6\",null,{\"buildId\":\"8ietyTW53Ory-uSxgJZxS\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"jonathon-dev\",\"projects\",\"keyfindr\"],\"initialTree\":[\"\",{\"children\":[\"jonathon-dev\",{\"children\":[\"projects\",{\"children\":[[\"slug\",\"keyfindr\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"jonathon-dev\",{\"children\":[\"projects\",{\"children\":[[\"slug\",\"keyfindr\",\"d\"],{\"children\":[\"__PAGE__\",{},[[\"$L7\",[\"$\",\"$L8\",null,{\"props\":{\"params\":{\"slug\":\"keyfindr\"},\"searchParams\":{}},\"Component\":\"$9\"}],null],null],null]},[null,[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"jonathon-dev\",\"children\",\"projects\",\"children\",\"$b\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]],null]},[null,[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"jonathon-dev\",\"children\",\"projects\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/2780b80db9f6599d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"jonathon-dev\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}],\"params\":{}}]],null],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/2ae3d66760b42ab2.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/22cff6285434138d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"h-full scroll-smooth bg-white antialiased\",\"children\":[[\"$\",\"head\",null,{\"children\":[\"$\",\"$Le\",null,{\"async\":true,\"src\":\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3528285648575971\",\"crossOrigin\":\"anonymous\",\"strategy\":\"afterInteractive\"}]}],[\"$\",\"body\",null,{\"className\":\"flex h-full flex-col __variable_e36cd6 __variable_f367f3\",\"children\":[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"main\",null,{\"children\":[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"div\",null,{\"className\":\"relative flex min-h-[100vh] shrink-0 justify-center md:px-12 lg:px-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative z-10 flex flex-1 flex-col bg-white px-4 py-10 shadow-2xl sm:justify-center md:px-28\",\"children\":[\"$\",\"main\",null,{\"className\":\"mx-auto w-full max-w-md sm:px-4 md:w-96 md:max-w-sm md:px-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex\",\"children\":[\"$\",\"$L10\",null,{\"href\":\"/\",\"aria-label\":\"Home\",\"children\":[\"$\",\"div\",null,{\"className\":\"h-full w-full\",\"children\":[\"$\",\"$L11\",null,{\"src\":{\"src\":\"/_next/static/media/Logo.cfb6d066.svg\",\"height\":939,\"width\":1474,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"Logo\",\"layout\":\"responsive\",\"width\":900,\"height\":200,\"objectFit\":\"contain\",\"className\":\"h-10 w-auto\"}]}]}]}],[\"$\",\"p\",null,{\"className\":\"mt-20 text-sm font-medium text-gray-700\",\"children\":\"404\"}],[\"$\",\"h1\",null,{\"className\":\"mt-3 text-lg font-semibold text-gray-900\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm text-gray-700\",\"children\":\"Sorry, we couldn’t find the page you’re looking for.\"}],[\"$\",\"$L10\",null,{\"className\":\"group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900 mt-10\",\"href\":\"/\",\"children\":\"Go back home\",\"variant\":\"solid\",\"color\":\"slate\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"hidden sm:contents lg:relative lg:block lg:flex-1\",\"children\":[\"$\",\"$L11\",null,{\"className\":\"absolute inset-0 h-full w-full object-cover\",\"src\":\"https://gjicrqpogkzojcniixqi.supabase.co/storage/v1/object/public/mics/jot-bgs/abstracts_svg_simple_background_gucci_ink_orange_bla_fa78c376-ba43-4b70-b8b3-fc689368998a.webp\",\"alt\":\"\",\"width\":100,\"height\":100,\"unoptimized\":true}]}]]}],\"notFoundStyles\":[]}]}]}]}]]}]],null],[[\"$\",\"div\",null,{\"className\":\"absolute inset-0 z-50 flex items-center justify-center bg-neutral-200/50\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col items-center justify-center space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"mb-12 h-auto w-48\",\"children\":[\"$\",\"div\",null,{\"className\":\"h-full w-full\",\"children\":[\"$\",\"$L11\",null,{\"src\":\"$12\",\"alt\":\"Logo\",\"layout\":\"responsive\",\"width\":900,\"height\":200,\"objectFit\":\"contain\"}]}]}]}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"aria-labelledby\":\"$undefined\",\"className\":\"inset-shadow-sm 8 h-16 w-16 animate-[spin_2s_linear_infinite] rounded-full border-4 border-t-4 border-solid border-white text-5xl font-black text-primary\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"m21 7.5-2.25-1.313M21 7.5v2.25m0-2.25-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3 2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75 2.25-1.313M12 21.75V19.5m0 2.25-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-16 flex w-full items-center justify-center py-8\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-xl font-thin uppercase tracking-widest text-primary\",\"children\":\"Loading...\"}]}]]}]}],[],[]]],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L13\"],\"globalErrorComponent\":\"$14\",\"missingSlots\":\"$W15\"}]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Superior Networking Micro Website with Massive Potential\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"jsljshljsh\"}],[\"$\",\"meta\",\"4\",{\"name\":\"google-adsense-account\",\"content\":\"ca-pub-3528285648575971\"}],[\"$\",\"link\",\"5\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"meta\",\"6\",{\"name\":\"next-size-adjust\"}]]\n7:null\n"])</script></body></html>