# jayjain2365/my-portfolio architecture
> Architecture diagram of the GitHub repository jayjain2365/my-portfolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-05-12). It is an AI-made overview: check details against the source.
- Interactive diagram: https://gitdiagram.com/jayjain2365/my-portfolio
- Repository: https://github.com/jayjain2365/my-portfolio
## Overview
1. **Repository type**
- This is a **static personal portfolio site** for Jay Jain, focused on Electronics, IoT, and Web Development.
- There is **no backend, database, or build pipeline visible** in the repo; the architecture is browser + static files only.
2. **Main entry point**
- `index.html` is the primary landing page.
- It likely acts as the navigation hub into the rest of the portfolio and project detail pages.
3. **Page-level structure**
- The repo contains multiple standalone HTML pages: `Industrial.html`, `Hackathon.html`, `Jarvis.html`, `LDR.html`, `Nightsense.html`, `DE.html`, `8_bitriscalu.html`.
- These appear to be **individual project or topic pages**, each serving a separate content slice rather than a single routed application.
4. **Content organization boundary**
- The site is organized as **static pages + local assets**.
- Each HTML file owns its own content presentation, while shared design behavior is likely handled by simple CSS/JS included per page or inline.
5. **Media subsystem**
- The repository includes local media assets such as `video.mp4` and `industrial.mp4`.
- These are likely embedded directly into the relevant project pages to demonstrate hardware or project behavior without needing a server-side media service.
6. **Documentation and downloadable artifacts**
- PDFs such as `README.md`-referenced project documentation, `SIH.pdf`, `resume.pdf`, and `NPTEL_CERTIFICATE.pdf` are part of the portfolio content.
- This creates a documentation/download boundary: the browser can view or download credentials and project reports directly from the site.
7. **Embedded hardware/software project support**
- `industrial_code.ino` is an Arduino sketch, which indicates at least one project page exposes **embedded-system source code** alongside demos and documentation.
- That suggests a portfolio pattern where each project page bundles presentation, evidence, and implementation artifacts.
8. **Featured project focus**
- The README highlights **“Indigenous Contactless ITMS (SIH 2025)”** as a major feature.
- In architecture terms, this is the most prominent content module: a project narrative supported by embedded documentation and demo material.
9. **Client-side technologies**
- The site is built with **HTML5, CSS3, and JavaScript**.
- This implies all interaction is handled in the browser; there is no application server logic to diagram.
10. **Navigation and interaction flow**
- Typical flow is: **visitor opens `index.html` → selects a project page → views embedded media/PDFs/code references**.
- Any dynamic behavior is limited to front-end interactions such as page transitions, media embedding, and responsive layout.
11. **Hosting/deployment boundary**
- The README references a live site on **Netlify**, so the deployment model is **static hosting/CDN-style delivery**.
- That means the runtime architecture is: browser requests static files from hosting, then renders content locally.
12. **External service usage**
- The README mentions an **integrated YouTube demo video**, so some pages may reference external video hosting in addition to the local MP4 files.
- This is the main external dependency that affects the user experience; everything else is self-contained in the repo.
13. **Diagramming takeaway**
- For an architecture diagram, model this repo as:
- **One static web app**
- **Multiple content pages**
- **Shared local asset pool** for PDFs, videos, and code files
- **Optional external video embed**
- **No server-side processing layer**
Main entry points: [`index.html`](https://github.com/jayjain2365/my-portfolio/blob/main/index.html) (Home), [`Industrial.html`](https://github.com/jayjain2365/my-portfolio/blob/main/Industrial.html) (Industrial), [`README.md`](https://github.com/jayjain2365/my-portfolio/blob/main/README.md) (README), [`Hackathon.html`](https://github.com/jayjain2365/my-portfolio/blob/main/Hackathon.html) (Hackathon)
## Diagram (Mermaid)
```mermaid
flowchart TD
subgraph group_site["Static site"]
node_index_html["Home
entry page
[index.html]"]
node_industrial_html["Industrial
project page
[Industrial.html]"]
node_hackathon_html["Hackathon
project page
[Hackathon.html]"]
node_jarvis_html["Jarvis
project page
[Jarvis.html]"]
node_ldr_html["LDR
project page
[LDR.html]"]
node_nightsense_html["Nightsense
project page
[Nightsense.html]"]
node_de_html["DE
project page
[DE.html]"]
node_bitriscalu_html["8 Bitriscalu
project page
[8_bitriscalu.html]"]
end
subgraph group_artifacts["Local artifacts"]
node_industrial_mp4[("Industrial demo
video asset
[industrial.mp4]")]
node_video_mp4[("Demo video
video asset
[video.mp4]")]
node_industrial_code_ino["Arduino code
embedded source"]
end
subgraph group_docs["Documentation"]
node_sih_pdf["SIH PDF
project document
[SIH.pdf]"]
node_resume_pdf["Resume
credential pdf
[resume.pdf]"]
node_nptel_pdf["NPTEL certificate
credential pdf"]
node_readme_md["README
site docs
[README.md]"]
end
subgraph group_external["External service"]
node_youtube_embed(("YouTube demo
external video"))
end
node_readme_md -->|"describes"| node_index_html
node_readme_md -->|"highlights"| node_industrial_html
node_index_html -->|"navigates to"| node_industrial_html
node_index_html -->|"navigates to"| node_hackathon_html
node_index_html -->|"navigates to"| node_jarvis_html
node_index_html -->|"navigates to"| node_ldr_html
node_index_html -->|"navigates to"| node_nightsense_html
node_index_html -->|"navigates to"| node_de_html
node_index_html -->|"navigates to"| node_bitriscalu_html
node_industrial_html -->|"embeds"| node_industrial_mp4
node_industrial_html -->|"shows code"| node_industrial_code_ino
node_industrial_html -->|"references"| node_sih_pdf
node_jarvis_html -->|"embeds"| node_video_mp4
node_hackathon_html -->|"references"| node_sih_pdf
node_readme_md -.->|"mentions"| node_youtube_embed
click node_index_html "https://github.com/jayjain2365/my-portfolio/blob/main/index.html"
click node_industrial_html "https://github.com/jayjain2365/my-portfolio/blob/main/Industrial.html"
click node_hackathon_html "https://github.com/jayjain2365/my-portfolio/blob/main/Hackathon.html"
click node_jarvis_html "https://github.com/jayjain2365/my-portfolio/blob/main/Jarvis.html"
click node_ldr_html "https://github.com/jayjain2365/my-portfolio/blob/main/LDR.html"
click node_nightsense_html "https://github.com/jayjain2365/my-portfolio/blob/main/Nightsense.html"
click node_de_html "https://github.com/jayjain2365/my-portfolio/blob/main/DE.html"
click node_bitriscalu_html "https://github.com/jayjain2365/my-portfolio/blob/main/8_bitriscalu.html"
click node_industrial_mp4 "https://github.com/jayjain2365/my-portfolio/blob/main/industrial.mp4"
click node_video_mp4 "https://github.com/jayjain2365/my-portfolio/blob/main/video.mp4"
click node_industrial_code_ino "https://github.com/jayjain2365/my-portfolio/blob/main/industrial_code.ino"
click node_sih_pdf "https://github.com/jayjain2365/my-portfolio/blob/main/SIH.pdf"
click node_resume_pdf "https://github.com/jayjain2365/my-portfolio/blob/main/resume.pdf"
click node_nptel_pdf "https://github.com/jayjain2365/my-portfolio/blob/main/NPTEL_CERTIFICATE.pdf"
click node_readme_md "https://github.com/jayjain2365/my-portfolio/blob/main/README.md"
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_html,node_industrial_html,node_hackathon_html,node_jarvis_html,node_ldr_html,node_nightsense_html,node_de_html,node_bitriscalu_html toneBlue
class node_industrial_mp4,node_video_mp4,node_industrial_code_ino toneAmber
class node_sih_pdf,node_resume_pdf,node_nptel_pdf,node_readme_md toneMint
class node_youtube_embed toneRose
```
## Components
### Static site
Browser-facing HTML pages that present the portfolio and project content.
- [Home](https://github.com/jayjain2365/my-portfolio/blob/main/index.html): entry page · Primary landing page and navigation hub for the portfolio. · `index.html`
- [Industrial](https://github.com/jayjain2365/my-portfolio/blob/main/Industrial.html): project page · Project page for the industrial ITMS work and related demo content. · `Industrial.html`
- [Hackathon](https://github.com/jayjain2365/my-portfolio/blob/main/Hackathon.html): project page · Standalone project or event page for hackathon content. · `Hackathon.html`
- [Jarvis](https://github.com/jayjain2365/my-portfolio/blob/main/Jarvis.html): project page · Standalone project page for the Jarvis-related work. · `Jarvis.html`
- [LDR](https://github.com/jayjain2365/my-portfolio/blob/main/LDR.html): project page · Standalone page for the LDR-based project content. · `LDR.html`
- [Nightsense](https://github.com/jayjain2365/my-portfolio/blob/main/Nightsense.html): project page · Standalone page for the Nightsense project content. · `Nightsense.html`
- [DE](https://github.com/jayjain2365/my-portfolio/blob/main/DE.html): project page · Standalone page for the DE project content. · `DE.html`
- [8 Bitriscalu](https://github.com/jayjain2365/my-portfolio/blob/main/8_bitriscalu.html): project page · Standalone page for the 8_bitriscalu project content. · `8_bitriscalu.html`
### Local artifacts
Bundled media, documents, and source files delivered as static assets.
- [Industrial demo](https://github.com/jayjain2365/my-portfolio/blob/main/industrial.mp4): video asset · Local video used to demonstrate the industrial project. · `industrial.mp4`
- [Demo video](https://github.com/jayjain2365/my-portfolio/blob/main/video.mp4): video asset · Generic local video asset embedded in portfolio pages. · `video.mp4`
- [Arduino code](https://github.com/jayjain2365/my-portfolio/blob/main/industrial_code.ino): embedded source · Arduino sketch supporting the industrial project. · `industrial_code.ino`
### Documentation
Repository-level documentation and downloadable portfolio credentials.
- [SIH PDF](https://github.com/jayjain2365/my-portfolio/blob/main/SIH.pdf): project document · Documentation for the SIH project featured in the portfolio. · `SIH.pdf`
- [Resume](https://github.com/jayjain2365/my-portfolio/blob/main/resume.pdf): credential pdf · Downloadable resume included as a portfolio artifact. · `resume.pdf`
- [NPTEL certificate](https://github.com/jayjain2365/my-portfolio/blob/main/NPTEL_CERTIFICATE.pdf): credential pdf · Downloadable certification document included in the site. · `NPTEL_CERTIFICATE.pdf`
- [README](https://github.com/jayjain2365/my-portfolio/blob/main/README.md): site docs · Repository documentation that frames the portfolio and featured project. · `README.md`
### External service
Non-repo media referenced from the site.
- **YouTube demo**: external video · Referenced external video host used by some pages for demonstrations.
## Connections
- README → Home: describes · Documentation explains the main landing page and site structure.
- README → Industrial: highlights · Documentation calls out the featured industrial ITMS project.
- Home → Industrial: navigates to · Home page links into the industrial project page.
- Home → Hackathon: navigates to · Home page links into the hackathon page.
- Home → Jarvis: navigates to · Home page links into the Jarvis page.
- Home → LDR: navigates to · Home page links into the LDR page.
- Home → Nightsense: navigates to · Home page links into the Nightsense page.
- Home → DE: navigates to · Home page links into the DE page.
- Home → 8 Bitriscalu: navigates to · Home page links into the 8_bitriscalu page.
- Industrial → Industrial demo: embeds · Industrial page uses the local demo video.
- Industrial → Arduino code: shows code · Industrial page surfaces the embedded Arduino source.
- Industrial → SIH PDF: references · Industrial page is supported by project documentation.
- Jarvis → Demo video: embeds · A project page uses the shared local video asset.
- Hackathon → SIH PDF: references · Hackathon-related content can point to the SIH project document.
- README → YouTube demo: mentions · Repository documentation notes an external demo video reference.