bun.lockb

This is a binary file and will not be displayed.

+1

package.json

··· 19 19 "@sveltejs/vite-plugin-svelte": "^4.0.0", 20 20 "astro": "^4.16.11", 21 21 "astro-icon": "^1.1.2", 22 22 + "bits-ui": "^0.21.16", 22 23 "svelte": "^5.1.16", 23 24 "tailwindcss": "^3.4.14", 24 25 "typescript": "^5.6.3"

+53

src/components/NavigationDialog.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { Dialog } from "bits-ui"; 3 3 + import { fade } from "svelte/transition"; 4 4 + </script> 5 5 + 6 6 + <Dialog.Root> 7 7 + <Dialog.Trigger> 8 8 + Menu 9 9 + </Dialog.Trigger> 10 10 + <Dialog.Portal> 11 11 + <Dialog.Overlay transition={fade} class="fixed inset-0 z-50 bg-black/80" /> 12 12 + <Dialog.Content 13 13 + 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" 14 14 + > 15 15 + <nav id="navigation" class="flex flex-col gap-4 w-full md:col-span-1"> 16 16 + 17 17 + <section class="flex flex-col gap-2 text-white"> 18 18 + <h3 class="text-yellow-500">socials</h3> 19 19 + <a href="https://bsky.app/profile/zeu.dev" target="_blank" class="after:content-['_↗']">bluesky</a> 20 20 + <a href="https://github.com/zeucapua" target="_blank" class="after:content-['_↗']">github</a> 21 21 + <a href="https://twitch.tv/zeu_dev" target="_blank" class="after:content-['_↗']">twitch</a> 22 22 + <a href="https://twitter.com/zeu_dev" target="_blank" class="after:content-['_↗']">twitter</a> 23 23 + </section> 24 24 + 25 25 + <hr class="border-yellow-500 " /> 26 26 + 27 27 + <section class="flex flex-col gap-2 text-white"> 28 28 + <h3 class="text-yellow-500"> 29 29 + <a href="/blog" class="after:content-['_->']">blog</a> 30 30 + </h3> 31 31 + </section> 32 32 + 33 33 + <hr class="border-yellow-500 " /> 34 34 + 35 35 + <section class="flex flex-col gap-2 text-white"> 36 36 + <h3 class="text-yellow-500"> 37 37 + <a href="/resume" class="after:content-['_->']">resume</a> 38 38 + </h3> 39 39 + <h3 class="text-yellow-500"> 40 40 + <a href="/open-source" class="after:content-['_->']">open source</a> 41 41 + </h3> 42 42 + <a href="https://app.opensauced.pizza" target="_blank" class="after:content-['_↗']">OpenSauced</a> 43 43 + <a href="https://easytodo.link" target="_blank" class="after:content-['_↗']">easytodo.link</a> 44 44 + </section> 45 45 + </nav> 46 46 + <Dialog.Close 47 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 48 + > 49 49 + x 50 50 + </Dialog.Close> 51 51 + </Dialog.Content> 52 52 + </Dialog.Portal> 53 53 + </Dialog.Root>

+4 -9

src/components/SiteLayout.astro

··· 1 1 --- 2 2 + import NavigationDialog from "./NavigationDialog.svelte"; 2 3 import { ViewTransitions } from "astro:transitions"; 3 4 const { title } = Astro.props; 4 5 --- ··· 21 22 <h2 class="hidden md:flex">all things me!</h2> 22 23 </div> 23 24 24 24 - <button id="menu_button" class="px-2 py-1 border border-yellow-500 self-end w-fit h-fit md:hidden"> 25 25 - Menu 26 26 - </button> 25 25 + <NavigationDialog client:load /> 27 26 28 27 <nav id="navigation" class="hidden md:flex flex-col gap-4 w-full md:col-span-1" transition:persist> 29 28 <hr class="border-yellow-500 " /> 30 29 31 30 <section class="flex flex-col gap-2 text-white"> 32 31 <h3 class="text-yellow-500">socials</h3> 33 33 - <a href="https://twitter.com/zeu_dev" target="_blank" class="after:content-['_↗']">twitter</a> 32 32 + <a href="https://bsky.app/profile/zeu.dev" target="_blank" class="after:content-['_↗']">bluesky</a> 34 33 <a href="https://github.com/zeucapua" target="_blank" class="after:content-['_↗']">github</a> 35 34 <a href="https://twitch.tv/zeu_dev" target="_blank" class="after:content-['_↗']">twitch</a> 35 35 + <a href="https://twitter.com/zeu_dev" target="_blank" class="after:content-['_↗']">twitter</a> 36 36 </section> 37 37 38 38 <hr class="border-yellow-500 " /> ··· 63 63 </div> 64 64 </body> 65 65 </html> 66 66 - 67 67 - <script> 68 68 - const menuButton = document.querySelector("#menu_button"); 69 69 - const navSection = document.querySelector("#navigation"); 70 70 - </script> 71 66 72 67 <style is:global> 73 68 @font-face {