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 follows SvelteKit’s conventional file-based layout. The entire application is served from a single route under src/routes/, while all reusable UI building blocks live under src/lib/components/. This separation keeps page-level orchestration cleanly distinct from component logic, and SvelteKit’s $lib alias makes importing those components frictionless from anywhere in the project.

​
Directory Overview

mi-portfolio/
├── src/
│   ├── app.css          # Global styles + animated grid background
│   ├── app.html         # Root HTML template
│   ├── app.d.ts         # TypeScript ambient declarations
│   ├── hooks.client.js  # Client-side SvelteKit hooks
│   ├── lib/
│   │   ├── components/  # All reusable Svelte components
│   │   │   ├── AboutSection.svelte
│   │   │   ├── ContactSection.svelte
│   │   │   ├── Footer.svelte
│   │   │   ├── Navbar.svelte
│   │   │   ├── ProjectCard.svelte
│   │   │   ├── ProjectsSection.svelte
│   │   │   └── SocialLinks.svelte
│   │   └── index.ts     # $lib barrel export (currently empty)
│   └── routes/
│       ├── +layout.svelte   # Root layout (Navbar + Footer)
│       └── +page.svelte     # Main page (all sections)
├── static/
│   ├── CV Leila.pdf
│   ├── Jira.png
│   ├── Portfolio.png
│   ├── Profile_Image.jpg
│   ├── codigo.png
│   └── robots.txt
├── svelte.config.js
├── tailwind.config.cjs
├── vite.config.ts
├── tsconfig.json
├── postcss.config.cjs
└── package.json

​
Routing

SvelteKit uses a file-based routing system: each file inside src/routes/ that follows the +page.svelte naming convention becomes a URL route. Mi Portfolio uses a single route:
  • src/routes/+page.svelte — The home page. It renders the Hero section inline and imports AboutSection, ProjectsSection, and ContactSection as components, each wrapped in a <section> tag with an anchor id.
  • src/routes/+layout.svelte — The root layout that wraps every page. It imports and renders <Navbar /> above the <slot /> and <Footer /> below it.
Navigation is entirely anchor-based. The four section IDs — #home, #about, #projects, #contact — are the targets for every link in the Navbar, enabling smooth-scroll navigation within the single page without any client-side routing changes. 
<!-- src/routes/+page.svelte (excerpt) -->
<div id="home"><!-- Hero content --></div>

<section id="about">
    <AboutSection />
</section>

<section id="projects">
    <ProjectsSection />
</section>

<section id="contact">
    <ContactSection />
</section>

​
The $lib Alias

SvelteKit automatically creates a $lib path alias that points to src/lib/. This means you can import any file from the lib/ directory using the $lib prefix, regardless of how deeply nested the importing file is — no ../../../ chains needed. All seven components in src/lib/components/ are imported this way: 
import Navbar          from '$lib/components/Navbar.svelte';
import Footer          from '$lib/components/Footer.svelte';
import SocialLinks     from '$lib/components/SocialLinks.svelte';
import AboutSection    from '$lib/components/AboutSection.svelte';
import ProjectCard     from '$lib/components/ProjectCard.svelte';
import ProjectsSection from '$lib/components/ProjectsSection.svelte';
import ContactSection  from '$lib/components/ContactSection.svelte';
SvelteKit’s $lib alias means you never need relative import paths for components — use $lib/components/X.svelte from anywhere in src/.

​
Static Assets

Files placed in the static/ folder are served directly from the root URL at build time. SvelteKit copies them verbatim to the output directory, so /Profile_Image.jpg in static/ is accessible at https://your-domain/Profile_Image.jpg. The following assets are used by the portfolio:
FileUsed ByPurpose
Profile_Image.jpgAboutSection.svelteProfile photo displayed in the About section
Portfolio.pngProjectsSection.svelteScreenshot for the Portfolio project card
Jira.pngProjectsSection.svelteScreenshot for the Soporte E-commerce project card
codigo.pngProjectsSection.svelteScreenshot for the Mic-Prices project card
CV Leila.pdfSocialLinks.svelteDownloadable CV, triggered by the CV icon link
robots.txtServed automaticallySearch engine crawl instructions

​
Configuration Files

  • svelte.config.js — The main SvelteKit configuration. Uses @sveltejs/adapter-vercel for zero-config Vercel deployment and svelte-preprocess with { typescript: { transpileOnly: true } } to enable TypeScript support inside .svelte files.
  • tailwind.config.cjs — Tailwind CSS configuration. Sets content paths to scan all .html, .js, .ts, and .svelte files under src/. Extends the default theme with two custom colors: primary (#5a5edc) and secondary-bg (#f0f0f5).
  • vite.config.ts — Vite bundler configuration. Registers the @sveltejs/kit/vite plugin, which integrates SvelteKit’s routing and SSR capabilities into the Vite dev server and build pipeline.
  • tsconfig.json — TypeScript compiler options. Extends SvelteKit’s recommended base config and sets up path aliases consistent with the SvelteKit runtime.
  • postcss.config.cjs — PostCSS configuration. Registers tailwindcss and autoprefixer as plugins, which Vite invokes during CSS processing to generate and vendor-prefix the final Tailwind stylesheet.

Build docs developers (and LLMs) love

Get started for freeTalk to us