Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Emmanuel-Mtz-777/My-Personal-Portfolio/llms.txt

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

The Stack section (rendered by src/components/sections/Stack.astro) gives visitors a quick visual inventory of every technology Emmanuel works with. Rather than a plain list, each technology is displayed as a small interactive card bearing its official icon and name. The cards are grouped into five semantic categories and laid out in a responsive CSS grid that reflows gracefully from single-column on mobile to multi-column on wider viewports. A shared Particles WebGL background is embedded inside each category group, giving the section the same lively atmosphere as the Hero.

​
Data source

All technology definitions live in src/utils/data/StackData.js, which exports five named arrays:
ExportCategory label (en.json key)
frontendstack.frontend
languajesstack.lang
databasesstack.db
backendstack.backend
toolsstack.tools
Each array element follows the shape { icon: Component, title: string } where icon is an imported Astro or React component from src/components/icons/tec/<category>/.

​
Full technology inventory

CategoryTechnologies
FrontendHTML, CSS, Tailwind CSS, Astro, Vue.js, React, Expo
LanguagesJavaScript, TypeScript, Java, PHP, Python
DatabasesMySQL, SQLite, ElasticSearch, Supabase
BackendNode.js, Express, Laravel, Spring Boot
ToolsDocker, Git, Netlify

​
StackData.js exports (source)

// src/utils/data/StackData.js — abbreviated

export const frontend = [
  { icon: Html,        title: "HTML" },
  { icon: Css,         title: "CSS" },
  { icon: Tailwind,    title: "Tailwind CSS" },
  { icon: AstroIcon,   title: "Astro" },
  { icon: Vue,         title: "Vue.js" },
  { icon: ReactIcon,   title: "React" },
  { icon: Expo,        title: "Expo" },
];

export const languajes = [
  { icon: Javascript,  title: "JavaScript" },
  { icon: Typescript,  title: "TypeScript" },
  { icon: Java,        title: "Java" },
  { icon: PhP,         title: "PHP" },
  { icon: Python,      title: "Python" },
];

export const databases = [
  { icon: Mysql,        title: "MySQL" },
  { icon: SQLite,       title: "SQLite" },
  { icon: ElasticSearch,title: "ElasticSearch" },
  { icon: Supabase,     title: "Supabase" },
];

export const backend = [
  { icon: Nodejs,      title: "Node.js" },
  { icon: Express,     title: "Express" },
  { icon: Laravel,     title: "Laravel" },
  { icon: SpringBoot,  title: "Spring Boot" },
];

export const tools = [
  { icon: Docker,      title: "Docker" },
  { icon: Git,         title: "Git" },
  { icon: Netlify,     title: "Netlify" },
];

​
TechCard component

Each category group is wrapped in src/components/ui/cards/TechCard.astro, which accepts these props: 
{
  title:              string,          // category heading
  items:              Array<{ icon: Component, title: string }>,
  cols?:              string,          // Tailwind grid-cols class, e.g. "grid-cols-3 sm:grid-cols-5"
  particleBaseSize?:  number,          // OGL particle size, default 80
  class?:             string           // additional width/layout classes
}
Inside the card, the Particles WebGL effect fills the card background (100 particles, spread 20, speed 0.5), and the items are rendered in a CSS grid where each cell is a square tile with hover scale and border transitions.

​
Icon component structure

Technology icons follow a consistent path convention: 
src/components/icons/tec/
  frontend/   — Html.jsx, Css.jsx, Tailwind.jsx, Astro.astro, Vue.jsx, React.jsx, Expo.astro
  langs/      — Javascript.jsx, Typescript.jsx, Java.astro, PhP.astro, Python.astro
  db/         — Mysql.jsx, SQLite.astro, ElasticSearch.jsx, Supabase.astro
  backend/    — Node.jsx, Express.jsx, Laravel.astro, SpringBoot.astro
  tools/      — Docker.jsx, Git.jsx, Netlify.astro
Icons implemented as .jsx are React components; icons as .astro are Astro components. Both render inline SVGs and accept a style prop for sizing (the TechCard renders each at 30 × 30 px).

​
Layout overview

Stack.astro arranges the five TechCard groups in a stacked-then-side-by-side layout:
  1. Languages — full width, 5-column grid on desktop.
  2. Frontend + Databases — side by side on sm: and up (2/3 + 1/3 split).
  3. Backend + Tools — side by side on sm: and up (1/2 + 1/2 split).
To add a new technology, import its icon into src/utils/data/StackData.js and push { icon, title } to the appropriate export array. No changes to any Astro template are needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us