Case StudyCustomer Hosting - Production
Mr. Ali Elgabry Portfolio
A professional portfolio for Mr. Ali Elgabry, an Arabic language expert, built around a Modern Majlis visual identity that blends Arabic heritage with modern digital polish. It features a fully responsive royal green and gold design, smooth animations, and a content-focused learning experience.
Core Tech Stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- Framer Motion
Performance
- Static Site Generation (SSG) for excellent speed.
- Automatic image optimization and compression.
- Reduced JavaScript usage in non-interactive areas.
- Tailwind CSS 4 used to keep the final CSS lightweight.
Security
- Next.js security standards followed.
- Contact and social links protected.
- HTTPS support in production deployment.
Key Features
Modern responsive design across mobile, tablet, and desktop.
Smooth animated interactions using Motion.
Full Arabic RTL support.
Detailed sections for educational services and offerings.
Student testimonials and feedback section.
Clear pricing tables for learning packages.
WhatsApp integration for direct contact.
Fast loading with modern Next.js techniques.
Smart and easy-to-use navigation bar.
Project Architecture
src/ |-- app/ # Main routes and RTL layout | |-- components/ # UI components (Navbar, Hero, Pricing, etc.) | |-- layout.tsx # Global layout and RTL support | |-- page.tsx # Home page | `-- globals.css # Tailwind CSS styles |-- public/ | |-- images/ # Teacher photos, logo, and screenshots | `-- icons/ # Browser icons |-- package.json # Project dependencies and scripts `-- tsconfig.json # TypeScript configuration
Engineering Strategies
- Client Components used only for interactions and animations.
- Modern Majlis-inspired design balancing heritage and modernity.
- Content layout optimized for comfortable user experience.
- Accessibility principles applied for broader content access.
- State management handled with core React Hooks.
Visual Interface
