The Vision
Maisie's photography is raw, emotive, and personal. The goal was to build a site that let the images lead: clean layout, subtle transitions, and a minimal visual system. No bloated templates, just handcrafted front-end code and careful iteration.
Toolbox
- Handwritten HTML, CSS, and JavaScript for full control
- GitHub Pages for reliable hosting
- Cloudflare for DNS and caching
- WebP image optimization to reduce payload size
- Elfsight for Instagram integration
- Web3Forms with honeypot spam protection
- ChatGPT for brainstorming and troubleshooting
Building the Gallery
Getting the balance right between CSS Grid and Flexbox took a few iterations, but the final gallery and lightbox now feel smooth and predictable across desktop and mobile.
Roadblocks
- Keeping image loading fast on mobile while preserving visual quality
- Preventing third-party widgets from degrading performance
- Fixing an About card layout bug that blocked the hero call to action
Outcome
- Lightweight portfolio with fast load times
- Smooth gallery browsing on both desktop and mobile
- Maintainable codebase with no unnecessary framework overhead
Lessons Learned
- Simpler implementations are usually easier to optimize
- Small performance wins compound into a better user experience
- CSS debugging rewards patience and tight feedback loops
Would I Do It Again?
Absolutely. It was a privilege to bring Maisie's vision online, and I would gladly iterate further as her portfolio evolves.
#CSS#HTML#JavaScript#Web Design#Performance#UX