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.

Mi Portfolio’s UI is built from seven Svelte components located in src/lib/components/. Together they assemble the complete single-page experience: a sticky navigation bar, a hero section with social links, an about section with a skills grid, a projects grid, a contact form, and a footer. This page documents each component’s responsibilities, props, and key behaviors.

​
Navbar.svelte

No props. Renders a sticky top navigation bar that stays fixed at the top of the viewport (z-30). It contains the site logo on the left and the four navigation links on the right for desktop viewports. On mobile viewports the links are replaced with a hamburger button that toggles a full-screen slide-in menu. Navigation links: 
const links = [
  { name: 'Inicio',     path: '#home'     },
  { name: 'Sobre Mí',   path: '#about'    },
  { name: 'Proyectos',  path: '#projects' },
  { name: 'Contacto',   path: '#contact'  },
];
State and behaviour:
  • isMenuOpen — Boolean reactive variable. true when the mobile menu is visible.
  • closeMenu() — Sets isMenuOpen = false. Called via on:click on every mobile nav link so the menu closes after navigation.
  • The mobile overlay uses Svelte’s slide transition (duration: 300) from svelte/transition for its enter/exit animation.
  • The hamburger icon SVG path switches between a “three lines” icon and an ”×” icon depending on isMenuOpen.

​
Footer.svelte

No props. A minimal footer bar rendered at the bottom of every page via +layout.svelte. It computes the current year dynamically so the copyright date never goes stale: 
const currentYear = new Date().getFullYear();
The footer sits inside the flex column established by the root layout, using mt-auto semantics to always stay at the bottom of the page even on short-content viewports.

​
SocialLinks.svelte

No props. Renders a horizontal row of three icon links. Each link has an inline SVG icon and a CSS-powered hover tooltip implemented with Tailwind’s group utility class pattern. Links rendered:
LabelURLBehaviour
GitHubhttps://github.com/lgomegarcOpens in new tab
LinkedInhttps://www.linkedin.com/in/leila-begoña-gómez-garcía-27961425bOpens in new tab
Descargar CV/CV Leila.pdfOpens in new tab (browser handles PDF download from static/)
Each icon is an inline SVG string rendered via Svelte’s {@html ...} directive, with a w-12 h-12 size class injected at render time. The tooltip appears on group-hover — it is absolutely positioned above the icon and fades in with transition-opacity duration-300. This component is used in two places: the Hero section (+page.svelte) and the left panel of ContactSection.svelte.

​
AboutSection.svelte

No props. Displays the developer profile card and technical skills grid. The layout is a three-column CSS grid on md and wider screens: the profile card occupies one column and the bio + skills panels span the remaining two. Content rendered:
  • Profile photo from /Profile_Image.jpg inside a circular frame with a border-cyan-400 ring.
  • Name: Leila and title: Desarrolladora Backend.
  • Two bio paragraphs covering her backend specialisation (Java / Spring Boot) and frontend skills (TypeScript, Svelte, Tailwind CSS).
  • A responsive skills grid (2 cols → 3 cols → 4 cols) of skill cards, each showing an Iconify icon, the skill name, and a proficiency level.
Skills array: 
const skills = [
  { name: 'Java',        level: 'Avanzado', icon: 'devicon-plain:java'          },
  { name: 'Spring Boot', level: 'Avanzado', icon: 'simple-icons:springboot'     },
  { name: 'HTML',        level: 'Avanzado', icon: 'devicon-plain:html5'         },
  { name: 'CSS',         level: 'Avanzado', icon: 'devicon-plain:css3'          },
  { name: 'JavaScript',  level: 'Basico',   icon: 'devicon-plain:javascript'    },
  { name: 'SvelteKit',   level: 'Basico',   icon: 'simple-icons:svelte'         },
  { name: 'Tailwind CSS',level: 'Basico',   icon: 'simple-icons:tailwindcss'    },
  { name: 'Typescript',  level: 'Basico',   icon: 'simple-icons:typescript'     },
];
Icons are rendered using the Icon component from @iconify/svelte: 
<Icon icon={skill.icon} class="mb-2 text-4xl text-cyan-400" />
Sections animate in using Svelte’s fly and fade transitions from svelte/transition, with staggered delays for a polished entrance effect.

