All Projects
Website
emmahanckel.com
CompleteArtist Portfolio Website
A portfolio website for artist Emma Hanckel — featuring a masonry gallery with category filtering, video lightbox, and elegant responsive design. Built with Astro and deployed on Netlify.
Astro CSS Netlify Portfolio
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