# roxxsujal7/portfolio_roxx architecture

> Architecture diagram of the GitHub repository roxxsujal7/portfolio_roxx, 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/roxxsujal7/portfolio_roxx
- Repository: https://github.com/roxxsujal7/portfolio_roxx

## Overview

This repository is a static, interactive portfolio for Sujal, presenting his engineering profile, work, and contact links through an illustrated Spider-Verse interface. The principal workflow is a visitor exploring the portfolio, navigating its sections, and optionally switching themes or following an external contact link. The README documents the work showcase, SEO/social previews, motion, accessibility, and theme behavior. The page and component source were not sampled, so page composition and asset wiring are represented conservatively; implementation details for motion and theme are supported by the sampled scripts.

Main entry points: [`src/pages/index.astro`](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/pages/index.astro) (Portfolio Page), [`src/scripts/theme.ts`](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/scripts/theme.ts) (Theme Switcher), [`src/scripts/motion.ts`](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/scripts/motion.ts) (Motion System), [`src/styles/global.css`](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/styles/global.css) (Global Styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Portfolio Experience"]
  node_portfolio["Portfolio Page<br/>[index.astro]"]
  node_profile["Profile Content<br/>[index.astro]"]
  node_work["Project Showcase<br/>[index.astro]"]
  node_contact["Contact Links<br/>[index.astro]"]
end

subgraph group_interaction["Interactive Behavior"]
  node_motion["Motion System<br/>[motion.ts]"]
  node_theme["Theme Switcher<br/>[theme.ts]"]
  node_preference[("Theme Preference")]
end

subgraph group_presentation["Visual Presentation"]
  node_globalstyles["Global Styles<br/>[global.css]"]
  node_note["Note Component<br/>[Note.astro]"]
  node_spider["Spider Component<br/>[Spider.astro]"]
  node_web["Web Component<br/>[Web.astro]"]
  node_thumbnail["Thumbnail Component<br/>[Thumb.astro]"]
  node_artwork["Portfolio Artwork"]
end

subgraph group_identity["Social Identity"]
  node_socialpreview["Social Preview"]
end

node_visitor(("Visitor"))
node_socialplatforms(("Social Platforms"))
node_browserstorage[("Browser Storage")]

node_visitor -->|"opens"| node_portfolio
node_portfolio -->|"presents"| node_profile
node_portfolio -->|"presents"| node_work
node_portfolio -->|"presents"| node_contact
node_portfolio -->|"enables motion"| node_motion
node_portfolio -->|"enables themes"| node_theme
node_motion -->|"animates"| node_portfolio
node_theme -->|"reads and writes"| node_browserstorage
node_browserstorage -->|"restores preference"| node_theme
node_theme -->|"persists"| node_preference
node_portfolio -->|"styled by"| node_globalstyles
node_portfolio -->|"uses"| node_note
node_portfolio -->|"uses"| node_spider
node_portfolio -->|"uses"| node_web
node_portfolio -->|"uses"| node_thumbnail
node_portfolio -->|"illustrated with"| node_artwork
node_visitor -.->|"follows contact links"| node_socialplatforms
node_socialplatforms -.->|"shares preview"| node_socialpreview

click node_portfolio "https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/pages/index.astro"
click node_profile "https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/pages/index.astro"
click node_work "https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/pages/index.astro"
click node_contact "https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/pages/index.astro"
click node_motion "https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/scripts/motion.ts"
click node_theme "https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/scripts/theme.ts"
click node_globalstyles "https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/styles/global.css"
click node_note "https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/components/Note.astro"
click node_spider "https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/components/Spider.astro"
click node_web "https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/components/Web.astro"
click node_thumbnail "https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/components/Thumb.astro"
click node_artwork "https://github.com/roxxsujal7/portfolio_roxx/tree/main/src/assets"
click node_socialpreview "https://github.com/roxxsujal7/portfolio_roxx/tree/main/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_portfolio,node_profile,node_work,node_contact toneBlue
class node_motion,node_theme,node_preference,node_browserstorage toneAmber
class node_globalstyles,node_note,node_spider,node_web,node_thumbnail,node_artwork toneMint
class node_socialpreview toneRose
class node_visitor,node_socialplatforms toneIndigo
```

## Components

### Portfolio Experience

- [Portfolio Page](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/pages/index.astro): `src/pages/index.astro`
- [Profile Content](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/pages/index.astro): `src/pages/index.astro`
- [Project Showcase](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/pages/index.astro): `src/pages/index.astro`
- [Contact Links](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/pages/index.astro): `src/pages/index.astro`

### Interactive Behavior

- [Motion System](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/scripts/motion.ts): `src/scripts/motion.ts`
- [Theme Switcher](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/scripts/theme.ts): `src/scripts/theme.ts`
- **Theme Preference**

### Visual Presentation

- [Global Styles](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/styles/global.css): `src/styles/global.css`
- [Note Component](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/components/Note.astro): `src/components/Note.astro`
- [Spider Component](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/components/Spider.astro): `src/components/Spider.astro`
- [Web Component](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/components/Web.astro): `src/components/Web.astro`
- [Thumbnail Component](https://github.com/roxxsujal7/portfolio_roxx/blob/main/src/components/Thumb.astro): `src/components/Thumb.astro`
- [Portfolio Artwork](https://github.com/roxxsujal7/portfolio_roxx/tree/main/src/assets): `src/assets`

### Social Identity

- [Social Preview](https://github.com/roxxsujal7/portfolio_roxx/tree/main/public): `public`

### Other components

- **Visitor**
- **Social Platforms**
- **Browser Storage**

## Connections

- Visitor → Portfolio Page: opens
- Portfolio Page → Profile Content: presents
- Portfolio Page → Project Showcase: presents
- Portfolio Page → Contact Links: presents
- Portfolio Page → Motion System: enables motion
- Portfolio Page → Theme Switcher: enables themes
- Motion System → Portfolio Page: animates
- Theme Switcher → Browser Storage: reads and writes
- Browser Storage → Theme Switcher: restores preference
- Theme Switcher → Theme Preference: persists
- Portfolio Page → Global Styles: styled by
- Portfolio Page → Note Component: uses
- Portfolio Page → Spider Component: uses
- Portfolio Page → Web Component: uses
- Portfolio Page → Thumbnail Component: uses
- Portfolio Page → Portfolio Artwork: illustrated with
- Visitor → Social Platforms: follows contact links
- Social Platforms → Social Preview: shares preview