# mohamedamirmamoon/game-portfolio architecture

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

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

## Overview

#### Purpose and Runtime
This repository is a single-page personal portfolio/resume site built with Next.js and TypeScript. It uses the App Router, React components, CSS modules-by-convention via colocated `.css` files, and Next’s development/production server runtime. No backend, API routes, database, authentication, or third-party service integrations are present.

Key application entry points:
- `src/app/layout.tsx` — root document layout and global application shell.
- `src/app/page.tsx` — `/` route composition point.
- `src/app/globals.css` — global styling baseline.

#### Application Shell and Shared Navigation
The root page is framed by reusable site-level navigation and footer components:
- `src/app/components/navbar/page.tsx`
- `src/app/components/navbar/navbar.css`
- `src/app/components/footer/page.tsx`

These components establish persistent site chrome and likely provide anchors or navigation into the portfolio sections. Their boundary is presentation-only: they do not connect to server APIs or shared application state.

#### Intro / Primary Interaction Surface
The intro card is the main content-selection and routing surface within the landing page:
- `src/app/components/introCard/page.tsx`
- `src/app/components/introCard/cardNav/CardNav.tsx`
- `src/app/components/introCard/routeContent/RouteContent.tsx`

Control flow is local to this component subtree: `CardNav` selects a content area, and `RouteContent` renders the corresponding view. This is client-side UI state rather than Next.js URL routing; only the root `/` page route is represented in source.

#### Portfolio Content Stages
The intro-card content system exposes portfolio-oriented sections, each isolated as a renderable component:
- `src/app/components/me/page.tsx`
- `src/app/components/projectDisplay/page.tsx`
- `src/app/components/resume/page.tsx`

The “me” and resume sections provide static personal/professional content. The project display acts as the portfolio listing/container stage and owns its own presentation stylesheet at `src/app/components/projectDisplay/project.css`.

#### Project Presentation Layer
Individual project cards are separated from the project-list/container component:
- `src/app/components/projectDisplay/projectCard/ProjectDisplay.tsx`
- `src/app/components/projectDisplay/projectCard/projcard.css`

This boundary supports repeated project entries without coupling card rendering to navigation or page-shell logic. Project content appears to be statically embedded in React components rather than loaded from a CMS or remote endpoint.

#### Contact and Specialty Content
Additional content panels are integrated into the intro-card selection flow:
- `src/app/components/introCard/contact/Contact.tsx`
- `src/app/components/barber/page.tsx`
- `src/app/components/introCard/contact/contact.css`

The contact component is a UI section, with no evidence of a server action, API endpoint, email provider, or form-processing infrastructure. The barber component is another portfolio/content view and remains isolated from application-shell concerns.

#### Assets and Deployment Boundary
Static assets are served directly by Next.js:
- `public/fonts/minecraftbold.otf`
- `public/images`
- `public/minecraftia.zip`

`next.config.ts` is the framework configuration boundary, while `package.json` defines Node/Next.js scripts and dependencies. The project is deployable to a standard Next.js host, including Vercel, with generated artifacts under `.next/` representing build output rather than source architecture.

Main entry points: [`src/app/components/introCard/routeContent/RouteContent.tsx`](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/introCard/routeContent/RouteContent.tsx) (Content Renderer), [`src/app/layout.tsx`](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/layout.tsx) (Root Layout), [`src/app/components/introCard/page.tsx`](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/introCard/page.tsx) (Intro Card), [`src/app/page.tsx`](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/page.tsx) (Home Route /)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Next.js Runtime"]
  node_package["Package Scripts<br/>Node manifest<br/>[package.json]"]
  node_next_config["Next Config<br/>Framework config<br/>[next.config.ts]"]
  node_next_runtime{{"Next.js Server<br/>Framework runtime"}}
end

subgraph group_shell["App Shell"]
  node_layout["Root Layout<br/>App Router layout<br/>[layout.tsx]"]
  node_globals["Global Styles<br/>CSS<br/>[globals.css]"]
  node_home["Home Route /<br/>App Router page<br/>[page.tsx]"]
  node_navbar["Navigation<br/>React component<br/>[page.tsx]"]
  node_footer["Footer<br/>React component<br/>[page.tsx]"]
end

subgraph group_content["Intro Content"]
  node_intro["Intro Card<br/>React component<br/>[page.tsx]"]
  node_card_nav["Card Navigation<br/>React component<br/>[CardNav.tsx]"]
  node_route_content["Content Renderer<br/>React component<br/>[RouteContent.tsx]"]
  node_me["About Me<br/>Content component<br/>[page.tsx]"]
  node_projects["Project Display<br/>Portfolio container<br/>[page.tsx]"]
  node_project_card["Project Card<br/>Portfolio component<br/>[ProjectDisplay.tsx]"]
  node_resume["Resume<br/>Content component<br/>[page.tsx]"]
  node_contact["Contact<br/>Content component<br/>[Contact.tsx]"]
  node_barber["Barber Content<br/>Content component<br/>[page.tsx]"]
end

subgraph group_assets["Static Assets"]
  node_static_assets["Static Assets<br/>Next static files"]
end

