Personal Portfolio Website

🎯 Project Overview

This portfolio website is a comprehensive showcase of my skills, projects, and experience as a Computer Engineering student. Built with cutting-edge web technologies, it features multilingual support, dark mode, interactive algorithm visualizations, and a fully functional blog system.

Project Type: Full Stack Web Application
Duration: 2025 Status: Live at momili.me
Tech Stack: Next.js 16, TypeScript, Tailwind CSS 4

---

✨ Key Features

🌍 Internationalization (i18n)

• 3 Languages: English, French, and Arabic
• RTL Support: Professional right-to-left layout for Arabic
• Smart Text Handling: English brand names remain LTR in RTL context
• Seamless Switching: Language selector with persistent preferences
• SEO Optimized: Proper hreflang tags for multilingual SEO

🎨 Modern UI/UX

• Dark Mode: Smooth theme switching with next-themes
• Responsive Design: Mobile-first approach, works on all devices
• Smooth Animations: Framer Motion for delightful interactions
• Accessibility: WCAG 2.1 compliant with keyboard navigation
• Skip to Content: Quick navigation for screen readers

🎮 Interactive Features

• Tic-Tac-Toe Game: Unbeatable AI using Minimax algorithm
• Algorithm Visualizers: Coming soon (Pathfinding, Sorting)
• Lazy Loading: Optimized performance with dynamic imports
• Real-time Validation: Client-side form validation

📝 Blog System

• MDX Support: Write blog posts with JSX components
• Frontmatter: Metadata for posts (title, date, tags, author)
• Syntax Highlighting: Code blocks with proper formatting
• Tag System: Categorize and filter posts
• Reading Time: Automatic calculation

📧 Contact System

• Email Integration: Resend API for reliable email delivery
• Rate Limiting: 3 requests per 5 minutes per IP
• Form Validation: Client and server-side validation
• Error Handling: User-friendly error messages
• Success Feedback: Clear confirmation of submission

🔍 SEO & Performance

• Dynamic Sitemap: Auto-generated XML sitemap
• Robots.txt: Search engine crawling configuration
• Structured Data: JSON-LD for rich search results
• Meta Tags: Open Graph and Twitter Card support
• Lighthouse Score: 95+ on all metrics

---

🏗️ Technical Architecture

Project Structure

myportfolio/
├── app/                          # Next.js 16 App Router
│   ├── [locale]/                 # Internationalized routes
│   ├── about/                    # About page
│   ├── project/                  # Projects listing
│   │   └── [slug]/              # Individual project pages
│   ├── blog/                     # Blog listing
│   │   └── [slug]/              # Individual blog posts
│   ├── games/                    # Interactive games
│   │   └── tictactoe/           # Tic-Tac-Toe game
│   ├── contact/                  # Contact form
│   ├── components/               # React components
│   ├── actions/                  # Server actions
│   ├── dictionaries/             # i18n translations
│   ├── layout.tsx                # Root layout
│   ├── page.tsx                  # Homepage
│   ├── error.tsx                 # Error boundary
│   ├── not-found.tsx             # 404 page
│   ├── sitemap.ts                # Dynamic sitemap
│   └── robots.ts                 # Robots.txt
│
├── content/                      # MDX content
│   ├── blog/                     # Blog posts
│   └── projects/                 # Project case studies
│
├── lib/                          # Utilities
│   ├── mdx.ts                    # MDX parser
│   ├── projects.ts               # Projects parser
│   ├── rateLimit.ts              # Rate limiting
│   └── resend.ts                 # Email client
│
├── public/                       # Static assets
│   ├── logo.svg                  # Brand logo
│   └── profile.webp              # Profile image
│
└── tests/                        # E2E tests
    ├── home.spec.ts
    ├── navigation.spec.ts
    ├── contact.spec.ts
    └── games.spec.ts

Technology Stack

Frontend:

• Next.js 16: React framework with App Router
• React 19: Latest React with Server Components
• TypeScript: Type-safe development
• Tailwind CSS 4: Utility-first styling with CSS variables
• next-themes: Dark mode implementation
• react-i18next: Internationalization

Backend:

• Next.js Server Actions: Type-safe server functions
• Resend: Email API for contact form
• Rate Limiting: In-memory rate limiter

Content:

• MDX: Markdown with JSX components
• gray-matter: Frontmatter parsing
• next-mdx-remote: Server-side MDX rendering

Testing:

• Playwright: E2E testing framework
• TypeScript: Type checking

Deployment:

• Vercel: Serverless deployment platform
• Git: Version control

---

🎓 What I Learned

Next.js 16 & React 19:

• App Router and file-based routing
• Server Components vs Client Components
• Server Actions for form handling
• Metadata API for SEO
• Dynamic route generation

TypeScript:

• Advanced type definitions
• Generic components
• Type-safe API calls
• Interface design

Tailwind CSS 4:

• Utility-first CSS approach
• Custom theme configuration
• Dark mode implementation
• RTL/LTR directional styling
• Responsive design patterns

Internationalization:

• i18n best practices
• RTL layout challenges
• Content translation workflows
• SEO for multilingual sites

Performance Optimization:

• Code splitting and lazy loading
• Image optimization
• Font loading strategies
• Bundle size optimization

Testing:

• E2E testing with Playwright
• Test-driven development
• Accessibility testing
• Cross-browser compatibility

---

---

🏆 Conclusion

Building this portfolio website was an incredible learning experience that pushed me to master modern web development technologies. From implementing complex features like RTL support and AI algorithms to optimizing for performance and SEO, every aspect of this project taught me valuable lessons.

This website is not just a portfolio—it's a testament to my growth as a developer and my commitment to building high-quality, user-centric applications.

This portfolio represents my journey as a Computer Engineering student and showcases my passion for creating beautiful, functional, and accessible web applications.