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 uses several configuration files to control styling, build behavior, TypeScript checking, and third-party integrations. This page covers each config file and the options you’re most likely to customize.

​
Tailwind CSS (tailwind.config.cjs)

Tailwind is configured via tailwind.config.cjs at the project root: 
module.exports = {
  content: [
    './src/**/*.{html,js,ts,svelte}',
    './src/routes/**/*.{html,js,ts,svelte}',
    './src/lib/**/*.{html,js,ts,svelte}',
  ],
  theme: {
    extend: {
      colors: {
        'primary': '#5a5edc',
        'secondary-bg': '#f0f0f5',
      },
    },
  },
  plugins: [],
};
The content array tells Tailwind which files to scan for class names during the build. All three glob patterns are intentionally overlapping to guarantee that every .svelte, .ts, .js, and .html file under src/ is covered — this prevents Tailwind from purging classes that only appear in route or library components. The primary color (#5a5edc) is registered as a custom design token and is available as text-primary, bg-primary, border-primary, and so on. In practice, the portfolio primarily uses Tailwind’s built-in cyan-400 / cyan-500 palette for interactive accents (form focus rings, button gradients, links), while primary is used for focus-visible outlines in app.css.

​
SvelteKit (svelte.config.js)

import adapter from '@sveltejs/adapter-vercel';
import preprocess from 'svelte-preprocess';

export default {
  preprocess: preprocess({
    typescript: { transpileOnly: true }
  }),
  kit: {
    adapter: adapter()
  }
};
The config does two things:
  • Adapter — @sveltejs/adapter-vercel targets Vercel’s serverless and edge infrastructure. When you run npm run build, the adapter writes the output to .vercel/output/ in the format Vercel expects. No extra Vercel configuration is required.
  • Preprocessor — svelte-preprocess with transpileOnly: true enables TypeScript inside .svelte files. Setting transpileOnly skips full type-checking during the build step, which keeps build times fast. Type safety is enforced separately via npm run check (which calls svelte-check --tsconfig ./tsconfig.json).

​
Vite (vite.config.ts)

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()]
});
The Vite config is intentionally minimal — the sveltekit() plugin handles everything SvelteKit needs from Vite (routing, SSR, HMR). No custom aliases, proxy rules, or build overrides are needed for this project.

​
Global Styles (src/app.css)

src/app.css is the single global stylesheet imported by the SvelteKit layout. It handles several concerns: Google Fonts — Poppins (weights 300, 400, 600, 700) is loaded from Google Fonts via @import at the top of the file and applied to body as the default font family. Tailwind directives — The three standard directives appear in order immediately after the font import: 
@tailwind base;
@tailwind components;
@tailwind utilities;
These must not be reordered or removed. They inject Tailwind’s reset, component layer, and utility classes into the final CSS bundle. Animated grid background — The dark grid background that covers the entire page is driven by a CSS keyframe animation defined in app.css: 
@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 grid is drawn with two repeating CSS gradients (one horizontal, one vertical) layered on top of a near-black background (#111827). The grid-pan animation slowly shifts the background-position, creating the effect of an infinite scrolling grid.
To change the grid cell size, modify background-size: 40px 40px in app.css. To slow or speed the animation, adjust the 120s value in animation: grid-pan 120s linear infinite.
.container utility — Because @apply directives were intentionally avoided in this project, .container is defined with explicit CSS properties: margin: auto, max-width: 1280px (equivalent to Tailwind’s max-w-7xl), and responsive horizontal padding via media queries at 640px and 1024px breakpoints. :focus-visible accessibility styles — Keyboard-navigable elements receive a 2px solid #5a5edc outline (the primary color) with a 3px offset and rounded corners, meeting WCAG 2.1 focus indicator requirements without affecting mouse users. :target scroll margin — Anchor links that navigate to in-page sections (e.g. #about, #contact) include scroll-margin-top: 5rem to offset the sticky navbar so the target heading is not hidden beneath it. scroll-behavior: smooth — Applied to the html element for native smooth scrolling when navigating between sections.

​
TypeScript (tsconfig.json)

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "types": ["svelte"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "public"]
}
The config extends @tsconfig/svelte (from the @tsconfig/svelte package), which provides sensible defaults for Svelte projects — including lib: ["es2017", "dom"] and target: "es2017". Strict mode is enabled for the strongest type safety guarantees. This tsconfig.json is used exclusively by svelte-check. To run a full type-validation pass over the entire project: 
npm run check
This command syncs the SvelteKit type stubs and then runs svelte-check --tsconfig ./tsconfig.json, reporting any type errors in .svelte, .ts, and .js files.

​
EmailJS Credentials

The contact form in ContactSection.svelte sends emails via the @emailjs/browser SDK. Three constants control which EmailJS account and template are used: 
const serviceID  = 'service_iqfu8xj';
const templateID = 'template_gcnd671';
const publicKey  = 'd0tRwp_1AOxLyJWbS';
These values are currently hardcoded in ContactSection.svelte. If you fork the project and want to use your own EmailJS account, the recommended approach is to move them to Vite environment variables. Step 1 — Create a .env.local file in the project root: 
VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_PUBLIC_KEY=your_public_key
Step 2 — Read the variables in ContactSection.svelte: 
// In ContactSection.svelte
const serviceID  = import.meta.env.VITE_EMAILJS_SERVICE_ID;
const templateID = import.meta.env.VITE_EMAILJS_TEMPLATE_ID;
const publicKey  = import.meta.env.VITE_EMAILJS_PUBLIC_KEY;
Vite exposes only variables prefixed with VITE_ to client-side code. Variables without the prefix remain server-side only and will be undefined in the browser.
Never commit real EmailJS credentials to a public repository. Use .env.local (which is gitignored by SvelteKit by default) to store secrets locally.

Build docs developers (and LLMs) love

Get started for freeTalk to us