# linganand-04/portfolio architecture

> Architecture diagram of the GitHub repository linganand-04/portfolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/linganand-04/portfolio
- Repository: https://github.com/linganand-04/portfolio

## Overview

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: [`src/pages/Home.jsx`](https://github.com/linganand-04/portfolio/blob/main/src/pages/Home.jsx) (Home page), [`src/sections/Hero.jsx`](https://github.com/linganand-04/portfolio/blob/main/src/sections/Hero.jsx) (Hero), [`src/data/profile.js`](https://github.com/linganand-04/portfolio/blob/main/src/data/profile.js) (Profile data), [`src/sections/Contact.jsx`](https://github.com/linganand-04/portfolio/blob/main/src/sections/Contact.jsx) (Contact form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and navigation"]
  node_app["Route entry<br/>[App.jsx]"]
  node_layout["Main layout<br/>[MainLayout.jsx]"]
  node_home["Home page<br/>[Home.jsx]"]
  node_notfound["404 page<br/>[NotFound.jsx]"]
end

subgraph group_portfolio["Portfolio sections"]
  node_hero["Hero<br/>[Hero.jsx]"]
  node_about["About<br/>[About.jsx]"]
  node_education["Education<br/>[Education.jsx]"]
  node_experience["Experience<br/>[Experience.jsx]"]
  node_projects["Projects<br/>[Projects.jsx]"]
  node_skills["Skills<br/>[Skills.jsx]"]
  node_certifications["Certifications<br/>[Certifications.jsx]"]
  node_services["Services<br/>[Services.jsx]"]
  node_contact["Contact form<br/>[Contact.jsx]"]
end

subgraph group_content["Portfolio content"]
  node_profile["Profile data<br/>[profile.js]"]
  node_timeline["History data<br/>[timeline.js]"]
  node_projectsdata["Project data<br/>[projects.js]"]
  node_skillsdata["Skills data<br/>[skills.js]"]
  node_misc["Other content<br/>[misc.js]"]
  node_navdata["Navigation links<br/>[navigation.js]"]
end

subgraph group_presentation["Shared presentation"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_animations["Motion variants<br/>[variants.js]"]
  node_sectionheading["Section heading<br/>[SectionHeading.jsx]"]
  node_reveal["Reveal wrapper<br/>[Reveal.jsx]"]
  node_projectcard["Project card<br/>[ProjectCard.jsx]"]
  node_timelineview["Timeline view<br/>[Timeline.jsx]"]
  node_skillbar["Skill bar<br/>[SkillBar.jsx]"]
  node_social["Social links<br/>[SocialLinks.jsx]"]
  node_magnetic["Magnetic button<br/>[MagneticButton.jsx]"]
  node_typing["Typing text<br/>[TypingText.jsx]"]
  node_terminal["Terminal card<br/>[TerminalCard.jsx]"]
  node_icons["Brand icons<br/>[BrandIcons.jsx]"]
end

node_visitor(("Visitor"))
node_emailjs{{"EmailJS service"}}

node_visitor -->|"opens"| node_app
node_app -->|"routes through"| node_layout
node_app -->|"routes to"| node_home
node_app -->|"routes fallback"| node_notfound
node_layout -->|"renders"| node_navbar
node_layout -->|"renders"| node_footer
node_layout -->|"hosts route"| node_home
node_navbar -->|"reads links"| node_navdata
node_navbar -->|"reads name"| node_profile
node_footer -->|"reads profile"| node_profile
node_footer -->|"reads links"| node_navdata
node_home -->|"renders"| node_hero
node_home -->|"lazy loads"| node_about
node_home -->|"lazy loads"| node_education
node_home -->|"lazy loads"| node_experience
node_home -->|"lazy loads"| node_projects
node_home -->|"lazy loads"| node_skills
node_home -->|"lazy loads"| node_contact
node_home -->|"lazy loads"| node_certifications
node_home -->|"lazy loads"| node_services
node_hero -->|"reads profile"| node_profile
node_about -->|"reads profile"| node_profile
node_education -->|"reads entries"| node_timeline
node_experience -->|"reads entries"| node_timeline
node_projects -->|"reads projects"| node_projectsdata
node_skills -->|"reads skills"| node_skillsdata
node_certifications -->|"reads entries"| node_misc
node_services -->|"reads entries"| node_misc
node_contact -->|"reads contact details"| node_profile
node_contact -->|"sends form"| node_emailjs
node_hero -->|"renders"| node_typing
node_hero -->|"renders"| node_terminal
node_hero -->|"renders"| node_magnetic
node_hero -->|"renders"| node_social
node_about -->|"renders"| node_sectionheading
node_about -->|"renders"| node_reveal
node_education -->|"renders"| node_timelineview
node_experience -->|"renders"| node_timelineview
node_projects -->|"renders"| node_projectcard
node_skills -->|"renders"| node_skillbar
node_contact -->|"renders"| node_social
node_contact -->|"renders"| node_magnetic
node_projectcard -->|"uses"| node_icons
node_social -->|"uses"| node_icons
node_social -->|"reads links"| node_profile
node_services -->|"renders"| node_sectionheading
node_services -->|"uses variants"| node_animations
node_sectionheading -->|"renders"| node_reveal

click node_app "https://github.com/linganand-04/portfolio/blob/main/src/App.jsx"
click node_layout "https://github.com/linganand-04/portfolio/blob/main/src/layouts/MainLayout.jsx"
click node_home "https://github.com/linganand-04/portfolio/blob/main/src/pages/Home.jsx"
click node_notfound "https://github.com/linganand-04/portfolio/blob/main/src/pages/NotFound.jsx"
click node_navbar "https://github.com/linganand-04/portfolio/blob/main/src/components/Navbar.jsx"
click node_footer "https://github.com/linganand-04/portfolio/blob/main/src/components/Footer.jsx"
click node_hero "https://github.com/linganand-04/portfolio/blob/main/src/sections/Hero.jsx"
click node_about "https://github.com/linganand-04/portfolio/blob/main/src/sections/About.jsx"
click node_education "https://github.com/linganand-04/portfolio/blob/main/src/sections/Education.jsx"
click node_experience "https://github.com/linganand-04/portfolio/blob/main/src/sections/Experience.jsx"
click node_projects "https://github.com/linganand-04/portfolio/blob/main/src/sections/Projects.jsx"
click node_skills "https://github.com/linganand-04/portfolio/blob/main/src/sections/Skills.jsx"
click node_certifications "https://github.com/linganand-04/portfolio/blob/main/src/sections/Certifications.jsx"
click node_services "https://github.com/linganand-04/portfolio/blob/main/src/sections/Services.jsx"
click node_contact "https://github.com/linganand-04/portfolio/blob/main/src/sections/Contact.jsx"
click node_profile "https://github.com/linganand-04/portfolio/blob/main/src/data/profile.js"
click node_timeline "https://github.com/linganand-04/portfolio/blob/main/src/data/timeline.js"
click node_projectsdata "https://github.com/linganand-04/portfolio/blob/main/src/data/projects.js"
click node_skillsdata "https://github.com/linganand-04/portfolio/blob/main/src/data/skills.js"
click node_misc "https://github.com/linganand-04/portfolio/blob/main/src/data/misc.js"
click node_navdata "https://github.com/linganand-04/portfolio/blob/main/src/constants/navigation.js"
click node_animations "https://github.com/linganand-04/portfolio/blob/main/src/animations/variants.js"
click node_sectionheading "https://github.com/linganand-04/portfolio/blob/main/src/components/SectionHeading.jsx"
click node_reveal "https://github.com/linganand-04/portfolio/blob/main/src/components/Reveal.jsx"
click node_projectcard "https://github.com/linganand-04/portfolio/blob/main/src/components/ProjectCard.jsx"
click node_timelineview "https://github.com/linganand-04/portfolio/blob/main/src/components/Timeline.jsx"
click node_skillbar "https://github.com/linganand-04/portfolio/blob/main/src/components/SkillBar.jsx"
click node_social "https://github.com/linganand-04/portfolio/blob/main/src/components/SocialLinks.jsx"
click node_magnetic "https://github.com/linganand-04/portfolio/blob/main/src/components/MagneticButton.jsx"
click node_typing "https://github.com/linganand-04/portfolio/blob/main/src/components/TypingText.jsx"
click node_terminal "https://github.com/linganand-04/portfolio/blob/main/src/components/TerminalCard.jsx"
click node_icons "https://github.com/linganand-04/portfolio/blob/main/src/components/icons/BrandIcons.jsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_layout,node_home,node_notfound toneBlue
class node_hero,node_about,node_education,node_experience,node_projects,node_skills,node_certifications,node_services,node_contact toneAmber
class node_profile,node_timeline,node_projectsdata,node_skillsdata,node_misc,node_navdata toneMint
class node_navbar,node_footer,node_animations,node_sectionheading,node_reveal,node_projectcard,node_timelineview,node_skillbar,node_social,node_magnetic,node_typing,node_terminal,node_icons toneRose
class node_visitor,node_emailjs toneIndigo
```

## Components

### App and navigation

- [Route entry](https://github.com/linganand-04/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Main layout](https://github.com/linganand-04/portfolio/blob/main/src/layouts/MainLayout.jsx): `src/layouts/MainLayout.jsx`
- [Home page](https://github.com/linganand-04/portfolio/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [404 page](https://github.com/linganand-04/portfolio/blob/main/src/pages/NotFound.jsx): `src/pages/NotFound.jsx`

### Portfolio sections

- [Hero](https://github.com/linganand-04/portfolio/blob/main/src/sections/Hero.jsx): `src/sections/Hero.jsx`
- [About](https://github.com/linganand-04/portfolio/blob/main/src/sections/About.jsx): `src/sections/About.jsx`
- [Education](https://github.com/linganand-04/portfolio/blob/main/src/sections/Education.jsx): `src/sections/Education.jsx`
- [Experience](https://github.com/linganand-04/portfolio/blob/main/src/sections/Experience.jsx): `src/sections/Experience.jsx`
- [Projects](https://github.com/linganand-04/portfolio/blob/main/src/sections/Projects.jsx): `src/sections/Projects.jsx`
- [Skills](https://github.com/linganand-04/portfolio/blob/main/src/sections/Skills.jsx): `src/sections/Skills.jsx`
- [Certifications](https://github.com/linganand-04/portfolio/blob/main/src/sections/Certifications.jsx): `src/sections/Certifications.jsx`
- [Services](https://github.com/linganand-04/portfolio/blob/main/src/sections/Services.jsx): `src/sections/Services.jsx`
- [Contact form](https://github.com/linganand-04/portfolio/blob/main/src/sections/Contact.jsx): `src/sections/Contact.jsx`

### Portfolio content

- [Profile data](https://github.com/linganand-04/portfolio/blob/main/src/data/profile.js): `src/data/profile.js`
- [History data](https://github.com/linganand-04/portfolio/blob/main/src/data/timeline.js): `src/data/timeline.js`
- [Project data](https://github.com/linganand-04/portfolio/blob/main/src/data/projects.js): `src/data/projects.js`
- [Skills data](https://github.com/linganand-04/portfolio/blob/main/src/data/skills.js): `src/data/skills.js`
- [Other content](https://github.com/linganand-04/portfolio/blob/main/src/data/misc.js): `src/data/misc.js`
- [Navigation links](https://github.com/linganand-04/portfolio/blob/main/src/constants/navigation.js): `src/constants/navigation.js`

### Shared presentation

- [Navigation](https://github.com/linganand-04/portfolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Footer](https://github.com/linganand-04/portfolio/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`
- [Motion variants](https://github.com/linganand-04/portfolio/blob/main/src/animations/variants.js): `src/animations/variants.js`
- [Section heading](https://github.com/linganand-04/portfolio/blob/main/src/components/SectionHeading.jsx): `src/components/SectionHeading.jsx`
- [Reveal wrapper](https://github.com/linganand-04/portfolio/blob/main/src/components/Reveal.jsx): `src/components/Reveal.jsx`
- [Project card](https://github.com/linganand-04/portfolio/blob/main/src/components/ProjectCard.jsx): `src/components/ProjectCard.jsx`
- [Timeline view](https://github.com/linganand-04/portfolio/blob/main/src/components/Timeline.jsx): `src/components/Timeline.jsx`
- [Skill bar](https://github.com/linganand-04/portfolio/blob/main/src/components/SkillBar.jsx): `src/components/SkillBar.jsx`
- [Social links](https://github.com/linganand-04/portfolio/blob/main/src/components/SocialLinks.jsx): `src/components/SocialLinks.jsx`
- [Magnetic button](https://github.com/linganand-04/portfolio/blob/main/src/components/MagneticButton.jsx): `src/components/MagneticButton.jsx`
- [Typing text](https://github.com/linganand-04/portfolio/blob/main/src/components/TypingText.jsx): `src/components/TypingText.jsx`
- [Terminal card](https://github.com/linganand-04/portfolio/blob/main/src/components/TerminalCard.jsx): `src/components/TerminalCard.jsx`
- [Brand icons](https://github.com/linganand-04/portfolio/blob/main/src/components/icons/BrandIcons.jsx): `src/components/icons/BrandIcons.jsx`

### Other components

- **Visitor**
- **EmailJS service**

## Connections

- Visitor → Route entry: opens (evidence: `src/App.jsx`)
- Route entry → Main layout: routes through (evidence: `src/App.jsx`)
- Route entry → Home page: routes to (evidence: `src/App.jsx`)
- Route entry → 404 page: routes fallback (evidence: `src/App.jsx`)
- Main layout → Navigation: renders (evidence: `src/layouts/MainLayout.jsx`)
- Main layout → Footer: renders (evidence: `src/layouts/MainLayout.jsx`)
- Main layout → Home page: hosts route (evidence: `src/layouts/MainLayout.jsx`)
- Navigation → Navigation links: reads links (evidence: `src/components/Navbar.jsx`)
- Navigation → Profile data: reads name (evidence: `src/components/Navbar.jsx`)
- Footer → Profile data: reads profile (evidence: `src/components/Footer.jsx`)
- Footer → Navigation links: reads links (evidence: `src/components/Footer.jsx`)
- Home page → Hero: renders (evidence: `src/pages/Home.jsx`)
- Home page → About: lazy loads (evidence: `src/pages/Home.jsx`)
- Home page → Education: lazy loads (evidence: `src/pages/Home.jsx`)
- Home page → Experience: lazy loads (evidence: `src/pages/Home.jsx`)
- Home page → Projects: lazy loads (evidence: `src/pages/Home.jsx`)
- Home page → Skills: lazy loads (evidence: `src/pages/Home.jsx`)
- Home page → Contact form: lazy loads (evidence: `src/pages/Home.jsx`)
- Home page → Certifications: lazy loads (evidence: `src/pages/Home.jsx`)
- Home page → Services: lazy loads (evidence: `src/pages/Home.jsx`)
- Hero → Profile data: reads profile (evidence: `src/sections/Hero.jsx`)
- About → Profile data: reads profile (evidence: `src/sections/About.jsx`)
- Education → History data: reads entries (evidence: `src/sections/Education.jsx`)
- Experience → History data: reads entries (evidence: `src/sections/Experience.jsx`)
- Projects → Project data: reads projects (evidence: `src/sections/Projects.jsx`)
- Skills → Skills data: reads skills (evidence: `src/sections/Skills.jsx`)
- Certifications → Other content: reads entries (evidence: `src/sections/Certifications.jsx`)
- Services → Other content: reads entries (evidence: `src/sections/Services.jsx`)
- Contact form → Profile data: reads contact details (evidence: `src/sections/Contact.jsx`)
- Contact form → EmailJS service: sends form (evidence: `src/sections/Contact.jsx`)
- Hero → Typing text: renders (evidence: `src/sections/Hero.jsx`)
- Hero → Terminal card: renders (evidence: `src/sections/Hero.jsx`)
- Hero → Magnetic button: renders (evidence: `src/sections/Hero.jsx`)
- Hero → Social links: renders (evidence: `src/sections/Hero.jsx`)
- About → Section heading: renders (evidence: `src/sections/About.jsx`)
- About → Reveal wrapper: renders (evidence: `src/sections/About.jsx`)
- Education → Timeline view: renders (evidence: `src/sections/Education.jsx`)
- Experience → Timeline view: renders (evidence: `src/sections/Experience.jsx`)
- Projects → Project card: renders (evidence: `src/sections/Projects.jsx`)
- Skills → Skill bar: renders (evidence: `src/sections/Skills.jsx`)
- Contact form → Social links: renders (evidence: `src/sections/Contact.jsx`)
- Contact form → Magnetic button: renders (evidence: `src/sections/Contact.jsx`)
- Project card → Brand icons: uses (evidence: `src/components/ProjectCard.jsx`)
- Social links → Brand icons: uses (evidence: `src/components/SocialLinks.jsx`)
- Social links → Profile data: reads links (evidence: `src/components/SocialLinks.jsx`)
- Services → Section heading: renders (evidence: `src/sections/Services.jsx`)
- Services → Motion variants: uses variants (evidence: `src/sections/Services.jsx`)
- Section heading → Reveal wrapper: renders (evidence: `src/components/SectionHeading.jsx`)