Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/iwinser117/react-portafolio/llms.txt

Use this file to discover all available pages before exploring further.

All project content displayed throughout the Hector Portfolio site is centralised in a single module: src/utils/galerimages.js. The file imports every project screenshot or icon at the top level, organises them into named arrays, and re-exports them so that page components consume a single, predictable source of truth. Understanding this file is the first step for adding, removing, or rearranging portfolio entries.

​
Named Exports

The module exposes six named exports. Each one serves a different section of the portfolio UI.

imagesData

Legacy array of 6 icon entries (JavaScript, Node.js, CSS, HTML, React icons). Not consumed by the projects page — kept for historical reference only.

secondImages

Main project array. Consumed by aplicaciones.jsx to render the featured project cards grid. This is the array you edit to add or update showcase projects.

imagesTodowebp

Plain object mapping short keys to imported .webp / .png assets. Used by the vanilla mini-apps section of the portfolio.

section1Projects

JavaScript category projects rendered in their own filtered section.

section2Projects

Node.js category projects rendered in their own filtered section.

section3Projects

CSS / HTML category projects rendered in their own filtered section.

​
Project Object Shape

Every entry in secondImages, section1Projects, section2Projects, and section3Projects follows the same object shape: 
interface Project {
  src: string;       // imported image asset (result of an ES module import)
  alt: string;       // project title — also used as the card's accessible alt text
  subtitle: string;  // tech stack tags, e.g. "NodeJs - React - MongoDB"
  demo: string;      // live demo URL
  repo: string;      // GitHub repository URL
}
The src field must be an imported asset, not a raw string path. Vite (or your bundler) resolves the import at build time and replaces it with the hashed output URL. Passing a plain string like "/assets/my-project.webp" will not be picked up by the asset pipeline.

​
secondImages — Current Projects

secondImages is the array that powers the main /aplicaciones page. As of the current source, it contains six active entries (several others are commented out and can be re-enabled):
#alt (title)subtitle (tech stack)Live Demo
1CRUD Lista tareasNodeJs - React - MongoDBcrudlistatareas.netlify.app
2Autenticación JWTNodeJs - ExpressJs - oAuthautenticate.vercel.app
3Generador ContraseñasTailwind - NextJsgeneratepassword-theta.vercel.app
4TableExportJSNodeJstable-export-js-4zq5.vercel.app
5CRUD SAPNodeJs - Express - Odata - SAPmega-crud-table-ui5.vercel.app
6apk pdfVisor PDF - Androidpdf-generator-nodejs.vercel.app
// src/utils/galerimages.js (secondImages — active entries)
const secondImages = [
  {
    src: listtareas,
    alt: 'CRUD Lista tareas',
    subtitle: 'NodeJs - React - MongoDB',
    demo: 'https://crudlistatareas.netlify.app/',
    repo: 'https://github.com/iwinser117/nodeJs_react_crud'
  },
  {
    src: login,
    alt: 'Autenticación JWT',
    subtitle: 'NodeJs - ExpressJs - oAuth',
    demo: 'https://autenticate.vercel.app/',
    repo: 'https://github.com/iwinser117/autenticate'
  },
  {
    src: generatePassword,
    alt: 'Generador Contraseñas',
    subtitle: 'Tailwind - NextJs',
    demo: 'https://generatepassword-theta.vercel.app/',
    repo: 'https://github.com/iwinser117/generatepassword'
  },
  {
    src: imgtablaExport,
    alt: 'TableExportJS',
    subtitle: 'NodeJs',
    demo: 'https://table-export-js-4zq5.vercel.app/',
    repo: 'https://github.com/iwinser117/TableExportJS'
  },
  {
    src: crud_sap,
    alt: 'CRUD SAP',
    subtitle: 'NodeJs - Express - Odata - SAP',
    demo: 'https://mega-crud-table-ui5.vercel.app/',
    repo: 'https://github.com/iwinser117/mega-crud-table-ui5'
  },
  {
    src: "",
    alt: "apk pdf",
    subtitle: "Visor PDF - Android",
    demo: "https://pdf-generator-nodejs.vercel.app/",
    repo: "https://github.com/iwinser117/pdf_reader"
  }
];

​
Category Sections

The three category arrays each hold projects for a specific technology focus: section1Projects — JavaScript
altsubtitleDemo
Rick and MortyConsumo API - Paginaciónapi-rick-and-morty-17j9.vercel.app
section2Projects — Node.js
altsubtitleDemo
Autenticación JWTNode.js - JWT - Expressautenticate.vercel.app
Generador ContraseñasTailwind - NextJsgeneratepassword-theta.vercel.app
TableExportJSVanilla JS - CSV - XLSXtable-export-js-4zq5.vercel.app
section3Projects — CSS
altsubtitleDemo
Galería de ArteHTML - CSS - Lightboxgalery-art-rho.vercel.app
Animación BackgroundCSS - Animations - Responsiveiwinser117.github.io
Plantilla ResponsiveHTML - CSS - Responsiveresponsivetemplatecss.netlify.app

​
imagesTodowebp Object Keys

imagesTodowebp is a plain object (not an array) used by the vanilla mini-apps section. Each key maps to an imported asset: 
const imagesTodowebp = {
  calcu: calcu,                       // Calculadora screenshot
  contador: contador,                 // Contador screenshot
  listtareas: listtareas,             // Lista de tareas screenshot
  imgPaletaColores: imgPaletaColores, // Paleta de colores screenshot
  cimgtablaExport: cimgtablaExport,   // Tabla Export screenshot
  loginImg: loginImg,                 // Login screenshot
  relojimg: relojimg,                 // Reloj screenshot
  generatePassword: generatePassword, // Generador de contraseñas screenshot
  rickandmorty: rickandmorty          // Rick and Morty API screenshot
};

​
Category Derivation

Category filter buttons shown on the /aplicaciones page are not stored inside galerimages.js. They are derived at render-time in aplicaciones.jsx by parsing each project’s subtitle string. This means the filter labels update automatically whenever you change a subtitle value — no separate category list to maintain.

​
How to Add a New Project

1

Import the project image

Add an import statement at the top of src/utils/galerimages.js, alongside the existing imports. Use the @assets alias that Vite resolves to src/assets/.
import myNewProject from '@assets/my-new-project.webp';
2

Push an entry to secondImages

Add a new object to the secondImages array. Fill in all required fields: src, alt, subtitle, demo, and repo.
const secondImages = [
  // ...existing entries...
  {
    src: myNewProject,
    alt: 'My New Project',
    subtitle: 'React - TypeScript - TailwindCSS',
    demo: 'https://my-new-project.vercel.app/',
    repo: 'https://github.com/iwinser117/my-new-project'
  }
];
3

Rebuild and verify

Run the dev server or production build. The new project card will appear automatically in the /aplicaciones route. Because category filters are derived from subtitle at render-time, any new tech keywords in subtitle will surface as filter options without further changes.
npm run dev
# Navigate to http://localhost:5173/aplicaciones

Build docs developers (and LLMs) love

Get started for freeTalk to us