Parakeet Website

Really happy to share the website I've been working on with my friends at Parakeet. I haven't really seen this nav bar style used much so I thought I'd document it for those interested:

The nav bar elements (some svg, some just text/css) are positioned statically, so they move with the page scroll, but are actually duplicated (and styled differently) for every section, and clipped to their respective section using clip-path: inset(0,0,0,0), so that they appear/disappear for the various sections as the user scrolls. This looks especially cool when the logo changes from the regular to inverted one, as seen in this shot. All with no JS required!

The disadvantage of this is that you end up with extra markup in your html (one nav bar per section) and this can hurt accessibility. For the Parakeet website it didn’t matter too much since as visual portfolio website, support for hard-of-sight is already kind of limited. Theoretically you could workaround the issue by enabling focus for only the last section's elements, which should appear “above” everything else. (It would always look correct since the elements are positioned statically.)

Thanks for checking it out!