How mzaeemali/portfolio works
Purpose and runtime
This is a single-page portfolio site built with React, TypeScript, and Vite. The browser entry point is src/main.tsx, which mounts the application from src/App.tsx. Vite configuration and TypeScript project boundaries are defined in vite.config.ts, tsconfig.app.json, and tsconfig.json.
Application routing and page boundary
src/App.tsx is the application composition and route-selection boundary. The primary portfolio experience is src/pages/Home.tsx; unmatched navigation is handled by src/pages/NotFound.tsx. The repository does not show a server-side application layer; rendering is client-side.
Portfolio data model
Portfolio content is centralized in data/portfolio.json and exposed to React through lib/portfolio-data.ts. This separates editable resume/project/service content from presentation components. The expected flow is JSON data → typed/accessor layer → section components in the home page.
Home-page composition
src/pages/Home.tsx assembles the major landing-page sections. Core content/presentation modules include:
• Hero and primary navigation: components/hero.tsx, components/navigation.tsx
• Work and professional history: components/projects.tsx, components/experience.tsx, components/contracts.tsx
• Skills and offered capabilities: components/skills.tsx, components/services.tsx, components/credentials.tsx
• Supporting conversion/content sections: components/contact.tsx, components/testimonials.tsx, components/faq.tsx
These components are the main feature boundaries and should remain independently reusable from the page shell.
Interaction, animation, and visual systems
Motion behavior is centralized in lib/motion.ts and reused by components such as components/fade-in.tsx and components/spotlight-card.tsx. Visual background/interactive effects are isolated in components/particle-field.tsx, components/web-lines-canvas.tsx, and components/git-timeline.tsx, limiting canvas/effect logic outside content sections. components/command-palette.tsx, components/view-toggle.tsx, and components/back-to-top.tsx provide global navigation or display controls.
Styling, UI primitives, and deployment assets
Global styling begins in src/index.css; reusable UI primitives currently include components/ui/button.tsx. Theme-related behavior is represented by lib/theme.ts, while icon mapping is in lib/tech-icons.ts. Static SEO assets are served from public/robots.txt and public/sitemap.xml. wrangler.jsonc indicates a Cloudflare Workers/Pages-oriented deployment configuration; .env.example defines the environment-variable contract if runtime configuration is needed.
Main entry points: Home.tsx Home Page · main.tsx Browser Entry · App.tsx App & Route Selection · wrangler.jsonc Cloudflare Deployment
Components 19
Client Runtime
- Browser Entry
src/main.tsx - App & Route Selection · Chooses the portfolio or unmatched route client-side.
src/App.tsx - Not Found Page
src/pages/NotFound.tsx
Portfolio Content
- Portfolio JSON · Editable resume, project, and service content.
data/portfolio.json - Typed Portfolio Access
lib/portfolio-data.ts
Home Experience
- Home Page · Assembles the portfolio landing sections.
src/pages/Home.tsx - Portfolio Sections · Projects, experience, contracts, skills, services, credentials, contact, testimonials, and FAQ.
components/projects.tsx - Hero & Navigation · Primary introduction and site navigation.
components/hero.tsx
Shared UI Systems
- Global Controls · Command palette, view toggle, and back-to-top controls.
components/command-palette.tsx - Motion System
lib/motion.ts - Animated UI · Fade-in and spotlight-card presentation effects.
components/fade-in.tsx - Visual Effects · Particle field, web-lines canvas, and git timeline effects.
components/particle-field.tsx - Theme & Icons · Theme behavior and technology icon mapping.
lib/theme.ts - Global Styles
src/index.css - Button Primitive
components/ui/button.tsx
Build & Delivery
- Vite Build · Defines the client build and development runtime.
vite.config.ts - TypeScript Projects
tsconfig.json - Cloudflare Deployment
wrangler.jsonc - SEO Assets · Robots and sitemap files served as static assets.
public/robots.txt
Connections 19
- Vite Build → Browser Entry: builds
- TypeScript Projects → Browser Entry: types
- Cloudflare Deployment → Vite Build: deploys build
- Browser Entry → App & Route Selection: mounts
- App & Route Selection → Home Page: primary route
- App & Route Selection → Not Found Page: unmatched route
- Portfolio JSON → Typed Portfolio Access: content source
- Typed Portfolio Access → Home Page: supplies content
- Home Page → Hero & Navigation: composes
- Home Page → Portfolio Sections: composes
- Home Page → Global Controls: includes
- Home Page → Visual Effects: uses
- Portfolio Sections → Animated UI: uses
- Animated UI → Motion System: uses
- Hero & Navigation → Motion System: uses
- Home Page → Theme & Icons: uses
- Home Page → Button Primitive: uses
- Browser Entry → Global Styles: loads
- Cloudflare Deployment → SEO Assets: serves