How jnibarger01/portfolio works
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 index.html · script.js script.js · styles.css styles.css · assets assets/
Components 7
Runtime
Where the site is loaded and rendered.
- Browser · Renders the page and executes the client-side script.
Site Core
Primary content, styling, and browser enhancement.
- index.html · Composes the single-page portfolio and its visible sections.
index.html - styles.css · Defines typography, layout, color, spacing, and responsive behavior.
styles.css - script.js · Adds count-up animation, canvas effects, scroll reveal, and form handling.
script.js
Assets
Static media and downloadable files.
- assets/ · Holds downloadable and decorative site assets.
assets - Resume PDF · Printable resume linked from the portfolio.
assets/jace-nibarger-resume.pdf
External Services
Third-party resources used for presentation.
- Google Fonts · Provides Sora, Manrope, and JetBrains Mono for page rendering.
Connections 9
- 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.