Podcast · Entertainment
QUÉ FOMO!Website for a three-host podcast, with episodes, individual profiles and a game for the live audience
Astro site for QUÉ FOMO!, an entertainment podcast with three hosts: a profile per host, minute-by-minute episodes and contact that lands in WhatsApp.
Technologies
- Astro 7
- TypeScript
- GSAP + ScrollTrigger
- WebGL (GLSL)
- @astrojs/sitemap
- qrcode-generator
- sharp
- Node.js + sirv
- Docker
- Railway
- Google Analytics 4
- Microsoft Clarity
- JSON-LD

9
sitemap URLs
3
host profiles
2
published episodes
25
timestamped chapters
My role
Design and development of the site at Azirgo SAS for the production company La Jungla: visual system built from the brand manual, content structure, technical SEO, measurement and deployment.
The problem
QUÉ FOMO! is an unfiltered conversation podcast between three friends, and its content lives on YouTube and Instagram. But a search engine cannot read a video, an Instagram profile does not explain who each host is, and guests, brands and press had no clear door to write through. The show needed a home of its own that felt as loud as the show itself and, at the same time, made every episode stand on its own in search.
What I built
- A home page with the show's concept, the three hosts, the three-block format (Qué pasó!, Tema de la semana and La dinámica), what happens off set, frequently asked questions and a closing call to follow the show.
- A hosts section with a profile of their own for Emilia, Gaby and Lili: their role at the table - the one who provokes, the one who reacts and the one who explodes -, their story, traits, social accounts and the topics they know best.
- An episode archive with the latest one featured on top and, for each episode, a page with a long summary, topics, guests, the brands that sponsored the recording and a minute-by-minute breakdown by segment.
- A player that does not load YouTube until someone presses play, and chapters that jump to the exact second of the video without leaving the page.
- Contact with no backend: the form builds the message with name, email, reason (guest, sponsorship, collaboration or press) and the page it came from, and opens WhatsApp with everything already written. A floating WhatsApp button sits on every page.
- The roulette: a game for the audience during recordings, with a 4-digit code inside a QR shown on screen and a wheel each person spins from their own phone, with no server and no database.
- 1200x630 social images for the sections, every host and every episode, plus every favicon, generated by a script from the logo and the photos.
How it's structured
It is a static Astro 7 site. All content comes from two TypeScript data modules - one with the copy, the hosts, the format blocks and the FAQ, and another with the episodes - and it is served from a Docker container running a minimal Node server on Railway, behind Cloudflare.
- Routes: the home page, /episodios and each episode page, /hosts and each host profile, and /contacto; /ruleta and /ruleta-pantalla stay out of the sitemap. The section moved from /host to /hosts with redirects, so no links were left dead.
- From video to site: each episode stores the YouTube ID, the real date and duration, the long summary, the chapters with their start second, the topics, the guests, the brands and the hosts who appear. The thumbnail is pulled from YouTube and converted to webp.
- A shared JSON-LD graph - Organization with La Jungla as parent organization, WebSite, WebPage and BreadcrumbList - that each page extends: PodcastSeries and FAQPage on the home page, Person and ProfilePage on the hosts, PodcastEpisode and VideoObject with its chapters as Clip on the episodes, and ContactPage on contact.
- Canonical, Open Graph, Twitter Card, hreflang and robots with max-image-preview:large all come from a single layout. robots.txt and the sitemap take the domain from an environment variable at build time, with no hand-written URLs, and robots.txt explicitly welcomes GPTBot, PerplexityBot and ClaudeBot.
- The WhatsApp number lives in one place and feeds the form, the floating button, the footer and the schema ContactPoint. Every message goes out with the page URL, so the team knows where the person wrote from.
- Visual identity: colors sampled from the official logo (pink, lime, ink and cream, with blue and yellow accents), Anton, Fredoka and DM Sans, animated GLSL backgrounds in the hero and the promise section, and headings with GSAP micro-animations on hover.
- Caching built so new content shows up immediately: hashed files are kept for a year and everything else revalidates against its ETag. Without a header, the edge applied four hours and the hosts' new photos did not appear.
The roulette: a live game with no server
For recordings with an audience, the site includes a game that runs entirely in the browser and stores nothing about anyone on any server.
- The screen makes up a 4-digit code on load and puts it inside the QR; the phone reads it from its own URL, which is why no backend is needed.
- Each person spins their wheel only once, and the spin is saved on the phone itself so the prize is not lost on an accidental reload.
- The wheel is an SVG generated at build time, so it shows even if JavaScript fails to load. The QR is drawn in the browser, with no logo on top, so a camera reads it on the first try and from a distance.
- Between 4 and 12 slices configurable from a single file, each with its label, emoji, color and type: prize, challenge or consolation.
- A screen mode to project on the TV: a new code with the space bar, the button or a reload.
- Both routes carry noindex in the HTML and in the X-Robots-Tag header, but they are not blocked in robots.txt: if a crawler cannot get in, it never reads the noindex.
Inside the site

Host profile with her story, traits and social accounts. 
Episode page with summary, details and the video.
Technical decisions
- Episodes live in a typed array rather than a CMS: publishing one means adding a block at the top, and /episodios and the episode page generate themselves. The first item in the array is the featured one, so there is nothing else to touch.
- The player does not mount the YouTube iframe until play, and it uses youtube-nocookie. Loading it upfront brought half a megabyte of third-party scripts and their cookies to a page most people open to read the summary; this way the page weighs what the thumbnail weighs.
- The transcript is never published: it is used to write the summary and the chapters, and it stays there. No quotes are invented, no timestamps are refined beyond what the source gives, and the date and duration are copied from the video's own page, never estimated.
- The roulette has no backend on purpose: the code travels inside the QR and the host does the validation, comparing the 4 digits on the phone with the ones on screen. Every slice has the same weight because any weighting would end up written in the site's public code.
- Analytics - GA4 and Clarity - does not fire outside the real domain: on localhost or a local network IP it is cut off, so tests do not sneak in as visits and pollute the metrics.
Challenges
- Bringing a very loud brand to the web - pink and lime, animated backgrounds, cut-out photos that bleed past the frame - without hurting performance: the backgrounds are library-free GLSL shaders, all motion respects prefers-reduced-motion and the page renders complete without JavaScript.
- Designing a live game that is useless to tamper with even without a server: the security lies in the human step, the draw uses unbiased crypto.getRandomValues and every code expires after two hours, so an old QR seen on Instagram does not win prizes.
- Making the site feel complete from launch day, with only the first episodes out: the hosts, the format and the FAQ carry the weight, and the episode section grows on its own with every new episode.
Result
The site is in production with the home page, the three host profiles, the episode archive and WhatsApp contact. Every new episode goes in as a data block and shows up with its page, its social image, its structured data and its sitemap entry. The roulette is ready for recordings on its direct routes, kept out of the index, while its home page section remains switched off.