33 lines
9.5 KiB
HTML
33 lines
9.5 KiB
HTML
|
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/svg+xml" href="/pixel_avatar.png"><meta name="generator" content="Astro v5.7.5"><link rel="preconnect" href="https://fonts.bunny.net"><link href="https://fonts.bunny.net/css?family=ibm-plex-mono:400,400i,500,500i,600,600i,700,700i" rel="stylesheet"> <title>Justin Deal • My personal slice of the internet</title> <meta name="description" content="Zaggonaut is a retro-inspired theme for Astro, built using TypeScript, TailwindCSS, and Astro."> <meta property="og:title" content="Justin Deal • My personal slice of the internet"> <meta property="og:description" content="Zaggonaut is a retro-inspired theme for Astro, built using TypeScript, TailwindCSS, and Astro."> <meta property="og:image" content="https://justin.deal/pixel_avatar.png"> <meta property="og:url" content="https://justin.deal"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Justin Deal • My personal slice of the internet"> <meta name="twitter:description" content="Zaggonaut is a retro-inspired theme for Astro, built using TypeScript, TailwindCSS, and Astro."> <meta name="twitter:image" content="https://justin.deal/pixel_avatar .png"> <meta http-equiv="content-language" content="en"> <meta name="language" content="English"> <link rel="canonical" href="https://justin.deal"> <link rel="stylesheet" href="/_astro/html-intro.CpHT9-yV.css"></head> <body class="zag-bg zag-text zag-transition font-mono"> <header class="zag-bg zag-border-b zag-transition sticky top-0 w-full z-10"> <div class="zag-bg zag-transition sm:hidden relative z-50 py-4 flex items-center"> <button class="px-4" aria-label="Toggle navigation menu"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512" class="zag-fill zag-transition"> <path d="M80 96h352v32H80zm0 144h352v32H80zm0 144h352v32H80z"></path> </svg> </button> </div> <nav class="zag-bg zag-border-b zag-transition fixed sm:relative inset-x-0 top-0 h-auto sm:px-4 flex justify-between flex-col gap-8 py-4 text-xl sm:flex-row max-w-2xl mx-auto sm:pt-4 sm:border-none"> <div class="flex flex-col font-mono font-medium gap-4 sm:flex-row px-4 sm:px-0 mt-16 sm:mt-0"> <a href="/" class="zag-offset underline font-medium flex items-center focus:outline-2 focus:outline-offset-2 focus:outline-zag-dark dark:focus:outline-zag-light" target="_self"> home </a><a href="/blog" class="zag-offset underline font-medium flex items-center focus:outline-2 focus:outline-offset-2 focus:outline-zag-dark dark:focus:outline-zag-light" target="_self"> blog </a><a href="/projects" class="zag-offset underline font-medium flex items-center focus:outline-2 focus:outline-offset-2 focus:outline-zag-dark dark:focus:outline-zag-light" target="_self"> projects </a><a href="/homelab" class="zag-offset underline font-medium flex items-center focus:outline-2 focus:outline-offset-2 focus:outline-zag-dark dark:focus:outline-zag-light" target="_self"> homelab </a> </div> <div class="flex gap-4 justify-between px-4 sm:px-0"> <button class="border-none bg-none focus:outline-2 focus:outline-offset-2 focus:outline-zag-dark dark:focus:outline-zag-light" id="themeToggle" aria-label="Theme Toggle"> <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" name="Theme toggle"> <path class="zag-transition fill-neutral-900 dark:fill-transparent" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8
|
||
|
|
const theme = (() => {
|
||
|
|
if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
|
||
|
|
return localStorage.getItem("theme") ?? "light";
|
||
|
|
}
|
||
|
|
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||
|
|
return "dark";
|
||
|
|
}
|
||
|
|
return "light";
|
||
|
|
})();
|
||
|
|
|
||
|
|
if (theme === "light") {
|
||
|
|
document.documentElement.classList.remove("dark");
|
||
|
|
} else {
|
||
|
|
document.documentElement.classList.add("dark");
|
||
|
|
}
|
||
|
|
|
||
|
|
window.localStorage.setItem("theme", theme);
|
||
|
|
|
||
|
|
const handleToggleClick = () => {
|
||
|
|
const element = document.documentElement;
|
||
|
|
element.classList.toggle("dark");
|
||
|
|
|
||
|
|
const isDark = element.classList.contains("dark");
|
||
|
|
localStorage.setItem("theme", isDark ? "dark" : "light");
|
||
|
|
};
|
||
|
|
|
||
|
|
document
|
||
|
|
.getElementById("themeToggle")
|
||
|
|
?.addEventListener("click", handleToggleClick);
|
||
|
|
</script> </div> </nav> </header> <script type="module">const a=document.querySelector("button"),n=document.querySelector("nav");let t=!1;function e(){window.matchMedia("(max-width: 640px)").matches?n.style.transform=t?"translateY(0)":"translateY(-100%)":(n.style.transform="translateY(0)",t=!1)}function s(){t=!t,e()}a?.addEventListener("click",s);window.addEventListener("resize",e);e();</script> <main> <section class="p-4 max-w-2xl mx-auto my-16"> <div class="flex flex-col items-center sm:flex-row gap-8"> <img src="pixel_avatar.png" alt="Justin Deal" class="rounded-full max-w-40 w-40 h-40 mb-4 z-0 grayscale"> <div> <h1 class="text-3xl sm:text-4xl font-display font-semibold opsz text-center sm:text-left"> Justin Deal </h1> <h2 class="text-center text-xl sm:text-2xl font-mono font-medium sm:text-left"> <p>My personal slice of the internet</p> </h2> </div> </div> </section> </main> <footer class="mt-16 mb-8"> <section class="p-4 max-w-2xl mx-auto mb-4"> <div class="zag-border-b zag-transition pb-4 flex flex-col sm:flex-row sm:flex-nowrap gap-8 sm:items-center"> <ul class="flex flex-row gap-2"> <li> <a href="/" class="zag-offset underline font-medium flex items-center focus:outline-2 focus:outline-offset-2 focus:outline-zag-dark dark:focus:outline-zag-light" target="_self"> home </a> </li><li> <a href="/blog" class="zag-offset underline font-medium flex items-center focus:outline-2 focus:outline-offset-2 focus:outline-zag-dark dark:focus:outline-zag-light" target="_self"> blog </a> </li><li> <a href="/projects" class="zag-offset underline font-medium flex items-center focus:outline-2 focus:outline-offset-2 focus:outline-zag-dark dark:focus:outline-zag-light" target="_self"> projects </a> </li><li> <a href="/homelab" class="zag-offset underline font-medium flex items-center focus:outline-2 focus:outline-offset-2 focus:outline-zag-dark dark:focus:outline-zag-light" target="_self"> homelab </a> </li> </ul> <div class="flex flex-row sm:flex-row gap-4"> <a href="https://github.com/RATIU5/zaggonaut" class="zag-offset underline font-medium flex items-center focus:outline-2 focus:outline-offset-2 focus:outline-zag-dark dark:focus:outline-zag-light" target="_self" aria-label="GitHub Profile"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path class="zag-fill zag-transition" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"></path> </svg> </a> <a href="https://twitter.com/" class="zag-offset underline font-medium flex items-center focus:outline-2 focus:outline-offset-2 focus:outline-zag-dark dark:focus:outline-zag-light" target="_self" aria-label="Twitter Profile"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path class="zag-fill zag-transition" d="m17.687 3.063l-4.996 5.711l-4.32-5.711H2.112l7.477 9.776l-7.086 8.099h3.034l5.469-6.25l4.78 6.25h6.102l-7.794-10.304l6.625-7.571zm-1.064 16.06L5.654 4.782h1.803l10.846 14.34z"></path> </svg> </a> <a href="https://www.linkedin.com/" class="zag-offset underline font-medium flex items-center focus:outline-2 focus:outline-offset-2 focus:outline-zag-dark dark:focus:outline-zag-light" target="_self" aria-label="LinkedIn Profile"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path class="zag-fill zag-transition" fill="currentColor" d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11.12 19h-3.08v-9h3.08v9zm-1.54-10.29c-.99 0-1.79-.8-1.79-1.79s.8-1.79 1.79-1.79 1.79.8 1.79 1.79-.8 1.79-1.79 1.79zm13.16 10.29h-3.08v
|
||
|
|
© 2025 Justin Deal. All rights reserved.
|
||
|
|
</p> </footer> </body></html>
|