# asrathoredev/asrathore-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/asrathoredev/asrathore-portfolio
- Repository: https://github.com/asrathoredev/asrathore-portfolio

## Overview

1. **Repo shape**
   - This is a **Next.js App Router** portfolio application written in **TypeScript**.
   - The architecture is mostly **single-page, section-based UI composition** with one server API endpoint for contact form submission.

2. **Application entry points**
   - `src/app/page.tsx` is the main landing page and likely composes the entire portfolio from section components.
   - `src/app/layout.tsx` defines the global shell, and `src/app/globals.css` provides app-wide styling tokens and base styles.
   - `src/app/api/get-in-touch/route.ts` is the only explicit backend boundary in the repo.

3. **Page composition model**
   - The UI is split into page-level sections under `src/sections/`: `Hero`, `About`, `Skills`, `Works`, `AdiVerse`, and `GetInTouch`.
   - This suggests a **scrolling portfolio experience** where each section is a self-contained content block, assembled at the page level rather than routed to separate pages.

4. **Content/data layer**
   - `src/data/adiverse.ts` holds structured content for the AdiVerse section, likely including project or experience metadata.
   - This keeps presentation components separated from static content, making the portfolio easier to update without changing UI logic.

5. **Reusable component layer**
   - `src/components/` contains shared building blocks like `Navbar` and `Container`.
   - `src/components/ui/` contains more specialized interactive UI pieces such as `ProjectCard`, `ContactForm`, `Lightbox`, `FloatingInput`, `MagneticButton`, `PixelReveal`, and `StatsTicker`.
   - These components act as the presentation layer beneath the section-level composition.

6. **Interactive portfolio features**
   - The UI includes motion-heavy and interactive elements, consistent with the README’s mention of **Framer Motion**.
   - Likely interaction boundaries include animated buttons, reveal effects, project cards, a lightbox for media viewing, and ticker/stat presentation, all encapsulated inside the `ui` layer.

7. **Contact flow boundary**
   - `src/sections/GetInTouch.tsx` likely renders `ContactForm`.
   - `src/components/ui/ContactForm.tsx` is the client-facing form component.
   - Form submission is routed to `src/app/api/get-in-touch/route.ts`, which serves as the server-side processing endpoint. This is the main request/response data flow in the repo.

8. **AdiVerse subsystem**
   - `src/sections/AdiVerse.tsx` plus `src/components/ui/AdiVerseGrid.tsx` and `src/data/adiverse.ts` form a distinct content subsystem.
   - This appears to be a portfolio showcase area with structured project/story content, likely using a grid presentation and one or more card/lightbox interactions.

9. **Styling and design system**
   - The project uses **Tailwind CSS** for utility-driven styling, supported by `tailwind.config.ts` and `postcss.config.mjs`.
   - `components.json` and `src/components/ui/card.tsx` indicate a **design-system-style component set** similar to shadcn/ui conventions.
   - `src/lib/utils.ts` likely contains shared helpers for class composition or UI utilities.

10. **Infrastructure and runtime boundaries**
   - The app runs in the **Next.js runtime**, with the portfolio rendered from React components and the contact endpoint handled server-side in the App Router.
   - `public/` provides static assets such as images, icons, or media used throughout the portfolio.
   - There is no sign of a database, authentication system, or external CMS; content appears to be mostly local and code-driven.

11. **How to draw the architecture**
   - At the center: `page.tsx` assembling section components.
   - Under that: reusable UI components and shared utilities.
   - Side branch: local content/data files feeding specific sections.
   - Separate server boundary: the `get-in-touch` API route receiving form submissions from the contact UI.
   - Around everything: global layout/styles, Tailwind, and static assets.

Main entry points: [`src/app/page.tsx`](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/app/page.tsx) (Home page), [`src/components/ui/ContactForm.tsx`](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/ContactForm.tsx) (Contact form), [`src/lib/utils.ts`](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/lib/utils.ts) (Utils), [`src/sections/Hero.tsx`](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/sections/Hero.tsx) (Hero)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_src_app_layout_tsx["Layout<br/>app shell<br/>[layout.tsx]"]
  node_src_app_page_tsx["Home page<br/>page composer<br/>[page.tsx]"]
  node_src_app_api_get_in_touch_route_ts["Contact API<br/>route handler<br/>[route.ts]"]
