ProjectsOctober 10, 2025

Mohamed Elbarry
image

Technologies used

Next.js
React
TypeScript
Tailwind CSS
Framer Motion

Overview

Designed and developed a high-performance agency website that delivers a fast, visually engaging experience. The goal was to create a responsive, SEO-optimized platform that represents an agency's brand while demonstrating technical capability using the latest web technologies like Next.js 16 and React 19.

Key Features

  • High-Performance Architecture: Built with Next.js 16 App Router and React 19 for aggressive code splitting, server components, and optimal speed.
  • Modern Design System: Styled with Tailwind CSS v4 for a utility-first approach, featuring dark mode support and a clean, hierarchy-focused aesthetic.
  • Advanced Animations: Integrated Framer Motion and Lenis for smooth scrolling, parallax effects, and scroll-triggered reveals that respect user motion preferences.
  • SEO & Accessibility: Fully optimized with semantic HTML, proper meta tags, Open Graph support, and WCAG-compliant color contrast and keyboard navigation.
  • Optimized Assets: Utilized Next.js Image and Font systems to eliminate layout shifts and ensure efficient loading across all devices.

Technologies Used

  • Next.js 16: App Router, Server Components, Image/Font Optimization.
  • React 19: Concurrent rendering, Server Actions.
  • TypeScript: Full type safety for components and API responses.
  • Tailwind CSS v4: Modern styling engine.
  • Framer Motion: Complex animations and gesture handling.
  • Lenis: Smooth scrolling behavior.

Challenges and Learnings

Focusing on performance from the start proved essential, as did prioritizing accessible design over retrofitting. Working with the latest Next.js features highlighted the importance of understanding server-side rendering nuances for effective implementation.

Outcome

The result is a lightning-fast, visually striking agency website that balances aesthetic appeal with technical excellence, ensuring a premium user experience across all devices.

Immersea — AI-Powered Mobile Immersion & Dual-Caption Language Learning

Mobile-first language learning and immersion platform for iOS & Android built with React Native, Expo, and Supabase. Transforms real-world media into interactive lessons with synchronized dual captions, context-aware AI word sense analysis, and spaced repetition (SRS).
Read case studyView project
cAIlories — AI-Powered Calorie & Nutrition Tracking

Cross-platform (iOS, Android, Web) calorie and nutrition tracking app with AI-powered photo recognition to log meals from a single photo, in-app AI coach, gamification, and subscription monetization.
Read case study
Construction Company - Private Client Media Management

Developed a private web and mobile app for a construction company to help manage on-site media, allowing workers to capture and upload photos and videos with location assignment and access controls.
Read case study
HeyLumin — AI-Powered E-Commerce Search & Conversational Chatbot Platform

Architected and built AI search and conversational support solutions for e-commerce platforms, combining semantic search engine capabilities with context-aware AI chatbot flows, real-time catalog syncing, and multilingual intelligence.
Read case study
HireUp - Freelance Marketplace

A high-performance, full-stack freelance marketplace featuring real-time messaging, secure payments, and role-specific dashboards.
Read case study