How farhan-labib-afk/portfolio-website works
This is a React portfolio site presenting its owner’s profile, work history, projects, skills, résumé, and contact details. A visitor enters through the browser-rendered app, browses the composed sections, and can explore project cards and details. Research is documented as a capability and has its own component, but it is not composed in the sampled App.tsx. The graph follows relationships shown in excerpts or the source index; unsampled component behavior and UI integrations are not inferred.
Main entry points: App.tsx Page composition · Hero.tsx Hero · button.tsx Button primitive · Projects.tsx Projects section
Components 25
App entry
- React mount
src/main.tsx - Page composition
src/app/App.tsx
Portfolio sections
- Navigation
src/app/components/Navigation.tsx - Hero
src/app/components/Hero.tsx - About
src/app/components/About.tsx - Experience
src/app/components/Experience.tsx - Skills
src/app/components/Skills.tsx - Résumé
src/app/components/Resume.tsx - Contact
src/app/components/Contact.tsx - Footer
src/app/components/Footer.tsx - Research
src/app/components/Research.tsx
Project showcase
- Projects section
src/app/components/Projects.tsx - Project catalog
src/data/projects.ts - Project card
src/app/components/ProjectCard.tsx - Project details
src/app/components/ProjectModal.tsx
UI building blocks
- Button primitive
src/app/components/ui/button.tsx - Dialog primitive
src/app/components/ui/dialog.tsx - Sheet primitive
src/app/components/ui/sheet.tsx - Tooltip primitive
src/app/components/ui/tooltip.tsx - Class utilities
src/app/components/ui/utils.ts
Other components
- Visitor
- Browser
- GitHub
Connections 29
- Visitor → Browser: visits
- Browser → React mount: loads
src/main.tsx - React mount → Page composition: mounts
src/main.tsx - Page composition → Navigation: renders
src/app/App.tsx - Page composition → Hero: renders
src/app/App.tsx - Page composition → About: renders
src/app/App.tsx - Page composition → Experience: renders
src/app/App.tsx - Page composition → Projects section: renders
src/app/App.tsx - Page composition → Skills: renders
src/app/App.tsx - Page composition → Résumé: renders
src/app/App.tsx - Page composition → Contact: renders
src/app/App.tsx - Page composition → Footer: renders
src/app/App.tsx - Projects section → Project catalog: reads
src/app/components/Projects.tsx - Projects section → Project card: renders
src/app/components/Projects.tsx - Projects section → Project details: renders
src/app/components/Projects.tsx - Project details → Dialog primitive: uses
src/app/components/ProjectModal.tsx - Hero → Project catalog: reads
src/app/components/Hero.tsx - Hero → Button primitive: uses
src/app/components/Hero.tsx - Navigation → Button primitive: uses
src/app/components/Navigation.tsx - Project card → Button primitive: uses
src/app/components/ProjectCard.tsx - Project details → Button primitive: uses
src/app/components/ProjectModal.tsx - Résumé → Button primitive: uses
src/app/components/Resume.tsx - Hero → GitHub: links to
src/app/components/Hero.tsx - Hero → LinkedIn: links to
src/app/components/Hero.tsx - Hero → Email: links to
src/app/components/Hero.tsx - Button primitive → Class utilities: combines classes
src/app/components/ui/button.tsx - Dialog primitive → Class utilities: combines classes
src/app/components/ui/dialog.tsx - Sheet primitive → Class utilities: combines classes
src/app/components/ui/sheet.tsx - Tooltip primitive → Class utilities: combines classes
src/app/components/ui/tooltip.tsx