AlMimar AlAraby

AlMimar AlAraby is a bilingual company portfolio for a general contracting business. The app presents the company, project portfolio, partners, certificates, and contact flow in a polished web experience for Arabic and English users.

The project uses React with Vite and TanStack Router, with internationalization through i18next. It also includes interactive 3D/visual elements using Three.js and React Three Fiber, project galleries, PDF certificate viewing, and parallax-style sections.

Core Features

1. Bilingual Experience: English and Arabic translations with direction-aware styling.
2. Company Homepage: Hero sections, brand messaging, featured projects, partners, and contact content.
3. Project Portfolio: Large construction project database with categories, locations, metadata, galleries, and project detail routes.
4. Dynamic Project Routing: Category and project detail routing through TanStack Router.
5. Certificate Viewer: PDF viewing for company certificates and official documents.
6. 3D Brand Elements: Three.js scenes for logo and visual presentation.
7. Contact Integration: EmailJS-powered contact form.
8. Responsive UI: Tailwind CSS layouts with RTL support.

Technologies Used

1. React
2. Vite
3. TanStack Router
4. i18next / react-i18next
5. Tailwind CSS
6. Three.js
7. React Three Fiber
8. React PDF / PDF.js
9. EmailJS
10. Sass

Technical Work

The project data is structured around categories, locations, and metadata such as area, units, stage, cost, scope, owner, developer, designer, consultant, timeline, and start/end dates. This made it possible to render a large project archive without hardcoding every screen.

Routing is handled with TanStack Router. The app includes routes for home, projects, about, certificates, and dynamic category/project detail pages.

The certificate section uses PDF viewer tooling so users can inspect official documents directly inside the site instead of downloading separate files.

UI and UX Focus

The site needed to feel appropriate for a contracting company: visual, credible, and easy to browse. I focused on:

• Clear project cards and detail pages.
• Strong bilingual support.
• Visual galleries for construction work.
• Certificate access for trust and compliance.
• Partner and company sections that support business credibility.

Challenges and Solutions

Large Project Dataset

The portfolio includes many projects across residential, commercial, infrastructure, roads, and healthcare categories. I kept the project data structured and reusable so filtering and detail pages could share one source of truth.

Arabic and English Support

Arabic content requires RTL layout behavior. The project combines translation keys with direction-aware styling utilities so the same interface can serve both languages cleanly.

Rich Media

The app includes images, PDFs, parallax sections, and 3D scenes. I kept these responsibilities separated into components so the landing pages stay maintainable.

Conclusion

AlMimar AlAraby shows my ability to build a content-rich company website with bilingual UX, structured project data, interactive visuals, and document viewing. It combines frontend engineering with business presentation needs for a real contracting company.