How elbon-asyafa/portfolio-project works
This repository is a personal portfolio website for a network technician. Visitors enter through the hero, browse profile, project, experience and skills sections, then reach contact options; project cards also expose detail imagery, while a fixed dock and AI chat provide supplementary interactions. App composes the page and installs scroll behavior. The supplied excerpts document project lightbox and dock behavior, but not the internals of several named sections; those are represented by their exact tree paths without inferred internal wiring.
Main entry points: App.tsx Page Composer · images Portfolio Images · Hero.tsx Hero Profile · Projects.tsx Project Portfolio
Components 20
Portfolio Page
- Page Composer
src/App.tsx - React Entry
src/main.tsx - Navigation
src/components/Navbar.tsx - Loading Screen
src/components/LoadingScreen.tsx - Inertia Scroll
src/hooks/useInertiaScroll.ts
Portfolio Content
- Hero Profile
src/components/Hero.tsx - Photo Gallery
src/components/Hero.tsx - About Profile
src/components/About.tsx - Project Portfolio
src/components/Projects.tsx - Experience
src/components/Experience.tsx - Skills
src/components/Skills.tsx - Contact Section
src/components/Contact.tsx - Portfolio Images
public/images - Resume PDFs
public/cv
Visitor Interactions
- Window Dock
src/components/WindowPopups.tsx - Back To Top
src/components/ScrollToTop.tsx - AI Chat
src/components/AIButton.tsx - Marquee Bar
src/components/MarqueeBar.tsx
External Services
- Gemini AI
Other components
- Visitor
Connections 23
- Visitor → React Entry: opens site
- React Entry → Page Composer: renders
- Page Composer → Navigation: renders
- Page Composer → Loading Screen: renders
- Page Composer → Inertia Scroll: enables scrolling
- Page Composer → Hero Profile: renders
- Page Composer → Photo Gallery: renders
- Page Composer → Marquee Bar: renders
- Page Composer → About Profile: renders
- Page Composer → Project Portfolio: renders
- Page Composer → Experience: renders
- Page Composer → Skills: renders
- Page Composer → Contact Section: renders
- Page Composer → Window Dock: renders
- Page Composer → AI Chat: renders
- Hero Profile → Portfolio Images: loads photos
- Photo Gallery → Portfolio Images: loads photos
- About Profile → Portfolio Images: loads profile photo
- Hero Profile → Resume PDFs: links download
- Project Portfolio → Portfolio Images: loads project images
- Project Portfolio → Visitor: shows project details
- Window Dock → Back To Top: invokes
- AI Chat → Gemini AI: requests replies