# jigar-sable/portfolio-website architecture

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

- Interactive diagram: https://gitdiagram.com/jigar-sable/portfolio-website
- Repository: https://github.com/jigar-sable/portfolio-website

## Overview

1. This repository is a static personal portfolio site, not a server-backed application. The runtime is the browser; deployment is likely a static host such as Netlify, as indicated by the README.

2. The site is split into multiple entry pages rather than a single SPA:
   - `index.html` for the main portfolio landing page
   - `experience/index.html` for work/history content
   - `projects/index.html` for project listings
   - `404.html` for the custom error page

3. Shared presentation lives under `assets/`:
   - `assets/css/style.css` for global styling
   - `assets/js/app.js` and `assets/js/script.js` for shared client-side behavior
   - `assets/images/` for reusable media, organized into `educat`, `projects`, and `skills`

4. Each section/page also has its own local CSS and JS:
   - `experience/style.css` and `experience/script.js`
   - `projects/style.css` and `projects/script.js`
   - `assets/css/404.css` and `assets/js/404.js`
   This suggests a clear boundary between global site behavior and page-specific interactions.

5. Data-driven content is stored in JSON rather than hardcoded in HTML:
   - `projects/projects.json` likely feeds the projects page
   - `skills.json` likely feeds the skills section on the main page
   The JS files are probably responsible for fetching these files, parsing them, and rendering DOM elements.

6. The main page is the most feature-rich integration point. Based on the README, it likely combines:
   - animated intro text via Typed.js
   - visual effects via Particle.js
   - reveal-on-scroll behavior via ScrollReveal
   - card/image tilt effects via Tilt.js
   - iconography via Font Awesome
   - embedded live chat via Tawk.to

7. jQuery is part of the client stack, so some DOM manipulation and event handling are probably written with jQuery rather than plain vanilla JS. That matters for understanding how page scripts interact with the DOM and external plugins.

8. The architecture is purely front-end and componentized by page/section. There is no evidence of an API layer, database, build pipeline, or backend service. Data flow is mostly:
   static HTML shell -> page JS -> JSON/assets -> rendered DOM.

9. The `projects` area is a self-contained sub-application of sorts: its own HTML, CSS, JS, and data file. That separation makes it the clearest example of a content module with its own rendering pipeline.

10. The custom 404 page is also isolated, which means even error handling is handled client-side at the static hosting layer rather than by application routing.

11. In diagram terms, the key boundaries are:
   - shared assets vs. page-specific assets
   - static content vs. JSON-driven content
   - browser-only UI logic vs. external third-party widgets/libraries

12. Overall, the repository is a modular static portfolio site where each page loads a small set of local assets, optionally fetches JSON for dynamic rendering, and enhances the experience with a handful of browser-side libraries.

