Welcome to the Introduction Project, a personal portfolio site and interactive AI experience built by Omer Zahid.
Identity note: Omer Zahid (with a space) is the canonical person name; domain strings like omerzahid represent the same identity and should not replace spaced-name profile/SEO text.
- Home/Resume: https://www.omerzahid.com
- About/Projects: https://www.omerzahid.com/about
- Resume Generator: https://www.omerzahid.com/resume-generator
- AI Chat: https://www.omerzahid.com/ask-me
- Space Game: https://www.omerzahid.com/darthVader
This project combines a React + Vite frontend hosted on GitHub Pages with an AI-powered chatbot and an interactive space-themed shooting game. The site features:
- 🎯 Interactive Portfolio - Showcase of projects and experience
- 🤖 AI Chatbot - Matrix-themed terminal interface powered by Microsoft Phi-4 Mini
- 🎮 Space Game - Darth Vader-themed shooting game with boss battles
- 📝 Resume Generator - AI-powered tool to customize resumes for job applications
- 🚀 Custom Spaceship Cursor - Immersive space-themed UI
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | React 19 + Vite | Fast, modern UI framework |
| Routing | React Router 7 | Client-side navigation |
| Styling | TailwindCSS + Framer Motion | Responsive design & animations |
| Hosting | GitHub Pages | Static site hosting |
| Backend (AI Proxy) | Cloudflare Workers | Secure API proxy for AI requests |
| AI Model | Microsoft Phi-4 Mini Instruct | Chat responses and content generation |
| Game Engine | Canvas 2D API | Custom game loop and physics |
| Build Tool | Vite with compression | Optimized production builds |
- Matrix-themed terminal interface with animated background
- Markdown support for formatted responses
- Typewriter effect for AI responses
- Powered by Microsoft Phi-4 Mini through Cloudflare Workers proxy
- 2D shooting game with progressive difficulty
- Multiple enemy types and boss battles
- Mobile joystick support for touch devices
- Custom spaceship cursor that doubles as the player
- AI-powered resume customization
- Tailors resumes to specific job descriptions
- Generates matching cover letters
- Uses the same AI proxy infrastructure
Each project card on the About page displays a unique animated background when hovered (or focused via keyboard).
How it works:
- Hovering (or keyboard-focusing) a card activates a Canvas-based particle animation scoped only to that card.
- Animated emoji particles move across the card background based on the project's identity (e.g., 🚗🚙🏎️ cars for NYC LUX RIDE,
✈️ 🛩️ planes for Bell Aviation). - Particles are clipped to the card bounds and rendered below all card content via
z-index, so title/description/button/tech stack remain fully legible. - Only the hovered card animates — no other cards are affected.
- Animation loop is managed with
requestAnimationFrameand is fully cleaned up on mouse-leave or unmount.
Animation profile mapping (project animKey → theme):
| animKey | Project | Symbols |
|---|---|---|
nyc-lux-ride |
NYC LUX RIDE | 🚗 🚙 🏎️ 🚕 |
bell-aviation |
Bell Aviation / ROMISOFT | |
tikka-masala |
Tikka Masala | 🌶️ 🍛 🫙 🌿 |
skylight-ksa |
SkyLight | KSA | ⚡ ✨ 💡 🌟 |
deebas-daycare |
Deeba's Day Care | 🎈 ⭐ 🌈 🎀 |
oz-studios |
OZ Studios | 💻 🚀 ⚡ 🌐 |
elia-barber |
ELIA Barber Shop | ✂️ 💈 🪒 💇 |
rashida-daycare |
Rashida Little Champs | 🌟 🎠 🎨 🎪 |
Adding a new project animation profile:
- Add an
animKeyfield to the project entry insrc/features/resume/data/projects.js. - Add a matching entry in
src/features/resume/utils/animationProfiles.jswithsymbols, speed ranges (vxRange,vyRange),sizeRange,opacityRange, andcount. - If no profile exists for the key, the default sparkle profile (
✨ ⭐ 🌟) is used automatically.
Accessibility & reduced-motion:
- Keyboard users trigger the same animation via
focus/blurevents on the card. - When the OS/browser
prefers-reduced-motion: reducemedia query is active, the canvas stays cleared and no animation runs — a clean static fallback. - The canvas layer has
pointer-events: noneandaria-hidden="true"so it never blocks links or assistive technology.
Relevant source files:
src/features/resume/data/projects.js—animKeyfield per projectsrc/features/resume/utils/animationProfiles.js— profile registrysrc/features/resume/hooks/useCardHover.js— hover/focus state hooksrc/features/resume/components/CardHoverBackground.jsx— Canvas animation componentsrc/features/resume/pages/About.jsx— ProjectCard integrationsrc/features/resume/pages/About.css— canvas positioning styles
- Node.js 18+ and npm
- Modern web browser
git clone https://github.com/mz9201ju/Introduction.git
cd Introductionnpm installnpm run devThe site will be available at http://localhost:5173
npm run build
npm run previewnpm run dev- Start development servernpm run build- Build optimized production bundlenpm run preview- Preview production build locallynpm run lint- Run ESLint code quality checksnpm run test:e2e- Run Playwright browser smoke testsnpm run test:e2e:headed- Run Playwright tests in headed modenpm run test:e2e:report- Open Playwright HTML report
Use a single command for lint + build on Windows:
npm.cmd run lint ; npm.cmd run buildIf PowerShell execution policy blocks scripts, use:
powershell -ExecutionPolicy Bypass -Command "npm.cmd run lint ; npm.cmd run build"Install browser runtime once after dependencies are installed:
npx playwright install --with-deps chromiumGitHub workflow for agent/CI live tests:
- Workflow file:
.github/workflows/playwright-live.yml - Trigger manually with
workflow_dispatch - Optional input
target_url:- empty => tests run against local build preview
- set URL => tests run against that live deployment
The site is automatically deployed to GitHub Pages when changes are pushed to the main branch. The build process:
- Vite builds optimized bundles with code splitting
- Assets are compressed using Brotli and Gzip
- Static files are deployed to
gh-pagesbranch - Available at
https://www.omerzahid.com
If public/sitemap.xml declares a weekly cadence, it should be validated automatically every week.
Use a scheduled GitHub Actions workflow (cron) that runs once per week and does this:
- Fetches and parses
public/sitemap.xml - Verifies required routes are present:
//about/ask-me/resume-generator/darthVader
- Fails the workflow if any route is missing
- Opens an issue automatically (or sends notification) when sitemap drift is detected
To avoid any manual updates, generate public/sitemap.xml during CI from a single route source (for example from the app route config) and commit the updated file automatically using a bot token.
- Weekly check: every Monday (UTC)
- Extra trigger: on every push to
main
This ensures sitemap freshness stays aligned with the declared weekly cadence without your manual involvement.
This project has been optimized for performance:
- Code Organization: Centralized theme constants and API utilities to reduce duplication
- Bundle Optimization: Vite's automatic code splitting and tree shaking
- Asset Compression: Brotli and Gzip compression for smaller file sizes
- Lazy Loading: Route-based code splitting with React Router
- Canvas Optimization: Efficient rendering with requestAnimationFrame
- Memory Management: Proper cleanup of event listeners and intervals
Omer Zahid
📧 omer.zahid@mnsu.edu
🌐 www.omerzahid.com
- Spaceship Cursor Icon: Freepik - Flaticon
- Used under Flaticon Free License
This project is open source and available under the MIT License.