Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Emmanuel-Mtz-777/My-Personal-Portfolio/llms.txt

Use this file to discover all available pages before exploring further.

This page documents the full build and development configuration for the portfolio, including the Astro config file, TypeScript settings, every available CLI command, and the layout of the public/ directory. All configuration is intentionally minimal — Astro 6 and Tailwind CSS v4 handle most concerns through convention and plugin-based integration rather than extensive config files.

​
astro.config.mjs

The project’s Astro configuration is defined in the root astro.config.mjs: 
// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";

import react from "@astrojs/react";

// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
  i18n: {
    defaultLocale: "es",
    locales: ["es", "en"],
  },

  integrations: [react()],
});

​
vite.plugins: [tailwindcss()]

Tailwind CSS v4 is integrated through the official @tailwindcss/vite plugin rather than the traditional PostCSS approach. The plugin is passed directly into Vite’s plugins array. This means:
  • There is no tailwind.config.js file in the project root.
  • Tailwind utility classes are available globally once @import "tailwindcss" (or equivalent @tailwind directives) is included in the project’s main CSS entry point.
  • The tw-animate-css package provides additional animation utilities that are imported the same way.

​
i18n block

i18n: {
  defaultLocale: "es",
  locales: ["es", "en"],
}
This block activates Astro’s built-in i18n routing. "es" (Spanish) is the defaultLocale, so it is served at the root path / without a prefix. "en" (English) is served at /en/. Astro populates Astro.currentLocale on every page request based on the URL prefix, enabling locale-aware rendering in any .astro component.

​
integrations: [react()]

The @astrojs/react integration enables React 19 support in the project. Once added, .jsx files can be imported and used inside .astro files as Astro island components. The client:load, client:idle, client:visible, and other hydration directives become available for any React component.

​
tsconfig.json

TypeScript is configured to extend Astro’s strict preset: 
{
  "extends": "astro/tsconfigs/strict",
  "include": [
    ".astro/types.d.ts",
    "**/*"
  ],
  "exclude": [
    "dist"
  ],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
}
Key settings:
  • extends: "astro/tsconfigs/strict" — Inherits Astro’s recommended strict TypeScript configuration, which enables strict: true, noEmit: true, and correct module resolution for .astro files.
  • .astro/types.d.ts — Astro auto-generates this file at dev/build time to provide type definitions for Astro.props, Astro.currentLocale, and other Astro-specific globals.
  • jsx: "react-jsx" and jsxImportSource: "react" — Configures the TypeScript JSX transform to use React’s automatic runtime (react/jsx-runtime), which is required for React 19 .jsx components to compile correctly without manual import React from "react" statements.
  • exclude: ["dist"] — The compiled output directory is excluded from type checking.

​
Build Commands

All commands are run from the project root using pnpm:
CommandDescription
pnpm devStarts the Astro development server at http://localhost:4321 with Hot Module Replacement (HMR)
pnpm buildCompiles the static site to ./dist/, runs sharp image optimisation, and validates i18n routes
pnpm previewServes the ./dist/ output locally on a static HTTP server to test the production build
pnpm astro checkRuns TypeScript type checking across all .astro and .ts/.tsx files using @astrojs/check

​
pnpm dev

Runs astro dev. The dev server starts on port 4321 by default. It supports HMR for .astro, .jsx, and CSS files, meaning most changes are reflected in the browser without a full page reload. The Analitics.astro component checks import.meta.env.PROD, so Google Analytics does not fire during local development.

​
pnpm build

Runs astro build. Astro:
  1. Renders all pages (both / and /en/) to static HTML files in ./dist/.
  2. Invokes sharp to optimise all images referenced by <Image /> components.
  3. Bundles and minifies JavaScript for any hydrated island components.
  4. Copies all files from public/ directly to ./dist/ without transformation.

​
pnpm preview

Runs astro preview. Serves the ./dist/ directory using a local static server to allow production-build testing before deployment. This is the closest approximation to how the site behaves on the live CDN.

​
pnpm astro check

Runs astro check. Uses the @astrojs/check package (which wraps the Astro language server) to perform full TypeScript checking across the entire project, including .astro frontmatter and inline scripts. This should be run before every deployment to catch type errors that the dev server may not surface.

​
Public Directory

Files placed in public/ are copied verbatim to the ./dist/ output root during pnpm build and are served at the corresponding URL path. No transformation or optimisation is applied. 
public/
├── docs/
│   ├── CV_ES.pdf          ← Downloadable CV in Spanish
│   └── CV_EN.pdf          ← Downloadable CV in English
├── img/
│   └── og-image.png       ← Open Graph share image (used in Layout.astro meta tags)
├── favicon.ico            ← Site favicon
├── robots.txt             ← Search engine crawl directives
└── google65a249a586afa6e0.html  ← Google Search Console ownership verification
  • public/docs/ — Holds the two CV PDFs (Spanish and English). These are linked from the Hero section, allowing visitors to download the résumé in their preferred language directly from the browser.
  • public/robots.txt — Standard robots exclusion file. Instructs search engine crawlers which paths to index or ignore.
  • public/google65a249a586afa6e0.html — Google Search Console HTML verification file. Its presence at https://leviek.dev/google65a249a586afa6e0.html confirms ownership of the domain in the Search Console dashboard.
Tailwind CSS v4 requires no tailwind.config.js file. Configuration is handled entirely through the @tailwindcss/vite Vite plugin and CSS @import directives in your stylesheet. Custom theme values (colours, spacing, fonts) are defined using CSS custom properties and the @theme block inside your CSS, rather than in a JavaScript config object.

Build docs developers (and LLMs) love

Get started for freeTalk to us