---
const homeText = 'Ethan Reece'
const links = [
    { text: 'About Me', link: '/#about' },
    { text: 'Projects', link: '/#projects' },
    { text: 'Experience', link: '/#experience' },
    { text: 'Hobbies', link: '/#hobbies' },
    { text: 'Contact Me', link: '/#contact' },
]
---

<div class="fixed z-navbar w-full backdrop-blur-sm">
    <div
        class="max-h-navbar-h bg-background-light px-screen-x py-screen-y opacity-80"
    >
        <ul
            role="list"
            class="flex w-full items-center space-x-screen-x whitespace-nowrap font-normal"
        >
            <a href="/" rel="prefetch" class="mr-auto text-[1.25rem] font-bold"
                >{homeText}</a
            >
            {links.map((link) => <a href={link.link}>{link.text}</a>)}
        </ul>
    </div>
</div>