How hamzacodebase/portfolio-website works
This is a personal developer portfolio implemented as a React single-page site. A visitor enters through the app shell, browses profile, skills, selected projects, career and education, and can reach the contact section or follow social links. The project list opens case-study details in a modal; the contact section provides a validated form and email-copy interaction. The sampled source confirms the shell, several section-to-data relationships, and analytics mounting; unsampled section internals and the GitHub stats integration are represented without speculative wiring.
Main entry points: App.tsx Page shell · data.ts Portfolio content · main.tsx React entry · projects.tsx Project portfolio
Components 19
Site runtime
- React entry
src/main.tsx - Page shell
src/App.tsx - Navigation
src/components/navbar.tsx - Reading progress
src/components/reading-progress.tsx - Section reveals
src/components/reveal.tsx - Portfolio content
src/lib/data.ts
Profile and credentials
Work and skills
- Skills
src/components/skills.tsx - Project portfolio
src/components/projects.tsx - Case study modal
src/components/modal.tsx - Experience
src/components/experience.tsx - GitHub activity
src/components/github-stats.tsx
Visitor engagement
- Contact
src/components/contact.tsx - Footer
src/components/footer.tsx - Konami easter egg
src/components/konami-egg.tsx
Other components
- Visitor
- Vercel Analytics
Connections 23
- Visitor → React entry: opens site
- React entry → Page shell: mounts
- React entry → Vercel Analytics: renders in production
- React entry → Portfolio content: greeting reads
- Page shell → Reading progress: renders
- Page shell → Navigation: renders
- Page shell → Hero: renders
- Page shell → About: renders
- Page shell → Skills: renders
- Page shell → Project portfolio: renders
- Page shell → Experience: renders
- Page shell → Education: renders
- Page shell → GitHub activity: renders
- Page shell → Contact: renders
- Page shell → Footer: renders
- Page shell → Konami easter egg: renders
- Page shell → Section reveals: wraps sections
- Hero → Portfolio content: reads profile and stats
- Navigation → Portfolio content: reads links
- Project portfolio → Portfolio content: reads projects
- Project portfolio → Case study modal: opens details
- Experience → Portfolio content: reads roles
- Contact → Portfolio content: reads social links