Skip to content

Home

Jump to bottom
Mindset & Code edited this page Aug 18, 2026 · 6 revisions

Portafolio Profesional — Wiki

🇬🇧 English first · 🇪🇸 Español más abajo.

A React 19 single-page app on Firebase Hosting that gathers every demo in one place: four dashboards rebuilt in Recharts from committed JSON, three Power BI / Tableau panels and one vanilla-JS simulator embedded in iframes, and a project catalogue. One codebase compiles into two different sites.

Live: proyectos-mindset-code.web.app Repo: mindset-code/project-portfolio

Verified against commit f781741.

Pages in this wiki

Stack

Layer Technology
Framework React 19.2
Routing React Router 7.14
Build Vite 8.0
Charts Recharts 3.8
Language own LangContext (ES/EN), no i18n library
Hosting Firebase Hosting — project sales-weather-etl, target marca, site proyectos-mindset-code

Four runtime dependencies in total: react, react-dom, react-router-dom, recharts. Everything else in package.json is ESLint and the Vite plugin.

Routes

Eleven, all defined in App.jsx:

Route Page What it shows
/ HomePage landing page — the largest file in the repo
/etl EtlLoader → EtlDashboard Sales & Weather ETL
/executive ExecutiveDashboard Executive Dashboard 360°
/churn ChurnDashboard Predictive Churn Analysis
/hotel HotelDashboard Hotel Pricing Engine
/revenue RevenueSimulator the pricing simulator, in an iframe
/consultoria-tech ConsultoriaTechPage tech consultancy
/automations AutomationsPage automations and agents
/dashboards DashboardsPage Power BI / Tableau panels
/portfolio PortfolioIndexPage project catalogue
/portfolio/:projectId PortfolioProjectPage one project's page

HomePage is imported eagerly; the other ten are lazy(), so Recharts and the dashboards stay out of the bundle a first-time visitor downloads:

const EtlDashboard = lazy(() => import('./pages/EtlDashboard'))

Since Firebase rewrites every path to /index.html, all routing happens in the browser — a deep link works, and a 404 is a React route rather than an HTTP status.

Two ways of showing a project

Both are used deliberately, and the choice is per project:

Rebuilt in React. The four data dashboards read committed JSON and draw it with Recharts. That gives one visual language, the site's own language toggle, and charts that resize with the page.

Embedded in an iframe. The three panels of /dashboards and the simulator at /revenue are served as they are, from public/. RevenueSimulator.jsx states the reason in the file: the original is already a complete site with no dependencies, and rebuilding it would mean maintaining two copies of the same calculation with the risk of them drifting apart. The iframe also isolates the stylesheet — the simulator ships generic class names (.container, .header, .footer) that would collide with the portfolio's own.

One codebase, two sites

The most consequential design decision in the repository, and it lives in a 60-line file, src/identidad.js:

export const DE_MARCA = !env.VITE_TITULAR

The same code builds the practice's site, signed by the brand, and a personal one signed by name. The defaults are the brand ones, and the personal identity is injected at build time from .env.personal, which is gitignored. Clone this repository, run npm run build, and you get the publishable version — never the signed one. Arquitectura del sitio covers the mechanism and Deploy y mantenimiento the two commands.

🇪🇸 Español

Una aplicación de una sola página en React 19 sobre Firebase Hosting que reúne todas las demos en un sitio: cuatro dashboards rehechos en Recharts a partir de JSON commiteados, tres paneles de Power BI / Tableau y un simulador en JavaScript puro embebidos en iframes, y un catálogo de proyectos. El mismo código compila dos sitios distintos.

En vivo: proyectos-mindset-code.web.app Repo: mindset-code/project-portfolio

Verificado contra el commit f781741.

Páginas de esta wiki

Stack

Capa Tecnología
Framework React 19.2
Enrutado React Router 7.14
Compilación Vite 8.0
Gráficos Recharts 3.8
Idioma LangContext propio (ES/EN), sin librería de i18n
Hosting Firebase Hosting — proyecto sales-weather-etl, destino marca, sitio proyectos-mindset-code

Cuatro dependencias de ejecución en total: react, react-dom, react-router-dom y recharts. Todo lo demás en package.json es ESLint y el plugin de Vite.

Rutas

Once, todas definidas en App.jsx:

Ruta Página Qué enseña
/ HomePage portada — el fichero más grande del repositorio
/etl EtlLoader → EtlDashboard Sales & Weather ETL
/executive ExecutiveDashboard Executive Dashboard 360°
/churn ChurnDashboard Predictive Churn Analysis
/hotel HotelDashboard Hotel Pricing Engine
/revenue RevenueSimulator el simulador de precios, en un iframe
/consultoria-tech ConsultoriaTechPage consultoría tecnológica
/automations AutomationsPage automatizaciones y agentes
/dashboards DashboardsPage paneles de Power BI / Tableau
/portfolio PortfolioIndexPage catálogo de proyectos
/portfolio/:projectId PortfolioProjectPage la ficha de un proyecto

HomePage se importa de forma directa; las otras diez van con lazy(), así que Recharts y los dashboards se quedan fuera del bundle que descarga quien entra por primera vez.

Como Firebase reescribe cualquier ruta a /index.html, todo el enrutado ocurre en el navegador: un enlace profundo funciona, y un 404 es una ruta de React y no un estado HTTP.

Dos maneras de enseñar un proyecto

Las dos se usan a propósito, y la elección es por proyecto:

Rehecho en React. Los cuatro dashboards de datos leen JSON commiteados y los dibujan con Recharts. Eso da un solo lenguaje visual, el conmutador de idioma del propio sitio y gráficos que se redimensionan con la página.

Embebido en un iframe. Los tres paneles de /dashboards y el simulador de /revenue se sirven tal cual desde public/. RevenueSimulator.jsx deja escrita la razón en el propio fichero: el original ya es una web completa sin dependencias, y rehacerlo habría significado mantener dos copias del mismo cálculo con el riesgo de que dejaran de dar el mismo número. El iframe además aísla la hoja de estilos — el simulador trae nombres de clase genéricos (.container, .header, .footer) que pisarían los del portafolio.

Un código, dos sitios

La decisión de diseño con más consecuencias del repositorio, y vive en un fichero de 60 líneas, src/identidad.js:

export const DE_MARCA = !env.VITE_TITULAR

El mismo código compila el sitio del despacho, firmado por la marca, y uno personal firmado con nombre. Los valores por defecto son los de la marca, y la identidad personal se inyecta al compilar desde .env.personal, que está en .gitignore. Quien clone este repositorio y ejecute npm run build obtiene la versión publicable, nunca la firmada. Arquitectura del sitio cubre el mecanismo y Deploy y mantenimiento los dos comandos.

Clone this wiki locally