Back to Projects
Laboratoire AL AMAL
Period2025
TeamSolo developer
Contribution100%
RoleWeb developer: designed UI/UX, built complete production website, and implemented trilingual localization for a medical analysis laboratory.
The official website for Laboratoire AL AMAL, an accredited medical analysis laboratory located in Meknes, Morocco. Engineered from scratch without framework overhead to maximize loading speed and accessibility on mobile devices. Features comprehensive medical test catalogs, home sampling inquiries, interactive Google Maps location integration, and full Arabic/French/English localization.
HTML5CSS3JavaScriptSchema.org JSON-LDRTL / LocalizationWeb Performance
Key Contributions & Results
Key Contributions
- Engineered a lightweight, dependency-free architecture using semantic HTML5, modern CSS3 variables, and vanilla JavaScript for minimal bundle size and near-instant load times.
- Implemented comprehensive trilingual localization across French (index.html), English (en.html), and native Arabic (ar.html) with complete Right-To-Left (RTL) layout switching and typography.
- Constructed an organized clinical catalog detailing specialized medical analysis departments including Hematology, Biochemistry, Immunology, Microbiology, and Hormonology.
- Built a patient contact and home blood sampling request flow with integrated interactive Google Maps directions.
- Integrated Schema.org MedicalBusiness structured JSON-LD metadata and Open Graph tags for high local search visibility.
Results
- Delivered a fast, professional digital presence for the laboratory in Meknes, enabling patients to easily consult test requirements and request home sample collection.
- Maintained 100/100 performance and accessibility scores with sub-second page loads on 3G/4G mobile connections.
Troubleshooting
Bidirectional Layout Switching & Dynamic Viewport Rendering for Multilingual Arabic RTL
Problem Discovery
- Standard LTR CSS positioning broke when switching to the Arabic version (ar.html). Absolute positioning on mobile navigation, asymmetric hero radial gradients, and inline margin/padding caused horizontal overflow and visual misalignment in RTL mode.
Solution Process
- Implemented modern CSS logical properties (margin-inline, padding-inline, border-inline-start/end) to support automatic flow reversal.
- Mirrored hero decorative radial gradients using [dir='rtl'] .hero selectors to anchor visual balance appropriately.
- Adjusted mobile off-canvas drawer transforms from translateX(110%) to translateX(-110%) to properly anchor the slide-in menu to the right viewport edge.
Result
- Seamless layout parity across English, French, and Arabic with zero CSS regressions or horizontal scrolling defects.
💡Lessons Learned
- Building for internationalization from the start using CSS logical properties avoids expensive layout refactors when adding RTL language support.