# sufi-an/hackfolio architecture

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

- Interactive diagram: https://gitdiagram.com/sufi-an/hackfolio
- Repository: https://github.com/sufi-an/hackfolio

## Overview

1. This repository is an Astro site, so the core architecture is file-based static routing rather than a separate backend service. Each file in `src/pages/` becomes a route, and the app is built into static output during `npm run build`.

2. The page layer is the main entry point. The routes currently visible are `index`, `about`, `blog`, `projects`, `achievements`, and `contact`, which suggests a portfolio/personal-site structure with multiple content sections rather than a data-driven application.

3. `src/layouts/Layout.astro` is the shared composition boundary. It likely wraps every page with common document structure, metadata, navigation, and site-wide chrome so the individual pages stay focused on content.

4. `src/components/` holds reusable UI pieces. The presence of `terminal/TerminalIntro.jsx`, `faketerminal/FakeTerminal.jsx`, and `glitchtech/glitchtech.jsx` shows the UI is heavily themed around terminal and glitch/tech visuals, and those components are intended to be embedded inside multiple pages or the shared layout.

5. The `TerminalIntro` and `FakeTerminal` components indicate a presentation-first interaction model. They are likely used to simulate a terminal-style introduction or interactive hero section, with no sign of a separate state service or API layer in the repository structure.

6. The `glitchtech` component is a second visual subsystem, probably responsible for the site’s distinctive aesthetic effects. Architecturally, this is still front-end presentation logic, but it is isolated as a reusable component so the effect can be applied consistently without duplicating markup or styling.

7. Styling is centralized in `src/styles/global.css`, which is the shared CSS boundary for the entire site. This implies most page-specific structure is handled in Astro components, while base typography, colors, spacing, and any theme-wide resets live in one global stylesheet.

8. `public/` is the static asset boundary. Any images, icons, or other files placed there are served directly without component processing, which is the usual Astro pattern for assets that should remain unchanged at build time.

9. There is no visible server-side data layer, database, or external API integration in the file tree. That means the architecture is likely content and component driven, with any “dynamic” behavior limited to client-side component logic inside the React `.jsx` components.

10. The runtime/tooling stack is Astro with a small React island/component footprint. The mixed `.astro` and `.jsx` files suggest Astro handles page composition and routing, while React is used only where interactive or visually specialized components are needed.

11. For an architecture diagram, the main flow is: browser request hits an Astro route in `src/pages/`, the page composes shared layout plus reusable components from `src/components/`, styles come from `src/styles/global.css`, and the build emits static assets for deployment. The important boundaries are pages, shared layout, reusable UI components, and static assets.

