Bayoumy Co.
A premium, bilingual (Arabic/English) corporate platform built for Mohamed Abdewahab Bayoumy Company.
Core Tech Stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- Framer Motion
Performance
- Static Site Generation (SSG) for sub-second page loads
- Advanced Image Optimization using Next.js Image component
- Code-splitting and Lazy Loading for non-critical assets
- Font optimization via next/font with local storage caching
- Hardware-accelerated animations for smooth 60fps UI
Security
- Production-ready deployment
- Environment variable protection
Key Features
Advanced Internationalization (i18n) with Native Bilingual Support (AR/EN)
SEO-First Localization with dynamic hreflang tags
SSG (Static Site Generation) for 60+ projects and news items
Automated Visual Optimization (AVIF/WebP) with cache-control
Hardware-accelerated animations via Framer Motion
Comprehensive Metadata & Structured Data (JSON-LD) for all routes
Dynamic Sitemap & Robots.xml generation
Security Middleware (CSP, HSTS, X-Frame-Options) for production reliability
Multi-step Career and Supplier applications with Honeypot anti-spam
Intelligent Form Submission Throttling (Rate Limiting)
Resend API integration for reliable corporate email delivery
Dynamic Theming (Gold/Dark/Light modes)
Pixel-Perfect Responsive Design (Mobile/Tablet/Desktop)
Interactive micro-interactions and custom scrollbars
Real-time search and category filtering for construction projects
Parallax effects and smooth scroll behavior
Project Architecture
app/ ├── (routes)/ # Bilingual routes (Home, Projects, Media, About, Contact) ├── api/ # API Routes for form submissions and Resend integration ├── globals.css # Tailwind 4 configuration and global themes ├── layout.tsx # Root layout with fonts, SEO metadata and GA ├── robots.ts # Dynamic robots.txt generation └── sitemap.ts # Dynamic sitemap.xml generation components/ ├── UI/ # Reusable UI components (Navbar, Footer, SectionHeading) ├── Animation/ # Specialized animation components (CustomCursor, Preloader, Parallax) └── Sections/ # Page-specific sections (Hero, About, Media, Contact) context/ # React Contexts (Language, Loading, Theme) public/ # Static assets └── images/ # Optimized project imagery and branding lib/ # Shared utilities and validation logic
Engineering Strategies
- Hybrid Rendering: SSG for content pages with Client-side interactivity
- Edge Middleware: Security headers and route protection
- Dynamic i18n: Client-side language switching with SEO-ready structure
- Optimized Asset Pipeline: Next/Image with AVIF/WebP support
- Component-based Architecture: Highly modular and reusable React components
- Motion-First UX: Seamless transitions and hardware-accelerated animations
- Anti-Spam Security: Honeypot fields and rate-limiting for all forms
Visual Interface
