All projects displayed on the site are defined in a hardcodedDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/nicolasgrajaleshoyos/portafolio/llms.txt
Use this file to discover all available pages before exploring further.
projects: Project[] array at the top of src/components/Projects.tsx. There is no database or CMS — adding a project means adding a new object directly to this array, and removing one means deleting its entry. The array drives both the data and render order of the card grid.
The Project Type
Each entry in theprojects array must conform to the Project interface defined in src/types.ts.
A unique numeric identifier for the project. It is used exclusively as the React
key prop when rendering the card list and does not appear in the UI.The project title displayed as a bold heading overlaid on the card image.
A brief description of the project shown in the white/dark panel below the card image.
Path to the card image, relative to the
public/ directory root. For example, an image at public/icons/my-project.webp should be referenced as '/icons/my-project.webp'.An array of technology or category labels. Each tag is rendered as a small cyan badge overlaid on the bottom of the card image.
The URL of the live demo or deployed site. When provided, an external-link icon button appears on the card on hover. When omitted, the button is hidden entirely.
The URL of the source code repository (e.g., a GitHub link). When provided, a GitHub icon button appears on the card on hover. When omitted, the button is hidden entirely.
Existing Projects
The portfolio currently ships with four projects defined insrc/components/Projects.tsx. Their images are stored in public/icons/:
| ID | Title | Image file |
|---|---|---|
| 1 | DSS Comparador de Países Backend | backend.webp |
| 2 | DSS Comparador de Países Frontend | frontend.webp |
| 3 | Sitio Web de Portafolio | portafolio.png |
| 4 | Sistema para Empresa de Arepas | arepas.png |
id: 5 as the next available integer.
Adding a Project
Add the image to the public directory
Place your project image inside
public/icons/ (or any subfolder under public/). Supported formats are .webp, .png, and .jpg. Using .webp is recommended for smaller file sizes and faster load times.Open the projects array
Open
src/components/Projects.tsx and locate the projects constant near the top of the file, just below the imports.Append a new project object
Add a new object at the end of the array, filling in all required fields. Use the next available integer for
id. Omit liveUrl or codeUrl if they are not applicable — their corresponding icon buttons will be automatically hidden.Removing a Project
To remove a project, delete its entire object from theprojects array in src/components/Projects.tsx. No other files need to be changed. Reassigning id values after deletion is optional — they are only used as React key props and do not affect the UI or routing.
Reordering Projects
The grid renders cards in the exact order they appear in theprojects array, using a two-column CSS grid (md:grid-cols-2). To change the display order, move the objects within the array. For example, to promote a project to the first position, cut its object from its current location and paste it as the first element of the array.
Images must be placed inside the
public/ directory to be served correctly at the root URL path at runtime. Do not import them as ES module imports (e.g., import img from './my-project.webp'). Instead, always reference them with an absolute public path such as /icons/filename.webp. Vite copies everything in public/ verbatim to the build output, making these paths valid both in development and production.