Personal Portfolio Website

What it is: A single-page portfolio website that presents a person's work, skills, and background in one smooth, scrollable page. It ships with its own dark/light appearance toggle and full English/Arabic support that genuinely mirrors the layout right-to-left, so the same template serves visitors in two languages. Content is data-driven — all text lives in a single file — making it easy to repurpose for anyone in any profession. The contact area includes a message form that shows a confirmation — but it doesn't actually send anything (no backend connected), so it's currently cosmetic.

Tech stack: React 19 single-page app built and served with Vite 8, styled with Tailwind CSS v4, animated with Framer Motion, and illustrated with lucide-react icons.

Key features: one-page scroll layout (Home, Skills, Projects, Experience, Contact) with a frosted nav bar on scroll · dark/light toggle that remembers the choice · EN/AR switch that mirrors the layout right-to-left · hero with illustrated avatar, pulsing availability indicator, and jump buttons · skills grid of icon cards with hover lift · responsive project-card grid · mixed work/education experience timeline · contact info card + message form with confirmation, plus a floating back-to-top button.

Technical highlights: React 19 + Vite 8 · Tailwind v4 with class-based dark mode and custom palette ( config caveat below) · Framer Motion scroll reveals (whileInView, once: true) · React Context providers for theme and language, both persisted to localStorage · genuine RTL via logical utilities (ms-*, ps-*, border-s-2) · parallel EN/AR content trees in src/data/portfolioData.js · clsx/tailwind-merge installed but unused.