# jnibarger01/portfolio architecture

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

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

## Overview

1. **Overall shape**
   - This repo is a **single-page static portfolio site**. There is no backend, no database, and no build pipeline. The browser is the only runtime.

2. **Primary entry point**
   - `index.html` is the composition layer for the entire site. It defines all visible sections in one document: hero, metrics, work, about, services, and contact.

3. **Presentation subsystem**
   - `styles.css` owns the visual system: typography, color palette, spacing, responsive layout, and section styling.
   - It is the main boundary between content structure (`index.html`) and visual behavior across screen sizes.

4. **Interaction / enhancement subsystem**
   - `script.js` adds progressive enhancement to the static markup.
   - Its responsibilities are described as:
     - animated count-up for performance metrics
     - a canvas-based mesh/background effect
     - scroll-reveal behavior
     - contact form handling

5. **Data flow in the page**
   - The page loads `index.html`, which pulls in CSS and JS.
   - JavaScript reads and updates DOM elements already present in the HTML.
   - Animations and reveals are driven entirely in the browser, likely from scroll position and lifecycle events.
   - No server round-trip is implied for the main content.

6. **Assets subsystem**
   - `assets/` stores static media used by the site.
   - The README explicitly calls out a **resume PDF** and mentions a hero image, so this folder is the repository’s media boundary for downloadable or decorative content.

7. **External dependencies**
   - The site avoids package dependencies and build tools.
   - The only notable external services are **Google Fonts** for Sora, Manrope, and JetBrains Mono, which affect rendering but not application logic.

8. **Deployment/runtime boundary**
   - Because the site is “zero-build,” deployment is simply serving the folder as static files.
   - Any static host works, including GitHub Pages, Netlify, or Vercel.
   - Local development is also static, via a simple HTTP server.

9. **Architectural implication**
   - This is a **content-first, browser-enhanced** architecture: HTML provides the structure, CSS provides the design system, and JS adds lightweight interactivity.
   - For an architecture diagram, the main nodes are:
     - browser
     - `index.html`
     - `styles.css`
     - `script.js`
     - `assets/`
     - external font provider

10. **What is not present**
   - There is no indication of authentication, persistence, APIs, server rendering, or state synchronization.
   - The repository is intentionally minimal and self-contained.

Main entry points: [`index.html`](https://github.com/jnibarger01/portfolio/blob/main/index.html) (index.html), [`script.js`](https://github.com/jnibarger01/portfolio/blob/main/script.js) (script.js), [`styles.css`](https://github.com/jnibarger01/portfolio/blob/main/styles.css) (styles.css), [`assets`](https://github.com/jnibarger01/portfolio/tree/main/assets) (assets/)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime"]
  node_browser(("Browser<br/>static runtime"))
end

subgraph group_site["Site Core"]
  node_index_html["index.html<br/>document entry<br/>[index.html]"]
  node_styles_css["styles.css<br/>presentation system<br/>[styles.css]"]
  node_script_js["script.js<br/>browser enhancement<br/>[script.js]"]
end

subgraph group_content["Assets"]
  node_assets_dir[("assets/<br/>static media")]
  node_resume_pdf["Resume PDF<br/>download asset"]
end

subgraph group_external["External Services"]
  node_google_fonts(("Google Fonts<br/>external font CDN"))
end

node_browser -->|"loads"| node_index_html
node_index_html -->|"links"| node_styles_css
node_index_html -->|"loads"| node_script_js
node_index_html -->|"references"| node_assets_dir
node_assets_dir -->|"contains"| node_resume_pdf
node_index_html -->|"imports"| node_google_fonts
node_styles_css -->|"uses"| node_google_fonts
node_script_js -->|"updates DOM"| node_index_html
node_script_js -->|"runs in"| node_browser

click node_index_html "https://github.com/jnibarger01/portfolio/blob/main/index.html"
click node_styles_css "https://github.com/jnibarger01/portfolio/blob/main/styles.css"
click node_script_js "https://github.com/jnibarger01/portfolio/blob/main/script.js"
click node_assets_dir "https://github.com/jnibarger01/portfolio/tree/main/assets"
click node_resume_pdf "https://github.com/jnibarger01/portfolio/blob/main/assets/jace-nibarger-resume.pdf"

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_browser toneBlue
class node_index_html,node_styles_css,node_script_js toneAmber
class node_assets_dir,node_resume_pdf toneMint
class node_google_fonts toneRose
```

## Components

### Runtime

Where the site is loaded and rendered.

- **Browser**: static runtime · Renders the page and executes the client-side script.

### Site Core

Primary content, styling, and browser enhancement.

- [index.html](https://github.com/jnibarger01/portfolio/blob/main/index.html): document entry · Composes the single-page portfolio and its visible sections. · `index.html`
- [styles.css](https://github.com/jnibarger01/portfolio/blob/main/styles.css): presentation system · Defines typography, layout, color, spacing, and responsive behavior. · `styles.css`
- [script.js](https://github.com/jnibarger01/portfolio/blob/main/script.js): browser enhancement · Adds count-up animation, canvas effects, scroll reveal, and form handling. · `script.js`

### Assets

Static media and downloadable files.

- [assets/](https://github.com/jnibarger01/portfolio/tree/main/assets): static media · Holds downloadable and decorative site assets. · `assets`
- [Resume PDF](https://github.com/jnibarger01/portfolio/blob/main/assets/jace-nibarger-resume.pdf): download asset · Printable resume linked from the portfolio. · `assets/jace-nibarger-resume.pdf`

### External Services

Third-party resources used for presentation.

- **Google Fonts**: external font CDN · Provides Sora, Manrope, and JetBrains Mono for page rendering.

## Connections

- Browser → index.html: loads · The browser requests the single HTML entry point.
- index.html → styles.css: links · HTML pulls in the stylesheet for presentation.
- index.html → script.js: loads · HTML loads the enhancement script in the browser.
- index.html → assets/: references · The page uses media and downloadable files from the assets folder.
- assets/ → Resume PDF: contains · The assets directory includes the resume file.
- index.html → Google Fonts: imports · The page references external font resources for typography.
- styles.css → Google Fonts: uses · Typography styling depends on loaded font faces.
- script.js → index.html: updates DOM · JavaScript enhances elements already present in the HTML.
- script.js → Browser: runs in · All interactivity executes client-side in the browser.