​
ProjectCard.svelte

A self-contained card component for displaying a single project. It receives all content as props — there is no hardcoded project data inside the component.
​
title
string
required
The project name displayed as the card’s <h3> heading.
​
description
string
required
A short paragraph describing the project, rendered in the card body.
​
image
string
required
Path to the project screenshot. Should reference a file in static/, e.g. '/Portfolio.png'.
​
link
string
required
URL for the Ver Sitio (live site) button. Ignored when disableLink is true.
​
github
string
required
GitHub repository URL for the GitHub button. Ignored when disableGithub is true.
​
tags
array
default:"[]"
Array of technology tag strings (e.g. ['SvelteKit', 'TypeScript']) rendered as cyan pill badges below the card title.
​
disableLink
boolean
default:"false"
When true, the Ver Sitio button is replaced by a disabled <button> element. Use this for projects that do not have a public live URL.
​
disableGithub
boolean
default:"false"
When true, the GitHub button is replaced by a disabled <button> element. Use this for private or internal projects.

​
ProjectsSection.svelte

No props. Responsible for hardcoding the full list of projects and rendering them in a responsive grid using <ProjectCard>. The grid is 1 column on mobile, 2 columns on md, and 3 columns on lg and above. Projects 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,
  },
];
Each project entry is spread directly onto a <ProjectCard> using {...project}. Cards animate in with Svelte’s fly transition (upward, y: 50) with staggered delays (400 + i * 150 ms) to create a cascading entrance effect.
To add a new project, edit the allProjects array in ProjectsSection.svelte. Each entry maps directly to a <ProjectCard> — no other changes needed.

​
ContactSection.svelte

No props. A two-panel section rendered inside a CSS grid (single column on mobile, two columns on lg). The left panel shows direct contact information and social links; the right panel presents a contact form backed by EmailJS. Left panel — contact info: Renders three contact entries (email, phone, location) from a hardcoded contactInfo array, followed by <SocialLinks />. 
const contactInfo = [
  { icon: '✉️', label: 'Email',     value: 'leilagomezgarcia@gmail.com'     },
  { icon: '📞', label: 'Teléfono',  value: '+34 722 76 44 83'              },
  { icon: '📍', label: 'Ubicación', value: 'Remoto / Pontevedra, España'   },
];
Right panel — contact form: A standard HTML form with three fields: name (text), email (email), and message (textarea). Submission is handled by the async handleSubmit(event) function. Form submission logic:
  • isSubmitting — Boolean that disables the submit button and changes its label to Enviando... while the request is in flight.
  • statusMessage — A Svelte writable store (from svelte/store). Set to a success string (✅ ¡Mensaje enviado correctamente!) or error string (❌ Error al enviar el mensaje. Intenta de nuevo.) after the EmailJS call resolves.
  • handleSubmit(event) — Calls emailjs.send(serviceID, templateID, { name, email, message }, publicKey) from @emailjs/browser. On success it resets the form; on failure it logs the error to the console. The finally block always re-enables the submit button.
async function handleSubmit(event) {
  event.preventDefault();
  const form = event.target;
  const name    = form.name.value;
  const email   = form.email.value;
  const message = form.message.value;

  isSubmitting = true;
  statusMessage.set('');

  try {
    await emailjs.send(serviceID, templateID, { name, email, message }, publicKey);
    statusMessage.set('✅ ¡Mensaje enviado correctamente!');
    form.reset();
  } catch (err) {
    statusMessage.set('❌ Error al enviar el mensaje. Intenta de nuevo.');
    console.error(err);
  } finally {
    isSubmitting = false;
  }
}
Both panels animate in from opposite sides using Svelte’s fly transition (x: -50 for the left panel, x: 50 with delay: 200 for the right panel, both with duration: 700).

Build docs developers (and LLMs) love

Get started for freeTalk to us