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 hero section is the first thing visitors see. It uses Svelte’s built-in fly, fade, and blur transitions to animate the headline, subtitle, CTA button, and social links into view in a coordinated sequence.

​
Layout

The hero is a full-viewport-height div (min-h-screen) with a centered container. It contains:
  • An animated H1 heading
  • A subtitle paragraph with links to #projects and #about
  • A CTA button linking to #about
  • The <SocialLinks> component
  • A footer note crediting SvelteKit + Tailwind CSS

​
Animation Sequence

Each element enters the viewport with a distinct transition, staggered via delay to create a smooth cascading feel:
ElementTransitionParameters
H1 headingflyy: -50, duration: 800
Subtitle paragraphflyy: 30, duration: 1000, delay: 500
CTA buttonblurdelay: 250, duration: 500
Social linksfadedelay: 1200, duration: 600
All transitions are applied via Svelte’s in: directive syntax — e.g., in:fly={{ y: -50, duration: 800, easing: quintOut }} — directly on the element’s opening tag in src/routes/+page.svelte.

​
CTA Button

The primary call-to-action button uses a cyan-to-indigo gradient to draw the eye: 
<a
  href="#about"
  class="inline-block px-8 py-3 font-semibold rounded-lg shadow-lg
         bg-gradient-to-r from-cyan-500 via-blue-600 to-indigo-600
         text-white hover:opacity-90 transform hover:scale-105 transition duration-300 ease-in-out"
  in:blur={{ delay: 250, duration: 500 }}
>
  Ver Mi Trayectoria →
</a>
The key Tailwind gradient class is: 
bg-gradient-to-r from-cyan-500 via-blue-600 to-indigo-600
On hover, the button scales up (hover:scale-105) and slightly reduces opacity (hover:opacity-90) for a polished interactive feel.

​
Background

The animated dark grid background is defined entirely in src/app.css. It combines three CSS features:
  • Dark base color — background-color: #111827 (Tailwind’s gray-900)
  • CSS grid lines — two linear-gradient layers draw 1px lines every 40px horizontally and vertically
  • grid-pan keyframe animation — slowly pans the grid pattern across the viewport over 120 seconds, giving the page a subtle sense of motion without distraction
@keyframes grid-pan {
    from { background-position: 0 0; }
    to   { background-position: 100vw 100vh; }
}

body {
    background-color: #111827;
    background-image:
        linear-gradient(to right, #2f3e4e 1px, transparent 1px),
        linear-gradient(to bottom, #2f3e4e 1px, transparent 1px);
    background-size: 40px 40px;
    animation: grid-pan 120s linear infinite;
}
The background-size: 40px 40px controls the grid cell size. Increasing this value produces a coarser grid; decreasing it produces a finer one.
To adjust animation timing, change the duration and delay values on the in:fly / in:fade / in:blur directives in src/routes/+page.svelte.

Build docs developers (and LLMs) love

Get started for freeTalk to us