# sifatahammed/stardex-a-personal-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/sifatahammed/stardex-a-personal-portfolio
- Repository: https://github.com/sifatahammed/stardex-a-personal-portfolio

## Overview

Stardex is a React personal portfolio presenting the developer’s profile, education, skills, experience, and project work, with a contact form and interactive visuals. The visitor enters through the single-page app, explores its sections, and can submit a message through EmailJS. The graph includes the documented skills and project showcases, but their component-to-data wiring is omitted because those component sources were not sampled. Other unsampled section implementations are represented only where the app’s composition supports them.

Main entry points: [`src/App.jsx`](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/App.jsx) (Portfolio app), [`src/components/Contact.jsx`](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/Contact.jsx) (Contact form), [`src/hoc/SectionWrapper.jsx`](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/hoc/SectionWrapper.jsx) (Section animation wrapper), [`src/main.jsx`](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/main.jsx) (React mount)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App composition"]
  node_mount["React mount<br/>[main.jsx]"]
  node_application["Portfolio app<br/>[App.jsx]"]
  node_navigation["Navigation<br/>[Navbar.jsx]"]
  node_sectionwrapper["Section animation wrapper<br/>[SectionWrapper.jsx]"]
  node_motion["Motion presets<br/>[motion.js]"]
end

subgraph group_profile["Profile and experience"]
  node_about["About and education<br/>[About.jsx]"]
  node_experience["Experience timeline<br/>[Experience.jsx]"]
end

subgraph group_showcase["Skills and projects"]
  node_skills["Skills showcase<br/>[Tech.jsx]"]
  node_projects["Project showcase<br/>[Works.jsx]"]
  node_content["Portfolio content<br/>[index.js]"]
end

subgraph group_contact["Contact and visuals"]
  node_contactform["Contact form<br/>[Contact.jsx]"]
  node_emailjs["EmailJS delivery"]
  node_stars["Star field<br/>[Stars.jsx]"]
  node_ball["Skill icon rendering<br/>[Ball.jsx]"]
end

node_visitor(("Portfolio visitor"))

node_visitor -->|"opens"| node_mount
node_mount -->|"renders"| node_application
node_application -->|"renders"| node_navigation
node_application -->|"renders"| node_about
node_application -->|"renders"| node_experience
node_application -->|"renders"| node_skills
node_application -->|"renders"| node_projects
node_application -->|"renders"| node_contactform
node_application -->|"renders"| node_stars
node_visitor -->|"navigates"| node_navigation
node_visitor -->|"submits message"| node_contactform
node_contactform -.->|"sends email"| node_emailjs
node_about -->|"wraps section"| node_sectionwrapper
node_contactform -->|"wraps section"| node_sectionwrapper
node_sectionwrapper -->|"uses presets"| node_motion

click node_mount "https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/main.jsx"
click node_application "https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/App.jsx"
click node_navigation "https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/Navbar.jsx"
click node_about "https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/About.jsx"
click node_experience "https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/Experience.jsx"
click node_skills "https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/Tech.jsx"
click node_projects "https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/Works.jsx"
click node_content "https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/constants/index.js"
click node_contactform "https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/Contact.jsx"
click node_stars "https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/canvas/Stars.jsx"
click node_ball "https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/canvas/Ball.jsx"
click node_sectionwrapper "https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/hoc/SectionWrapper.jsx"
click node_motion "https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/utils/motion.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_mount,node_application,node_navigation,node_sectionwrapper,node_motion toneBlue
class node_about,node_experience toneAmber
class node_skills,node_projects,node_content toneMint
class node_contactform,node_emailjs,node_stars,node_ball toneRose
class node_visitor toneIndigo
```

## Components

### App composition

- [React mount](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [Portfolio app](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Section animation wrapper](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/hoc/SectionWrapper.jsx): `src/hoc/SectionWrapper.jsx`
- [Motion presets](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/utils/motion.js): `src/utils/motion.js`

### Profile and experience

- [About and education](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Experience timeline](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/Experience.jsx): `src/components/Experience.jsx`

### Skills and projects

- [Skills showcase](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/Tech.jsx): `src/components/Tech.jsx`
- [Project showcase](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/Works.jsx): `src/components/Works.jsx`
- [Portfolio content](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/constants/index.js): `src/constants/index.js`

### Contact and visuals

- [Contact form](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`
- **EmailJS delivery**
- [Star field](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/canvas/Stars.jsx): `src/components/canvas/Stars.jsx`
- [Skill icon rendering](https://github.com/sifatahammed/stardex-a-personal-portfolio/blob/main/src/components/canvas/Ball.jsx): `src/components/canvas/Ball.jsx`

### Other components

- **Portfolio visitor**

## Connections

- Portfolio visitor → React mount: opens
- React mount → Portfolio app: renders
- Portfolio app → Navigation: renders
- Portfolio app → About and education: renders
- Portfolio app → Experience timeline: renders
- Portfolio app → Skills showcase: renders
- Portfolio app → Project showcase: renders
- Portfolio app → Contact form: renders
- Portfolio app → Star field: renders
- Portfolio visitor → Navigation: navigates
- Portfolio visitor → Contact form: submits message
- Contact form → EmailJS delivery: sends email
- About and education → Section animation wrapper: wraps section
- Contact form → Section animation wrapper: wraps section
- Section animation wrapper → Motion presets: uses presets