Skip to content
All projects
Marketing SiteStatic WebsitesStatus: Live

Emerald Publishing — Rising from the Ashes

Portfolio landing-page project with purchase flow, newsletter signup, and press contact

Live SiteGitHub
Screenshot of Emerald Publishing — Rising from the Ashes

Portfolio marketing-site project built around a fictional book launch — three purchase editions, Netlify-powered forms, animated reveals, and a fully CSS-rendered book cover.

At a Glance

desktop Lighthouse perf
98
cumulative layout shift
0
largest contentful paint
0.9s
purchase editions
3

Problem

Self-imposed brief: build a polished book launch landing page end-to-end on a static stack — one that could plausibly drive purchases, capture email signups, and handle press inquiries without a backend or CMS.

Goal

Design and ship a fast marketing site with a literary, contemplative tone that converts across three purchase editions and runs entirely on static hosting.

What I Built

A marketing site on self-hosted Bootstrap 5.3.3 with a sticky scroll-aware navbar, IntersectionObserver reveal animations, a branded preloader, floating ember particles, two Netlify forms (newsletter + press contact) with honeypot protection, and a focus-trapped "Read an Excerpt" modal. It follows accessibility-first patterns (skip-to-content link, `aria-labelledby` landmarks, `prefers-reduced-motion` handling) and deploys on Netlify, with Cloudinary delivering imagery via `f_auto,q_auto` transforms, width variants, and face-aware avatar cropping.

Key Features

  • Three-edition purchase flow (e-book, hardcover, autographed) with Order CTAs and per-edition `aria-label`s for screen-reader disambiguation
  • Focus-trapped "Read an Excerpt" modal with `role="dialog"`, custom Tab/Shift-Tab cycling, ESC + backdrop dismissal, and focus restoration to the opener
  • Newsletter signup and press/speaking contact forms via Netlify Forms with honeypot protection
  • Sticky navbar with scroll-state transitions and mobile menu auto-close
  • IntersectionObserver-driven section reveals for performance over scroll listeners
  • Skip-to-content link, section landmarks with `aria-labelledby` + `tabindex="-1"` keyboard-anchor targets, and scoped `:focus-visible` outlines that clear the fixed navbar via `scroll-margin-top`
  • `prefers-reduced-motion` support — animations capped to 0.01ms, ember particles hidden, anchor scroll behavior switched from smooth to instant
  • Self-hosted Bootstrap 5.3.3 (no CDN on the critical path) with explicit width/height on every image for CLS hardening
  • Fully CSS-rendered book cover — no image asset required
  • Floating ember particles and branded preloader with fade
  • Cloudinary imagery with `f_auto,q_auto` optimization, width variants (300-1200), `c_fill,g_face` avatar cropping, and `srcset` on the hero portrait
  • Open Graph and Twitter Card metadata for social previews
  • Auto-formatted phone input on the press contact form

Challenges

  1. Matching a literary, contemplative tone without leaning on a heavy framework
  2. Building a convincing book cover entirely in CSS so the hero stayed crisp at every viewport
  3. Keeping motion tasteful — IntersectionObserver reveals and ember particles had to feel calm, not busy
  4. Making Netlify Forms feel first-class (validation, honeypot, success states) without client-side JS frameworks

Outcome

A launch page that does real work with no backend and no build step — form handling, scroll reveals, and a focus-trapped excerpt modal. Lighthouse desktop: 98 / 100 / 100 / 100 (Performance / Accessibility / Best Practices / SEO), CLS 0, LCP 0.9s.