Main entry points: [`index.html`](https://github.com/jigar-sable/portfolio-website/blob/main/index.html) (Home), [`projects/index.html`](https://github.com/jigar-sable/portfolio-website/blob/main/projects/index.html) (Projects), [`experience/index.html`](https://github.com/jigar-sable/portfolio-website/blob/main/experience/index.html) (Experience), [`assets/css/style.css`](https://github.com/jigar-sable/portfolio-website/blob/main/assets/css/style.css) (Site CSS)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Pages"]
  node_index["Home<br/>html entry<br/>[index.html]"]
  node_experience_page["Experience<br/>html page<br/>[index.html]"]
  node_projects_page["Projects<br/>html page<br/>[index.html]"]
  node_not_found["404 Page<br/>html error page<br/>[404.html]"]
end

subgraph group_shared["Shared Assets"]
  node_global_css["Site CSS<br/>global stylesheet<br/>[style.css]"]
  node_global_js["Site JS<br/>global script<br/>[app.js]"]
  node_shared_script["Shared Script<br/>client script<br/>[script.js]"]
  node_global_images[("Media Library<br/>image assets")]
  node_education_imgs["Education Media<br/>image set"]
  node_project_imgs["Project Media<br/>image set"]
  node_skill_imgs["Skill Media<br/>image set"]
  node_experience_css["Exp CSS<br/>section stylesheet<br/>[style.css]"]
  node_experience_js["Exp JS<br/>section script<br/>[script.js]"]
  node_projects_css["Proj CSS<br/>section stylesheet<br/>[style.css]"]
  node_projects_js["Proj JS<br/>section script<br/>[script.js]"]
  node_error_css["404 CSS<br/>error stylesheet<br/>[404.css]"]
  node_error_js["404 JS<br/>error script<br/>[404.js]"]
end

subgraph group_content["Content Data"]
  node_projects_data["Projects Data<br/>json dataset<br/>[projects.json]"]
  node_skills_data["Skills Data<br/>json dataset<br/>[skills.json]"]
end

subgraph group_integrations["Browser Integrations"]
  node_typedjs(("Typed.js<br/>ui library"))
  node_particlesjs(("Particle.js<br/>visual effects lib"))
  node_scrollreveal(("ScrollReveal<br/>animation lib"))
  node_tiltjs(("Tilt.js<br/>interaction lib"))
  node_fontawesome(("Font Awesome<br/>icon library"))
  node_jquery(("jQuery<br/>dom library"))
  node_tawkto(("Tawk.to<br/>chat widget"))
end

node_index -->|"styles"| node_global_css
node_index -->|"boot"| node_global_js
node_index -->|"extras"| node_shared_script
node_index -->|"fetch"| node_skills_data
node_index -->|"media"| node_global_images
node_index -->|"uses"| node_typedjs
node_index -->|"uses"| node_particlesjs
node_index -->|"uses"| node_scrollreveal
node_index -->|"uses"| node_tiltjs
node_index -->|"uses"| node_fontawesome
node_index -->|"embeds"| node_tawkto
node_index -->|"depends on"| node_jquery
node_experience_page -->|"styles"| node_global_css
node_experience_page -->|"styles"| node_experience_css
node_experience_page -->|"boot"| node_experience_js
node_experience_page -->|"media"| node_education_imgs
node_experience_page -->|"depends on"| node_jquery
node_projects_page -->|"styles"| node_global_css
node_projects_page -->|"styles"| node_projects_css
node_projects_page -->|"boot"| node_projects_js
node_projects_page -->|"fetch"| node_projects_data
node_projects_page -->|"media"| node_project_imgs
node_projects_page -->|"depends on"| node_jquery
node_not_found -->|"styles"| node_error_css
node_not_found -->|"boot"| node_error_js
node_not_found -->|"styles"| node_global_css
node_global_js -->|"depends on"| node_jquery
node_global_js -->|"uses"| node_fontawesome

click node_index "https://github.com/jigar-sable/portfolio-website/blob/main/index.html"
click node_experience_page "https://github.com/jigar-sable/portfolio-website/blob/main/experience/index.html"
click node_projects_page "https://github.com/jigar-sable/portfolio-website/blob/main/projects/index.html"
click node_not_found "https://github.com/jigar-sable/portfolio-website/blob/main/404.html"
click node_global_css "https://github.com/jigar-sable/portfolio-website/blob/main/assets/css/style.css"
click node_global_js "https://github.com/jigar-sable/portfolio-website/blob/main/assets/js/app.js"
click node_shared_script "https://github.com/jigar-sable/portfolio-website/blob/main/assets/js/script.js"
click node_global_images "https://github.com/jigar-sable/portfolio-website/tree/main/assets/images"
click node_education_imgs "https://github.com/jigar-sable/portfolio-website/tree/main/assets/images/educat"
click node_project_imgs "https://github.com/jigar-sable/portfolio-website/tree/main/assets/images/projects"
click node_skill_imgs "https://github.com/jigar-sable/portfolio-website/tree/main/assets/images/skills"
click node_experience_css "https://github.com/jigar-sable/portfolio-website/blob/main/experience/style.css"
click node_experience_js "https://github.com/jigar-sable/portfolio-website/blob/main/experience/script.js"
click node_projects_css "https://github.com/jigar-sable/portfolio-website/blob/main/projects/style.css"
click node_projects_js "https://github.com/jigar-sable/portfolio-website/blob/main/projects/script.js"
click node_projects_data "https://github.com/jigar-sable/portfolio-website/blob/main/projects/projects.json"
click node_skills_data "https://github.com/jigar-sable/portfolio-website/blob/main/skills.json"
click node_error_css "https://github.com/jigar-sable/portfolio-website/blob/main/assets/css/404.css"
click node_error_js "https://github.com/jigar-sable/portfolio-website/blob/main/assets/js/404.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_index,node_experience_page,node_projects_page,node_not_found toneBlue
class node_global_css,node_global_js,node_shared_script,node_global_images,node_education_imgs,node_project_imgs,node_skill_imgs,node_experience_css,node_experience_js,node_projects_css,node_projects_js,node_error_css,node_error_js toneAmber
class node_projects_data,node_skills_data toneMint
class node_typedjs,node_particlesjs,node_scrollreveal,node_tiltjs,node_fontawesome,node_jquery,node_tawkto toneRose
```

## Components

### Pages

Top-level HTML entry points and section pages

- [Home](https://github.com/jigar-sable/portfolio-website/blob/main/index.html): html entry · Main portfolio landing page · `index.html`
- [Experience](https://github.com/jigar-sable/portfolio-website/blob/main/experience/index.html): html page · Work and history section · `experience/index.html`
- [Projects](https://github.com/jigar-sable/portfolio-website/blob/main/projects/index.html): html page · Project listings section · `projects/index.html`
- [404 Page](https://github.com/jigar-sable/portfolio-website/blob/main/404.html): html error page · Custom static-hosting error page · `404.html`

### Shared Assets

Reusable CSS, JavaScript, and media used across pages

- [Site CSS](https://github.com/jigar-sable/portfolio-website/blob/main/assets/css/style.css): global stylesheet · Shared presentation across the site · `assets/css/style.css`
- [Site JS](https://github.com/jigar-sable/portfolio-website/blob/main/assets/js/app.js): global script · Shared browser behavior for the portfolio · `assets/js/app.js`
- [Shared Script](https://github.com/jigar-sable/portfolio-website/blob/main/assets/js/script.js): client script · Additional shared interaction logic · `assets/js/script.js`
- [Media Library](https://github.com/jigar-sable/portfolio-website/tree/main/assets/images): image assets · Reusable visual assets for sections and projects · `assets/images`
- [Education Media](https://github.com/jigar-sable/portfolio-website/tree/main/assets/images/educat): image set · Education-related images · `assets/images/educat`
- [Project Media](https://github.com/jigar-sable/portfolio-website/tree/main/assets/images/projects): image set · Project-related images · `assets/images/projects`
- [Skill Media](https://github.com/jigar-sable/portfolio-website/tree/main/assets/images/skills): image set · Skill-related images · `assets/images/skills`
- [Exp CSS](https://github.com/jigar-sable/portfolio-website/blob/main/experience/style.css): section stylesheet · Experience page styling · `experience/style.css`
- [Exp JS](https://github.com/jigar-sable/portfolio-website/blob/main/experience/script.js): section script · Experience page behavior · `experience/script.js`
- [Proj CSS](https://github.com/jigar-sable/portfolio-website/blob/main/projects/style.css): section stylesheet · Projects page styling · `projects/style.css`
- [Proj JS](https://github.com/jigar-sable/portfolio-website/blob/main/projects/script.js): section script · Projects page behavior · `projects/script.js`
- [404 CSS](https://github.com/jigar-sable/portfolio-website/blob/main/assets/css/404.css): error stylesheet · 404 page styling · `assets/css/404.css`
- [404 JS](https://github.com/jigar-sable/portfolio-website/blob/main/assets/js/404.js): error script · 404 page behavior · `assets/js/404.js`

### Content Data

JSON-driven content used by page scripts

- [Projects Data](https://github.com/jigar-sable/portfolio-website/blob/main/projects/projects.json): json dataset · Structured content for project cards · `projects/projects.json`
- [Skills Data](https://github.com/jigar-sable/portfolio-website/blob/main/skills.json): json dataset · Structured skills content for the home page · `skills.json`

### Browser Integrations

External client-side libraries and widgets mentioned by the site

- **Typed.js**: ui library · Animated typing effect used on the home page
- **Particle.js**: visual effects lib · Background particle animation on the home page
- **ScrollReveal**: animation lib · Reveal-on-scroll interactions
- **Tilt.js**: interaction lib · Card and image tilt effects
- **Font Awesome**: icon library · Site iconography
- **jQuery**: dom library · DOM manipulation and event handling helper
- **Tawk.to**: chat widget · Embedded live chat integration

## Connections

- Home → Site CSS: styles · Loads shared site styling
- Home → Site JS: boot · Starts shared browser behavior
- Home → Shared Script: extras · Adds shared interaction logic
- Home → Skills Data: fetch · Renders skills content from JSON
- Home → Media Library: media · Uses shared visual assets
- Home → Typed.js: uses · Animated intro text
- Home → Particle.js: uses · Particle background effect
- Home → ScrollReveal: uses · Scroll-based reveal effects
- Home → Tilt.js: uses · Tilt interactions for cards/images
- Home → Font Awesome: uses · Icons in the UI
- Home → Tawk.to: embeds · Live chat widget
- Home → jQuery: depends on · jQuery-based DOM behavior
- Experience → Site CSS: styles · Shares the site-wide visual language
- Experience → Exp CSS: styles · Page-specific styling
- Experience → Exp JS: boot · Page-specific interactions
- Experience → Education Media: media · Uses education-related imagery
- Experience → jQuery: depends on · Likely uses jQuery for interactions
- Projects → Site CSS: styles · Shared base styles
- Projects → Proj CSS: styles · Project page styling
- Projects → Proj JS: boot · Project list rendering and interactions
- Projects → Projects Data: fetch · Loads project listings from JSON
- Projects → Project Media: media · Uses project imagery
- Projects → jQuery: depends on · Likely uses jQuery for DOM work
- 404 Page → 404 CSS: styles · 404-specific styling
- 404 Page → 404 JS: boot · 404 page behavior
- 404 Page → Site CSS: styles · May share base styling
- Site JS → jQuery: depends on · Shared scripts likely build on jQuery
- Site JS → Font Awesome: uses · Shared UI icon usage