# rasinduchandumina/rasindu-portfolio architecture

> Architecture diagram of the GitHub repository rasinduchandumina/rasindu-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/rasinduchandumina/rasindu-portfolio
- Repository: https://github.com/rasinduchandumina/rasindu-portfolio

## Overview

This repository is a personal portfolio site, not the shooting-practice application described in its README; that system appears as a project entry in the portfolio data. The main visitor flow is the home page, which composes profile, skills, project, education, experience, and contact sections. Visitors can open project case studies, while the contact form submits to Web3Forms. The graph reflects inspected imports and rendered components; it does not infer runtime behavior for unsampled modules.

Main entry points: [`app/page.tsx`](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/app/page.tsx) (Home Page), [`components/Section.tsx`](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Section.tsx) (Section Wrapper), [`components/SectionHeading.tsx`](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/SectionHeading.tsx) (Section Heading), [`components/Education.tsx`](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Education.tsx) (Education Section)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["Pages and Layout"]
  node_home["Home Page<br/>[page.tsx]"]
  node_layout["Root Layout<br/>[layout.tsx]"]
  node_styles["Global Styles<br/>[globals.css]"]
  node_case["Project Case Study<br/>[page.tsx]"]
end

subgraph group_sections["Portfolio Sections"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_hero["Hero Section<br/>[Hero.tsx]"]
  node_about["About Section<br/>[About.tsx]"]
  node_skills["Skills Section<br/>[Skills.tsx]"]
  node_projects["Projects Section<br/>[Projects.tsx]"]
  node_education["Education Section<br/>[Education.tsx]"]
  node_experience["Experience Section<br/>[Experience.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_section["Section Wrapper<br/>[Section.tsx]"]
  node_heading["Section Heading<br/>[SectionHeading.tsx]"]
end

subgraph group_content["Portfolio Content"]
  node_profile["Profile Data<br/>[profile.ts]"]
  node_skillsdata["Skills Data<br/>[skills.ts]"]
  node_projectsdata["Projects Data<br/>[projects.ts]"]
  node_educationdata["Education Data<br/>[education.ts]"]
  node_experiencedata["Experience Data<br/>[experience.ts]"]
end

subgraph group_contact["Contact Flow"]
  node_contact["Contact Section<br/>[Contact.tsx]"]
end

node_visitor(("Site Visitor"))
node_web3forms{{"Web3Forms API"}}

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_about
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_education
node_home -->|"renders"| node_experience
node_home -->|"renders"| node_contact
node_home -->|"renders"| node_footer
node_layout -->|"loads"| node_styles
node_visitor -->|"opens case study"| node_case
node_case -->|"looks up project"| node_projectsdata
node_case -->|"renders"| node_education
node_case -->|"renders"| node_experience
node_hero -->|"reads"| node_profile
node_footer -->|"reads"| node_profile
node_skills -->|"reads"| node_skillsdata
node_projects -->|"reads"| node_projectsdata
node_education -->|"reads"| node_educationdata
node_experience -->|"reads"| node_experiencedata
node_about -->|"uses"| node_section
node_about -->|"uses"| node_heading
node_skills -->|"uses"| node_section
node_skills -->|"uses"| node_heading
node_projects -->|"uses"| node_section
node_projects -->|"uses"| node_heading
node_education -->|"uses"| node_section
node_education -->|"uses"| node_heading
node_experience -->|"uses"| node_section
node_experience -->|"uses"| node_heading
node_contact -->|"uses"| node_section
node_contact -->|"uses"| node_heading
node_contact -->|"submits form"| node_web3forms

click node_home "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/app/page.tsx"
click node_layout "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/app/layout.tsx"
click node_styles "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/app/globals.css"
click node_case "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/app/projects/%5Bslug%5D/page.tsx"
click node_navbar "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Navbar.tsx"
click node_hero "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Hero.tsx"
click node_about "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/About.tsx"
click node_skills "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Skills.tsx"
click node_projects "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Projects.tsx"
click node_education "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Education.tsx"
click node_experience "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Experience.tsx"
click node_contact "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Contact.tsx"
click node_footer "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Footer.tsx"
click node_section "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Section.tsx"
click node_heading "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/SectionHeading.tsx"
click node_profile "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/data/profile.ts"
click node_skillsdata "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/data/skills.ts"
click node_projectsdata "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/data/projects.ts"
click node_educationdata "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/data/education.ts"
click node_experiencedata "https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/data/experience.ts"

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_home,node_layout,node_styles,node_case toneBlue
class node_navbar,node_hero,node_about,node_skills,node_projects,node_education,node_experience,node_footer,node_section,node_heading toneAmber
class node_profile,node_skillsdata,node_projectsdata,node_educationdata,node_experiencedata,node_web3forms toneMint
class node_contact toneRose
class node_visitor toneIndigo
```

## Components

### Pages and Layout

- [Home Page](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Root Layout](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/app/layout.tsx): `app/layout.tsx`
- [Global Styles](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/app/globals.css): `app/globals.css`
- [Project Case Study](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/app/projects/%5Bslug%5D/page.tsx): `app/projects/[slug]/page.tsx`

### Portfolio Sections

- [Navigation](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Navbar.tsx): `components/Navbar.tsx`
- [Hero Section](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Hero.tsx): `components/Hero.tsx`
- [About Section](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/About.tsx): `components/About.tsx`
- [Skills Section](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Skills.tsx): `components/Skills.tsx`
- [Projects Section](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Projects.tsx): `components/Projects.tsx`
- [Education Section](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Education.tsx): `components/Education.tsx`
- [Experience Section](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Experience.tsx): `components/Experience.tsx`
- [Footer](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Footer.tsx): `components/Footer.tsx`
- [Section Wrapper](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Section.tsx): `components/Section.tsx`
- [Section Heading](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/SectionHeading.tsx): `components/SectionHeading.tsx`

### Portfolio Content

- [Profile Data](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/data/profile.ts): `data/profile.ts`
- [Skills Data](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/data/skills.ts): `data/skills.ts`
- [Projects Data](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/data/projects.ts): `data/projects.ts`
- [Education Data](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/data/education.ts): `data/education.ts`
- [Experience Data](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/data/experience.ts): `data/experience.ts`

### Contact Flow

- [Contact Section](https://github.com/rasinduchandumina/rasindu-portfolio/blob/main/components/Contact.tsx): `components/Contact.tsx`

### Other components

- **Site Visitor**
- **Web3Forms API**

## Connections

- Site Visitor → Home Page: opens (evidence: `README.md`)
- Home Page → Navigation: renders (evidence: `app/page.tsx`)
- Home Page → Hero Section: renders (evidence: `app/page.tsx`)
- Home Page → About Section: renders (evidence: `app/page.tsx`)
- Home Page → Skills Section: renders (evidence: `app/page.tsx`)
- Home Page → Projects Section: renders (evidence: `app/page.tsx`)
- Home Page → Education Section: renders (evidence: `app/page.tsx`)
- Home Page → Experience Section: renders (evidence: `app/page.tsx`)
- Home Page → Contact Section: renders (evidence: `app/page.tsx`)
- Home Page → Footer: renders (evidence: `app/page.tsx`)
- Root Layout → Global Styles: loads (evidence: `app/layout.tsx`)
- Site Visitor → Project Case Study: opens case study
- Project Case Study → Projects Data: looks up project (evidence: `app/projects/[slug]/page.tsx`)
- Project Case Study → Education Section: renders (evidence: `app/projects/[slug]/page.tsx`)
- Project Case Study → Experience Section: renders (evidence: `app/projects/[slug]/page.tsx`)
- Hero Section → Profile Data: reads (evidence: `components/Hero.tsx`)
- Footer → Profile Data: reads (evidence: `components/Footer.tsx`)
- Skills Section → Skills Data: reads (evidence: `components/Skills.tsx`)
- Projects Section → Projects Data: reads (evidence: `components/Projects.tsx`)
- Education Section → Education Data: reads (evidence: `components/Education.tsx`)
- Experience Section → Experience Data: reads (evidence: `components/Experience.tsx`)
- About Section → Section Wrapper: uses (evidence: `components/About.tsx`)
- About Section → Section Heading: uses (evidence: `components/About.tsx`)
- Skills Section → Section Wrapper: uses (evidence: `components/Skills.tsx`)
- Skills Section → Section Heading: uses (evidence: `components/Skills.tsx`)
- Projects Section → Section Wrapper: uses (evidence: `components/Projects.tsx`)
- Projects Section → Section Heading: uses (evidence: `components/Projects.tsx`)
- Education Section → Section Wrapper: uses (evidence: `components/Education.tsx`)
- Education Section → Section Heading: uses (evidence: `components/Education.tsx`)
- Experience Section → Section Wrapper: uses (evidence: `components/Experience.tsx`)
- Experience Section → Section Heading: uses (evidence: `components/Experience.tsx`)
- Contact Section → Section Wrapper: uses (evidence: `components/Contact.tsx`)
- Contact Section → Section Heading: uses (evidence: `components/Contact.tsx`)
- Contact Section → Web3Forms API: submits form (evidence: `components/Contact.tsx`)