node_package -->|"runs"| node_next_runtime
node_next_config -->|"configures"| node_next_runtime
node_next_runtime -->|"renders"| node_layout
node_next_runtime -->|"serves"| node_static_assets
node_layout -->|"loads"| node_globals
node_layout -->|"includes"| node_navbar
node_layout -->|"frames"| node_home
node_layout -->|"includes"| node_footer
node_home -->|"composes"| node_intro
node_intro -->|"uses"| node_card_nav
node_intro -->|"uses"| node_route_content
node_card_nav -->|"selects view"| node_route_content
node_route_content -->|"renders"| node_me
node_route_content -->|"renders"| node_projects
node_route_content -->|"renders"| node_resume
node_route_content -->|"renders"| node_contact
node_route_content -->|"renders"| node_barber
node_projects -->|"renders entries"| node_project_card

click node_package "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/package.json"
click node_next_config "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/next.config.ts"
click node_layout "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/layout.tsx"
click node_globals "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/globals.css"
click node_home "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/page.tsx"
click node_navbar "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/navbar/page.tsx"
click node_footer "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/footer/page.tsx"
click node_intro "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/introCard/page.tsx"
click node_card_nav "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/introCard/cardNav/CardNav.tsx"
click node_route_content "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/introCard/routeContent/RouteContent.tsx"
click node_me "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/me/page.tsx"
click node_projects "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/projectDisplay/page.tsx"
click node_project_card "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/projectDisplay/projectCard/ProjectDisplay.tsx"
click node_resume "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/resume/page.tsx"
click node_contact "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/introCard/contact/Contact.tsx"
click node_barber "https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/barber/page.tsx"
click node_static_assets "https://github.com/mohamedamirmamoon/game-portfolio/tree/main/public/images"

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_package,node_next_config,node_next_runtime toneBlue
class node_layout,node_globals,node_home,node_navbar,node_footer toneAmber
class node_intro,node_card_nav,node_route_content,node_me,node_projects,node_project_card,node_resume,node_contact,node_barber toneMint
class node_static_assets toneRose
```

## Components

### Next.js Runtime

- [Package Scripts](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/package.json): Node manifest · Defines Next.js dependencies and scripts. · `package.json`
- [Next Config](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/next.config.ts): Framework config · `next.config.ts`
- **Next.js Server**: Framework runtime · Serves the App Router and static files.

### App Shell

- [Root Layout](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/layout.tsx): App Router layout · Defines the document-level application shell. · `src/app/layout.tsx`
- [Global Styles](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/globals.css): CSS · `src/app/globals.css`
- [Home Route /](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/page.tsx): App Router page · Composes the landing-page experience. · `src/app/page.tsx`
- [Navigation](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/navbar/page.tsx): React component · `src/app/components/navbar/page.tsx`
- [Footer](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/footer/page.tsx): React component · `src/app/components/footer/page.tsx`

### Intro Content

- [Intro Card](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/introCard/page.tsx): React component · Main local content-selection surface. · `src/app/components/introCard/page.tsx`
- [Card Navigation](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/introCard/cardNav/CardNav.tsx): React component · Selects the active content panel using local UI state. · `src/app/components/introCard/cardNav/CardNav.tsx`
- [Content Renderer](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/introCard/routeContent/RouteContent.tsx): React component · Renders the selected portfolio panel. · `src/app/components/introCard/routeContent/RouteContent.tsx`
- [About Me](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/me/page.tsx): Content component · `src/app/components/me/page.tsx`
- [Project Display](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/projectDisplay/page.tsx): Portfolio container · Hosts the static project listing. · `src/app/components/projectDisplay/page.tsx`
- [Project Card](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/projectDisplay/projectCard/ProjectDisplay.tsx): Portfolio component · Reusable individual project presentation. · `src/app/components/projectDisplay/projectCard/ProjectDisplay.tsx`
- [Resume](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/resume/page.tsx): Content component · `src/app/components/resume/page.tsx`
- [Contact](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/introCard/contact/Contact.tsx): Content component · Presentation-only contact panel. · `src/app/components/introCard/contact/Contact.tsx`
- [Barber Content](https://github.com/mohamedamirmamoon/game-portfolio/blob/main/src/app/components/barber/page.tsx): Content component · `src/app/components/barber/page.tsx`

### Static Assets

- [Static Assets](https://github.com/mohamedamirmamoon/game-portfolio/tree/main/public/images): Next static files · Fonts, images, and downloadable assets served directly by Next.js. · `public/images`

## Connections

- Package Scripts → Next.js Server: runs
- Next Config → Next.js Server: configures
- Next.js Server → Root Layout: renders
- Next.js Server → Static Assets: serves
- Root Layout → Global Styles: loads
- Root Layout → Navigation: includes
- Root Layout → Home Route /: frames
- Root Layout → Footer: includes
- Home Route / → Intro Card: composes
- Intro Card → Card Navigation: uses
- Intro Card → Content Renderer: uses
- Card Navigation → Content Renderer: selects view
- Content Renderer → About Me: renders
- Content Renderer → Project Display: renders
- Content Renderer → Resume: renders
- Content Renderer → Contact: renders
- Content Renderer → Barber Content: renders
- Project Display → Project Card: renders entries