# abhisheksable007/portfolio architecture

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

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

## Overview

This is a portfolio website with a browser experience and an Express server. Visitors view the portfolio, interact with its animated text, filtered projects, carousel and other page behaviors, and can submit a contact form; the server validates and rate-limits submissions before emailing them. The README provides no capability details, and the HTML was not excerpted, so the graph focuses on relationships directly visible in the sampled JavaScript and server code; other page sections and integrations are not inferred.

Main entry points: [`js/main.js`](https://github.com/abhisheksable007/portfolio/blob/main/js/main.js) (Page interactions), [`server.js`](https://github.com/abhisheksable007/portfolio/blob/main/server.js) (Static asset server), [`mail/contact.js`](https://github.com/abhisheksable007/portfolio/blob/main/mail/contact.js) (Contact form client), [`index.html`](https://github.com/abhisheksable007/portfolio/blob/main/index.html) (Portfolio page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Portfolio website"]
  node_site["Portfolio page<br/>[index.html]"]
  node_browser["Static asset server<br/>[server.js]"]
end

subgraph group_interaction["Browser interactions"]
  node_main["Page interactions<br/>[main.js]"]
end

subgraph group_contact["Contact service"]
  node_contactform["Contact form client<br/>[contact.js]"]
  node_contactapi["Contact API<br/>[server.js]"]
  node_smtp["SMTP mail service"]
end

subgraph group_libraries["UI libraries"]
  node_typed["Typed text<br/>[typed.js]"]
  node_isotope["Portfolio filtering<br/>[isotope.pkgd.js]"]
  node_carousel["Carousel<br/>[owl.carousel.js]"]
  node_waypoints["Scroll trigger"]
  node_lightbox["Image lightbox<br/>[lightbox.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"requests page"| node_browser
node_browser -->|"serves page"| node_site
node_visitor -->|"uses page"| node_main
node_main -->|"initializes"| node_typed
node_main -->|"filters projects"| node_isotope
node_main -->|"initializes"| node_carousel
node_main -->|"registers trigger"| node_waypoints
node_visitor -->|"submits form"| node_contactform
node_contactform -->|"posts JSON"| node_contactapi
node_contactapi -->|"sends email"| node_smtp

click node_site "https://github.com/abhisheksable007/portfolio/blob/main/index.html"
click node_browser "https://github.com/abhisheksable007/portfolio/blob/main/server.js"
click node_main "https://github.com/abhisheksable007/portfolio/blob/main/js/main.js"
click node_contactform "https://github.com/abhisheksable007/portfolio/blob/main/mail/contact.js"
click node_contactapi "https://github.com/abhisheksable007/portfolio/blob/main/server.js"
click node_typed "https://github.com/abhisheksable007/portfolio/blob/main/lib/typed/typed.js"
click node_isotope "https://github.com/abhisheksable007/portfolio/blob/main/lib/isotope/isotope.pkgd.js"
click node_carousel "https://github.com/abhisheksable007/portfolio/blob/main/lib/owlcarousel/owl.carousel.js"
click node_waypoints "https://github.com/abhisheksable007/portfolio/tree/main/lib/waypoints"
click node_lightbox "https://github.com/abhisheksable007/portfolio/blob/main/lib/lightbox/js/lightbox.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_site,node_browser toneBlue
class node_main toneAmber
class node_contactform,node_contactapi,node_smtp toneMint
class node_typed,node_isotope,node_carousel,node_waypoints,node_lightbox toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio website

- [Portfolio page](https://github.com/abhisheksable007/portfolio/blob/main/index.html): `index.html`
- [Static asset server](https://github.com/abhisheksable007/portfolio/blob/main/server.js): `server.js`

### Browser interactions

- [Page interactions](https://github.com/abhisheksable007/portfolio/blob/main/js/main.js): `js/main.js`

### Contact service

- [Contact form client](https://github.com/abhisheksable007/portfolio/blob/main/mail/contact.js): `mail/contact.js`
- [Contact API](https://github.com/abhisheksable007/portfolio/blob/main/server.js): `server.js`
- **SMTP mail service**

### UI libraries

- [Typed text](https://github.com/abhisheksable007/portfolio/blob/main/lib/typed/typed.js): `lib/typed/typed.js`
- [Portfolio filtering](https://github.com/abhisheksable007/portfolio/blob/main/lib/isotope/isotope.pkgd.js): `lib/isotope/isotope.pkgd.js`
- [Carousel](https://github.com/abhisheksable007/portfolio/blob/main/lib/owlcarousel/owl.carousel.js): `lib/owlcarousel/owl.carousel.js`
- [Scroll trigger](https://github.com/abhisheksable007/portfolio/tree/main/lib/waypoints): `lib/waypoints`
- [Image lightbox](https://github.com/abhisheksable007/portfolio/blob/main/lib/lightbox/js/lightbox.js): `lib/lightbox/js/lightbox.js`

### Other components

- **Visitor**

## Connections

- Visitor → Static asset server: requests page (evidence: `server.js`)
- Static asset server → Portfolio page: serves page (evidence: `server.js`)
- Visitor → Page interactions: uses page (evidence: `js/main.js`)
- Page interactions → Typed text: initializes (evidence: `js/main.js`)
- Page interactions → Portfolio filtering: filters projects (evidence: `js/main.js`)
- Page interactions → Carousel: initializes (evidence: `js/main.js`)
- Page interactions → Scroll trigger: registers trigger (evidence: `js/main.js`)
- Visitor → Contact form client: submits form (evidence: `mail/contact.js`)
- Contact form client → Contact API: posts JSON (evidence: `mail/contact.js`)
- Contact API → SMTP mail service: sends email (evidence: `server.js`)