Corporate Marketing Website
AI Cloud Corporate Website
The company's own website, built in Next.js and then rebuilt in Angular 18: 8 pages and 35 components, with scroll animations and instant Arabic/English switching preserved.
Overview
AI Cloud's own corporate website. It was first built in Next.js, then rebuilt in Angular 18 as a set of standalone components: 8 pages and 35 components, keeping the scroll animations and the instant Arabic/English switching.
My role
Frontend developer at AI Cloud. I built the original site and led the migration to Angular.
Key features
- Eight pages: Home, About, Services, Partners, Portfolio, CleanTech, AlSalam International and Contact.
- A custom translation service built on Angular signals: instant Arabic/English switching with RTL/LTR, the chosen language remembered, and no page reload.
- GSAP and ScrollTrigger animations set up and cleaned up with the Angular component lifecycle.
- A contact form connected to the company’s message API.
- Lazy-loaded routes for every page and a responsive layout.
Screens
Technical deep dive
GSAP in the Angular lifecycle
Animations are created in ngAfterViewInit and reverted in ngOnDestroy, so navigating between pages leaves no stray timelines or triggers.
Signal-based translation
One service holds the current language as a signal, saves it in the browser and updates the page language and direction, so every component reacts instantly.
Challenges
CSS custom properties under view encapsulation
Diagnosed and fixed a production issue with CSS custom-property scoping under Angular's view encapsulation.
Build pipeline configuration
Diagnosed and fixed build-pipeline configuration issues around lazy-loaded routes and bundle budgets.