How ericjoel25/newportafolio works
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: pages/index.js Pages index · App.js Main app · src/index.js App entry · firebase.json Firebase config
Components 19
React app
Client-side CRA portfolio experience rendered in the browser.
- App entry · Bootstraps React and mounts the root application.
src/index.js - Main app · Top-level application container that composes the portfolio sections.
src/App.js - Pages index · Central export surface for the portfolio page-level sections.
src/pages/index.js - Home · Landing section for the portfolio.
src/pages/home.js - Background · Background or about section of the portfolio.
src/pages/background.js - Skills · Skills presentation section.
src/pages/skill.js - Projects · Project showcase section, likely the most interactive content area.
src/pages/myProjects.js - Contact · Contact section for reaching the portfolio owner.
src/pages/contact.js - Modal · Reusable overlay used for project or media detail views.
src/components/modal/modal.js - Images · Centralized import map for images and other static media used by components.
src/components/images/index.js - Styles index · Shared style exports and scoped CSS module organization.
src/utils/styles/index.js - App CSS · Application-level styles for the main shell.
src/App.css - Base CSS · Base styles applied at the application root.
src/index.css
Static assets
Public HTML, manifest, and downloadable media served as static content.
- HTML shell · DOM mount point and initial static document for the React app.
public/index.html - Resume PDF · Static resume document exposed from the public site.
public/EricJoelMarte.pdf - Manifest · Install metadata for the static site.
public/manifest.json
Hosting
Firebase Hosting and GitHub Actions deployment boundary.
- Firebase config · Defines the Firebase Hosting build and publish setup.
firebase.json - Deploy merge · GitHub Actions workflow for Firebase deployment on merge.
.github/workflows/firebase-hosting-merge.yml - Deploy PR · GitHub Actions workflow for preview validation on pull requests.
.github/workflows/firebase-hosting-pull-request.yml
Connections 20
- 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.