Yoss

Yoss is the official website of Cuban writer José Miguel Sánchez Gómez (Yoss), an internationally awarded science fiction and fantasy author. The project is a personal-brand editorial website, built as a high-performance static site, that articulates several independent yet coordinated sections: a hero homepage with his name, tagline, and a double call to action; a literary advisory services section detailing copyediting, dramaturgical structuring, short-story reordering, novelistic pacing correction, character reinforcement, and final editing; a body-of-work catalog with more than forty books filterable by genre (science fiction, fantasy, horror, young adult, essay, and anthology), where each title shows cover, year, award, and synopsis; an "About" page with biography, awards, and animated statistics; an "Other life" section dedicated to his role as vocalist of the heavy metal band Tenaz and martial arts practitioner; a press page with selected interviews and reviews (LA Review of Books, Restless Books, Remezcla, Words Without Borders, La Jiribilla); and a contact page with a project form. The visual identity follows a rocker, pulp-inspired art direction —deep blacks, blood red, and electric cyan accents, with a carved display typeface (Cinzel), a reading serif (Lora), and a humanist sans (Inter)— reinforced with entrance animations, marquees, particles, and number tickers. The whole structure is built for SEO, with Open Graph metadata, structured data, and server rendering.


Project screenshot 1
  • Project screenshot 1
  • Project screenshot 2
  • Project screenshot 3
  • Project screenshot 4
  • Project screenshot 5
  • Project screenshot 6

Technologies used:

Front End:

Modern stack oriented towards performance and SEO. Next.js 16 with App Router and React 19 Server Components reduces JavaScript shipped to the client and allows server rendering of a mostly static site, improving Core Web Vitals and indexing. TypeScript guarantees an end-to-end typed surface, and Tailwind CSS 4 centralizes the design system with custom tokens (ink, bone, blood, and teal palette). Animations and interactions are resolved with Motion (entrance transitions, infinite marquees, number tickers, and particle effects), combined with utilities like clsx and tailwind-merge to compose classes safely. Typography is loaded optimized with next/font (Cinzel, Lora, and Inter), and the book catalog is modeled as typed data, filterable by genre on the client. The architecture is organized into cohesive components by section (Hero, Services, Books, About, OtraVida, Press, Contact) with reusable teaser pages on the homepage.

  • React

  • TypeScript

  • Next.js

  • Tailwind

Back End:

This project has no backend. Being a static editorial site, all information —biography, book catalog, awards, press, and services— is modeled as typed data within the repository itself and served as prerendered HTML and static assets from Vercel, eliminating the need for a server, database, or API. Contact is resolved through direct channels (email and Instagram) exposed in the interface, which reduces infrastructure costs, simplifies deployment, and maximizes site speed and availability.

  • none


Visit site
Visit site