How freakshowzzz/reactportfolio works
This repository is a personal portfolio website. Visitors enter through the routed React application, use the shared site shell to reach Home, About, Projects, or Contact, and view profile, interests, technology, project, or contact content. Project cards display records from a local project list. The graph preserves the main page stages and shared visual layer; some component relationships are supported only by the SOURCE INDEX, so unsampled details are not expanded.
Main entry points: main.tsx Route entry · layout.tsx Page layout · home/index.tsx Home page · about/index.tsx About page
Components 20
Routing and shell
- Route entry
src/main.tsx - Page layout
src/pages/layout.tsx
Portfolio content
- Home page
src/pages/home/index.tsx - About page
src/pages/about/index.tsx - Contact page
src/pages/contacts/index.tsx - Hero section
src/components/features/home/herosection.tsx - Profile card
src/components/features/home/profilecard.tsx - Tech stack
src/components/features/home/techstacksection.tsx - Biography
src/components/features/about/biosection.tsx - Interests
src/components/features/about/interestsection.tsx - Contact details
src/components/features/home/contactsection.tsx
Project showcase
- Projects page
src/pages/projects/index.tsx - Project grid
src/components/features/projects/projectsgridsection.tsx - Project card
src/components/features/projects/projectscard.tsx - Project catalog
src/lib/projects.ts - Project section
src/components/features/projects/projectssection.tsx
Shared presentation
- Navigation header
src/components/common/header.tsx - Site footer
src/components/common/footer.tsx - Animated background
src/components/features/background/TechBackground.tsx
Other components
- Visitor
Connections 19
- Visitor → Route entry: opens site
src/main.tsx - Route entry → Page layout: wraps routes
src/main.tsx - Route entry → Home page: routes to
src/main.tsx - Route entry → About page: routes to
src/main.tsx - Route entry → Projects page: routes to
src/main.tsx - Route entry → Contact page: routes to
src/main.tsx - Page layout → Navigation header: renders
src/pages/layout.tsx - Page layout → Site footer: renders
src/pages/layout.tsx - Page layout → Animated background: renders
src/pages/layout.tsx - Home page → Hero section: renders
src/pages/home/index.tsx - Home page → Tech stack: renders
src/pages/home/index.tsx - Hero section → Profile card: renders
src/components/features/home/herosection.tsx - About page → Biography: renders
src/pages/about/index.tsx - About page → Interests: renders
src/pages/about/index.tsx - Contact page → Contact details: renders
src/pages/contacts/index.tsx - Projects page → Project grid: renders
src/pages/projects/index.tsx - Project grid → Project card: renders
src/components/features/projects/projectsgridsection.tsx - Project grid → Project catalog: reads
src/components/features/projects/projectsgridsection.tsx - Project card → Project catalog: uses type
src/components/features/projects/projectscard.tsx