end

subgraph group_sections["Page sections"]
  node_src_sections_hero_tsx["Hero<br/>section<br/>[Hero.tsx]"]
  node_src_sections_about_tsx["About<br/>section<br/>[About.tsx]"]
  node_src_sections_skills_tsx["Skills<br/>section<br/>[Skills.tsx]"]
  node_src_sections_works_tsx["Works<br/>section<br/>[Works.tsx]"]
  node_src_sections_adiverse_tsx["AdiVerse<br/>section<br/>[AdiVerse.tsx]"]
  node_src_sections_get_in_touch_tsx["Get in touch<br/>section<br/>[GetInTouch.tsx]"]
end

subgraph group_components["Shared UI"]
  node_src_components_navbar_tsx["Navbar<br/>navigation<br/>[Navbar.tsx]"]
  node_src_components_container_tsx["Container<br/>layout helper<br/>[Container.tsx]"]
  node_src_components_ui_contactform_tsx["Contact form<br/>client form<br/>[ContactForm.tsx]"]
  node_src_components_ui_adiversegrid_tsx["AdiVerse grid<br/>grid view<br/>[AdiVerseGrid.tsx]"]
  node_src_components_ui_projectcard_tsx["Project card<br/>content card<br/>[ProjectCard.tsx]"]
  node_src_components_ui_lightbox_tsx["Lightbox<br/>media viewer<br/>[Lightbox.tsx]"]
  node_src_components_ui_magneticbutton_tsx["Magnetic button<br/>interaction<br/>[MagneticButton.tsx]"]
  node_src_components_ui_pixelreveal_tsx["Pixel reveal<br/>animation<br/>[PixelReveal.tsx]"]
  node_src_components_ui_statsticker_tsx["Stats ticker<br/>metrics display<br/>[StatsTicker.tsx]"]
  node_src_components_ui_floatinginput_tsx["Floating input<br/>form field<br/>[FloatingInput.tsx]"]
  node_src_components_ui_card_tsx["Card<br/>ui primitive<br/>[card.tsx]"]
  node_src_lib_utils_ts["Utils<br/>helpers<br/>[utils.ts]"]
end

subgraph group_data["Content data"]
  node_src_data_adiverse_ts["AdiVerse data<br/>content model<br/>[adiverse.ts]"]
end

subgraph group_styles["Styling"]
  node_src_app_globals_css["Globals<br/>styles<br/>[globals.css]"]
end

node_src_app_layout_tsx -->|"loads styles"| node_src_app_globals_css
node_src_app_page_tsx -->|"renders"| node_src_sections_hero_tsx
node_src_app_page_tsx -->|"renders"| node_src_sections_about_tsx
node_src_app_page_tsx -->|"renders"| node_src_sections_skills_tsx
node_src_app_page_tsx -->|"renders"| node_src_sections_works_tsx
node_src_app_page_tsx -->|"renders"| node_src_sections_adiverse_tsx
node_src_app_page_tsx -->|"renders"| node_src_sections_get_in_touch_tsx
node_src_app_page_tsx -->|"uses"| node_src_components_navbar_tsx
node_src_sections_hero_tsx -->|"uses"| node_src_components_ui_magneticbutton_tsx
node_src_sections_hero_tsx -->|"uses"| node_src_components_ui_pixelreveal_tsx
node_src_sections_about_tsx -->|"wraps"| node_src_components_container_tsx
node_src_sections_skills_tsx -->|"uses"| node_src_components_ui_statsticker_tsx
node_src_sections_works_tsx -->|"uses"| node_src_components_ui_projectcard_tsx
node_src_sections_works_tsx -->|"uses"| node_src_components_ui_lightbox_tsx
node_src_sections_adiverse_tsx -->|"uses"| node_src_components_ui_adiversegrid_tsx
node_src_sections_adiverse_tsx -->|"reads"| node_src_data_adiverse_ts
node_src_components_ui_adiversegrid_tsx -->|"builds on"| node_src_components_ui_card_tsx
node_src_sections_get_in_touch_tsx -->|"uses"| node_src_components_ui_contactform_tsx
node_src_components_ui_contactform_tsx -->|"uses"| node_src_components_ui_floatinginput_tsx
node_src_components_ui_contactform_tsx -->|"submits to"| node_src_app_api_get_in_touch_route_ts
node_src_components_ui_contactform_tsx -->|"uses"| node_src_lib_utils_ts
node_src_components_ui_projectcard_tsx -->|"builds on"| node_src_components_ui_card_tsx
node_src_components_ui_magneticbutton_tsx -->|"uses"| node_src_lib_utils_ts
node_src_components_ui_pixelreveal_tsx -->|"uses"| node_src_lib_utils_ts
node_src_components_ui_statsticker_tsx -->|"uses"| node_src_lib_utils_ts

