Loading
Portfolio

Project Details

AGIAL — Corporate Website & CMS

Corporate Website & CMS
Alexandria, Egypt · 2026
Full Stack Engineer (Design to Launch)

AGIAL Engineering & Specialized Works is a specialist engineering contractor. Its work covers dewatering, waterproofing, CFRP structural strengthening, industrial flooring and sports facilities, for main contractors, government bodies and large private developers. The company had no web presence, and its track record was spread across printed catalogues and PDF project lists. I designed and built a bilingual company website with a custom admin panel, so the company's staff can manage services, projects and articles without a developer.

The public site is fully bilingual (English / Arabic, with full RTL) and covers home, about, services, sectors, projects, approvals, articles and contact pages, with scroll-driven animation and a hero built from real project photography. Its centrepiece is a portfolio of 280+ completed jobs that I extracted and structured from the company's PDF track record. Each job can be filtered by sector and shows the general contractor, the owner and the scope.

The admin panel manages services, service groups, projects, articles, homepage features and site-wide copy, in both languages side by side. Changes go live immediately through on-demand revalidation. If the database doesn't respond, the site falls back to bundled content, so pages never break.

I also handled SEO and discoverability: per-page metadata in both languages, hreflang alternates, canonical URLs, a dynamic sitemap and JSON-LD structured data (Organization / GeneralContractor). The site is verified in Google Search Console. Performance and accessibility work (image optimisation, LCP preloading, layout-shift fixes, heading order and touch-target sizes) removed about 250 KB from the homepage. Lighthouse scores are SEO 100 and Accessibility 95. I set up the custom domain, DNS and business email as well.

Key engineering decisions: Next.js is the entire backend, through Server Components and Server Actions, with no separate API service. Bilingual data is stored as side-by-side _en / _ar columns instead of a translations table, which keeps queries simple with exactly two locales. Authorization checks run inside every admin query and upload route instead of relying only on middleware. All dependencies are stable releases: Drizzle over Prisma for a lighter serverless bundle, and NextAuth v4 over the v5 beta.

Project at a Glance

280+ projects structured English / Arabic (RTL) Lighthouse SEO 100 Lighthouse Accessibility 95 ~250 KB cut from homepage Verified in Search Console

Key Capabilities

Bilingual site with full RTL Sector-filterable project portfolio Custom admin panel On-demand revalidation Fallback content if DB is down Editable homepage & site copy Articles & media uploads Enquiry form & queue hreflang, canonical & dynamic sitemap JSON-LD structured data Per-query authorization Domain, DNS & business email

Built With

Next.js 16 (App Router) Server Components Server Actions React 19 TypeScript Tailwind CSS v4 PostgreSQL Supabase Drizzle ORM Auth.js (NextAuth) Supabase Storage Vercel