# basith-md/portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/basith-md/portfolio
- Repository: https://github.com/basith-md/portfolio

## Overview

This repository contains two related portfolio implementations:

1. a root-level static GitHub Pages site, and  
2. a separate React-based portfolio app under `portfolio-project/`.

For an architecture diagram, treat them as two delivery surfaces with different implementation styles but similar content goals.

1. Root-level site: static, CDN-driven portfolio
- The top-level `index.html`, `style.css`, and `script.js` form a single-page static website.
- The README describes a traditional portfolio with hero/about/skills/projects/contact/footer sections, sticky navigation, scroll animations, and responsive layout.
- Dependencies such as AOS, Font Awesome, and Google Fonts are pulled in externally, so the browser is the runtime and the page behavior is mostly client-side only.

2. Static assets and auxiliary pages
- `assets/` holds images and documents used by the site, including the resume PDF and gallery imagery.
- `assets/images/gallery/gallery.html` suggests a secondary static gallery experience rather than a backend-driven feature.
- `.nojekyll` indicates GitHub Pages deployment without Jekyll processing, so the root site is intended to be served as-is.

3. React app: separate component-based portfolio
- `portfolio-project/` is a React single-page app, likely the more structured implementation.
- Its presence of `package.json`, `src/`, `public/`, `reportWebVitals.js`, and `setupTests.js` points to a Create React App-style toolchain.
- `tailwind.config.js` and `postcss.config.js` show that styling is at least partially Tailwind/PostCSS-based.

4. Application shell and composition
- `src/App.js` is the top-level composition point for the React app.
- `src/index.js` mounts the app into the DOM; `src/App.css` and `src/index.css` provide global and app-level styles.
- The app is organized as a sectioned portfolio rather than a routed multi-page application.

5. Content is data-driven
- `src/data/experiences.js`, `projects.js`, and `personalInfo.js` centralize portfolio content.
- This keeps the UI components mostly presentational, with data flowing from these modules into section components.
- That makes the architecture easier to diagram as: data files → section components → rendered portfolio sections.

6. Main section components
- `src/components/Sections/` contains the primary page sections: About, Experience, Projects, and Gallery.
- These are likely the major vertical slices of the page and are the main content boundaries for the app.
- The sections probably consume data modules and render reusable UI blocks.

7. Reusable interaction components
- `src/components/Cards/ExpandableCard.js` is a reusable card pattern, likely used in projects or experience display.
- `src/components/UI/RPGTextBox.js` suggests a stylized text container that supports the portfolio’s themed presentation.
- These reusable components separate content presentation from section layout.

8. Navigation and user interaction
- `src/components/Navigation/SwipeNavigation.js` is the main navigation interaction layer in the React app.
- Its name implies gesture-aware navigation, which is important for mobile/touch interaction.
- This is likely the central control for moving between sections, rather than route changes or page reloads.

9. Decorative pixel-art scene as a subsystem
- The `src/components/Pixel/` folder contains themed scene elements such as `PixelWorld`, `PixelCat`, `PixelFireplace`, `RetroComputer`, `Bookshelves`, `DeskArea`, and `SkillsCoffeeTable`.
- These are not just icons; they form a cohesive visual environment, probably the portfolio’s hero/scene area.
- Architecturally, this is a separate visual subsystem that enhances branding and engagement but does not appear to drive core data flow.

10. Utility layer
- `src/utils/helpers.js` likely contains shared formatting or UI helper logic.
- `src/utils/soundfx.js` indicates optional audio feedback for interactive elements.
- These utilities sit below the components and support cross-cutting behavior.

11. Public assets and app entry points
- `public/index.html`, `manifest.json`, and `robots.txt` define the app shell and browser metadata.
- The React app is browser-delivered and likely built into static assets for deployment.
- This keeps deployment simple: no server-side runtime is implied.

