# samarth-arote/samartha-infosec architecture

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

- Interactive diagram: https://gitdiagram.com/samarth-arote/samartha-infosec
- Repository: https://github.com/samarth-arote/samartha-infosec

## Overview

This is a React-based interactive cybersecurity portfolio. A visitor explores the profile and its career, skills, certifications, projects/CTF, and contact sections; they can also launch a command terminal or open/download a PDF resume. App owns modal state and passes launch callbacks to navigation, hero, footer, and terminal components. Shared portfolio content and synthesized audio support the UI. The README documents 3D visuals, certification tilt cards, and responsive presentation; their internal wiring is not fully shown in the sampled source.

Main entry points: [`src/App.jsx`](https://github.com/samarth-arote/samartha-infosec/blob/main/src/App.jsx) (App State), [`src/utils/sound.js`](https://github.com/samarth-arote/samartha-infosec/blob/main/src/utils/sound.js) (Sound Synthesizer), [`src/components/TerminalConsole.jsx`](https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/TerminalConsole.jsx) (CLI Terminal), [`src/utils/portfolioData.js`](https://github.com/samarth-arote/samartha-infosec/blob/main/src/utils/portfolioData.js) (Portfolio Data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_composition["Page Composition"]
  node_app["App State<br/>[App.jsx]"]
  node_navigation["Navigation<br/>[Navbar.jsx]"]
  node_hero["3D Hero<br/>[Hero3D.jsx]"]
  node_background["3D Background"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_profile["Portfolio Content"]
  node_about["About<br/>[About.jsx]"]
  node_certifications["Certifications<br/>[Certifications.jsx]"]
  node_experience["Experience &amp; Research<br/>[Experience.jsx]"]
  node_skills["Skills Arsenal<br/>[SkillsArsenal.jsx]"]
  node_projects["Projects &amp; CTF<br/>[ProjectsAndCTF.jsx]"]
  node_contact["Contact<br/>[Contact.jsx]"]
end

subgraph group_interactions["Interactive Features"]
  node_terminal["CLI Terminal"]
  node_resume["Resume Viewer<br/>[ResumeModal.jsx]"]
end

subgraph group_shared["Shared Resources"]
  node_resume_pdf["Resume PDF"]
  node_portfolio_data["Portfolio Data<br/>[portfolioData.js]"]
  node_sound["Sound Synthesizer<br/>[sound.js]"]
  node_audio_storage[("Mute Preference")]
end

node_visitor(("Visitor"))
node_browser_audio["Web Audio API"]

node_visitor -->|"opens portfolio"| node_app
node_app -->|"renders"| node_navigation
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_background
node_app -->|"renders"| node_about
node_app -->|"renders"| node_certifications
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_app -->|"controls visibility"| node_terminal
node_app -->|"controls visibility"| node_resume
node_navigation -->|"launches modal"| node_app
node_hero -->|"launches modal"| node_app
node_footer -->|"launches modal"| node_app
node_terminal -->|"opens resume"| node_app
node_terminal -->|"reads profile"| node_portfolio_data
node_resume -->|"previews or downloads"| node_resume_pdf
node_about -->|"reads profile"| node_portfolio_data
node_experience -->|"reads experience and research"| node_portfolio_data
node_contact -->|"reads contact details"| node_portfolio_data
node_navigation -->|"plays UI sounds"| node_sound
node_hero -->|"plays UI sounds"| node_sound
node_contact -->|"plays confirmation sound"| node_sound
node_experience -->|"plays UI sounds"| node_sound
node_terminal -->|"plays UI sounds"| node_sound
node_sound -->|"reads and writes mute setting"| node_audio_storage
node_sound -->|"synthesizes effects"| node_browser_audio

click node_app "https://github.com/samarth-arote/samartha-infosec/blob/main/src/App.jsx"
click node_navigation "https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/Hero3D.jsx"
click node_background "https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/BackgroundParticles3D.jsx"
click node_about "https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/About.jsx"
click node_certifications "https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/Certifications.jsx"
click node_experience "https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/Experience.jsx"
click node_skills "https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/SkillsArsenal.jsx"
click node_projects "https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/ProjectsAndCTF.jsx"
click node_contact "https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/Contact.jsx"
click node_footer "https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/Footer.jsx"
click node_terminal "https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/TerminalConsole.jsx"
click node_resume "https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/ResumeModal.jsx"
click node_resume_pdf "https://github.com/samarth-arote/samartha-infosec/blob/main/public/assets/A-Samartha_Cybersecurity_2026.pdf"
click node_portfolio_data "https://github.com/samarth-arote/samartha-infosec/blob/main/src/utils/portfolioData.js"
click node_sound "https://github.com/samarth-arote/samartha-infosec/blob/main/src/utils/sound.js"

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_navigation,node_hero,node_background,node_footer toneBlue
class node_about,node_certifications,node_experience,node_skills,node_projects,node_contact toneAmber
class node_terminal,node_resume,node_browser_audio toneMint
class node_resume_pdf,node_portfolio_data,node_sound,node_audio_storage toneRose
class node_visitor toneIndigo
```

## Components

### Page Composition

- [App State](https://github.com/samarth-arote/samartha-infosec/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [3D Hero](https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/Hero3D.jsx): `src/components/Hero3D.jsx`
- [3D Background](https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/BackgroundParticles3D.jsx): `src/components/BackgroundParticles3D.jsx`
- [Footer](https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Portfolio Content

- [About](https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Certifications](https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/Certifications.jsx): `src/components/Certifications.jsx`
- [Experience & Research](https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/Experience.jsx): `src/components/Experience.jsx`
- [Skills Arsenal](https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/SkillsArsenal.jsx): `src/components/SkillsArsenal.jsx`
- [Projects & CTF](https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/ProjectsAndCTF.jsx): `src/components/ProjectsAndCTF.jsx`
- [Contact](https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`

### Interactive Features

- [CLI Terminal](https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/TerminalConsole.jsx): `src/components/TerminalConsole.jsx`
- [Resume Viewer](https://github.com/samarth-arote/samartha-infosec/blob/main/src/components/ResumeModal.jsx): `src/components/ResumeModal.jsx`

### Shared Resources

- [Resume PDF](https://github.com/samarth-arote/samartha-infosec/blob/main/public/assets/A-Samartha_Cybersecurity_2026.pdf): `public/assets/A-Samartha_Cybersecurity_2026.pdf`
- [Portfolio Data](https://github.com/samarth-arote/samartha-infosec/blob/main/src/utils/portfolioData.js): `src/utils/portfolioData.js`
- [Sound Synthesizer](https://github.com/samarth-arote/samartha-infosec/blob/main/src/utils/sound.js): `src/utils/sound.js`
- **Mute Preference**

### Other components

- **Visitor**
- **Web Audio API**

## Connections

- Visitor → App State: opens portfolio
- App State → Navigation: renders
- App State → 3D Hero: renders
- App State → 3D Background: renders
- App State → About: renders
- App State → Certifications: renders
- App State → Experience & Research: renders
- App State → Skills Arsenal: renders
- App State → Projects & CTF: renders
- App State → Contact: renders
- App State → Footer: renders
- App State → CLI Terminal: controls visibility
- App State → Resume Viewer: controls visibility
- Navigation → App State: launches modal
- 3D Hero → App State: launches modal
- Footer → App State: launches modal
- CLI Terminal → App State: opens resume
- CLI Terminal → Portfolio Data: reads profile
- Resume Viewer → Resume PDF: previews or downloads
- About → Portfolio Data: reads profile
- Experience & Research → Portfolio Data: reads experience and research
- Contact → Portfolio Data: reads contact details
- Navigation → Sound Synthesizer: plays UI sounds
- 3D Hero → Sound Synthesizer: plays UI sounds
- Contact → Sound Synthesizer: plays confirmation sound
- Experience & Research → Sound Synthesizer: plays UI sounds
- CLI Terminal → Sound Synthesizer: plays UI sounds
- Sound Synthesizer → Mute Preference: reads and writes mute setting
- Sound Synthesizer → Web Audio API: synthesizes effects