# gamcrosskf/portfolio architecture

> Architecture diagram of the GitHub repository gamcrosskf/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/gamcrosskf/portfolio
- Repository: https://github.com/gamcrosskf/portfolio

## Overview

1. This repository is a single-page personal portfolio built as a static Vue 3 application with Vite. The whole app is client-rendered; there is no backend, database, or API layer in the repo.

2. The runtime entry is the usual Vite flow: `index.html` loads `src/main.js`, which bootstraps the Vue app and mounts `src/App.vue` into the page.

3. `App.vue` is the top-level composition layer. It likely defines the overall “terminal” shell and orchestrates the page sections, using the header/footer components and the content sections as building blocks.

4. The UI is split into self-contained presentation sections:
   - `AboutSection.vue`
   - `SkillsSection.vue`
   - `ProjectsSection.vue`
   - `ContactSection.vue`
   Each one owns a distinct part of the portfolio content and layout, which makes the page easy to diagram as a set of vertical sections under one shell.

5. `TerminalHeader.vue` and `TerminalFooter.vue` provide the terminal-style framing around the content. They are visual chrome components rather than content modules, reinforcing the repo’s “cyan/blue terminal” theme described in the README.

6. Content appears to be centralized in `src/config/portfolio.js`. This is an important architectural boundary: instead of hardcoding everything into the components, the app likely reads portfolio data from this config file and renders it in the sections. That makes skills, projects, links, and contact details easy to update without changing layout code.

7. `src/style.css` holds the global design system and visual behavior: typography, terminal aesthetics, responsive layout, and animations. `src/assets` stores static media used by the portfolio, such as images or icons.

8. The main data flow is:
   configuration data in `src/config/portfolio.js`
   → passed into or imported by section components
   → rendered by `App.vue` inside the page shell
   → styled globally through `style.css`.
   This is a classic data-driven static UI, not an event-heavy application.

9. External dependencies are user-facing links rather than service integrations. The README mentions GitHub project links, demo links, LinkedIn, and CV download. These are outbound references rendered by the portfolio, not consumed through network APIs.

10. Deployment is handled through GitHub Pages. The `.github/workflows/deploy.yml` workflow is the CI/CD boundary: it builds the Vite app and publishes the generated static site. The `.nojekyll` file is present because GitHub Pages is serving a Vite-built artifact and should not apply Jekyll processing.

11. For an architecture diagram, the key boxes are: browser/runtime, Vue component tree, shared portfolio config, global styling/assets, and static hosting via GitHub Pages. The important distinction is that the repo is a content-driven frontend site with build-time deployment, not a multi-tier application.

