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.
• Unified AI Content Generation System for 7 Entity Types: Designing a single AIContentGenerator class that flexibly supports all content types — paired with a shared HasAIGenerationAction trait added to every CreateRecord page in Filament without code duplication, supporting two switchable providers (free Groq and paid OpenAI) from a single modal.
• Bilingual AI Contact Reply System: Building a complete async pipeline for processing contact messages — language detection via Unicode Arabic ratio, quality checking to filter spam, selecting the right AI model per language (allam-2-7b for Arabic), and sending two professional HTML emails (to visitor and admin) with full RTL/LTR support.

• 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.
• AIContentGenerator + HasAIGenerationAction (Groq + OpenAI): A unified class that accepts entity type and a brief idea, routes the request to the selected provider — Groq (llama-3.3-70b free) or OpenAI (paid) — and returns pre-filled fields ready for review. The trait adds the full AI modal to any CreateRecord page in a single line.
• ProcessContactMessage Job + Full AI Reply Pipeline: A Job running via Laravel Queue (database driver) → MessageQualityChecker evaluates the message → language detection → ContactReplyGenerator routes to the correct model (allam-2-7b for Arabic) → sends ContactConfirmationMail to visitor + ContactNotificationMail to admin — with a static fallback if AI fails.

• 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, content generation for 7 entity types via Groq (free), and a bilingual AI-powered contact reply system with language detection and spam filtering.
• 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

AI Content Generation System (CMS)

A complete AI content generation system was built directly inside the Filament admin panel — supporting 7 entity types: Projects, Blog Posts, Services, their categories, Testimonials, and Site Settings.

• AIContentGenerator: A unified service class covering all entity types — generates translatable fields (AR+EN), scalar fields, and cover images in a single call.
• HasAIGenerationAction trait: A shared trait added to all 7 CreateRecord pages in Filament — displays a professional modal with fields for: title, brief idea, AI provider selector, and image generation toggle.
• Two supported providers: Groq (free — llama-3.3-70b-versatile) and OpenAI (paid) — switchable directly from the modal.
• Seamless integration: Results auto-fill the form — the user reviews and edits before saving.

AI-Powered Contact Form Reply System

When a visitor submits a message via the contact form, the entire request is processed asynchronously via Laravel Queue in automated steps:

• MessageQualityChecker: Message quality check — detects Lorem Ipsum, spam, and random text — with a score from 0 to 100 and a label: clean / suspicious / spam.
• Language Detection: Automatically detects message language (Arabic / English) based on Unicode Arabic character ratio.
• ContactReplyGenerator: Generates a professional reply in the appropriate language — allam-2-7b (Groq) for Arabic, llama-3.3-70b-versatile for English — with a static fallback if AI fails.
• Visitor Confirmation Email: A professional bilingual HTML email (RTL/LTR) containing the AI reply and a copy of the original message.
• Admin Notification Email: An email containing full message details, quality check result, the reply sent, and technical info (IP, User Agent, Page URL).
• Filament Management: Status column with filtering, and actions: Generate AI Reply, Resend Reply, Mark as Spam, and Archive.