# mxminh/codify-website architecture

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

- Interactive diagram: https://gitdiagram.com/mxminh/codify-website
- Repository: https://github.com/mxminh/codify-website

## Overview

Codify is a static React website for prospective members and client organizations. Visitors enter through the shared navigation and browse pages describing the organization, projects, education, and membership; project listings open detail modals, while the home page highlights projects and routes visitors toward further information. The map preserves the README-described audience and the major page branches visible in the source index. Several page and component excerpts are partial, so edges are limited to relationships evidenced by those excerpts or the source index.

Main entry points: [`src/App.tsx`](https://github.com/mxminh/codify-website/blob/master/src/App.tsx) (Route shell), [`src/pages/Home.tsx`](https://github.com/mxminh/codify-website/blob/master/src/pages/Home.tsx) (Home page), [`src/pages/About.tsx`](https://github.com/mxminh/codify-website/blob/master/src/pages/About.tsx) (About page), [`src/pages/Join.tsx`](https://github.com/mxminh/codify-website/blob/master/src/pages/Join.tsx) (Join page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site shell"]
  node_app["Route shell<br/>[App.tsx]"]
  node_nav["Navigation<br/>[NewNav.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

subgraph group_pages["Information pages"]
  node_home["Home page<br/>[Home.tsx]"]
  node_about["About page<br/>[About.tsx]"]
  node_join["Join page<br/>[Join.tsx]"]
  node_education["Education page<br/>[Education.tsx]"]
  node_work["Work with us<br/>[WorkWithUs.tsx]"]
end

subgraph group_projects["Project showcase"]
  node_projects_page["Projects page<br/>[Projects.tsx]"]
  node_projectdata["Project catalog<br/>[projectsData.ts]"]
  node_projectcards["Project cards<br/>[ModalButton.tsx]"]
  node_projectmodal["Project details modal<br/>[ModalView.tsx]"]
  node_carousel["Home project carousel"]
  node_techbadge["Technology badges"]
end

subgraph group_content["Content and UI"]
  node_navdata["Navigation links<br/>[navBarLinks.ts]"]
  node_techdata["Technology logos<br/>[technologyLogos.ts]"]
  node_filmstrip["Photo film strip<br/>[FilmStrip.tsx]"]
  node_members["Member directory<br/>[members.ts]"]
  node_membercards["Member cards<br/>[MemberCard.tsx]"]
  node_timeline["Recruitment timeline<br/>[Timeline.jsx]"]
  node_timedata["Timeline content<br/>[timelineData.tsx]"]
  node_quotes["Member testimonials<br/>[QuoteCarousel.jsx]"]
  node_testimonials["Testimonial content"]
  node_header["Page header<br/>[PageHeader.jsx]"]
  node_textblock["Text block<br/>[TextBlock.jsx]"]
  node_contactform["Contact form<br/>[ContactForm.jsx]"]
  node_accordion["FAQ accordion<br/>[Accordion.jsx]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens site"| node_app
node_app -->|"renders"| node_nav
node_app -->|"renders"| node_footer
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_about
node_app -->|"routes to"| node_join
node_app -->|"routes to"| node_projects_page
node_app -->|"routes to"| node_work
node_app -->|"routes to"| node_education
node_nav -->|"reads links"| node_navdata
node_footer -->|"reads links"| node_navdata
node_home -->|"renders"| node_filmstrip
node_home -->|"renders"| node_carousel
node_home -->|"reads projects"| node_projectdata
node_home -->|"links to"| node_work
node_about -->|"renders"| node_filmstrip
node_about -->|"reads members"| node_members
node_about -->|"renders"| node_membercards
node_about -->|"renders"| node_header
node_join -->|"renders"| node_timeline
node_join -->|"renders"| node_quotes
node_join -->|"renders"| node_header
node_join -->|"renders"| node_textblock
node_timeline -->|"reads timeline"| node_timedata
node_quotes -->|"reads testimonials"| node_testimonials
node_projects_page -->|"renders"| node_header
node_projects_page -->|"reads projects"| node_projectdata
node_projects_page -->|"renders"| node_projectcards
node_projects_page -->|"renders"| node_projectmodal
node_projectcards -->|"renders"| node_techbadge
node_techbadge -->|"reads logos"| node_techdata
node_carousel -.->|"displays projects"| node_projectdata
node_work -->|"renders"| node_header
node_work -->|"renders"| node_accordion
node_work -->|"renders"| node_contactform

click node_app "https://github.com/mxminh/codify-website/blob/master/src/App.tsx"
click node_nav "https://github.com/mxminh/codify-website/blob/master/src/navigation/NewNav.tsx"
click node_footer "https://github.com/mxminh/codify-website/blob/master/src/navigation/Footer.tsx"
click node_navdata "https://github.com/mxminh/codify-website/blob/master/src/data/navBarLinks.ts"
click node_home "https://github.com/mxminh/codify-website/blob/master/src/pages/Home.tsx"
click node_about "https://github.com/mxminh/codify-website/blob/master/src/pages/About.tsx"
click node_join "https://github.com/mxminh/codify-website/blob/master/src/pages/Join.tsx"
click node_education "https://github.com/mxminh/codify-website/blob/master/src/pages/Education.tsx"
click node_work "https://github.com/mxminh/codify-website/blob/master/src/pages/WorkWithUs.tsx"
click node_projects_page "https://github.com/mxminh/codify-website/blob/master/src/pages/Projects.tsx"
click node_projectdata "https://github.com/mxminh/codify-website/blob/master/src/data/projectsData.ts"
click node_projectcards "https://github.com/mxminh/codify-website/blob/master/src/components/ModalComponents/ModalButton.tsx"
click node_projectmodal "https://github.com/mxminh/codify-website/blob/master/src/components/ModalComponents/ModalView.tsx"
click node_carousel "https://github.com/mxminh/codify-website/blob/master/src/components/ProjectCarousel.jsx"
click node_techbadge "https://github.com/mxminh/codify-website/blob/master/src/components/TechnologyBadge.jsx"
click node_techdata "https://github.com/mxminh/codify-website/blob/master/src/data/technologyLogos.ts"
click node_filmstrip "https://github.com/mxminh/codify-website/blob/master/src/components/FilmStrip.tsx"
click node_members "https://github.com/mxminh/codify-website/blob/master/src/data/members.ts"
click node_membercards "https://github.com/mxminh/codify-website/blob/master/src/components/MemberCard.tsx"
click node_timeline "https://github.com/mxminh/codify-website/blob/master/src/components/Timeline.jsx"
click node_timedata "https://github.com/mxminh/codify-website/blob/master/src/data/timelineData.tsx"
click node_quotes "https://github.com/mxminh/codify-website/blob/master/src/components/QuoteCarousel.jsx"
click node_testimonials "https://github.com/mxminh/codify-website/blob/master/src/data/memberTestimonials.ts"
click node_header "https://github.com/mxminh/codify-website/blob/master/src/components/PageHeader.jsx"
click node_textblock "https://github.com/mxminh/codify-website/blob/master/src/components/TextBlock.jsx"
click node_contactform "https://github.com/mxminh/codify-website/blob/master/src/components/Unused/ContactForm.jsx"
click node_accordion "https://github.com/mxminh/codify-website/blob/master/src/components/Accordion.jsx"

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_app,node_nav,node_footer toneBlue
class node_home,node_about,node_join,node_education,node_work toneAmber
class node_projects_page,node_projectdata,node_projectcards,node_projectmodal,node_carousel,node_techbadge toneMint
class node_navdata,node_techdata,node_filmstrip,node_members,node_membercards,node_timeline,node_timedata,node_quotes,node_testimonials,node_header,node_textblock,node_contactform,node_accordion toneRose
class node_visitor toneIndigo
```

## Components

### Site shell

- [Route shell](https://github.com/mxminh/codify-website/blob/master/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/mxminh/codify-website/blob/master/src/navigation/NewNav.tsx): `src/navigation/NewNav.tsx`
- [Footer](https://github.com/mxminh/codify-website/blob/master/src/navigation/Footer.tsx): `src/navigation/Footer.tsx`

### Information pages

- [Home page](https://github.com/mxminh/codify-website/blob/master/src/pages/Home.tsx): `src/pages/Home.tsx`
- [About page](https://github.com/mxminh/codify-website/blob/master/src/pages/About.tsx): `src/pages/About.tsx`
- [Join page](https://github.com/mxminh/codify-website/blob/master/src/pages/Join.tsx): `src/pages/Join.tsx`
- [Education page](https://github.com/mxminh/codify-website/blob/master/src/pages/Education.tsx): `src/pages/Education.tsx`
- [Work with us](https://github.com/mxminh/codify-website/blob/master/src/pages/WorkWithUs.tsx): `src/pages/WorkWithUs.tsx`

### Project showcase

- [Projects page](https://github.com/mxminh/codify-website/blob/master/src/pages/Projects.tsx): `src/pages/Projects.tsx`
- [Project catalog](https://github.com/mxminh/codify-website/blob/master/src/data/projectsData.ts): `src/data/projectsData.ts`
- [Project cards](https://github.com/mxminh/codify-website/blob/master/src/components/ModalComponents/ModalButton.tsx): `src/components/ModalComponents/ModalButton.tsx`
- [Project details modal](https://github.com/mxminh/codify-website/blob/master/src/components/ModalComponents/ModalView.tsx): `src/components/ModalComponents/ModalView.tsx`
- [Home project carousel](https://github.com/mxminh/codify-website/blob/master/src/components/ProjectCarousel.jsx): `src/components/ProjectCarousel.jsx`
- [Technology badges](https://github.com/mxminh/codify-website/blob/master/src/components/TechnologyBadge.jsx): `src/components/TechnologyBadge.jsx`

### Content and UI

- [Navigation links](https://github.com/mxminh/codify-website/blob/master/src/data/navBarLinks.ts): `src/data/navBarLinks.ts`
- [Technology logos](https://github.com/mxminh/codify-website/blob/master/src/data/technologyLogos.ts): `src/data/technologyLogos.ts`
- [Photo film strip](https://github.com/mxminh/codify-website/blob/master/src/components/FilmStrip.tsx): `src/components/FilmStrip.tsx`
- [Member directory](https://github.com/mxminh/codify-website/blob/master/src/data/members.ts): `src/data/members.ts`
- [Member cards](https://github.com/mxminh/codify-website/blob/master/src/components/MemberCard.tsx): `src/components/MemberCard.tsx`
- [Recruitment timeline](https://github.com/mxminh/codify-website/blob/master/src/components/Timeline.jsx): `src/components/Timeline.jsx`
- [Timeline content](https://github.com/mxminh/codify-website/blob/master/src/data/timelineData.tsx): `src/data/timelineData.tsx`
- [Member testimonials](https://github.com/mxminh/codify-website/blob/master/src/components/QuoteCarousel.jsx): `src/components/QuoteCarousel.jsx`
- [Testimonial content](https://github.com/mxminh/codify-website/blob/master/src/data/memberTestimonials.ts): `src/data/memberTestimonials.ts`
- [Page header](https://github.com/mxminh/codify-website/blob/master/src/components/PageHeader.jsx): `src/components/PageHeader.jsx`
- [Text block](https://github.com/mxminh/codify-website/blob/master/src/components/TextBlock.jsx): `src/components/TextBlock.jsx`
- [Contact form](https://github.com/mxminh/codify-website/blob/master/src/components/Unused/ContactForm.jsx): `src/components/Unused/ContactForm.jsx`
- [FAQ accordion](https://github.com/mxminh/codify-website/blob/master/src/components/Accordion.jsx): `src/components/Accordion.jsx`

### Other components

- **Site visitor**

## Connections

- Site visitor → Route shell: opens site (evidence: `README.md`)
- Route shell → Navigation: renders (evidence: `src/App.tsx`)
- Route shell → Footer: renders (evidence: `src/App.tsx`)
- Route shell → Home page: routes to (evidence: `src/App.tsx`)
- Route shell → About page: routes to (evidence: `src/App.tsx`)
- Route shell → Join page: routes to (evidence: `src/App.tsx`)
- Route shell → Projects page: routes to (evidence: `src/App.tsx`)
- Route shell → Work with us: routes to (evidence: `src/App.tsx`)
- Route shell → Education page: routes to (evidence: `src/App.tsx`)
- Navigation → Navigation links: reads links (evidence: `src/navigation/NewNav.tsx`)
- Footer → Navigation links: reads links (evidence: `src/navigation/Footer.tsx`)
- Home page → Photo film strip: renders (evidence: `src/pages/Home.tsx`)
- Home page → Home project carousel: renders (evidence: `src/pages/Home.tsx`)
- Home page → Project catalog: reads projects (evidence: `src/pages/Home.tsx`)
- Home page → Work with us: links to (evidence: `src/pages/Home.tsx`)
- About page → Photo film strip: renders (evidence: `src/pages/About.tsx`)
- About page → Member directory: reads members (evidence: `src/pages/About.tsx`)
- About page → Member cards: renders (evidence: `src/pages/About.tsx`)
- About page → Page header: renders (evidence: `src/pages/About.tsx`)
- Join page → Recruitment timeline: renders (evidence: `src/pages/Join.tsx`)
- Join page → Member testimonials: renders (evidence: `src/pages/Join.tsx`)
- Join page → Page header: renders (evidence: `src/pages/Join.tsx`)
- Join page → Text block: renders (evidence: `src/pages/Join.tsx`)
- Recruitment timeline → Timeline content: reads timeline (evidence: `src/components/Timeline.jsx`)
- Member testimonials → Testimonial content: reads testimonials (evidence: `src/components/QuoteCarousel.jsx`)
- Projects page → Page header: renders (evidence: `src/pages/Projects.tsx`)
- Projects page → Project catalog: reads projects (evidence: `src/pages/Projects.tsx`)
- Projects page → Project cards: renders (evidence: `src/pages/Projects.tsx`)
- Projects page → Project details modal: renders (evidence: `src/pages/Projects.tsx`)
- Project cards → Technology badges: renders (evidence: `src/components/ModalComponents/ModalButton.tsx`)
- Technology badges → Technology logos: reads logos (evidence: `src/components/TechnologyBadge.jsx`)
- Home project carousel → Project catalog: displays projects
- Work with us → Page header: renders (evidence: `src/pages/WorkWithUs.tsx`)
- Work with us → FAQ accordion: renders (evidence: `src/pages/WorkWithUs.tsx`)
- Work with us → Contact form: renders (evidence: `src/pages/WorkWithUs.tsx`)