Overview
Tyflos Radio is a Greek cultural radio station and editorial platform rooted in Xanthi. The brief was a full redesign and rebuild: modern dark magazine aesthetic, full article CMS using MDX, multi-category navigation with dropdowns, a live radio stream, and a weather widget for the local city.
The name "Tyflos" means blind — accessibility was mission-critical from the start.
Delivered in 2 weeks. Live at tyflos.gr.
What was built
Editorial system — All articles stored as .mdx files with rich frontmatter (category, subcategory, author, read-time, cover image, featured flag). generateStaticParams generates all article pages at build time — zero database, zero latency.
Navigation — 9-category nav with hover dropdowns. Each category has subcategories (e.g. Μουσική → Νέο Τραγούδι, Νέος Δίσκος). Mobile: full-screen staggered drawer.
Breaking news marquee — Amber ticker strip below the nav, fed from the latest article data.
Homepage layout — Magazine-style: hero card + 3-card sub-row + per-category sections (featured + grid + horizontal list). Staggered reveal animations on mount.
Weather widget — Client component fetching Xanthi temperature from the open-meteo API. No API key required.
Accessibility — WCAG AA minimum. The "Tyflos" (blind) name made this non-negotiable: strong contrast ratios (≥4.5:1), full keyboard navigation, semantic HTML, meaningful alt text.
Stack
| Layer | Technology | |-------|-----------| | Framework | Next.js 14 (App Router) | | Content | MDX files + gray-matter | | Styling | Tailwind CSS v3 | | Fonts | Playfair Display + Satoshi | | Weather | open-meteo API (no key) | | Deploy | Vercel |
Key decisions
Why MDX not a CMS? Phase 1 required no external subscriptions. The editorial team is technical enough to edit .mdx files and a Sanity integration is planned for Phase 2.
Why static generation? All articles are known at build time. Zero DB latency, free Vercel tier, instant page loads. Incremental static regeneration will be added when real-time content is needed.
Design direction — Dark editorial aesthetic: #0d0d0f background, amber #E8991A accent from the Tyflos Radio logo, Playfair Display for headlines, Satoshi for UI. No generic news-site conventions — the radio energy comes through in movement, rhythm, and warmth.