12. Testing and quality boundaries
- `src/App.test.js` and `src/setupTests.js` show that the React app includes a test harness.
- `reportWebVitals.js` indicates performance metrics support.
- These are supporting boundaries around the UI rather than core product logic.

13. Architectural distinction between the two implementations
- The root site is minimal and static: HTML/CSS/JS enhanced by third-party libraries.
- The React app is modular and data-driven, with reusable components and clearer internal boundaries.
- If diagramming the repo, show them as parallel implementations or a migration path, not as a single unified codebase.

14. Practical system boundary for the repository
- External input is mostly static content: portfolio text, images, resume, and section data.
- Internal processing is entirely client-side rendering and interaction.
- Output is a responsive personal portfolio optimized for GitHub Pages-style static hosting.

If you want the cleanest architecture diagram, model the repo as:
- content/assets,
- a static site delivery path at the root,
- a React SPA under `portfolio-project/`,
- and shared client-side interaction layers for navigation, animations, and visual presentation.

Main entry points: [`portfolio-project`](https://github.com/basith-md/portfolio/tree/main/portfolio-project) (React app), [`portfolio-project/src/components/Sections`](https://github.com/basith-md/portfolio/tree/main/portfolio-project/src/components/Sections) (Sections), [`portfolio-project/src/App.js`](https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/App.js) (App shell), [`assets`](https://github.com/basith-md/portfolio/tree/main/assets) (Assets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_root_static["Root site"]
  node_root_static["Root site<br/>delivery surface"]
  node_root_index["Index page<br/>static html shell<br/>[index.html]"]
  node_root_style["Site styles<br/>static css<br/>[style.css]"]
  node_root_script["Site script<br/>client js<br/>[script.js]"]
  node_root_github_pages["Pages deploy<br/>static hosting<br/>[.nojekyll]"]
end

subgraph group_react_app["React app"]
  node_react_app["React app<br/>delivery surface"]
  node_react_shell["App shell<br/>react spa<br/>[App.js]"]
  node_react_entry["React entry<br/>dom mount<br/>[index.js]"]
  node_react_styles["App styles<br/>css bundle<br/>[App.css]"]
  node_react_global_css["Global css<br/>css bundle<br/>[index.css]"]
  node_react_data[("Content data<br/>data modules")]
  node_react_sections["Sections"]
  node_react_navigation["Swipe nav<br/>interaction layer<br/>[SwipeNavigation.js]"]
  node_react_cards["Cards<br/>reusable ui<br/>[ExpandableCard.js]"]
  node_react_textbox["Text box<br/>presentation ui<br/>[RPGTextBox.js]"]
  node_react_pixel_scene["Pixel scene<br/>visual subsystem"]
  node_react_utils["Utilities<br/>helpers"]
  node_react_public["Public shell<br/>static app shell"]
end

subgraph group_shared_content["Content assets"]
  node_assets_root[("Assets<br/>media bundle")]
  node_assets_gallery["Gallery page<br/>static gallery<br/>[gallery.html]"]
  node_resume_pdf["Resume PDF<br/>document asset<br/>[Basi's Resume.pdf]"]
end

node_root_static -->|"serves"| node_root_index
node_root_static -->|"styles"| node_root_style
node_root_static -->|"behaves"| node_root_script
node_root_static -->|"hosts on"| node_root_github_pages
node_root_static -->|"uses"| node_assets_root
node_assets_root -->|"contains"| node_assets_gallery
node_assets_root -->|"contains"| node_resume_pdf
node_react_app -->|"composes"| node_react_shell
node_react_app -->|"boots"| node_react_entry
node_react_app -->|"ships with"| node_react_public
node_react_shell -->|"renders"| node_react_sections
node_react_shell -->|"coordinates"| node_react_navigation
node_react_shell -->|"frames"| node_react_pixel_scene
node_react_sections -->|"consumes"| node_react_data
node_react_sections -->|"uses"| node_react_cards
node_react_sections -->|"uses"| node_react_textbox
node_react_sections -->|"references"| node_assets_root
node_react_pixel_scene -->|"supported by"| node_react_utils
node_react_app -->|"styles"| node_react_styles
node_react_app -->|"styles"| node_react_global_css

click node_react_app "https://github.com/basith-md/portfolio/tree/main/portfolio-project"
click node_root_index "https://github.com/basith-md/portfolio/blob/main/index.html"
click node_root_style "https://github.com/basith-md/portfolio/blob/main/style.css"
click node_root_script "https://github.com/basith-md/portfolio/blob/main/script.js"
click node_root_github_pages "https://github.com/basith-md/portfolio/blob/main/.nojekyll"
click node_assets_root "https://github.com/basith-md/portfolio/tree/main/assets"
click node_assets_gallery "https://github.com/basith-md/portfolio/blob/main/assets/images/gallery/gallery.html"
click node_resume_pdf "https://github.com/basith-md/portfolio/blob/main/assets/documents/Basi's Resume.pdf"
click node_react_shell "https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/App.js"
click node_react_entry "https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/index.js"
click node_react_styles "https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/App.css"
click node_react_global_css "https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/index.css"
click node_react_data "https://github.com/basith-md/portfolio/tree/main/portfolio-project/src/data"
click node_react_sections "https://github.com/basith-md/portfolio/tree/main/portfolio-project/src/components/Sections"
click node_react_navigation "https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/components/Navigation/SwipeNavigation.js"
click node_react_cards "https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/components/Cards/ExpandableCard.js"
click node_react_textbox "https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/components/UI/RPGTextBox.js"
click node_react_pixel_scene "https://github.com/basith-md/portfolio/tree/main/portfolio-project/src/components/Pixel"
click node_react_utils "https://github.com/basith-md/portfolio/tree/main/portfolio-project/src/utils"
click node_react_public "https://github.com/basith-md/portfolio/tree/main/portfolio-project/public"

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_root_static,node_root_index,node_root_style,node_root_script,node_root_github_pages toneBlue
class node_react_app,node_react_shell,node_react_entry,node_react_styles,node_react_global_css,node_react_data,node_react_sections,node_react_navigation,node_react_cards,node_react_textbox,node_react_pixel_scene,node_react_utils,node_react_public toneAmber
class node_assets_root,node_assets_gallery,node_resume_pdf toneMint
```

## Components

### Root site

Static GitHub Pages portfolio served from the repository root.

- **Root site**: delivery surface · Static single-page portfolio served from the repository root.
- [Index page](https://github.com/basith-md/portfolio/blob/main/index.html): static html shell · Top-level single-page entry for the static portfolio. · `index.html`
- [Site styles](https://github.com/basith-md/portfolio/blob/main/style.css): static css · Global presentation and responsive layout for the root site. · `style.css`
- [Site script](https://github.com/basith-md/portfolio/blob/main/script.js): client js · Browser-side behavior for navigation, animation, and interaction. · `script.js`
- [Pages deploy](https://github.com/basith-md/portfolio/blob/main/.nojekyll): static hosting · Jekyll-disabled GitHub Pages delivery for the root site. · `.nojekyll`

### React app

Component-based portfolio under portfolio-project/.

- [React app](https://github.com/basith-md/portfolio/tree/main/portfolio-project): delivery surface · Separate React-based portfolio implementation under portfolio-project/. · `portfolio-project`
- [App shell](https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/App.js): react spa · Create React App-style browser application under portfolio-project/. · `portfolio-project/src/App.js`
- [React entry](https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/index.js): dom mount · Bootstraps the React app into the DOM. · `portfolio-project/src/index.js`
- [App styles](https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/App.css): css bundle · App-level styling for the React portfolio. · `portfolio-project/src/App.css`
- [Global css](https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/index.css): css bundle · Base styles shared across the React app. · `portfolio-project/src/index.css`
- [Content data](https://github.com/basith-md/portfolio/tree/main/portfolio-project/src/data): data modules · Centralized portfolio content feeding the React sections. · `portfolio-project/src/data`
- [Sections](https://github.com/basith-md/portfolio/tree/main/portfolio-project/src/components/Sections): page sections · Primary portfolio sections rendered in the React app. · `portfolio-project/src/components/Sections`
- [Swipe nav](https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/components/Navigation/SwipeNavigation.js): interaction layer · Gesture-aware navigation for moving between sections. · `portfolio-project/src/components/Navigation/SwipeNavigation.js`
- [Cards](https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/components/Cards/ExpandableCard.js): reusable ui · Expandable content card pattern used by section views. · `portfolio-project/src/components/Cards/ExpandableCard.js`
- [Text box](https://github.com/basith-md/portfolio/blob/main/portfolio-project/src/components/UI/RPGTextBox.js): presentation ui · Themed text container used for stylized content blocks. · `portfolio-project/src/components/UI/RPGTextBox.js`
- [Pixel scene](https://github.com/basith-md/portfolio/tree/main/portfolio-project/src/components/Pixel): visual subsystem · Cohesive pixel-art environment used for the app’s branded presentation. · `portfolio-project/src/components/Pixel`
- [Utilities](https://github.com/basith-md/portfolio/tree/main/portfolio-project/src/utils): helpers · Shared helpers and optional sound effects for interactive behavior. · `portfolio-project/src/utils`
- [Public shell](https://github.com/basith-md/portfolio/tree/main/portfolio-project/public): static app shell · Browser metadata and deploy-time public assets for the React build. · `portfolio-project/public`

### Content assets

Shared portfolio content and static media used by both surfaces.

- [Assets](https://github.com/basith-md/portfolio/tree/main/assets): media bundle · Images, documents, and auxiliary static content for the portfolio. · `assets`
- [Gallery page](https://github.com/basith-md/portfolio/blob/main/assets/images/gallery/gallery.html): static gallery · Standalone gallery experience under the assets tree. · `assets/images/gallery/gallery.html`
- [Resume PDF](https://github.com/basith-md/portfolio/blob/HEAD/assets/documents/Basi's%20Resume.pdf): document asset · Downloadable resume used by the portfolio. · `assets/documents/Basi's Resume.pdf`

## Connections

- Root site → Index page: serves · Static page entry is delivered directly from the repository root.
- Root site → Site styles: styles · The root HTML uses the top-level stylesheet.
- Root site → Site script: behaves · Client-side interactions are implemented in the root script.
- Root site → Pages deploy: hosts on · The site is intended for GitHub Pages without Jekyll processing.
- Root site → Assets: uses · Root site content pulls images, documents, and gallery assets.
- Assets → Gallery page: contains · The assets tree includes a separate static gallery page.
- Assets → Resume PDF: contains · The assets tree includes the downloadable resume.
- React app → App shell: composes · The React portfolio is organized around the app root component.
- React app → React entry: boots · The entry module mounts the React app into the DOM.
- React app → Public shell: ships with · Public HTML and metadata support the browser-delivered build.
- App shell → Sections: renders · The app shell assembles the main portfolio sections.
- App shell → Swipe nav: coordinates · Navigation controls section flow within the single-page experience.
- App shell → Pixel scene: frames · The shell includes the themed pixel-art environment.
- Sections → Content data: consumes · Sections are populated from centralized content modules.
- Sections → Cards: uses · Section views reuse expandable card presentation.
- Sections → Text box: uses · Sections use themed text containers for content framing.
- Sections → Assets: references · Portfolio sections can draw on shared media assets.
- Pixel scene → Utilities: supported by · Visual and interactive details can rely on shared helpers and sound effects.
- React app → App styles: styles · App-specific styling shapes the React portfolio layout.
- React app → Global css: styles · Global CSS provides baseline styling across the app.