How nilanjanajui/my-portfolio works
This is a React single-page developer portfolio. Visitors enter the home page to explore the profile, skills, education and journey, browse featured or complete project listings, open project details, and reach the contact links or form. The graph distinguishes the app’s routing, portfolio content, project browsing and presentation helpers. Relationships are limited to those shown in the excerpts or README; unsampled components are included where their role is explicit, but no unverified integrations or internal calls are inferred.
Main entry points: App.jsx App routes · ProjectsGrid.jsx Project grid · AnimatedSection.jsx Animated section · About.jsx About profile
Components 20
App and routing
- React entry
src/main.jsx - App routes
src/App.jsx - Header navigation
src/components/Header.jsx
Portfolio content
- Profile hero
src/components/Hero.jsx - About profile
src/components/About.jsx - Technical skills
src/components/Skills.jsx - Development journey
src/components/Journey.jsx - Education history
src/components/Education.jsx - Build approach
src/components/HowIBuild.jsx - GitHub activity
src/components/GitHubActivity.jsx
Project showcase
- Project grid
src/components/ProjectsGrid.jsx - All projects page
src/components/AllProjects.jsx - Project detail
src/components/ProjectDetail.jsx - Project catalogue
src/data/projects.js
Presentation helpers
- Animated section
src/components/AnimatedSection.jsx - Scroll animation hook
src/hooks/useScrollAnimation.js - Interactive background
src/components/InteractiveBackground.jsx - Scroll to top
src/components/ScrollToTop.jsx
Contact
- Contact links and form
src/components/Contact.jsx
Other components
- Portfolio visitor
Connections 26
- Portfolio visitor → React entry: opens site
README.md - React entry → App routes: renders
src/main.jsx - App routes → Header navigation: renders
src/App.jsx - App routes → Profile hero: routes home
src/App.jsx - App routes → Project grid: routes home
src/App.jsx - App routes → GitHub activity: routes home
src/App.jsx - App routes → Technical skills: routes home
src/App.jsx - App routes → About profile: routes home
src/App.jsx - App routes → Development journey: routes home
src/App.jsx - App routes → Education history: routes home
src/App.jsx - App routes → Build approach: routes home
src/App.jsx - App routes → Contact links and form: routes home
src/App.jsx - App routes → Project detail: routes detail
src/App.jsx - App routes → All projects page: routes listing
src/App.jsx - App routes → Interactive background: renders
src/App.jsx - App routes → Scroll to top: renders
src/App.jsx - Project grid → Project catalogue: reads projects
src/components/ProjectsGrid.jsx - Project grid → Project detail: navigates to
src/components/ProjectsGrid.jsx - All projects page → Project grid: renders
src/components/AllProjects.jsx - Project detail → Project catalogue: finds project
src/components/ProjectDetail.jsx - About profile → Project catalogue: counts projects
src/components/About.jsx - Profile hero → Animated section: renders
src/components/Hero.jsx - About profile → Animated section: renders
src/components/About.jsx - Technical skills → Animated section: renders
src/components/Skills.jsx - Project grid → Animated section: renders
src/components/ProjectsGrid.jsx - Animated section → Scroll animation hook: uses hook
src/components/AnimatedSection.jsx