Three taglines rotate every 3.5s with a subtle 700ms opacity crossfade
between the H1 and the hero sub on the hatch.surf landing page:
1. Inspect any request. Mock any response. (default, in initial HTML)
2. Your HTTP bin, on your machine.
3. Send. Capture. Mock. No signup.
Implementation:
- site/index.html: <div class='hero-tagline' aria-live=polite> with three
<p class='hero-tagline-item'> children stacked; default #1 has
is-active class and no aria-hidden (for SEO + no-JS users)
- site/style.css: .hero-tagline uses position:relative with fixed
height: 1.7em (no CLS during rotation); absolute children crossfade
via transition: opacity 700ms var(--ease-out); font: JetBrains Mono
weight 500 in var(--text-secondary); clamp(0.85rem, 2.2vw, 1rem)
so mobile (375px+) fits the longest tagline on one line
- site/main.js: initRotatingTagline() in the existing IIFE; setInterval
every 3500ms swaps is-active and aria-hidden between siblings;
early-returns if prefers-reduced-motion is set, so the default
tagline stays visible without animation
- Spacing: H1 mb-sp-6, tagline mb-sp-6, sub mb-sp-8 keeps the
existing 24px/24px/32px rhythm unchanged below the headline
Note: site/index.html (not the Next.js app under app/ + components/)
is what hatch.surf/nginx actually serves. The Next.js work from
the earlier failed run was reverted.
- Update deployment scripts to use Docker with static files baked in
- Remove host volume mount in favor of self-contained Docker image
- Add verification script to ensure correct content is deployed
- Update documentation to reflect new deployment architecture
- Ensure build process produces correct output without manual copying
Closes ELF-268
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Increase feature icon size from 48px to 52px
- Add hover effects and visual feedback for feature cards
- Improve gradient overlays and transitions
- Add visual hierarchy with underline on section headings
- Improve blog post card styling and hover effects
- Maintain anime.js magical background as core brand element
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Created Dockerfile using nginx:alpine to serve static files
- Created docker-compose.yml for easy local development
- Added .dockerignore to exclude unnecessary files
- Updated README with Docker instructions
- Tested locally to ensure site runs correctly
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Updated index.html with new Three.js canvas and anime.js data attributes
- Updated style.css with dark theme design system
- Added main.js with Three.js particle network and scroll animations
- All files from ELF-195 deliverables
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Create static site structure in site/ directory
- Add landing page, blog index, and first blog post
- Include Open Graph meta tags for social sharing
- Add GitHub Actions workflow for GitHub Pages deployment
- Include brand assets (OG image, favicon)
- Add README with setup and DNS instructions
Co-Authored-By: Paperclip <noreply@paperclip.ing>
