A clean, fast, and personal portfolio showcasing Maisie’s photography, built with handcrafted HTML, CSS, and JavaScript and optimized for performance.
The Vision
Maisie’s photography speaks for itself: raw, emotive, and personal. I aimed to build a site that lets her work shine - clean design, subtle transitions, and a bold yet minimal palette. No bloated templates or cookie‑cutter themes; just handcrafted HTML, CSS, and JavaScript tied together with finesse and a bit of help from ChatGPT to brainstorm solutions.
Toolbox
- Handwritten HTML, CSS, and JavaScript for full control
- GitHub Pages for reliable hosting
- Cloudflare for DNS management and caching
- WebP images to reduce file sizes without compromising quality
- Elfsight for seamless Instagram integration
- Formspree to handle contact form submissions efficiently
- ChatGPT for brainstorming and troubleshooting
Building the Gallery
Finding the right balance between flexbox and grid took some trial and error, but now the responsive gallery and lightbox feel smooth on any screen.
Roadblocks
- Ensuring images loaded quickly on mobile devices (using WebP thumbnails for the lightbox and crisp JPGs for the viewer)
- Keeping third-party widgets from dragging performance down
- Fixing the About Me section card that was misbehaving and covering the hero’s call-to-action
The Result
- A crisp, lightweight showcase that loads in under a second
- A gallery experience that’s seamless on desktop and mobile
- Code that’s easy to maintain—no heavy frameworks in sight
Lessons Learned
- Less is more: every line of code counts
- Performance tweaks pay off in happier users
- Debugging CSS is half patience, half creativity
Would I Do It Again?
Absolutely – it was a privilege to bring Maisie’s vision to life, and I’d dive back in anytime to refine those details and make her work shine.