How linganand-04/portfolio works
Linganand is a React portfolio site for presenting a developer profile, work, skills, projects, and contact options. A visitor enters through the routed app, views the home page’s portfolio sections, and can follow navigation links or submit the contact form, which sends through EmailJS. Content is maintained in separate data modules. The graph follows documented and indexed imports; some component-level interactions are omitted where the sampled excerpts do not show their use.
Main entry points: Home.jsx Home page · Hero.jsx Hero · profile.js Profile data · Contact.jsx Contact form
Components 34
App and navigation
- Route entry
src/App.jsx - Main layout
src/layouts/MainLayout.jsx - Home page
src/pages/Home.jsx - 404 page
src/pages/NotFound.jsx
Portfolio sections
- Hero
src/sections/Hero.jsx - About
src/sections/About.jsx - Education
src/sections/Education.jsx - Experience
src/sections/Experience.jsx - Projects
src/sections/Projects.jsx - Skills
src/sections/Skills.jsx - Certifications
src/sections/Certifications.jsx - Services
src/sections/Services.jsx - Contact form
src/sections/Contact.jsx
Portfolio content
- Profile data
src/data/profile.js - History data
src/data/timeline.js - Project data
src/data/projects.js - Skills data
src/data/skills.js - Other content
src/data/misc.js - Navigation links
src/constants/navigation.js
Shared presentation
- Navigation
src/components/Navbar.jsx - Footer
src/components/Footer.jsx - Motion variants
src/animations/variants.js - Section heading
src/components/SectionHeading.jsx - Reveal wrapper
src/components/Reveal.jsx - Project card
src/components/ProjectCard.jsx - Timeline view
src/components/Timeline.jsx - Skill bar
src/components/SkillBar.jsx - Social links
src/components/SocialLinks.jsx - Magnetic button
src/components/MagneticButton.jsx - Typing text
src/components/TypingText.jsx - Terminal card
src/components/TerminalCard.jsx - Brand icons
src/components/icons/BrandIcons.jsx
Other components
- Visitor
- EmailJS service
Connections 48
- Visitor → Route entry: opens
src/App.jsx - Route entry → Main layout: routes through
src/App.jsx - Route entry → Home page: routes to
src/App.jsx - Route entry → 404 page: routes fallback
src/App.jsx - Main layout → Navigation: renders
src/layouts/MainLayout.jsx - Main layout → Footer: renders
src/layouts/MainLayout.jsx - Main layout → Home page: hosts route
src/layouts/MainLayout.jsx - Navigation → Navigation links: reads links
src/components/Navbar.jsx - Navigation → Profile data: reads name
src/components/Navbar.jsx - Footer → Profile data: reads profile
src/components/Footer.jsx - Footer → Navigation links: reads links
src/components/Footer.jsx - Home page → Hero: renders
src/pages/Home.jsx - Home page → About: lazy loads
src/pages/Home.jsx - Home page → Education: lazy loads
src/pages/Home.jsx - Home page → Experience: lazy loads
src/pages/Home.jsx - Home page → Projects: lazy loads
src/pages/Home.jsx - Home page → Skills: lazy loads
src/pages/Home.jsx - Home page → Contact form: lazy loads
src/pages/Home.jsx - Home page → Certifications: lazy loads
src/pages/Home.jsx - Home page → Services: lazy loads
src/pages/Home.jsx - Hero → Profile data: reads profile
src/sections/Hero.jsx - About → Profile data: reads profile
src/sections/About.jsx - Education → History data: reads entries
src/sections/Education.jsx - Experience → History data: reads entries
src/sections/Experience.jsx - Projects → Project data: reads projects
src/sections/Projects.jsx - Skills → Skills data: reads skills
src/sections/Skills.jsx - Certifications → Other content: reads entries
src/sections/Certifications.jsx - Services → Other content: reads entries
src/sections/Services.jsx - Contact form → Profile data: reads contact details
src/sections/Contact.jsx - Contact form → EmailJS service: sends form
src/sections/Contact.jsx - Hero → Typing text: renders
src/sections/Hero.jsx - Hero → Terminal card: renders
src/sections/Hero.jsx - Hero → Magnetic button: renders
src/sections/Hero.jsx - Hero → Social links: renders
src/sections/Hero.jsx - About → Section heading: renders
src/sections/About.jsx - About → Reveal wrapper: renders
src/sections/About.jsx - Education → Timeline view: renders
src/sections/Education.jsx - Experience → Timeline view: renders
src/sections/Experience.jsx - Projects → Project card: renders
src/sections/Projects.jsx - Skills → Skill bar: renders
src/sections/Skills.jsx - Contact form → Social links: renders
src/sections/Contact.jsx - Contact form → Magnetic button: renders
src/sections/Contact.jsx - Project card → Brand icons: uses
src/components/ProjectCard.jsx - Social links → Brand icons: uses
src/components/SocialLinks.jsx - Social links → Profile data: reads links
src/components/SocialLinks.jsx - Services → Section heading: renders
src/sections/Services.jsx - Services → Motion variants: uses variants
src/sections/Services.jsx - Section heading → Reveal wrapper: renders
src/components/SectionHeading.jsx