click node_src_app_layout_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/app/layout.tsx"
click node_src_app_page_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/app/page.tsx"
click node_src_app_api_get_in_touch_route_ts "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/app/api/get-in-touch/route.ts"
click node_src_app_globals_css "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/app/globals.css"
click node_src_sections_hero_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/sections/Hero.tsx"
click node_src_sections_about_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/sections/About.tsx"
click node_src_sections_skills_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/sections/Skills.tsx"
click node_src_sections_works_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/sections/Works.tsx"
click node_src_sections_adiverse_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/sections/AdiVerse.tsx"
click node_src_sections_get_in_touch_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/sections/GetInTouch.tsx"
click node_src_components_navbar_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/Navbar.tsx"
click node_src_components_container_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/Container.tsx"
click node_src_components_ui_contactform_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/ContactForm.tsx"
click node_src_components_ui_adiversegrid_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/AdiVerseGrid.tsx"
click node_src_components_ui_projectcard_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/ProjectCard.tsx"
click node_src_components_ui_lightbox_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/Lightbox.tsx"
click node_src_components_ui_magneticbutton_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/MagneticButton.tsx"
click node_src_components_ui_pixelreveal_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/PixelReveal.tsx"
click node_src_components_ui_statsticker_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/StatsTicker.tsx"
click node_src_components_ui_floatinginput_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/FloatingInput.tsx"
click node_src_components_ui_card_tsx "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/card.tsx"
click node_src_data_adiverse_ts "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/data/adiverse.ts"
click node_src_lib_utils_ts "https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/lib/utils.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_src_app_layout_tsx,node_src_app_page_tsx,node_src_app_api_get_in_touch_route_ts toneBlue
class node_src_sections_hero_tsx,node_src_sections_about_tsx,node_src_sections_skills_tsx,node_src_sections_works_tsx,node_src_sections_adiverse_tsx,node_src_sections_get_in_touch_tsx toneAmber
class node_src_components_navbar_tsx,node_src_components_container_tsx,node_src_components_ui_contactform_tsx,node_src_components_ui_adiversegrid_tsx,node_src_components_ui_projectcard_tsx,node_src_components_ui_lightbox_tsx,node_src_components_ui_magneticbutton_tsx,node_src_components_ui_pixelreveal_tsx,node_src_components_ui_statsticker_tsx,node_src_components_ui_floatinginput_tsx,node_src_components_ui_card_tsx,node_src_lib_utils_ts toneMint
class node_src_data_adiverse_ts toneRose
class node_src_app_globals_css toneIndigo
```

## Components

### App shell

Next.js App Router entrypoints and API boundary

- [Layout](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/app/layout.tsx): app shell · Defines the global document shell and wrappers · `src/app/layout.tsx`
- [Home page](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/app/page.tsx): page composer · Assembles the landing page from section components · `src/app/page.tsx`
- [Contact API](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/app/api/get-in-touch/route.ts): route handler · Server endpoint for contact form submission · `src/app/api/get-in-touch/route.ts`

### Page sections

Scroll-based portfolio sections assembled on the landing page

- [Hero](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/sections/Hero.tsx): section · Top-of-page intro and primary call to action · `src/sections/Hero.tsx`
- [About](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/sections/About.tsx): section · Background and personal introduction block · `src/sections/About.tsx`
- [Skills](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/sections/Skills.tsx): section · Capabilities and toolset overview · `src/sections/Skills.tsx`
- [Works](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/sections/Works.tsx): section · Portfolio projects and showcases · `src/sections/Works.tsx`
- [AdiVerse](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/sections/AdiVerse.tsx): section · Dedicated showcase section for AdiVerse content · `src/sections/AdiVerse.tsx`
- [Get in touch](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/sections/GetInTouch.tsx): section · Contact section wrapping the submission flow · `src/sections/GetInTouch.tsx`

### Shared UI

Reusable layout and interactive components

- [Navbar](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/Navbar.tsx): navigation · Primary site navigation · `src/components/Navbar.tsx`
- [Container](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/Container.tsx): layout helper · Shared width and spacing wrapper · `src/components/Container.tsx`
- [Contact form](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/ContactForm.tsx): client form · Client-facing form that submits contact data · `src/components/ui/ContactForm.tsx`
- [AdiVerse grid](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/AdiVerseGrid.tsx): grid view · Grid presentation for AdiVerse items · `src/components/ui/AdiVerseGrid.tsx`
- [Project card](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/ProjectCard.tsx): content card · Card used to present projects or featured work · `src/components/ui/ProjectCard.tsx`
- [Lightbox](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/Lightbox.tsx): media viewer · Overlay viewer for enlarged visual content · `src/components/ui/Lightbox.tsx`
- [Magnetic button](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/MagneticButton.tsx): interaction · Animated call-to-action button component · `src/components/ui/MagneticButton.tsx`
- [Pixel reveal](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/PixelReveal.tsx): animation · Reveal effect used for motion-heavy presentation · `src/components/ui/PixelReveal.tsx`
- [Stats ticker](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/StatsTicker.tsx): metrics display · Animated stats or counters for highlighted figures · `src/components/ui/StatsTicker.tsx`
- [Floating input](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/FloatingInput.tsx): form field · Animated input control used by the contact form · `src/components/ui/FloatingInput.tsx`
- [Card](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/components/ui/card.tsx): ui primitive · Base design-system card primitive · `src/components/ui/card.tsx`
- [Utils](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/lib/utils.ts): helpers · Shared utility helpers such as class composition · `src/lib/utils.ts`

### Content data

Local structured content feeding the UI

- [AdiVerse data](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/data/adiverse.ts): content model · Structured local content for the AdiVerse section · `src/data/adiverse.ts`

### Styling

Global and utility styling layers

- [Globals](https://github.com/asrathoredev/asrathore-portfolio/blob/main/src/app/globals.css): styles · App-wide base styles and design tokens · `src/app/globals.css`

## Connections

- Layout → Globals: loads styles · The app shell applies global styling
- Home page → Hero: renders · Main page composes the Hero section
- Home page → About: renders · Main page composes the About section
- Home page → Skills: renders · Main page composes the Skills section
- Home page → Works: renders · Main page composes the Works section
- Home page → AdiVerse: renders · Main page composes the AdiVerse section
- Home page → Get in touch: renders · Main page composes the contact section
- Home page → Navbar: uses · Page includes the site navigation
- Hero → Magnetic button: uses · Hero likely uses the animated CTA button
- Hero → Pixel reveal: uses · Hero presentation uses reveal animations
- About → Container: wraps · Section content is likely constrained by the shared container
- Skills → Stats ticker: uses · Skills section can present animated stats
- Works → Project card: uses · Works section renders featured project cards
- Works → Lightbox: uses · Works section may open visual previews in a lightbox
- AdiVerse → AdiVerse grid: uses · AdiVerse section uses a dedicated grid layout
- AdiVerse → AdiVerse data: reads · AdiVerse section is driven by local structured content
- AdiVerse grid → Card: builds on · Grid presentation is composed from the card primitive
- Get in touch → Contact form: uses · Contact section embeds the client form
- Contact form → Floating input: uses · Form is built from floating input controls
- Contact form → Contact API: submits to · Form posts data to the server endpoint
- Contact form → Utils: uses · Form and UI helpers share utility functions
- Project card → Card: builds on · Project cards use the shared card primitive
- Magnetic button → Utils: uses · Interactive components rely on shared helpers
- Pixel reveal → Utils: uses · Animation component shares utility helpers
- Stats ticker → Utils: uses · Ticker component shares utility helpers