Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/lgomegarc/mi-portfolio/llms.txt

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

The Projects section (ProjectsSection.svelte) renders a responsive grid of <ProjectCard> components. Each card shows a screenshot, tags, description, and optional live site and GitHub buttons. New projects are added by editing the allProjects array.

​
Current Projects

Portfolio

SvelteKit portfolio site (this project). Tags: SvelteKit, TypeScript, TailwindCSS. GitHub available.

Soporte E-commerce

Application and web support for Inditex group. Tools: DB2, Jira, Grafana, Confluence. Links disabled (private work).

Mic-Prices

E-commerce backend built with Spring Boot microservices. Tags: Java, Spring Boot, Kafka, Spring JPA, React, TailwindCSS. GitHub available.

​
ProjectCard Props

​
title
string
required
The project name displayed as the card heading.
​
description
string
required
A short description of the project shown in the card body.
​
image
string
required
Path to the project screenshot. Images must be placed in static/ and referenced as /your-image.png.
​
link
string
required
URL for the live site “Ver Sitio” button. Pass '#' as a placeholder when disableLink is true.
​
github
string
required
URL of the GitHub repository. Pass an empty string '' when disableGithub is true.
​
tags
string[]
default:"[]"
Array of technology tag strings rendered as cyan pill badges below the card title.
​
disableLink
boolean
default:"false"
When true, the “Ver Sitio” button is rendered as a disabled grey button instead of an active link.
​
disableGithub
boolean
default:"false"
When true, the “GitHub” button is rendered as a disabled grey button instead of an active link.

​
Adding a New Project

1

Add a project entry

Open src/lib/components/ProjectsSection.svelte and append a new object to the allProjects array:
{
  title: 'My New Project',
  description: 'A short description of what the project does.',
  image: '/my-screenshot.png',
  link: 'https://my-project.com',
  github: 'https://github.com/lgomegarc/my-project',
  tags: ['Node.js', 'PostgreSQL'],
  disableLink: false,
  disableGithub: false,
}
2

Add a screenshot

Place a PNG screenshot of the project into the static/ directory at the root of the repository.
3

Reference the screenshot

Use the filename prefixed with / as the image value — e.g., /my-screenshot.png. SvelteKit serves static/ files at the root path automatically.
4

Handle private projects

Set disableLink: true if there is no live site URL, and disableGithub: true if the repository is private. Both buttons will render in a disabled state.

​
Full allProjects Array

const allProjects = [
  {
    title: 'Portfolio',
    description: 'Web que describe los proyectos en los que he trabajado y mi formación profesional.',
    image: '/Portfolio.png',
    link: '#',
    github: 'https://github.com/lgomegarc/mi-portfolio',
    tags: ['SvelteKit', 'Typescript', 'TailwindCSS'],
    disableLink: false,
    disableGithub: false,
  },
  {
    title: 'Soporte E-commerce',
    description: 'Soporte a aplicaciones y páginas web del grupo Inditex',
    image: '/Jira.png',
    link: '#',
    github: '',
    tags: ['DB2', 'Jira', 'Grafana', 'Confluence'],
    disableLink: true,
    disableGithub: true,
  },
  {
    title: 'Mic-Prices',
    description: 'Desarrollo de cero de un proyecto e-commerce con Spring Boot.',
    image: '/codigo.png',
    link: '#',
    github: 'https://github.com/lgomegarc/mic-prices/tree/main/mic-prices-develop/mic-prices-develop',
    tags: ['Java', 'Spring Boot', 'Kafka', 'Spring JPA', 'React', 'TailwindCSS'],
    disableLink: true,
    disableGithub: false,
  },
];

​
Responsive Grid

The project cards are laid out using Tailwind’s responsive grid utilities:
BreakpointColumnsClass
Mobile1grid-cols-1
Tablet2md:grid-cols-2
Desktop3lg:grid-cols-3
Each <ProjectCard> uses h-full and flex-col internally so that all cards in a row stretch to equal height regardless of how much description text they contain.

​
Staggered Animations

Cards animate into view using Svelte’s in:fly directive with a staggered delay based on the card’s index i in the allProjects array: 
{#each allProjects as project, i (project.title)}
  <div in:fly={{ y: 50, duration: 800, delay: 400 + (i * 150) }}>
    <ProjectCard {...project} />
  </div>
{/each}
With a base delay of 400ms and a stagger of 150ms per card, the three current cards animate at 400ms, 550ms, and 700ms respectively — creating a natural cascading waterfall effect as the section enters the viewport.
Use disableLink: true and disableGithub: true together for confidential work projects where neither a live URL nor source code can be shared.

Build docs developers (and LLMs) love

Get started for freeTalk to us