Web development
Academia Claroscuro
§ 01 — Thesis
Category Music Academy
Classes, instruments, and faculty organized for a music academy.
We created a site that organizes classes, instruments, and contact in one place.
- PageSpeed Score
- 96–99/100
- mobile 96, desktop 99
- Class Structure
- Classes & faculty
- instruments, classes, and faculty organized
- Digital Presence
- Professional
- from social to own site
§ 02 — The Brief / The Tension
Fig. 02 Case 08
The Challenge
Claroscuro relied on word-of-mouth and had no professional web presence.
The frictions
- Total dependence on word-of-mouth and social media
- No presence in Google searches
- No way to showcase instruments, teachers and services
- Contact limited only to Instagram messages
§ 03 — The Strategy / The Decision
Fig. 03 Plate 03 08
The decision Our Approach
We combined an artistic visual direction with a clear structure for classes, instruments, and contact.
- Research Competition and services analysis
- Design Elegant music-inspired design
- Development Implementation with Astro and optimized assets
§ 04 — The Solution / Responsive Experience
Fig. 04 Plate 04 08
The Solution
We created a site that organizes classes, instruments, and contact in one place.
- Professional website with elegant modern design
- Technical structure prepared for local visibility
- Clear navigation of all instruments and classes
- WhatsApp integration and contact paths
§ 05 — The Work / Visual Spread
Fig. 05Plate 05 08
In frames
A walk through the shipped surface — sections, states, breakpoints.
§ 06 — Technical Proof / Performance Dossier
Fig. 06 Dossier 06 08
Field report
Mobile Lighthouse performance: 96 out of 100
Lighthouse, mobile. Simulated 4G throttle. The number that survives a slow connection — the rest of this page is the receipt.
| Dimension | Mobile |
|---|---|
| Performance | 96 |
| Accessibility | 100 |
| Best Practices | 100 |
| SEO | 100 |
| Speed Index | 0.9s |
Desktop: 99 · 100 · 100 · 100 · 0.5s
- load
- 1.0s
- page weight
- 420KB
- requests
- 22
- ttfb
- 100ms
§ 07 — Project Impact
Fig. 07Dossier 07 08
What it meant
From no professional web presence to an indexable structure for music-class searches in Cancun.
- Service OrganizationInstruments, classes, teachers, and contact gathered into an owned website.owned site
- Direct ContactWhatsApp is integrated as a studio contact path.WhatsApp
- Technical PerformanceThe project metrics record 96/100 on mobile and 99/100 on desktop.96/100 mobile
Scope / What shipped
What shipped.
One build. One team. No handoffs. We stayed accountable.
§ 09 — Related Projects
Fig. 09 · Index 0908
Next reading
More web systems with the same standard.
Other projects built around clarity, trust, and real demand.
Tattoo Studio
MoonInk
Trilingual gallery, services, and direct contact for a Cancun tattoo studio.
Open caseSignal
98–100/100
PageSpeed Score
Image Consulting & Barbershop
Essens
Services, pricing, and WhatsApp contact in one owned presence.
Open caseSignal
100/100
PageSpeed
Real Estate Developer
Cadu Inmobiliaria
Corporate real estate website for company story, developments, credit guidance, and contact paths.
Open caseSignal
25 años
Trajectory
§ 10 — Close / Conversion
Fig. 10 · Close 10 08
Next system
Build a website that turns attention into trust.
Academia Claroscuro shows how a web system can organize message, proof, and contact paths. If you need a digital base with that level of clarity, let's talk.