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 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"></path> <path class="zag-transition fill-transparent dark:fill-neutral-100" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"></path> </svg> </button> <script>
|
|
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.net/gh/selfhst/icons/svg/gitea.svg" alt="Gitea" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Gitea</p> </a><a href="https://snippets.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/opengist.svg" alt="OpenGist" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">OpenGist</p> </a><a href="https://tools.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/it-tools.svg" alt="IT-Tools" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">IT-Tools</p> </a> </div> </div><div class="mb-8"> <h3 class="text-xl font-semibold mb-4">Media</h3> <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"> <a href="https://watch.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/jellyfin.svg" alt="Jellyfin" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Jellyfin</p> </a><a href="https://books.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/calibre-web.svg" alt="Calibre-Web" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Calibre-Web</p> </a> </div> </div><div class="mb-8"> <h3 class="text-xl font-semibold mb-4">Infrastructure</h3> <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"> <a href="https://pihole.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/pi-hole.svg" alt="Pi-hole" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Pi-hole</p> </a><a href="https://ntfy.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/ntfy.svg" alt="Ntfy" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Ntfy</p> </a><a href="https://passwords.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/vaultwarden.svg" alt="Vaultwarden" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Vaultwarden</p> </a><a href="https://status.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/uptime-kuma.svg" alt="Uptime Kuma" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Uptime Kuma</p> </a><a href="https://auth.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/authentik.svg" alt="Authentik" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Authentik</p> </a><a href="https://proxy.justin.deal:8080" 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/traefik.svg" alt="Traefik" class="w-16 h-16" loading="lazy" decoding="async"> <p class="mt-2 text-center">Traefik</p> </a> </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-4.89c0-1.16-.02-2.64-1.61-2.64s-1.86 1.26-1.86 2.57v4.96h-3.08v-9h2.96v1.23h.04c.41-.78 1.4-1.6 2.88-1.6 3.08 0 3.65 2.03 3.65 4.66v4.71z"></path> </svg> </a> </div> </div> </section> <p class="zag-text zag-transition text-center text-sm font-medium">
|
|
© 2025 Justin Deal. All rights reserved.
|
|
</p> </footer> </body></html> |