FRAME is an editorial skin for Video.js 10, and the short film journal around it. The picture is the page. Controls stay white on ink, sit in one bar, and leave when you stop reaching for them. The page’s accent colour is kept for its own buttons.
It is a real Video.js 10 skin, restyled from Scaffold. Play, volume, timeline, captions, settings, picture-in-picture, keyboard shortcuts, gestures, the error dialog, and the screen-reader announcer are Video.js components. Ours is the skin: an outline icon set, a bar playhead, chapter gaps, a storyboard preview that names the chapter, and menus set like a contents page.
One player runs the journal. A WebVTT chapters track drives the timeline, the chapter label, and the list on the page. Another title loads the next Mux asset into that same player. Tears of Steel streams from our own Mux asset, with official subtitles, Mux posters and storyboards, and real renditions in settings. Chromecast uses the Google Cast extension; AirPlay is there in Safari.
2
250
GM Rides: a transport booking platform for the Kenyan market that I built and deployed end to end. It covers one way, round trip and airport transfer search, dynamic fares, seat selection, M-Pesa and Stripe payments, multi-currency pricing, an AI chatbot and an admin dashboard. Next.js and Laravel 11, live at gmrides.net (http://gmrides.net).
1
117
🚀 About The Project
Developed a premium front-end web experience inspired by Tracksmith, a high-performance sportswear brand known for minimalist design, strong storytelling, and luxury digital experience.
The goal was to build a modern, conversion-focused interface that combines premium branding, seamless user experience, and responsive performance across all devices.
💻 What I Built
✅ Premium landing page architecture
✅ Responsive UI optimized for desktop, tablet, and mobile
✅ Product-focused sections with clean visual hierarchy
✅ Conversion-driven user flow and CTA positioning
✅ Smooth navigation with modern interface structure
✅ Premium typography, spacing, and visual consistency
🛠 Tech Stack & Skills
🌐 Frontend Development
HTML5 • CSS3 • JavaScript
📱 Responsive Engineering
Mobile-First Design • Cross-Browser Optimization
🎨 UI/UX Design
User Experience • Visual Hierarchy • Layout Design
⚡ Performance & Optimization
Landing Page Optimization • Conversion-Focused UI
🧠 Brand Implementation
Premium Brand Experience • Digital Storytelling • Design Consistency
✨ Final Result
Successfully delivered a clean, scalable, and premium web experience focused on performance, usability, and modern front-end design standards.
This project reflects my expertise in building high-quality digital products that combine strong branding with exceptional user experience.
🔗 Reference: https://tracksmith.com
1
2
98
