# maridebahiru/mycompany architecture

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

- Interactive diagram: https://gitdiagram.com/maridebahiru/mycompany
- Repository: https://github.com/maridebahiru/mycompany

## Overview

This is a React portfolio and lead-generation website for Marcom Engineering. A visitor explores the company, services, project work, and testimonials; selecting a service or project routes them to the contact section with an inquiry subject. The main composition and the Services data/callback path are supported by sampled source. Other section connections follow their explicit use in App; unsampled component internals and the separate portfolio/technology presentation modules are not assumed to be wired into that workflow.

Main entry points: [`src/App.tsx`](https://github.com/maridebahiru/mycompany/blob/main/src/App.tsx) (App), [`src/components/Services.tsx`](https://github.com/maridebahiru/mycompany/blob/main/src/components/Services.tsx) (Services), [`src/components/ProjectModal.tsx`](https://github.com/maridebahiru/mycompany/blob/main/src/components/ProjectModal.tsx) (Project modal), [`src/main.tsx`](https://github.com/maridebahiru/mycompany/blob/main/src/main.tsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Page composition"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App<br/>[App.tsx]"]
end

subgraph group_content["Company content"]
  node_nav["Navigation<br/>[Navbar.tsx]"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_about["About<br/>[About.tsx]"]
  node_services["Services<br/>[Services.tsx]"]
  node_portfolio["Portfolio<br/>[Portfolio.tsx]"]
  node_testimonials["Testimonials<br/>[Testimonials.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_companydata["Company data<br/>[companyData.ts]"]
  node_portfoliohero["Portfolio hero<br/>[PortfolioHero.tsx]"]
  node_techportal["Technology portal<br/>[TechPortal.tsx]"]
end

subgraph group_lead["Inquiry flow"]
  node_projectmodal["Project modal<br/>[ProjectModal.tsx]"]
  node_contact["Contact section<br/>[Contact.tsx]"]
end

subgraph group_visual["Visual interaction"]
  node_motion["Motion components<br/>[index.ts]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_nav
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_services
node_app -->|"renders"| node_portfolio
node_app -->|"renders"| node_testimonials
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_app -->|"renders"| node_projectmodal
node_services -->|"reads services"| node_companydata
node_services -->|"selects service"| node_app
node_portfolio -->|"selects project"| node_app
node_app -->|"passes selection"| node_projectmodal
node_projectmodal -->|"requests inquiry"| node_app
node_app -->|"sets subject"| node_contact
node_app -->|"uses effects"| node_motion

click node_entry "https://github.com/maridebahiru/mycompany/blob/main/src/main.tsx"
click node_app "https://github.com/maridebahiru/mycompany/blob/main/src/App.tsx"
click node_nav "https://github.com/maridebahiru/mycompany/blob/main/src/components/Navbar.tsx"
click node_hero "https://github.com/maridebahiru/mycompany/blob/main/src/components/Hero.tsx"
click node_about "https://github.com/maridebahiru/mycompany/blob/main/src/components/About.tsx"
click node_services "https://github.com/maridebahiru/mycompany/blob/main/src/components/Services.tsx"
click node_portfolio "https://github.com/maridebahiru/mycompany/blob/main/src/components/Portfolio.tsx"
click node_testimonials "https://github.com/maridebahiru/mycompany/blob/main/src/components/Testimonials.tsx"
click node_footer "https://github.com/maridebahiru/mycompany/blob/main/src/components/Footer.tsx"
click node_companydata "https://github.com/maridebahiru/mycompany/blob/main/src/data/companyData.ts"
click node_projectmodal "https://github.com/maridebahiru/mycompany/blob/main/src/components/ProjectModal.tsx"
click node_contact "https://github.com/maridebahiru/mycompany/blob/main/src/components/Contact.tsx"
click node_motion "https://github.com/maridebahiru/mycompany/blob/main/src/components/motion/index.ts"
click node_portfoliohero "https://github.com/maridebahiru/mycompany/blob/main/src/components/PortfolioHero/PortfolioHero.tsx"
click node_techportal "https://github.com/maridebahiru/mycompany/blob/main/src/components/TechPortal/TechPortal.tsx"

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_entry,node_app toneBlue
class node_nav,node_hero,node_about,node_services,node_portfolio,node_testimonials,node_footer,node_companydata,node_portfoliohero,node_techportal toneAmber
class node_projectmodal,node_contact toneMint
class node_motion toneRose
class node_visitor toneIndigo
```

## Components

### Page composition

- [React entry](https://github.com/maridebahiru/mycompany/blob/main/src/main.tsx): `src/main.tsx`
- [App](https://github.com/maridebahiru/mycompany/blob/main/src/App.tsx): `src/App.tsx`

### Company content

- [Navigation](https://github.com/maridebahiru/mycompany/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Hero](https://github.com/maridebahiru/mycompany/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [About](https://github.com/maridebahiru/mycompany/blob/main/src/components/About.tsx): `src/components/About.tsx`
- [Services](https://github.com/maridebahiru/mycompany/blob/main/src/components/Services.tsx): `src/components/Services.tsx`
- [Portfolio](https://github.com/maridebahiru/mycompany/blob/main/src/components/Portfolio.tsx): `src/components/Portfolio.tsx`
- [Testimonials](https://github.com/maridebahiru/mycompany/blob/main/src/components/Testimonials.tsx): `src/components/Testimonials.tsx`
- [Footer](https://github.com/maridebahiru/mycompany/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`
- [Company data](https://github.com/maridebahiru/mycompany/blob/main/src/data/companyData.ts): `src/data/companyData.ts`
- [Portfolio hero](https://github.com/maridebahiru/mycompany/blob/main/src/components/PortfolioHero/PortfolioHero.tsx): `src/components/PortfolioHero/PortfolioHero.tsx`
- [Technology portal](https://github.com/maridebahiru/mycompany/blob/main/src/components/TechPortal/TechPortal.tsx): `src/components/TechPortal/TechPortal.tsx`

### Inquiry flow

- [Project modal](https://github.com/maridebahiru/mycompany/blob/main/src/components/ProjectModal.tsx): `src/components/ProjectModal.tsx`
- [Contact section](https://github.com/maridebahiru/mycompany/blob/main/src/components/Contact.tsx): `src/components/Contact.tsx`

### Visual interaction

- [Motion components](https://github.com/maridebahiru/mycompany/blob/main/src/components/motion/index.ts): `src/components/motion/index.ts`

### Other components

- **Site visitor**

## Connections

- Site visitor → React entry: opens site
- React entry → App: renders
- App → Navigation: renders
- App → Hero: renders
- App → About: renders
- App → Services: renders
- App → Portfolio: renders
- App → Testimonials: renders
- App → Contact section: renders
- App → Footer: renders
- App → Project modal: renders
- Services → Company data: reads services
- Services → App: selects service
- Portfolio → App: selects project
- App → Project modal: passes selection
- Project modal → App: requests inquiry
- App → Contact section: sets subject
- App → Motion components: uses effects