← Back to Projects
Nur Al-Iman Website
Islamic content platform with Quran, Azkar, and audio playback. Scores 96/100 on Lighthouse accessibility (mobile) — highest of all four projects. Built RTL-first with active-ayah audio sync and static generation.
noor-al-iman-web.vercel.app/
Nur Al-Iman Website
Next.js
TypeScript
Tailwind CSS
shadcn/ui
Vercel
Project Overview
Nur Al-Iman is a content-heavy Islamic web platform serving Quran, Azkar, and educational articles. All 6,236 Quran ayahs are statically generated at build time (Next.js SSG), resulting in fast initial loads. The audio player syncs highlighted ayahs to playback position using the Web Audio API timeupdate event — frame-accurate without any polling. The RTL layout is built-first, not retrofitted, using logical CSS properties throughout. Lighthouse scores (mobile): Performance 85, Accessibility 96, Best Practices 100, SEO 100.
✨ Key Features
- 📖 Quran pages with Surah & Ayah navigation — 6,236 ayahs, zero layout shift
- 🎧 Audio player for Quran and Azkar — custom controls with active-ayah sync
- 📌 Highlight active Ayah during audio playback — frame-accurate sync via timeupdate events
- 📰 Dynamic Islamic content (Quran, Azkar, Articles) — statically generated at build time
- 🎨 Modern RTL-aware UI with Dark/Light mode — fully bidirectional layout
- ♿ Accessibility — 96/100 Lighthouse score, ARIA live regions, full keyboard navigation
🏆 Why It Matters
Demonstrates three advanced capabilities rarely combined: RTL-first layout engineering, Web Audio API integration with UI sync, and static generation of a large content dataset. A 96/100 accessibility score on an Arabic-language site — the highest across all four projects — shows genuine commitment to inclusive engineering.
Interested in working together?
I'm available for freelance and full-time roles.