An interactive portfolio built to be an experience — featuring a real-time AI assistant, 3D WebGL visuals, and a cross-browser optimized UI built for performance on every device.
- Real-time AI chatbot powered by Groq (LLaMA 3.3 70B) for sub-100ms inference
- Context-aware responses built on a structured system prompt covering projects, skills, background, and experience
- Streaming chat interface — responses appear word-by-word for a natural feel
- Fullscreen chat mode with a smooth overlay experience
- Handles conversational queries about my journey, tech stack, and work — no scripted answers
- Custom magnetic cursor system with ripple click effects
- 3D animated orbs rendered via React Three Fiber + Three.js (WebGL)
- Interactive particle background with mouse-reactive physics using Canvas 2D
- Holographic project cards with glossy reflection overlays and sweep animations
- Split timeline for experience and education — responsive column reorder on mobile
- Smooth page scrolling powered by Lenis
- Entrance animations via Framer Motion with scroll-triggered reveals
- Dark/light mode support
- Next.js App Router with server-side rendering
- Lazy loading and code splitting via
React.lazy+Suspense next/dynamicwithssr: falsefor heavy 3D/animation components- Image optimization with
next/image(blur placeholders, responsivesizes) - In-memory project cache (1hr TTL) backed by Supabase PostgreSQL
- 90+ Lighthouse score across all metrics
- IntersectionObserver fallbacks for LinkedIn in-app browser (silent callback swallowing)
getBoundingClientRectsync check for Safari (doesn't fire observer for already-in-viewport elements)- 1.5s timer safety net in case all observer callbacks fail
whileHoverdisabled on touch devices — no tap-triggered animation jumps on iOS- Tested and stable on Safari, Chrome, Firefox, and LinkedIn/social in-app browsers
| Project | Stack | Live |
|---|---|---|
| SentinelStack AI | Next.js, FastAPI, scikit-learn, OpenAI API, Docker, PostgreSQL | — |
| HT Clean Website | Next.js, TypeScript, Tailwind, Supabase, Docker | htclean.ca |
| Empower Orphans V2 | Next.js, TypeScript, Supabase, RBAC, Docker | empowerorphans.com |
| Rami The Barber | Next.js, TypeScript, Tailwind, Supabase, Square | ramithebarber.com |
| School Library System | Python, Django, Supabase, QR/OCR, RBAC | — |
| Personal Home Server | Ubuntu, Docker, Nginx, VPN, Bash, Python | — |
- Next.js 16 (App Router)
- TypeScript
- Tailwind CSS
- Framer Motion
- React Three Fiber / Three.js
- Lenis (smooth scroll)
- Next.js API Routes
- Groq API (LLaMA 3.3 70B — LLM inference)
- Python / FastAPI (SentinelStack AI)
- Supabase (PostgreSQL + object storage)
- Docker & NGINX
- Vercel (portfolio deployment)
- Self-hosted home server (Ubuntu, Let's Encrypt SSL)
AI Chat Flow:
User Input → Chat UI → Next.js API Route → Groq API → Streaming Response → UI Render
Project Data Flow:
Page Load → In-Memory Cache Check → Supabase Query (on miss) → Transform → Render
Key Concepts:
- Prompt engineering with full biographical context
- Streaming UI updates for perceived performance
- Serverless backend with edge-friendly API routes
- Observer-pattern scroll animations with multi-browser fallbacks
CS student at Carleton University specializing in AI & Machine Learning with a focus on Cybersecurity. Upcoming Junior DevOps Specialist co-op at CIRA (Canadian Internet Registration Authority — Canada's .CA domain registry).
Co-President of Empower Orphans Foundation (Carleton chapter) and Youth Program Director at Salam Society.
Mohamed Azab
- Portfolio: https://mohamedazab.dev
- Email: mohazab2006@gmail.com
- LinkedIn: https://www.linkedin.com/in/mohamedazabca/
- GitHub: https://github.com/mohazab2006
- Next.js · Vercel · Groq · Supabase · Framer Motion · React Three Fiber · Lenis · Tailwind CSS
⭐ If you found this interesting, consider giving it a star!