Main entry points: [`src/layouts/Layout.astro`](https://github.com/sufi-an/hackfolio/blob/main/src/layouts/Layout.astro) (Layout), [`src/pages/index.astro`](https://github.com/sufi-an/hackfolio/blob/main/src/pages/index.astro) (Home), [`src/styles/global.css`](https://github.com/sufi-an/hackfolio/blob/main/src/styles/global.css) (Global CSS), [`src/pages/about.astro`](https://github.com/sufi-an/hackfolio/blob/main/src/pages/about.astro) (About)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_routes["Routes"]
  node_node_index["Home<br/>astro page<br/>[index.astro]"]
  node_node_about["About<br/>astro page<br/>[about.astro]"]
  node_node_blog["Blog<br/>astro page<br/>[blog.astro]"]
  node_node_projects["Projects<br/>astro page<br/>[projects.astro]"]
  node_node_achievements["Achievements<br/>astro page<br/>[achievements.astro]"]
  node_node_contact["Contact<br/>astro page<br/>[contact.astro]"]
end

subgraph group_group_ui["UI"]
  node_node_layout["Layout<br/>shared shell<br/>[Layout.astro]"]
  node_node_terminal_intro["Terminal Intro<br/>react component<br/>[TerminalIntro.jsx]"]
  node_node_fake_terminal["Fake Terminal<br/>react component<br/>[FakeTerminal.jsx]"]
  node_node_glitchtech["Glitch Tech<br/>react component<br/>[glitchtech.jsx]"]
end

subgraph group_group_assets["Assets"]
  node_node_global_css["Global CSS<br/>site stylesheet<br/>[global.css]"]
  node_node_public[("Public Assets<br/>static assets")]
end

subgraph group_group_build["Build"]
  node_node_astro_config["Astro Config<br/>build config<br/>[astro.config.mjs]"]
  node_node_build_output["Static Build<br/>static site output"]
end

node_node_index -->|"wraps"| node_node_layout
node_node_about -->|"wraps"| node_node_layout
node_node_blog -->|"wraps"| node_node_layout
node_node_projects -->|"wraps"| node_node_layout
node_node_achievements -->|"wraps"| node_node_layout
node_node_contact -->|"wraps"| node_node_layout
node_node_index -->|"uses"| node_node_terminal_intro
node_node_index -->|"uses"| node_node_fake_terminal
node_node_index -->|"uses"| node_node_glitchtech
node_node_layout -->|"imports"| node_node_global_css
node_node_terminal_intro -->|"styled by"| node_node_global_css
node_node_fake_terminal -->|"styled by"| node_node_global_css
node_node_glitchtech -->|"styled by"| node_node_global_css
node_node_layout -->|"references"| node_node_public
node_node_astro_config -->|"builds"| node_node_build_output
node_node_index -->|"emits"| node_node_build_output
node_node_about -->|"emits"| node_node_build_output
node_node_blog -->|"emits"| node_node_build_output
node_node_projects -->|"emits"| node_node_build_output
node_node_achievements -->|"emits"| node_node_build_output
node_node_contact -->|"emits"| node_node_build_output

click node_node_index "https://github.com/sufi-an/hackfolio/blob/main/src/pages/index.astro"
click node_node_about "https://github.com/sufi-an/hackfolio/blob/main/src/pages/about.astro"
click node_node_blog "https://github.com/sufi-an/hackfolio/blob/main/src/pages/blog.astro"
click node_node_projects "https://github.com/sufi-an/hackfolio/blob/main/src/pages/projects.astro"
click node_node_achievements "https://github.com/sufi-an/hackfolio/blob/main/src/pages/achievements.astro"
click node_node_contact "https://github.com/sufi-an/hackfolio/blob/main/src/pages/contact.astro"
click node_node_layout "https://github.com/sufi-an/hackfolio/blob/main/src/layouts/Layout.astro"
click node_node_terminal_intro "https://github.com/sufi-an/hackfolio/blob/main/src/components/terminal/TerminalIntro.jsx"
click node_node_fake_terminal "https://github.com/sufi-an/hackfolio/blob/main/src/components/faketerminal/FakeTerminal.jsx"
click node_node_glitchtech "https://github.com/sufi-an/hackfolio/blob/main/src/components/glitchtech/glitchtech.jsx"
click node_node_global_css "https://github.com/sufi-an/hackfolio/blob/main/src/styles/global.css"
click node_node_public "https://github.com/sufi-an/hackfolio/tree/main/public"
click node_node_astro_config "https://github.com/sufi-an/hackfolio/blob/main/astro.config.mjs"

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_node_index,node_node_about,node_node_blog,node_node_projects,node_node_achievements,node_node_contact toneBlue
class node_node_layout,node_node_terminal_intro,node_node_fake_terminal,node_node_glitchtech toneAmber
class node_node_global_css,node_node_public toneMint
class node_node_astro_config,node_node_build_output toneRose
```

## Components

### Routes

File-based Astro pages that define the site sections.

- [Home](https://github.com/sufi-an/hackfolio/blob/main/src/pages/index.astro): astro page · Landing page route rendered from src/pages/index.astro. · `src/pages/index.astro`
- [About](https://github.com/sufi-an/hackfolio/blob/main/src/pages/about.astro): astro page · About section route. · `src/pages/about.astro`
- [Blog](https://github.com/sufi-an/hackfolio/blob/main/src/pages/blog.astro): astro page · Blog section route. · `src/pages/blog.astro`
- [Projects](https://github.com/sufi-an/hackfolio/blob/main/src/pages/projects.astro): astro page · Projects section route. · `src/pages/projects.astro`
- [Achievements](https://github.com/sufi-an/hackfolio/blob/main/src/pages/achievements.astro): astro page · Achievements section route. · `src/pages/achievements.astro`
- [Contact](https://github.com/sufi-an/hackfolio/blob/main/src/pages/contact.astro): astro page · Contact section route. · `src/pages/contact.astro`

### UI

Shared layout and reusable presentation components.

- [Layout](https://github.com/sufi-an/hackfolio/blob/main/src/layouts/Layout.astro): shared shell · Common site wrapper for metadata, chrome, and page composition. · `src/layouts/Layout.astro`
- [Terminal Intro](https://github.com/sufi-an/hackfolio/blob/main/src/components/terminal/TerminalIntro.jsx): react component · Terminal-style intro or hero presentation component. · `src/components/terminal/TerminalIntro.jsx`
- [Fake Terminal](https://github.com/sufi-an/hackfolio/blob/main/src/components/faketerminal/FakeTerminal.jsx): react component · Reusable simulated terminal UI component. · `src/components/faketerminal/FakeTerminal.jsx`
- [Glitch Tech](https://github.com/sufi-an/hackfolio/blob/main/src/components/glitchtech/glitchtech.jsx): react component · Reusable glitch/tech visual effect component. · `src/components/glitchtech/glitchtech.jsx`

### Assets

Global styling and static public files.

- [Global CSS](https://github.com/sufi-an/hackfolio/blob/main/src/styles/global.css): site stylesheet · Shared stylesheet for site-wide typography, spacing, and theme. · `src/styles/global.css`
- [Public Assets](https://github.com/sufi-an/hackfolio/tree/main/public): static assets · Direct-served files such as images, icons, and other unchanged assets. · `public`

### Build

Astro configuration and static site output flow.

- [Astro Config](https://github.com/sufi-an/hackfolio/blob/main/astro.config.mjs): build config · Astro project configuration and build/runtime settings. · `astro.config.mjs`
- **Static Build**: static site output · Built static output generated from Astro routes and components.

## Connections

- Home → Layout: wraps · Home page composes the shared site shell.
- About → Layout: wraps · About page composes the shared site shell.
- Blog → Layout: wraps · Blog page composes the shared site shell.
- Projects → Layout: wraps · Projects page composes the shared site shell.
- Achievements → Layout: wraps · Achievements page composes the shared site shell.
- Contact → Layout: wraps · Contact page composes the shared site shell.
- Home → Terminal Intro: uses · Landing page likely features the terminal-style intro component.
- Home → Fake Terminal: uses · Landing page likely embeds the fake terminal presentation.
- Home → Glitch Tech: uses · Landing page likely applies the glitch/tech visual treatment.
- Layout → Global CSS: imports · Shared shell relies on the global stylesheet.
- Terminal Intro → Global CSS: styled by · Component presentation is governed by global theme styles.
- Fake Terminal → Global CSS: styled by · Component presentation is governed by global theme styles.
- Glitch Tech → Global CSS: styled by · Component presentation is governed by global theme styles.
- Layout → Public Assets: references · Layout and pages may reference directly served static assets.
- Astro Config → Static Build: builds · Astro configuration drives the static site build.
- Home → Static Build: emits · Each page route contributes to generated static output.
- About → Static Build: emits · Each page route contributes to generated static output.
- Blog → Static Build: emits · Each page route contributes to generated static output.
- Projects → Static Build: emits · Each page route contributes to generated static output.
- Achievements → Static Build: emits · Each page route contributes to generated static output.
- Contact → Static Build: emits · Each page route contributes to generated static output.