zeu.dev
personal website
1---
2import NavigationDialog from "./NavigationDialog.svelte";
3const { title } = Astro.props;
4---
5
6<html lang="en">
7 <head>
8 <meta charset="utf-8" />
9 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💛</text></svg>">
10 <script
11 defer
12 is:inline
13 src="https://assets.onedollarstats.com/tracker.js"
14 id="stonks"
15 ></script>
16 <meta name="viewport" content="width=device-width" />
17 <meta name="generator" content={Astro.generator} />
18 <meta property="og:type" content="website" />
19 <meta property="og:url" content="https://www.zeu.dev" />
20 <meta property="og:title" content={title ?? "zeu.dev"} />
21 <meta property="og:description" content="Zeu is a software engineer, focused on UX product work on frontend web applications" />
22 <meta property="twitter:card" content="/site_screenshot.png">
23 <meta property="og:image" content="/site_screenshot.png">
24 <meta property="og:image:alt" content="zeu in lower case ASCII">
25 <title>{ title }</title>
26 </head>
27 <body class="relative font-syne bg-neutral-900 text-yellow-500 grid grid-cols-1 md:grid-cols-5 w-full h-full min-w-screen min-h-screen">
28 <aside class="sticky top-0 z-50 bg-neutral-900 max-h-screen flex items-center border-yellow-500 justify-between md:border-r-2 w-full md:w-fit md:justify-start md:items-start h-fit md:h-full md:flex-col gap-4 font-medium p-4">
29 <div class="flex flex-col gap-2 text-xl">
30 <h1>
31 <a href="/" class="after:content-['_->']">zeu.dev</a>
32 </h1>
33 <h2 class="hidden md:flex">all things me!</h2>
34 </div>
35
36 <NavigationDialog client:load />
37
38 <nav id="navigation" class="hidden md:flex flex-col gap-4 w-full md:col-span-1" transition:persist>
39 <hr class="border-yellow-500 " />
40
41 <section class="flex flex-col gap-2 text-white">
42 <h3 class="text-yellow-500">
43 <a href="/blog" class="after:content-['_->'] before:content-['📑_']">blog</a>
44 </h3>
45 </section>
46
47 <hr class="border-yellow-500 " />
48
49 <section class="flex flex-col gap-2 text-white">
50 <h3 class="text-yellow-500">
51 <a href="/resume" class="after:content-['_->'] before:content-['💼_']">resume</a>
52 </h3>
53 <h3 class="text-yellow-500">
54 <a href="/open-source" class="after:content-['_->'] before:content-['🧮_']">open source</a>
55 </h3>
56 <h3 class="text-yellow-500">
57 <a href="/as-seen-on" class="after:content-['_->'] before:content-['🎥_']">as seen on</a>
58 </h3>
59 </section>
60
61 <hr class="border-yellow-500 " />
62
63 <section class="flex flex-col gap-2 text-white">
64 <h3 class="text-yellow-500">socials</h3>
65 <a href="https://bsky.app/profile/zeu.dev" target="_blank" class="after:content-['_↗'] before:content-['🦋_']">bluesky</a>
66 <a href="https://github.com/zeucapua" target="_blank" class="after:content-['_↗'] before:content-['💻_']">github</a>
67 <a href="https://tangled.sh/zeu.dev" target="_blank" class="after:content-['_↗'] before:content-['🧶_']">tangled</a>
68 <a href="https://twitch.tv/zeu_dev" target="_blank" class="after:content-['_↗'] before:content-['👾_']">twitch</a>
69 <a href="https://stream.place/zeu.dev" target="_blank" class="after:content-['_↗'] before:content-['🟪_']">streamplace</a>
70 </section>
71
72 </nav>
73 </aside>
74
75 <div class="md:col-span-4 w-full h-full" transition:animate="slide">
76 <slot />
77 </div>
78 </body>
79</html>
80
81
82<style is:global>
83 @import "tailwindcss";
84 @plugin "@tailwindcss/typography";
85
86 @theme {
87 --font-syne: "SyneMono";
88 }
89
90 @font-face {
91 font-family: "SyneMono";
92 src: url("/SyneMono-Regular.ttf");
93 }
94</style>