emmahanckel.com

About

A portfolio website designed and built for artist Emma Hanckel. The site showcases her work across illustration, character design, concept art, animation, and more — with a focus on elegant presentation and smooth interactions.

Technical Highlights

• Astro 5 static site with zero JavaScript frameworks
• Custom masonry gallery with category filtering (8 categories)
• Video + image lightbox with keyboard navigation (arrow keys, Escape)
• Data-driven — 70+ portfolio items managed via works.json
• Netlify Forms for contact/commission requests
• Video background hero with mobile poster fallback
• Responsive design with 3→2→1 column grid breakpoints

Design

• Playfair Display + Inter typography pairing
• Gold accent (#c2a062) on off-white backgrounds
• Scroll-triggered fade-in animations using IntersectionObserver
• Smart navigation — auto-hides on scroll down, reveals on scroll up