Tifosi Club — Tifosi Club
Context
Tifosi Club runs five business lines at once — apparel, ticketing, events, university team kits and student trips — with nowhere to explain any of them. The whole operation lived on Instagram and a street-team network: every sale depended on someone answering a DM, and the trip information was buried in agency dossiers running to over a thousand pages, a format no student was ever going to open.
The brief wasn't just to exist online. It was to build a site the team could run themselves without a developer on call: publish a party on Tuesday, lock a date on Thursday, and switch off an entire section when the season ends.
Result A live, self-owned site where the team publishes events, edits the entire homepage and switches sections on or off without touching a line of code — with the hero image served at 120 KB on mobile from a 56 MB original, and content that stays readable with JavaScript disabled.
- Project
- Tifosi Club
- Client
- Tifosi Club
- Year
- My role
- End-to-end design and development, from visual direction to production code. Defined the visual system from a client-supplied reference, pulling the palette straight from their logo SVG rather than approximating it, so the brand never clashed with its own background. Built the WordPress theme from scratch — no page builder, no starter template: 26 PHP files, hand-written stylesheet, dependency-free JavaScript. Read all three trip dossiers and restructured them into an interactive page per destination, keeping the data strictly separated and refusing to invent the prices the PDFs left open. Wrote two bespoke admin screens: an event configurator with drag-to-reorder and live card preview, and a page on/off switch that also removes the page from the nav and the homepage. Self-hosted the typefaces to avoid the Google Fonts CDN, which passes visitor IPs to a third party and fails GDPR in the EU. Handled accessibility and performance: 44 px touch targets, WCAG AA contrast, responsive WebP with JPEG fallback, and motion collapsed under prefers-reduced-motion. Iterated on feedback from the client and their travel partner, including a substantive fix once they spotted that the activity-pack prices were reading as the full trip price.
- Stack
- WordPress (tema a medida, sin maquetador) · PHP 8 · CSS (custom properties, Grid, clamp, container-aware) · JavaScript (sin dependencias) · IntersectionObserver · WP Customizer API · Custom Post Types y metadatos · WP Settings API y admin-post · jQuery UI Sortable · Tipografías auto-hospedadas (WOFF2) · WebP con respaldo JPEG
