Back to Case Studies
Software Engineering & Technical ConsultingPersonal Brand

Y0ussef.com Portfolio & Insights Engine

Bilingual portfolio website with dynamic MDX engines, theme system, and static export optimization.

Key Performance Metrics

Build Time

4-5 seconds

Static Export

100%

Languages

EN / AR

Security Rating

A+

TimelineOngoing
Team Size1 Developer
Next.jsReactTypeScriptTailwind CSSMDXFramer Motion
Visit Live Platform
Y0ussef.com Portfolio & Insights Engine

Executive Summary

Y0ussef.com is an enterprise-grade bilingual portfolio and technical publication platform built with Next.js 16 static export (output: "export"). It serves as a personal brand showcases for dual engineering credentials (Full-Stack Software Engineer & Project Engineer at Shehabco).

🎯 The Challenge

  • Zero-Server Static Export: Achieving rich dynamic-like content functionality (MDX blog, MDX projects, MDX case studies) without relying on Node.js runtime servers.
  • Bi-directional Localization: Instant switching between English and Arabic with native LTR and RTL design layout consistency.
  • Build Automation: Automating WebP image compression and static sitemap.xml XML generation at build time.

💡 The Solution

  1. Modular MDX Content Architecture: Local .mdx content directories (src/content/) powered by gray-matter and next-mdx-remote.
  2. Path-Based Locale Namespace: Clean separation of /en/* and /ar/* static routes with automated HTML dir and lang attribute configuration.
  3. Automated Pipeline Scripts: Node.js Sharp image converter script and sitemap generator wired into npm run build.

📊 Results

  • A+ Security & Performance Score.
  • 100% Static HTML pre-rendered export.
  • Zero build errors across all static routes.