# ericjoel25/newportafolio architecture

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

- Interactive diagram: https://gitdiagram.com/ericjoel25/newportafolio
- Repository: https://github.com/ericjoel25/newportafolio

## Overview

1. This repository is a client-side React portfolio site, bootstrapped with Create React App. The architecture is a single static frontend, not a multi-service app.

2. The application entrypoint is `src/index.js`, which mounts `src/App.js` into the DOM defined by `public/index.html`. From there, the app renders the site’s main sections.

3. The main UI is organized by page-level components under `src/pages`: `home`, `background`, `skill`, `myProjects`, and `contact`. These appear to represent the primary portfolio sections and likely compose the full experience inside `App.js`.

4. Shared UI is kept separate in `src/components`, especially a reusable `modal` component. That suggests some content, likely projects or images, is presented in overlays rather than dedicated pages.

5. Static media is centralized through `src/components/images/index.js` and the `public` folder. The repo includes a resume PDF (`public/EricJoelMarte.pdf`), so downloadable assets are part of the frontend content model.

6. Styling is heavily component-scoped. There are multiple CSS Modules in `src/utils/styles` plus a few plain CSS files like `App.css`, `Proyectos.css`, and `modal.module.css`, indicating styles are organized per page/component boundary rather than globally.

7. The data flow is entirely browser-driven: Firebase Hosting serves the built static files, the browser loads the React bundle, and interactions stay within the SPA. There is no backend, API client, or database layer visible in this repository.

8. The deployment boundary is Firebase Hosting. `firebase.json`, `.firebaserc`, and the `.github/workflows/firebase-hosting-*.yml` files show that builds are deployed through Firebase and automated in GitHub Actions for merge and pull-request workflows.

9. The `public/CNAME`, `manifest.json`, and `robots.txt` files show this is meant for a custom-domain, web-visible deployment and is also configured like a standard installable/static site.

10. Tests are minimal and frontend-focused. `src/App.test.js` and `src/setupTests.js` come from CRA’s default testing setup, so quality checks are centered on component rendering rather than integration with external systems.

11. For an architecture diagram, the important boundaries are: source React app (`src`), static assets (`public`), build/runtime bundle produced by CRA, and Firebase Hosting as the delivery layer. Everything else is internal presentation structure within the frontend.

