Mi Portfolio is the personal developer portfolio of Leila, a backend developer, built with SvelteKit and Tailwind CSS. These docs walk through the project’s architecture, component structure, configuration, and deployment setup — everything a developer needs to understand, fork, or extend the site.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 site UI is written in Spanish. This documentation covers the developer-facing structure and configuration in English.
What is Mi Portfolio?
Mi Portfolio is a single-page application (SPA) divided into four clearly defined sections:| Section | Purpose |
|---|---|
| Hero | Animated landing view with Leila’s name, a short intro, social links, and a CTA button |
| About | Skills grid powered by Iconify icons and a personal background blurb |
| Projects | A grid of ProjectCard components, each linking to a live site and GitHub repo |
| Contact | A two-column layout with direct contact details and an EmailJS-powered message form |
src/routes/+page.svelte, which composes these four sections by importing AboutSection, ProjectsSection, and ContactSection from $lib/components, alongside a SocialLinks component rendered directly in the Hero.
The project’s Spanish-language UI reflects Leila’s target audience (Spanish-speaking employers and clients), while the underlying code follows standard SvelteKit and TypeScript conventions documented here in English.
Technology Stack
SvelteKit
The core framework — version
^1.27.4. Handles routing, SSR/SSG configuration, and the component lifecycle. The Vercel adapter (@sveltejs/adapter-vercel ^3.1.0) is used for deployment.Tailwind CSS
Utility-first CSS framework (
^3.4.1) for all layout and visual styling, including the @tailwindcss/typography plugin for rich-text content areas.TypeScript
Strict TypeScript (
^5.9.3) is enabled via @tsconfig/svelte. The svelte-check tool enforces type safety across .svelte files at compile time.EmailJS
The
@emailjs/browser package (^4.4.1) sends contact form submissions directly from the browser — no server-side email infrastructure required.Iconify
The
@iconify/svelte package (^3.1.4) provides a unified icon component that pulls from any Iconify icon set, used throughout the skills grid and UI elements.Vercel
Deployment target via
@sveltejs/adapter-vercel. Vercel Analytics (@vercel/analytics ^1.6.1) is integrated to track page views with zero configuration.Key Features
- Svelte entrance animations —
fly,fade, andblurtransitions fromsvelte/transition(withquintOuteasing) animate every major section and element on mount. - Dark animated grid background — A full-viewport decorative grid renders behind all content, giving the site its distinctive dark aesthetic.
- Responsive sticky Navbar — The navigation bar stays fixed at the top on scroll; a hamburger menu collapses section links on mobile viewports.
- Interactive skills grid — The About section renders a grid of technology icons using
@iconify/svelte, each paired with a label. ProjectCardcomponent — Each project is displayed in a card that surfaces both a live site URL and a GitHub repository link.- EmailJS contact form — The Contact section submits messages via
emailjs.send()without any backend, showing inline success/error feedback. - Vercel Analytics — Page-view analytics are collected automatically via the
@vercel/analyticsintegration. - CV PDF download — The portfolio exposes a direct link to download Leila’s CV as a PDF file.
Project at a Glance
| Property | Value |
|---|---|
| Repository | github.com/lgomegarc/mi-portfolio |
| Version | 0.0.1 |
| Visibility | Private |
| Adapter | @sveltejs/adapter-vercel ^3.1.0 |
| Module type | ESM ("type": "module") |
| Node target | 18+ |