Main entry points: [`src/App.vue`](https://github.com/gamcrosskf/portfolio/blob/main/src/App.vue) (App), [`src/config/portfolio.js`](https://github.com/gamcrosskf/portfolio/blob/main/src/config/portfolio.js) (portfolio.js), [`src/style.css`](https://github.com/gamcrosskf/portfolio/blob/main/src/style.css) (style.css), [`src/main.js`](https://github.com/gamcrosskf/portfolio/blob/main/src/main.js) (main.js)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime"]
  node_browser(("Browser<br/>client runtime"))
  node_index_html["index.html<br/>entry document<br/>[index.html]"]
  node_main_js["main.js<br/>bootstrap<br/>[main.js]"]
end

subgraph group_ui["UI"]
  node_app_vue["App<br/>shell component<br/>[App.vue]"]
  node_terminal_header["Header<br/>chrome component<br/>[TerminalHeader.vue]"]
  node_terminal_footer["Footer<br/>chrome component<br/>[TerminalFooter.vue]"]
  node_about_section["About<br/>content section<br/>[AboutSection.vue]"]
  node_skills_section["Skills<br/>content section<br/>[SkillsSection.vue]"]
  node_projects_section["Projects<br/>content section"]
  node_contact_section["Contact<br/>content section<br/>[ContactSection.vue]"]
end

subgraph group_data["Content Data"]
  node_portfolio_js["portfolio.js<br/>content config<br/>[portfolio.js]"]
  node_style_css["style.css<br/>global styles<br/>[style.css]"]
  node_assets[("Assets<br/>static media")]
end

subgraph group_delivery["Delivery"]
  node_vite_config["Vite config<br/>build config<br/>[vite.config.js]"]
  node_deploy_workflow["Deploy<br/>ci workflow<br/>[deploy.yml]"]
  node_github_pages[("GitHub Pages<br/>static hosting")]
end

node_browser -->|"loads"| node_index_html
node_index_html -->|"boots"| node_main_js
node_main_js -->|"mounts"| node_app_vue
node_app_vue -->|"includes"| node_terminal_header
node_app_vue -->|"includes"| node_terminal_footer
node_app_vue -->|"renders"| node_about_section
node_app_vue -->|"renders"| node_skills_section
node_app_vue -->|"renders"| node_projects_section
node_app_vue -->|"renders"| node_contact_section
node_portfolio_js -->|"feeds"| node_app_vue
node_portfolio_js -->|"feeds"| node_about_section
node_portfolio_js -->|"feeds"| node_skills_section
node_portfolio_js -->|"feeds"| node_projects_section
node_portfolio_js -->|"feeds"| node_contact_section
node_style_css -->|"styles"| node_app_vue
node_style_css -->|"styles"| node_about_section
node_style_css -->|"styles"| node_projects_section
node_assets -->|"supplies"| node_app_vue
node_vite_config -->|"builds"| node_main_js
node_deploy_workflow -->|"runs"| node_vite_config
node_deploy_workflow -->|"publishes"| node_github_pages

click node_index_html "https://github.com/gamcrosskf/portfolio/blob/main/index.html"
click node_main_js "https://github.com/gamcrosskf/portfolio/blob/main/src/main.js"
click node_app_vue "https://github.com/gamcrosskf/portfolio/blob/main/src/App.vue"
click node_terminal_header "https://github.com/gamcrosskf/portfolio/blob/main/src/components/TerminalHeader.vue"
click node_terminal_footer "https://github.com/gamcrosskf/portfolio/blob/main/src/components/TerminalFooter.vue"
click node_about_section "https://github.com/gamcrosskf/portfolio/blob/main/src/components/AboutSection.vue"
click node_skills_section "https://github.com/gamcrosskf/portfolio/blob/main/src/components/SkillsSection.vue"
click node_projects_section "https://github.com/gamcrosskf/portfolio/blob/main/src/components/ProjectsSection.vue"
click node_contact_section "https://github.com/gamcrosskf/portfolio/blob/main/src/components/ContactSection.vue"
click node_portfolio_js "https://github.com/gamcrosskf/portfolio/blob/main/src/config/portfolio.js"
click node_style_css "https://github.com/gamcrosskf/portfolio/blob/main/src/style.css"
click node_assets "https://github.com/gamcrosskf/portfolio/tree/main/src/assets"
click node_vite_config "https://github.com/gamcrosskf/portfolio/blob/main/vite.config.js"
click node_deploy_workflow "https://github.com/gamcrosskf/portfolio/blob/main/.github/workflows/deploy.yml"

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,node_index_html,node_main_js toneBlue
class node_app_vue,node_terminal_header,node_terminal_footer,node_about_section,node_skills_section,node_projects_section,node_contact_section toneAmber
class node_portfolio_js,node_style_css,node_assets toneMint
class node_vite_config,node_deploy_workflow,node_github_pages toneRose
```

## Components

### Runtime

Client-side Vite/Vue execution flow

- **Browser**: client runtime · Loads and renders the static portfolio app
- [index.html](https://github.com/gamcrosskf/portfolio/blob/main/index.html): entry document · Vite entry document that loads the app · `index.html`
- [main.js](https://github.com/gamcrosskf/portfolio/blob/main/src/main.js): bootstrap · Creates and mounts the Vue application · `src/main.js`

### UI

Top-level shell and content sections

- [App](https://github.com/gamcrosskf/portfolio/blob/main/src/App.vue): shell component · Top-level composition layer for the portfolio page · `src/App.vue`
- [Header](https://github.com/gamcrosskf/portfolio/blob/main/src/components/TerminalHeader.vue): chrome component · Terminal-style top framing for the page · `src/components/TerminalHeader.vue`
- [Footer](https://github.com/gamcrosskf/portfolio/blob/main/src/components/TerminalFooter.vue): chrome component · Terminal-style bottom framing for the page · `src/components/TerminalFooter.vue`
- [About](https://github.com/gamcrosskf/portfolio/blob/main/src/components/AboutSection.vue): content section · Introductory portfolio section · `src/components/AboutSection.vue`
- [Skills](https://github.com/gamcrosskf/portfolio/blob/main/src/components/SkillsSection.vue): content section · Skills and capabilities section · `src/components/SkillsSection.vue`
- [Projects](https://github.com/gamcrosskf/portfolio/blob/main/src/components/ProjectsSection.vue): content section · Project showcase section · `src/components/ProjectsSection.vue`
- [Contact](https://github.com/gamcrosskf/portfolio/blob/main/src/components/ContactSection.vue): content section · Contact and outbound links section · `src/components/ContactSection.vue`

### Content Data

Shared portfolio content and static media

- [portfolio.js](https://github.com/gamcrosskf/portfolio/blob/main/src/config/portfolio.js): content config · Central portfolio data and links used across sections · `src/config/portfolio.js`
- [style.css](https://github.com/gamcrosskf/portfolio/blob/main/src/style.css): global styles · Typography, terminal theme, responsiveness, and animation · `src/style.css`
- [Assets](https://github.com/gamcrosskf/portfolio/tree/main/src/assets): static media · Images and other static portfolio media · `src/assets`

### Delivery

Build and GitHub Pages publishing

- [Vite config](https://github.com/gamcrosskf/portfolio/blob/main/vite.config.js): build config · Build and dev-server configuration for the static app · `vite.config.js`
- [Deploy](https://github.com/gamcrosskf/portfolio/blob/main/.github/workflows/deploy.yml): ci workflow · Builds the site and publishes it to GitHub Pages · `.github/workflows/deploy.yml`
- **GitHub Pages**: static hosting · Published target for the built portfolio site

## Connections

- Browser → index.html: loads · The browser requests the entry document
- index.html → main.js: boots · The entry document loads the Vue bootstrap module
- main.js → App: mounts · Vue app is created and mounted into the shell component
- App → Header: includes · Top shell composes terminal framing
- App → Footer: includes · Top shell composes terminal framing
- App → About: renders · App composes the About section
- App → Skills: renders · App composes the Skills section
- App → Projects: renders · App composes the Projects section
- App → Contact: renders · App composes the Contact section
- portfolio.js → App: feeds · Shared content data is consumed by the top-level app
- portfolio.js → About: feeds · Section content is data-driven from shared config
- portfolio.js → Skills: feeds · Section content is data-driven from shared config
- portfolio.js → Projects: feeds · Section content is data-driven from shared config
- portfolio.js → Contact: feeds · Section content is data-driven from shared config
- style.css → App: styles · Global styling shapes the overall shell
- style.css → About: styles · Global styling shapes section presentation
- style.css → Projects: styles · Global styling shapes section presentation
- Assets → App: supplies · Static media used by the portfolio UI
- Vite config → main.js: builds · Vite config controls how the client app is served and bundled
- Deploy → Vite config: runs · CI workflow invokes the Vite build
- Deploy → GitHub Pages: publishes · Built static site is deployed to GitHub Pages