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 About section (AboutSection.svelte) introduces Leila with a profile card on the left and a biography + skills grid on the right, using Svelte fly and fade entrance animations.

​
Layout

The section uses a three-column CSS grid (md:grid-cols-3) with two distinct regions:
  • Left column (1 col): Profile card — photo, name, title, and contact button
  • Right columns (2 cols): Bio narrative (“Mi Historia y Trayectoria”) stacked above the skills grid (“Skills técnicas”)
On mobile, the grid collapses to a single column (grid-cols-1) and the profile card stacks on top of the bio content.

​
Profile Card

The profile card is a centered flex column inside a rounded, frosted-glass panel (bg-gray-900/80 backdrop-blur-md). It contains:
  • Profile photo — /Profile_Image.jpg displayed in a circular border-cyan-400 frame with a subtle hover scale effect
  • Name — “Leila” rendered as a large bold heading
  • Title — “Desarrolladora Backend” in muted gray text
  • “Contáctame” button — a cyan-to-indigo gradient button linking to #contact

​
Skills Grid

Each skill is rendered as a square card showing its Iconify icon, name, and proficiency level. The @iconify/svelte Icon component renders icons by string ID — no local SVG files are required. The full skills array defined in AboutSection.svelte: 
let 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'      },
];
Each entry in the array maps to a skill card in the grid. The level field accepts the strings 'Avanzado' or 'Basico' and is displayed as-is beneath the skill name.

​
Adding or Updating Skills

1

Open the component

Open src/lib/components/AboutSection.svelte in your editor.
2

Locate the skills array

Find the skills array near the top of the <script> block.
3

Add a new entry

Append a new object to the array following the existing shape:
{ name: 'Docker', level: 'Basico', icon: 'simple-icons:docker' }
4

Find the right icon ID

Browse available Iconify icons at https://icon-sets.iconify.design/ and copy the full icon ID string (e.g., devicon-plain:docker, mdi:docker).

​
Animation

The three major blocks animate in on page load using Svelte’s in: directives:
ElementTransitionParameters
Profile cardflyx: -50, duration: 800, delay: 200
Bio sectionflyx: 50, duration: 800, delay: 400
Skills sectionfadeduration: 1000, delay: 600
The profile card and bio section fly in from opposite horizontal directions (x: -50 vs x: 50), while the skills grid fades in last after the text content has settled.
Iconify loads icons on-demand from its CDN. No local icon files are needed — just provide the icon ID string.

Build docs developers (and LLMs) love

Get started for freeTalk to us