Real Estate Developer & Venture Investor
6-page personal brand site with custom bilingual EN/ES support (900+ line translations file, no i18n library), History API client-side routing, Intersection Observer scroll animations, floating orb background, live YouTube + Spotify API feeds, and a hero background video — zero UI component libraries.
Mobile
375px viewport
Live bilingual language toggle
Full EN/ES switch in the nav updates all 6 pages instantly — 900+ line translations file, no i18n library or page reload
Staggered mobile menu
Each nav link reveals with a 50ms delay offset — cascading slide-in animation using only inline CSS, no animation library
Scroll animations on mobile
IntersectionObserver triggers fade-in/slide-up on every content section as it enters view — smooth on any device speed
Floating orb background
Procedurally generated animated orbs with random sizes and durations — pure CSS, renders smoothly even on lower-powered mobile hardware
Zeus Hernandez is a personal brand site for a real estate developer, venture investor, and sustainability-focused entrepreneur. The site is fully bilingual — every page available in English and Spanish with a live language toggle — and covers his work across real estate development, the Infinity Podcast, thought leadership writings on regenerative economics, and his vision for sustainable urban development. A full media section streams his latest YouTube videos and Spotify episodes, while the writings page organizes his published articles with tag-based filtering.
Custom Bilingual Architecture
Full EN/ES content parity across all 6 pages via a centralized 900+ line translations.js file and a live language toggle — no i18n library, no routing duplication.
History API Client-Side Routing
Custom SPA router built on window.history.pushState() and popstate event listeners — avoids React Router overhead entirely for a lighter, faster bundle.
Procedural Floating Orb Background
SubtleOrbs component generates orbs with randomized sizes (200–600px), positions, animation durations (20–40s), and delays — pure CSS animations, no canvas or WebGL.
Live YouTube + Spotify API Feeds
Media page fetches YouTube videos and Spotify podcast episodes from a Vercel-hosted backend with decoupled fetch/display state — load-more UX without re-fetching already-loaded content.
Scroll Animation Engine
IntersectionObserver drives fade-in/slide-up animations across all content sections with configurable thresholds and offsets — no GSAP, no Framer Motion, no external dependency.
Staggered Mobile Menu + Fluid Typography
Each mobile nav item reveals with a 50ms staggered delay using inline CSS — cascading slide-in with no animation library. clamp() fluid typography scales smoothly from mobile to desktop without breakpoint jumps.
Not sure where to start?
Full multi-page lead-gen site for a granite countertop company serving 30+ cities across Utah, Idaho, and Wyoming — 3-step MT-aware booking wizard, middleware city routing with cookie persistence, auto-generated SEO landing pages, and a dual-nav system — zero UI kits.
7-page automotive paint marketing site with HLS.js video gallery, lightbox with keyboard nav, requestAnimationFrame infinite brand carousel, custom scroll animation hook, session-aware splash screen, page transition system, and three JSON-LD schemas — zero UI libraries or animation frameworks.
Multi-page luxury homebuilder site with a vertical scroll-snap hero carousel, word-by-word scroll animations, touch-friendly project gallery, scroll-triggered navbar, and an Instagram-style social feed — built with zero UI libraries.
