33 lines
17 KiB
HTML
33 lines
17 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 0
|
||
|
|
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-8"> <div class="flex items-center gap-4 pt-8 pb-4"> <h1 class="font-display text-3xl sm:text-4xl leading-loose">Homelab</h1> </div> <div class="mb-8"> <h3 class="text-xl font-semibold mb-4">Websites</h3> <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"> <a href="https://justin.deal" class="flex flex-col items-center transition-transform transform hover:scale-105 hover:opacity-90" target="_blank" rel="noopener noreferrer"> <img src="/public/pixel_avatar.png" alt="https://justin.deal" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">https://justin.deal</p> </a> </div> </div><div class="mb-8"> <h3 class="text-xl font-semibold mb-4">Utilities</h3> <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"> <a href="https://notes.justin.deal" class="flex flex-col items-center transition-transform transform hover:scale-105 hover:opacity-90" target="_blank" rel="noopener noreferrer"> <img src="https://cdn.jsdelivr.net/gh/selfhst/icons/png/silverbullet.png" alt="Silverbullet" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Silverbullet</p> </a><a href="https://todo.justin.deal" class="flex flex-col items-center transition-transform transform hover:scale-105 hover:opacity-90" target="_blank" rel="noopener noreferrer"> <img src="https://cdn.jsdelivr.net/gh/selfhst/icons/svg/vikunja.svg" alt="Vikunja" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Vikunja</p> </a><a href="https://budget.justin.deal" class="flex flex-col items-center transition-transform transform hover:scale-105 hover:opacity-90" target="_blank" rel="noopener noreferrer"> <img src="https://cdn.jsdelivr.net/gh/selfhst/icons/svg/actual-budget.svg" alt="Actual" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Actual</p> </a><a href="https://search.justin.deal" class="flex flex-col items-center transition-transform transform hover:scale-105 hover:opacity-90" target="_blank" rel="noopener noreferrer"> <img src="https://cdn.jsdelivr.net/gh/selfhst/icons/svg/searxng.svg" alt="Searxng" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Searxng</p> </a><a href="https://tesla.justin.deal" class="flex flex-col items-center transition-transform transform hover:scale-105 hover:opacity-90" target="_blank" rel="noopener noreferrer"> <img src="https://cdn.jsdelivr.net/gh/selfhst/icons/svg/teslamate.svg" alt="TeslaMate" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">TeslaMate</p> </a><a href="https://dav.justin.deal" class="flex flex-col items-center transition-transform transform hover:scale-105 hover:opacity-90" target="_blank" rel="noopener noreferrer"> <img src="https://cdn.jsdelivr.net/gh/selfhst/icons/png/baikal.png" alt="BaiKal" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">BaiKal</p> </a><a href="https://docs.justin.deal" class="flex flex-col items-center transition-transform transform hover:scale-105 hover:opacity-90" target="_blank" rel="noopener noreferrer"> <img src="https://cdn.jsdelivr.net/gh/selfhst/icons/svg/cryptpad.svg" alt="Cryptpad" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Cryptpad</p> </a> </div> </div><div class="mb-8"> <h3 class="text-xl font-semibold mb-4">Development</h3> <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"> <a href="https://code.justin.deal" class="flex flex-col items-center transition-transform transform hover:scale-105 hover:opacity-90" target="_blank" rel="noopener noreferrer"> <img src="https://cdn.jsdelivr.
|
||
|
|
© 2025 Justin Deal. All rights reserved.
|
||
|
|
</p> </footer> </body></html>
|