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 Projects section showcases four of Emmanuel’s most representative builds, ranging from a Big Data analysis pipeline to a cross-platform social app. Each project is displayed as a rich card that combines a screenshot, a prose description, a row of colour-coded technology labels, and a direct link to the GitHub repository. The entire section is assembled in src/components/sections/Projects.astro by merging three independent data sources at build time — no hard-coded card markup required.

​
Data flow

src/langs/en.json          →  id, title, description, githubLink, repository label
  projects.items[n]

src/utils/data/ProjectTech.js  →  tags[] array: { icon, label, color }
  spotifyInsights | snackify | cita | meet2go

src/assets/projects/*.avif     →  optimised project screenshot
  Spotify-Insights.avif | Snackify.avif | C-Ita.avif | Meet2Go.avif
Projects.astro zips these three sources together by array index and passes each merged object to ProjectCard.astro: 
// src/components/sections/Projects.astro (frontmatter, simplified)
const images = [spotifyImg, snackifyImg, citaImg, meet2goImg];
const tech   = [spotifyInsights, snackify, cita, meet2go];

const projects = (t.projects.items || []).map((proj, index) => ({
  id:          proj.id,
  title:       proj.name,
  description: proj.description,
  github:      proj.githubLink,
  repository:  proj.repository,     // translated button label
  image:       images[index] || null,
  imageAlt:    proj.imageAlt || proj.name,
  tags:        tech[index]  || []
}));

​
ProjectCard props

src/components/ui/cards/ProjectCard.astro accepts a single project prop with this shape: 
{
  id:          string,          // e.g. "spotify-insights"
  title:       string,          // display name
  description: string,          // prose paragraph
  github:      string,          // full GitHub URL
  repository:  string,          // button label (translated)
  image:       ImageMetadata,   // Astro image import (.avif)
  imageAlt:    string,          // accessible alt text
  tags:        Array<{
    icon:  AstroComponent | ReactComponent,
    label: string,
    color: string               // hex background tint for the label pill
  }>
}
The card renders a screenshot on the left (or top on mobile), the description and tags in the right column, and a styled <a> button pointing to the GitHub URL.

​
Featured projects

Spotify Insights with Elasticsearch

Big Data analysis of a Spotify songs dataset using Elasticsearch and Kibana inside Docker containers. Results are visualised through Jupyter Notebooks. Stack: Python, Elasticsearch, Kibana, Docker.

Snackify

Frontend e-commerce platform for a dessert-focused local store business. Built with Astro, TypeScript, and Tailwind CSS — open for future backend integration. Stack: Astro, JavaScript, TypeScript, Tailwind CSS.

C-Ita

Android social network for ITA students styled after Facebook. Kotlin frontend backed by a Node.js + MySQL REST API and a local SQLite store. Stack: Kotlin, SQLite, Express, Node.js, MySQL.

Meet2go

Cross-platform mobile app for connecting people around shared interests. Features profiles, event management, and a real-time Socket.IO chat backed by an Express microservice on Heroku. Stack: React Native, Expo, TypeScript, Supabase, Express, Node.js.

​
Technology tags reference

Each project’s tags array is defined in src/utils/data/ProjectTech.js. The icon components are imported from src/components/icons/tec/<category>/ and the color value is a muted hex tint used as the pill background:
ProjectTags
Spotify InsightsElasticSearch, Kibana, Python, Docker
SnackifyAstro, JavaScript, TypeScript, Tailwind CSS
C-ItaKotlin, SQLite, Express, Node.js, MySQL
Meet2goReact, Expo, TypeScript, Supabase, Express, Node.js, Heroku, Socket.IO

​
Component files

  • Section: src/components/sections/Projects.astro
  • Card: src/components/ui/cards/ProjectCard.astro
  • Tag pill: src/components/ui/labels/TechLabel.astro
Project screenshots are stored as .avif files in src/assets/projects/ and processed by Astro’s built-in <Image> component, which generates optimised, lazily-loaded output automatically.

Build docs developers (and LLMs) love

Get started for freeTalk to us