zeu.dev
personal website
1<script lang="ts">
2 import { Dialog } from "bits-ui";
3</script>
4
5<Dialog.Root>
6 <Dialog.Trigger>
7 Menu
8 </Dialog.Trigger>
9 <Dialog.Portal>
10 <Dialog.Overlay class="fixed inset-0 z-50 bg-black/80" />
11 <Dialog.Content
12 class="bg-neutral-800 fixed left-[50%] top-[50%] z-50 w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] rounded-card-lg border bg-background p-5 shadow-popover outline-none sm:max-w-[490px] md:w-full"
13 >
14 <nav id="navigation" class="flex flex-col gap-4 w-full md:col-span-1">
15 <section class="flex flex-col gap-2 text-white">
16 <h3 class="text-yellow-500">
17 <a href="/blog" class="after:content-['_->'] before:content-['📑_']">blog</a>
18 </h3>
19 </section>
20
21 <hr class="border-yellow-500 " />
22
23 <section class="flex flex-col gap-2 text-white">
24 <h3 class="text-yellow-500">
25 <a href="/resume" class="after:content-['_->'] before:content-['💼_']">resume</a>
26 </h3>
27 <h3 class="text-yellow-500">
28 <a href="/open-source" class="after:content-['_->'] before:content-['🧮_']">open source</a>
29 </h3>
30 <h3 class="text-yellow-500">
31 <a href="/as-seen-on" class="after:content-['_->'] before:content-['🎥_']">as seen on</a>
32 </h3>
33 </section>
34
35 <hr class="border-yellow-500 " />
36
37 <section class="flex flex-col gap-2 text-white">
38 <h3 class="text-yellow-500">socials</h3>
39 <a href="https://bsky.app/profile/zeu.dev" target="_blank" class="after:content-['_↗'] before:content-['🦋_']">bluesky</a>
40 <a href="https://github.com/zeucapua" target="_blank" class="after:content-['_↗'] before:content-['💻_']">github</a>
41 <a href="https://tangled.sh/zeu.dev" target="_blank" class="after:content-['_↗'] before:content-['🧶_']">tangled</a>
42 <a href="https://twitch.tv/zeu_dev" target="_blank" class="after:content-['_↗'] before:content-['👾_']">twitch</a>
43 <a href="https://stream.place/zeu.dev" target="_blank" class="after:content-['_↗'] before:content-['🟪_']">streamplace</a>
44 </section>
45 </nav>
46 <Dialog.Close
47 class="absolute right-5 top-5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
48 >
49 x
50 </Dialog.Close>
51 </Dialog.Content>
52 </Dialog.Portal>
53</Dialog.Root>