Pavel Mustelier

Pavel Mustelier is the official website of Cuban writer Pavel R. Mustelier Zamora, author of the epic fantasy cycle "Sonrisas de Acero." 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 the saga's title, a quote, and a double call to action linking to the trilogy and to the world of Ansea; a "The Trilogy" page presenting the three volumes —Haslagán (published), Cierzo Gris (coming soon), and the final volume (being written)— with covers per edition, year, publishing imprint, and synopsis; individual book pages with bibliographic details, editions (Letras Cubanas in Havana and Ingentis in Madrid), ISBN, and purchase links; an "Ansea" section conceived as a dramatis personae, a gallery of believable and complex characters from the saga's world; an "Author" page with biography, profile, and the writer's career; and a contact page. The visual identity follows an editorial, pulp-inspired art direction —white paper, black ink, and a blood-red accent, with a carved display typeface (Cinzel) and a reading serif (Crimson Pro)— reinforced with entrance animations, marquees featuring the chapter names, and scroll reveals. The whole structure is built for SEO, with Open Graph metadata, per-volume data modeled as typed data, and server rendering.


Project screenshot 1
  • Project screenshot 1
  • Project screenshot 2
  • Project screenshot 3
  • Project screenshot 4

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 (paper, ink, and blood palette). Animations and interactions are resolved with Motion (entrance transitions, scroll reveals, and infinite marquees with the chapter names), combined with utilities like clsx and tailwind-merge to compose classes safely. Typography is loaded optimized with next/font (Cinzel and Crimson Pro), and the book catalog, editions, quotes, and characters are modeled as typed data. The architecture is organized into cohesive, reusable components by section (Hero, TrilogyTeaser, WorldTeaser, AuthorTeaser, Testimonials, QuoteBand) with 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, editions, quotes, and characters— 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. Book purchases are resolved by linking directly to the publishers (Ingentis) and Amazon, and contact through direct channels (Instagram and WhatsApp) exposed in the interface, which reduces infrastructure costs, simplifies deployment, and maximizes site speed and availability.

  • none


Visit site
Visit site