Main entry points: [`src/pages/index.js`](https://github.com/ericjoel25/newportafolio/blob/main/src/pages/index.js) (Pages index), [`src/App.js`](https://github.com/ericjoel25/newportafolio/blob/main/src/App.js) (Main app), [`src/index.js`](https://github.com/ericjoel25/newportafolio/blob/main/src/index.js) (App entry), [`firebase.json`](https://github.com/ericjoel25/newportafolio/blob/main/firebase.json) (Firebase config)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React app"]
  node_src_index_js["App entry<br/>react bootstrap<br/>[index.js]"]
  node_src_app_js["Main app<br/>spa shell<br/>[App.js]"]
  node_src_pages_index_js["Pages index<br/>section registry<br/>[index.js]"]
  node_src_pages_home_js["Home<br/>section component<br/>[home.js]"]
  node_src_pages_background_js["Background<br/>section component<br/>[background.js]"]
  node_src_pages_skill_js["Skills<br/>section component<br/>[skill.js]"]
  node_src_pages_myprojects_js["Projects<br/>section component<br/>[myProjects.js]"]
  node_src_pages_contact_js["Contact<br/>section component<br/>[contact.js]"]
  node_src_components_modal_js["Modal<br/>overlay component<br/>[modal.js]"]
  node_src_components_images_index_js["Images<br/>asset registry<br/>[index.js]"]
  node_src_utils_styles_index_js["Styles index<br/>style registry<br/>[index.js]"]
  node_src_app_css["App CSS<br/>global styles<br/>[App.css]"]
  node_src_index_css["Base CSS<br/>global styles<br/>[index.css]"]
end

subgraph group_assets["Static assets"]
  node_public_index_html["HTML shell<br/>entry document<br/>[index.html]"]
  node_public_ericjoelmarte_pdf["Resume PDF<br/>download asset<br/>[EricJoelMarte.pdf]"]
  node_public_manifest_json["Manifest<br/>[manifest.json]"]
end

subgraph group_deployment["Hosting"]
  node_firebase_json["Firebase config<br/>hosting config<br/>[firebase.json]"]
  node_workflow_merge_yml["Deploy merge<br/>ci workflow"]
  node_workflow_pr_yml["Deploy PR<br/>ci workflow"]
end

node_public_index_html -->|"loads app"| node_src_index_js
node_src_index_js -->|"mounts"| node_src_app_js
node_src_app_js -->|"composes sections"| node_src_pages_index_js
node_src_pages_index_js -->|"exports"| node_src_pages_home_js
node_src_pages_index_js -->|"exports"| node_src_pages_background_js
node_src_pages_index_js -->|"exports"| node_src_pages_skill_js
node_src_pages_index_js -->|"exports"| node_src_pages_myprojects_js
node_src_pages_index_js -->|"exports"| node_src_pages_contact_js
node_src_pages_myprojects_js -->|"opens detail"| node_src_components_modal_js
node_src_pages_myprojects_js -->|"uses media"| node_src_components_images_index_js
node_src_app_js -->|"shares overlay"| node_src_components_modal_js
node_src_app_js -->|"styles"| node_src_app_css
node_src_index_js -->|"styles"| node_src_index_css
node_src_app_js -->|"uses modules"| node_src_utils_styles_index_js
node_src_pages_contact_js -->|"links asset"| node_public_ericjoelmarte_pdf
node_firebase_json -->|"serves"| node_public_index_html
node_firebase_json -->|"publishes bundle"| node_src_index_js
node_workflow_merge_yml -->|"deploys"| node_firebase_json
node_workflow_pr_yml -->|"validates deploy"| node_firebase_json
node_public_manifest_json -->|"describes"| node_public_index_html

click node_public_index_html "https://github.com/ericjoel25/newportafolio/blob/main/public/index.html"
click node_src_index_js "https://github.com/ericjoel25/newportafolio/blob/main/src/index.js"
click node_src_app_js "https://github.com/ericjoel25/newportafolio/blob/main/src/App.js"
click node_src_pages_index_js "https://github.com/ericjoel25/newportafolio/blob/main/src/pages/index.js"
click node_src_pages_home_js "https://github.com/ericjoel25/newportafolio/blob/main/src/pages/home.js"
click node_src_pages_background_js "https://github.com/ericjoel25/newportafolio/blob/main/src/pages/background.js"
click node_src_pages_skill_js "https://github.com/ericjoel25/newportafolio/blob/main/src/pages/skill.js"
click node_src_pages_myprojects_js "https://github.com/ericjoel25/newportafolio/blob/main/src/pages/myProjects.js"
click node_src_pages_contact_js "https://github.com/ericjoel25/newportafolio/blob/main/src/pages/contact.js"
click node_src_components_modal_js "https://github.com/ericjoel25/newportafolio/blob/main/src/components/modal/modal.js"
click node_src_components_images_index_js "https://github.com/ericjoel25/newportafolio/blob/main/src/components/images/index.js"
click node_src_utils_styles_index_js "https://github.com/ericjoel25/newportafolio/blob/main/src/utils/styles/index.js"
click node_src_app_css "https://github.com/ericjoel25/newportafolio/blob/main/src/App.css"
click node_src_index_css "https://github.com/ericjoel25/newportafolio/blob/main/src/index.css"
click node_public_ericjoelmarte_pdf "https://github.com/ericjoel25/newportafolio/blob/main/public/EricJoelMarte.pdf"
click node_public_manifest_json "https://github.com/ericjoel25/newportafolio/blob/main/public/manifest.json"
click node_firebase_json "https://github.com/ericjoel25/newportafolio/blob/main/firebase.json"
click node_workflow_merge_yml "https://github.com/ericjoel25/newportafolio/blob/main/.github/workflows/firebase-hosting-merge.yml"
click node_workflow_pr_yml "https://github.com/ericjoel25/newportafolio/blob/main/.github/workflows/firebase-hosting-pull-request.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_src_index_js,node_src_app_js,node_src_pages_index_js,node_src_pages_home_js,node_src_pages_background_js,node_src_pages_skill_js,node_src_pages_myprojects_js,node_src_pages_contact_js,node_src_components_modal_js,node_src_components_images_index_js,node_src_utils_styles_index_js,node_src_app_css,node_src_index_css toneBlue
class node_public_index_html,node_public_ericjoelmarte_pdf,node_public_manifest_json toneAmber
class node_firebase_json,node_workflow_merge_yml,node_workflow_pr_yml toneMint
```

## Components

### React app

Client-side CRA portfolio experience rendered in the browser.

- [App entry](https://github.com/ericjoel25/newportafolio/blob/main/src/index.js): react bootstrap · Bootstraps React and mounts the root application. · `src/index.js`
- [Main app](https://github.com/ericjoel25/newportafolio/blob/main/src/App.js): spa shell · Top-level application container that composes the portfolio sections. · `src/App.js`
- [Pages index](https://github.com/ericjoel25/newportafolio/blob/main/src/pages/index.js): section registry · Central export surface for the portfolio page-level sections. · `src/pages/index.js`
- [Home](https://github.com/ericjoel25/newportafolio/blob/main/src/pages/home.js): section component · Landing section for the portfolio. · `src/pages/home.js`
- [Background](https://github.com/ericjoel25/newportafolio/blob/main/src/pages/background.js): section component · Background or about section of the portfolio. · `src/pages/background.js`
- [Skills](https://github.com/ericjoel25/newportafolio/blob/main/src/pages/skill.js): section component · Skills presentation section. · `src/pages/skill.js`
- [Projects](https://github.com/ericjoel25/newportafolio/blob/main/src/pages/myProjects.js): section component · Project showcase section, likely the most interactive content area. · `src/pages/myProjects.js`
- [Contact](https://github.com/ericjoel25/newportafolio/blob/main/src/pages/contact.js): section component · Contact section for reaching the portfolio owner. · `src/pages/contact.js`
- [Modal](https://github.com/ericjoel25/newportafolio/blob/main/src/components/modal/modal.js): overlay component · Reusable overlay used for project or media detail views. · `src/components/modal/modal.js`
- [Images](https://github.com/ericjoel25/newportafolio/blob/main/src/components/images/index.js): asset registry · Centralized import map for images and other static media used by components. · `src/components/images/index.js`
- [Styles index](https://github.com/ericjoel25/newportafolio/blob/main/src/utils/styles/index.js): style registry · Shared style exports and scoped CSS module organization. · `src/utils/styles/index.js`
- [App CSS](https://github.com/ericjoel25/newportafolio/blob/main/src/App.css): global styles · Application-level styles for the main shell. · `src/App.css`
- [Base CSS](https://github.com/ericjoel25/newportafolio/blob/main/src/index.css): global styles · Base styles applied at the application root. · `src/index.css`

### Static assets

Public HTML, manifest, and downloadable media served as static content.

- [HTML shell](https://github.com/ericjoel25/newportafolio/blob/main/public/index.html): entry document · DOM mount point and initial static document for the React app. · `public/index.html`
- [Resume PDF](https://github.com/ericjoel25/newportafolio/blob/main/public/EricJoelMarte.pdf): download asset · Static resume document exposed from the public site. · `public/EricJoelMarte.pdf`
- [Manifest](https://github.com/ericjoel25/newportafolio/blob/main/public/manifest.json): web manifest · Install metadata for the static site. · `public/manifest.json`

### Hosting

Firebase Hosting and GitHub Actions deployment boundary.

- [Firebase config](https://github.com/ericjoel25/newportafolio/blob/main/firebase.json): hosting config · Defines the Firebase Hosting build and publish setup. · `firebase.json`
- [Deploy merge](https://github.com/ericjoel25/newportafolio/blob/main/.github/workflows/firebase-hosting-merge.yml): ci workflow · GitHub Actions workflow for Firebase deployment on merge. · `.github/workflows/firebase-hosting-merge.yml`
- [Deploy PR](https://github.com/ericjoel25/newportafolio/blob/main/.github/workflows/firebase-hosting-pull-request.yml): ci workflow · GitHub Actions workflow for preview validation on pull requests. · `.github/workflows/firebase-hosting-pull-request.yml`

## Connections

- HTML shell → App entry: loads app · The browser document provides the mount point for React.
- App entry → Main app: mounts · React entrypoint renders the main application shell.
- Main app → Pages index: composes sections · App assembles the page-level portfolio sections.
- Pages index → Home: exports · Section registry exposes the home section.
- Pages index → Background: exports · Section registry exposes the background section.
- Pages index → Skills: exports · Section registry exposes the skills section.
- Pages index → Projects: exports · Section registry exposes the projects section.
- Pages index → Contact: exports · Section registry exposes the contact section.
- Projects → Modal: opens detail · Project content can surface through a reusable modal overlay.
- Projects → Images: uses media · Projects likely consume centralized static imagery.
- Main app → Modal: shares overlay · The modal is part of the shared UI boundary.
- Main app → App CSS: styles · Main app shell is styled by its companion stylesheet.
- App entry → Base CSS: styles · Application bootstrap pulls in base styles.
- Main app → Styles index: uses modules · The app relies on scoped style modules for section-specific presentation.
- Contact → Resume PDF: links asset · Contact or profile content exposes the downloadable resume.
- Firebase config → HTML shell: serves · Firebase Hosting publishes the static site built from public assets.
- Firebase config → App entry: publishes bundle · Hosting delivers the built React application to the browser.
- Deploy merge → Firebase config: deploys · Merge workflow automates Firebase deployment.
- Deploy PR → Firebase config: validates deploy · Pull request workflow exercises the same hosting pipeline.
- Manifest → HTML shell: describes · Manifest config supports the static web app shell.