
2026 · End-to-end design & development
Luciano's Methods
At-home personal trainer in Tenerife, with type sized for over-60s
- Astro 6
- Preact
- Tailwind CSS 4
- MDX
- Web3Forms
- Base type size
- ≥ 17px
- Target
- WCAG 2.2 AA
- Output
- Static
Inside the site
Screenshots of the live site, at 1440px and 375px.

Desktop · 1440px

Mobile · 375px

Desktop · 1440px

Mobile · 375px

Desktop · 1440px

Mobile · 375px

Desktop · 1440px

Mobile · 375px
Context
A personal trainer in Tenerife who trains at the client’s home and online: strength, functional work, and specific programming for people over 60. No gym, no travel for the client.
That last detail about the audience changed the whole project. A site for people around or past sixty isn’t designed like a standard fitness site.
Approach
- Accessibility as a starting constraint, not a closing audit. Body type from 17px rather than the usual 14–16, touch targets of at least 44×44px on mobile, visible focus on every interactive element, and verified contrast. When part of your audience has presbyopia, type size isn’t an aesthetic preference.
- Against the fitness visual genre. The sector overuses black-with-neon, countdown timers and challenge language. Here the headline says where you train and with whom, and the promise is concrete: at home, personalised, all ages. No transformation figures, no before-and-afters.
- Static Astro with Preact islands only where there’s real interaction. A presentation site with a form doesn’t need to hydrate the whole page.
- Form via Web3Forms, no backend of our own. For an MVP collecting a name, phone number and goal, standing up and maintaining a server would be cost without return.
- Local SEO alias kept separate from the brand. The visible brand is “Luciano’s Methods”, but in Tenerife people search for “método Luciano”. The content structure covers both forms without duplicate pages or contorted copy.
prefers-reduced-motionhonoured on every animation, consistent with the audience.
What I built
- Static Astro architecture with Preact islands and Content Collections
- Design system with an enlarged type scale for comfortable reading
- Method, training and contact pages
- Contact form with validation
- Local SEO with business schema covering the “Método Luciano” variant
- Continuous deployment to Render
Status
Live and reachable. The custom domain metodoluciano.com is pending connection; once it’s pointed, this link moves to that domain. Phase 2 covers bookings and selling sessions and video content.
A note on this work
A personal project, outside the studio: design, development, performance, accessibility, SEO and deployment.