Back to Portfolio

Personal Portfolio & Infinity Team Platform

Web Development• 2025

A production-grade React 19 + Vite 7 single-page application serving as a professional portfolio and the Infinity Team educational hub — engineered with route-level code splitting, dynamic SEO via react-helmet-async, a global Error Boundary, Firebase-ready architecture, and backendless contact forms through EmailJS.

Live Demo GitHub Repo
Personal Portfolio & Infinity Team Platform

The Problem

Developers and educators need a single platform that is fast, SEO-friendly, resilient to errors, and maintainable — while serving two distinct audiences: professional recruiters browsing a portfolio and university students accessing educational resources. Generic templates fall short on performance engineering (no code splitting, global asset loading), dynamic per-page SEO, and resilient error handling, making them unsuitable for a production-grade personal brand site.

Problem illustration

The Solution

Built as a static-first React 19 SPA with Vite 7, the platform serves both a professional portfolio and the Infinity Team educational hub from a single codebase. All API secrets are isolated in .env (never committed), routes are split into per-page chunks with React.lazy + Suspense, and a shared <SEO /> component powered by react-helmet-async sets accurate title, description, Open Graph, and Twitter meta on every route. A global Error Boundary prevents blank-screen crashes, and a custom 404 page handles missing project or course IDs gracefully. Contact and feedback are handled backendlessly via EmailJS, while Firebase Firestore provides an optional dynamic content layer without requiring a backend server.

Performance Engineering

All page components are loaded via React.lazy() with Suspense fallbacks, so only the current route's chunk is downloaded on first navigation. Heavy UI sections (e.g. Swiper testimonials, tsParticles) are deferred with Intersection Observer — reducing initial bundle size and parse cost. Images use native loading="lazy" throughout.

SEO & Security

A shared <SEO /> component wraps react-helmet-async to set dynamic title, description, keywords, Open Graph, and Twitter Card tags per route — wrapped in HelmetProvider to prevent stale meta across client-side navigations. All Firebase and EmailJS secrets live exclusively in .env behind VITE_ prefixes, with a .env.example documenting every required variable for onboarding.

Resilient UI & Educational Hub

A class-component Error Boundary wraps the app tree to catch unhandled JS errors and show a recovery UI. Unknown routes and missing project/course IDs render a themed 404 page. The Infinity Team section provides structured course materials for university students, with optional Firestore integration for dynamic content updates without redeployment.

Architecture & Features

Static-first React 19 SPA built with Vite 7. Content is served from high-quality static data for reliability and speed, with Firebase Firestore available as an optional dynamic layer. No backend server — forms go through EmailJS, secrets are managed via Vite environment variables, and the build output is a static dist/ directory deployed to Vercel.

  • Runtime / Build: Node.js + Vite 7 (ES modules, HMR, tree-shaking)
  • UI Framework: React 19 + React DOM 19 — functional components, hooks, lazy loading
  • Routing: React Router DOM v7 — SPA navigation with custom 404 and lazy routes
  • Styling: Bootstrap 5 + Bootstrap Icons + Font Awesome 7 + custom CSS (theme variables)
  • SEO: react-helmet-async — dynamic title, description, OG/Twitter tags per route
  • Services: Firebase 12 (Firestore) + EmailJS 4 (contact & feedback forms)
  • UI / Effects: Swiper 12, React CountUp, react-intersection-observer, tsParticles, Three.js
  • Resilience: Global Error Boundary (class component) + themed NotFound page
  • Security: All secrets in .env (VITE_ prefix) — .env.example provided, never committed
  • Deployment: Vercel — static dist/ output, VITE_* env vars set in dashboard

Technologies Used

React 19Vite 7React Router DOM v7Bootstrap 5Bootstrap IconsFont Awesome 7Firebase 12 (Firestore)EmailJS 4react-helmet-asyncSwiper 12React CountUpreact-intersection-observertsParticlesThree.jsCSS3 (Theme Variables)Vercel

Future Improvements

  • Add multilingual support (English, Arabic, Turkish) using i18next.
  • Integrate AI-powered chatbot for student Q&A in the Infinity Team section.
  • Develop a mobile app version using React Native sharing the same Firebase backend.
  • Implement user authentication for personalized student dashboards and progress tracking.
  • Add a CMS dashboard so course materials and portfolio projects can be managed without touching code.
  • Expand tsParticles / Three.js hero into a fully interactive 3D scene.
  • Add Lighthouse CI to the GitHub Actions pipeline to enforce performance and SEO budgets.
Personal Portfolio & Infinity Team Platform | Abdulrahman Hamdi