Salih Bawarith
A bilingual personal-brand site for Salih Bawarith, a Riyadh F&B operations manager, specialty-coffee expert and Arabic calligrapher. His career reads as a coffee “roast curve”, with galleries for his calligraphy and events. I designed and built it in vanilla HTML, CSS and JavaScript; it shipped in 2026.
- HTML
- CSS
- JavaScript
- RTL
- Bilingual
- SEO
- GitHub Pages
- My part
- Concept, design and build
- When
- 2026
- Status
- Live
Overview
A bilingual (Arabic & English, RTL) personal-brand portfolio for Salih Bawarith: a Riyadh-based F&B operations manager, specialty-coffee expert and Arabic calligrapher. The site frames his career as a coffee “roast curve”: a scroll-drawn profile with braided lanes for the several roles he ran at once, alongside galleries of his calligraphy and his work & events.
My role
I designed and developed the whole site: the “roast-curve” concept, the bilingual RTL layout and the galleries. All content lives in one JavaScript data file, so Salih can update his timeline, photos and calligraphy without touching HTML.
DecisionAll content lives in one JavaScript data file, so Salih updates his timeline and galleries without touching HTML.
What shipped
- A “roast-curve” career timeline: a scroll-drawn profile with braided lanes for concurrent roles.
- Fully bilingual Arabic/English with a language toggle and complete RTL mirroring.
- A calligraphy gallery and a work & events album gallery: grid + lightbox, with on-demand image and video loading.
- Category filters and “show more” pagination so the galleries scale.
- A data-driven architecture: all content in one JS file, so it updates without editing HTML.
- Built from scratch in vanilla HTML/CSS/JS with no build step, plus SEO and a custom domain on GitHub Pages.
UX decisions
- Framing the career as a “roast curve” instead of a bullet list: you read momentum rising over time, not just dates.
- Braided lanes so concurrent roles are legible at a glance rather than flattened into one column.
- Galleries load images and video posters on demand, with “show more” paging, so a large archive stays fast on mobile.
- Every screenshot and photo opens in a full-screen lightbox you can swipe through.
- Keyboard- and screen-reader-accessible (focus management, Escape to close, ARIA labels), with all motion gated behind
prefers-reduced-motion.
Analytics
Umami (privacy-friendly and cookieless) with a custom tracking layer I wrote: named events for every click and for scroll depth, plus a visibility “heartbeat” that sends periodic pageviews so a single-page site still reports real visit duration. Every call is guarded, so a blocked or slow tracker never breaks the page.
Worth a closer look
The idea I like most is the “roast curve”: reading a career like a coffee roast profile, with time along the bottom and momentum rising, and braided lanes showing the roles that overlapped. It turns a plain CV into a story, in two languages, with zero framework or build step.
DecisionBraided lanes keep the roles he ran at the same time legible, instead of flattening them into one column.
Screens
