Back to Portfolio

Personal Portfolio & Infinity Team Platform

Web Development• 2025

A production-grade Next.js 15 platform combining a professional portfolio with the Infinity Team educational hub — built with React 19, the App Router, server-rendered pages, Turso/libSQL persistence, and resilient contact and feedback workflows.

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 full-stack Next.js 15 application, the platform serves both a professional portfolio and the Infinity Team educational hub from one maintainable codebase. Static content is delivered through Server Components while interactive sections use Client Components. Contact and feedback submissions are validated and rate-limited in Server Actions, persisted in Turso/libSQL, and followed by best-effort Resend notifications. Certificate verification is database-backed, and server-only boundaries keep credentials away from the browser.

Performance Engineering

Next.js App Router provides route-level code splitting and server rendering. Heavy testimonial content is deferred until it enters the viewport, while portfolio and project images use lazy loading to reduce the initial page cost.

SEO & Security

The Next.js Metadata API provides route-aware titles, descriptions, keywords, Open Graph, and Twitter metadata. Security headers are applied globally, server-only modules protect database and email credentials, and local development refuses remote database URLs.

Resilient UI & Educational Hub

A global Error Boundary provides a recovery interface for unexpected client-side errors. Unknown routes and missing project, course, or certificate records render safe fallback states. The Infinity Team section provides structured course materials and learning paths for university students.

Architecture & Features

A Next.js 15 App Router application combining static-first portfolio content with server-rendered dynamic routes and a server-only backend boundary. The application is deployed on Vercel, uses Turso/libSQL for persistence, and uses Resend for owner notifications.

  • Runtime / Build: Node.js + Next.js 15 with ES modules and optimized production builds
  • UI Framework: React 19 + React DOM 19 — Server Components, Client Components, and hooks
  • Routing: Next.js App Router — file-system routes, dynamic segments, and custom not-found states
  • Backend Actions: Next.js Server Actions for contact and feedback submission workflows
  • Database: Turso/libSQL via @libsql/client — certificates, contact messages, feedback, and rate limits
  • Email: Resend server-side notifications with verified sender configuration
  • Styling: Bootstrap 5 + Bootstrap Icons + Font Awesome 7 + custom theme-aware CSS
  • UI / Effects: Swiper 12, React CountUp, react-intersection-observer, and Web Speech API voice search
  • Validation & Protection: server-side input validation, honeypot fields, HMAC-hashed IP rate limiting, and security headers
  • Quality: Vitest backend tests and ESLint checks
  • Resilience: Global Error Boundary (class component) + themed NotFound page
  • SEO: Next.js Metadata API with route-specific titles, descriptions, and social metadata
  • Security: server-only modules, environment-based secrets, local/production database isolation, and security headers
  • Deployment: Vercel with server-only environment variables and Turso migrations

Technologies Used

Next.js 15React 19Next.js App RouterNext.js Server ActionsNext.js Metadata APIBootstrap 5Bootstrap IconsFont Awesome 7Turso / libSQL@libsql/clientResendDatabase-backed Rate LimitingWeb Speech APISwiper 12React CountUpreact-intersection-observerVitestESLintCSS3 Theme VariablesVercel

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 backend services.
  • 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.
  • Add Lighthouse CI to the GitHub Actions pipeline to enforce performance and SEO budgets.
Personal Portfolio & Infinity Team Platform | Abdulrahman Hamdi