# Building MaisieDouglas.com: From Frustration to Fulfilment

> A fast, personal photography portfolio for Maisie Douglas, built with handcrafted HTML, CSS, and JavaScript and tuned for strong performance.

- **Source:** https://ciaranwhiteside.com/projects/building-maisiedouglas
- **Author:** Ciaran Whiteside
- **Updated:** 2025-05-16
- **Topics:** CSS, HTML, JavaScript, Web Design, Performance, UX
- **Live site:** https://maisiedouglas.com

![The MaisieDouglas.com homepage: a coastal landscape hero with the headline "Photography that moves you".](https://ciaranwhiteside.com/projects/building-maisiedouglas/hero.webp)

*MaisieDouglas.com — a photography portfolio built with handcrafted HTML, CSS, and JavaScript.*

---

## 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.