Projects

x06.wtf v1

Web · Application · Full-Stack Developer · 2025

The first iteration of x06.wtf — a content feed site powered by Sanity CMS (headless CRM) and Next.js 16. Features tab-routed content (Home, Takes, Saved, YouTube, Music), bilingual UI (English/Ukrainian), YouTube Picture-in- Picture, image lightbox gallery, masonry grid, server-rendered Sanity queries with cursor-based pagination, and serverless API routes for link previews and Sanity webhook revalidation.

Next.jsSanity CMSHeadless CMSServerlessTailwind CSSTypeScriptVercel
DemoGitHub

Notes

The original version of x06.wtf — a personal content feed and blog powered by a headless Sanity CMS backend.

Architecture

  • Content managed in Sanity Studio (/studio) with custom document schemas for articles, embeds (YouTube, Twitter, Instagram, web links), and media (images/video)
  • Tab-based routing — content tagged with categories routes to Home, Takes, Saved, YouTube, or Music views
  • Server-rendered feed fetched via Sanity queries with cursor-based pagination (LoadMore component)
  • Serverless API routes — link preview endpoint (via LinkPreview.net) for generating OG thumbnails of shared URLs, and a Sanity webhook revalidation endpoint to purge the Next.js cache when content is published
  • Preview images as thumbnails — shared links (Twitter, Instagram, web links) couldn't render their OG images directly, so a serverless function calls LinkPreview.net at publish time, stores the result as a previewImageUrl field, and the feed displays that as the card thumbnail

Features

  • Bilingual UI — full English/Ukrainian support via a custom LanguageContext provider, translation keys, and a language switch component
  • YouTube Picture-in-Picture — when navigating away from a page with a playing YouTube video, it auto-detaches into a draggable floating mini-player
  • Image lightbox — fullscreen viewer with zoom support via lightgallery
  • Splash screen — animated intro on initial load
  • Masonry grid layout for media-rich content
  • LQIP placeholders — Sanity image assets serve low-quality blur placeholders while loading
  • Featured content section pinned at the top of the homepage
  • Vercel Speed Insights for performance monitoring

Stack

| Layer | Technology | |-------|------------| | Framework | Next.js 16 (App Router) | | CMS | Sanity v5 (headless) | | Fonts | Inter, Merriweather | | Styling | Tailwind CSS v4 + typography plugin | | Database | Sanity CDN | | Hosting | Vercel (serverless functions) | | External APIs | LinkPreview.net, oEmbed (Twitter, Instagram, YouTube) |