A fast, personal photography portfolio for Maisie Douglas, built with handcrafted HTML, CSS, and JavaScript and tuned for strong performance.
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