Roshay Entertainment
A personal brand website for Roshay — Puerto Rican hip-hop/salsa/bachata performer and Latin dance instructor. A single-page site built with vanilla HTML5, CSS, and JavaScript. Deployed at roshayentertainment.com.
What It Is
A bold, Caribbean-inspired personal brand site that serves two audiences: event organizers looking to book a performer, and students looking for Latin dance instruction (group classes, private lessons, corporate events).
Technical Profile
- Single file — 89KB index.html (vanilla HTML5 + CSS + JS)
- Zero dependencies — No build tools, no npm, no framework
- Sticky nav — Blur backdrop on scroll
- Scroll reveal animations — CSS + JS intersection observer
Site Sections
Tech Stack
Design & Typography
A Caribbean-inspired visual system built around gold, deep red, and bold condensed typography that channels Roshay's Puerto Rican heritage and performance energy.
Brand Colors
#FFC142
#EF0000
#1a1a1a (backgrounds)
Text & accents
Typography Stack
| Font Usage | ||
|---|---|---|
| Barlow Condensed | Headlines, hero text, section titles | Bold, uppercase, impact feel |
| DM Sans | Body text, descriptions, UI elements | Clean geometric sans-serif |
| Dancing Script | Accent text, decorative quotes | Cursive flair for Latin energy |
Key Visual Features
- Sticky navigation — Blur backdrop filter activates on scroll, logo stays fixed
- Scroll reveal — Elements animate in via Intersection Observer as user scrolls down
- Hero section — Large background image with gradient overlay, bold headline, and CTA button
- Section dividers — Gold accent lines and decorative borders between major sections
Entertainment Section
Showcases Roshay's music career — hip-hop, salsa, and bachata performance. Designed to convince event organizers to book him.
Section Contents
-
Performance Showcase Photos and descriptions of live performances — hip-hop sets, salsa/bachata shows, event hosting
-
Genre Versatility Highlights range across hip-hop, salsa, and bachata — appeals to diverse event types
-
YouTube Video Embed Embedded YouTube player with performance footage — social proof of talent
-
Booking CTA Clear call-to-action for event organizers to reach out and book Roshay
Instructor Section
The second audience: students looking for Latin dance instruction. Covers group classes, private lessons, and corporate events.
Service Offerings
| Dance Instruction Types | |
|---|---|
| Group Classes | Regularly scheduled salsa and bachata classes. Open to all levels. Social atmosphere for learning and practice. |
| Private Lessons | One-on-one or couples instruction. Personalized curriculum, flexible scheduling. Ideal for wedding prep or rapid skill-building. |
| Corporate Events | Team-building Latin dance workshops for companies. Custom packages for group sizes and skill levels. |
Responsive Design
The site is fully responsive — optimized for desktop, tablet, and mobile. All built with vanilla CSS media queries, no framework required.
Responsive Approach
| Breakpoint Strategy | |
|---|---|
| Desktop (1200px+) | Full layout with side-by-side sections, large hero imagery, and multi-column grids |
| Tablet (768-1199px) | Stacked sections with adjusted padding. Navigation collapses to hamburger menu. |
| Mobile (0-767px) | Single-column flow, touch-friendly tap targets, full-width images, condensed nav |
Performance Notes
- 89KB total — Single HTML file contains all CSS and JS inline
- Zero network requests for assets — No external CSS/JS frameworks to load
- Google Fonts — Only external dependency (Barlow Condensed, DM Sans, Dancing Script)
- Intersection Observer — Efficient scroll-triggered animations without scroll event listeners