engmoh.com — Personal Portfolio & Digital Presence Platform

• Decoupled Architecture Between Two Independent Systems: Designing a reliable and secure communication layer between the Next.js Frontend and Laravel Backend that guarantees content updates in seconds while preserving Cache performance that only breaks when truly necessary — solved by the ISR + Webhook + On-Demand Revalidation system.
• Bilingual Sync Across Two Rendering Layers (Server + Client): Ensuring language consistency between Server Components (reading locale from cookie) and Client Components (listening to custom locale events) — without any Flash of Wrong Language or unnecessary re-renders.
• SEO Across 15+ Dynamic Pages: Building an SEO engine that generates unique metadata for every service, project, and blog page from the database — including Canonical URLs, Open Graph, and JSON-LD — without any duplication or duplicate content.
• Multi-Tier Cache Performance: Designing a caching strategy combining Browser Cache + Next.js unstable_cache + Module-level Client Cache that reduces API calls by 80%+ without sacrificing content freshness.
• Unified Image Generation for 15 Services: Creating 45 images (3 sizes × 15 services) with consistent design — unique gradient colors per service, typography, icon circles, and footer — without a designer or design tool.
• openai-php/laravel Integration Inside Filament Admin Panel: Building a seamless voice recording experience inside the Admin Panel — uploading audio, sending to Whisper API, processing text with GPT-4o-mini, and displaying the result instantly — all within a unified Filament form component.

• ISR + On-Demand Revalidation via Webhook: Every change in the Filament Admin Panel triggers a Webhook sending a POST to Next.js /api/revalidate with Secret Authentication — Next.js rebuilds only affected pages via revalidatePath() + revalidateTag() — content updates within seconds with no full rebuild or downtime.
• Custom i18n System (Server + Client Sync): A custom translation system using i18n.js, useTranslation.js hook, and a Custom Event Dispatcher that synchronizes language between the server-side cookie and client-side state without any Flash of Wrong Language or unnecessary page reloads.
• Python/Pillow Automated Image Pipeline: A script that reads the services list and generates 3 images per service (800×500 card, 1920×600 cover, 1200×630 og) with custom gradient, typography, decorative circles, and footer — 45 JPEG images at quality 92 in minutes.
• Filament v5 + Spatie Translatable: Every translatable field appears in the Admin Panel as two fields (AR + EN) in the same form — smooth bilingual content management for 15 services with complete per-service SEO fields.
• Security Headers + RBAC + 2FA: X-Content-Type-Options + X-Frame-Options + Referrer-Policy headers at the Next.js level, Filament Shield for granular role-based permissions, 2FA on the admin panel, and Secret-based Webhook Authentication.
• AI Voice Notes Pipeline (Whisper + GPT-4o-mini): NoteVoiceUploadController receives audio → sends to Whisper API → passes transcript to GPT-4o-mini with a professional engineering prompt → returns a structured, summarized note instantly.

• A next-generation personal digital platform that accurately reflects the level of a Senior Software Architect with 7+ years of experience.
• 15 services across 7 categories — each with professional AR/EN content, complete SEO, and 3-size image set.
• A fully integrated Headless CMS system — any content update from the admin panel reflects on the live site within seconds.
• Excellent Core Web Vitals — SSG + ISR + AVIF Images + Self-hosted Fonts.
• Complete structural SEO: Dynamic Metadata + JSON-LD + Sitemap + Canonical URLs + Robots.txt.
• Full bilingual AR/EN with complete RTL support — targeting both Arabic and global markets simultaneously.
• Proven, functional AI integration: Voice Notes via Whisper + GPT-4o-mini, and full automation for image and content generation.
• 35–40% reduction in development time through daily AI-Assisted Development methodology.
• Technical architecture ready to scale from 10K to 1M users/day by adding Redis and CDN alone — no rewrite needed.

Why This Project?

This project emerged from a genuine strategic question: "How do I build a digital presence that works full-time to market my capabilities in a way that convinces developers, clients, and employers simultaneously?"

The answer was never a simple HTML page or an off-the-shelf template — it was building a complete system: a powerful backend, a high-performance frontend, a professional CMS, a structural SEO engine, and AI deeply embedded into the workflow.

Full Technical Architecture

Frontend (site.engmoh.com): Next.js 15 with modern App Router, Server Components by default, ISR with On-Demand Revalidation via Laravel Webhooks, multi-tier caching (Browser Cache + Next.js Data Cache + Module-level Client Cache), automatic AVIF/WebP Image Optimization, and zero-layout-shift Font Optimization.

Backend API (cp.engmoh.com): Laravel 13 with a clean REST API architecture, Filament v5 for complete content management, Spatie Translatable storing bilingual content as JSON, 15 services across 7 categories each with full per-service SEO fields, and a comprehensive Site Settings system fully controllable from the admin panel.

AI Integration: openai-php/laravel for converting voice notes to text via Whisper API then processing them with GPT-4o-mini — enabling intelligent voice-based note creation directly from the admin panel.

Structural SEO System

• Dynamic Metadata per page — generated from the database at build/request time
• Open Graph and Twitter Cards for every service, article, and project
• JSON-LD Structured Data (Person + WebSite + BlogPosting schemas)
• Dynamic sitemap.xml fetched from API — covering 15 services + projects + blog posts
• Intelligent robots.txt blocking Light Theme variants to prevent Duplicate Content
• Canonical URLs preventing content duplication between Arabic and English versions
• Breadcrumbs with Schema Markup on every inner page

AI System Architecture

• AI Voice Notes: Voice recording directly from the admin panel — Whisper API transcribes to text, GPT-4o-mini organizes and summarizes intelligently.
• AI-Assisted Development: Daily use of Claude Code and GitHub Copilot for writing, reviewing, and refactoring code — achieving 35–40% reduction in development time.
• AI Content Generation: Professional Prompt Engineering to generate bilingual (AR+EN) marketing and technical content for all 15 services.
• AI SEO Optimization: Generating Meta Titles, Descriptions, and Keywords for every page targeting specific long-tail keywords across both languages.
• AI Image Generation Automation: Python/Pillow script generating service images (3 sizes: card/cover/og) with a unified gradient design system — automated for all 15 services without manual design work.

Content Management System

Filament v5 Admin Panel enables complete self-management:

• Add / edit / delete services with full SEO fields and 3-size image management
• Full management of projects, blog posts, testimonials, and contact messages
• Complete site settings control (texts, social links, GTM ID, section visibility)
• Toggle any service or section on/off directly from the dashboard
• AI-powered voice notes from inside the admin panel
• Automatic Revalidation — any change updates the live site within seconds