Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/LuisAlexis73/alexis-porfolio/llms.txt

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

This portfolio is an open Astro project you can fork and adapt as your own. All content lives in straightforward .astro pages and Markdown files — there is no CMS or external data source to configure. The sections below cover the most common customizations: adding projects, updating personal information, adjusting the visual style, and deploying to production.

Adding a new project

Projects are stored as individual Markdown files inside src/content/projects/. Each file’s frontmatter is validated at build time against the Zod schema defined in src/content/config.ts.

Create a new file

Add a .md file to src/content/projects/. The filename becomes the URL slug (e.g., my-project.md/projects/my-project).

Frontmatter reference

The following example uses all available fields. Only title and description are required.
---
title: "My Project"
description: "A short summary shown on the project card and gallery page."
sintesis: "Optional one-liner tagline."
image: "/images/my-project-cover.png"
stack:
  - React
  - TypeScript
  - Tailwind CSS
demoUrl: "https://my-project.example.com"
codeUrl: "https://github.com/username/my-project"
videoUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
variant: "default"
featured: false
date: "2025-01-15"
---

Your full project description goes here in Markdown.

Feature a project on the home page

Set featured: true in the frontmatter to include the project in the curated grid on the home page (index.astro). Keep featured projects to a small, representative set — the home page is meant to highlight your best work.

Real-world example

Here is the actual frontmatter from src/content/projects/api-rest-nestjs.md:
---
title: "API E-commerce NestJS"
description: "API RESTful completa de e-commerce construida con NestJS, que incluye gestión de productos, autenticación JWT, sistema de roles y manejo de archivos multimedia."
image: "/images/captura-api-nestjs.png"
stack:
  - NestJS
  - TypeScript
  - PostgreSQL
  - TypeORM
  - JWT
  - Swagger
  - Docker
  - bcrypt
demoUrl: "https://nestjs-ecoomerce-api.onrender.com/api"
codeUrl: "https://github.com/LuisAlexis73/nestjs-ecoomerce-api"
variant: "default"
featured: false
date: "2024-12-11"
---
Cover images should be placed in the public/images/ directory and referenced with an absolute path starting with /images/. Astro copies everything in public/ to the root of the built site as-is.

Updating personal information

Personal content is authored directly in the page files rather than a separate data file. Edit these three files to replace Alexis’s information with your own:
FileWhat to change
src/pages/index.astroBio text, name, headline, and the featured projects query
src/pages/about.astroSkills array, education history, and any personal background copy
src/pages/experience.astroWork history entries — employer names, roles, dates, and descriptions
The sidebar links (GitHub, LinkedIn, CV) are defined in src/components/Sidebar.astro. Update the href values on the three LinkButton components near the top of the component to point to your own profiles.
The sidebar also contains the copyright line at the bottom. Search for Luis Alexis Galarza in Sidebar.astro and replace it with your name.

Styling

The portfolio uses TailwindCSS v4 integrated as a Vite plugin via @tailwindcss/vite. There is no separate tailwind.config.js — utility classes are applied directly in .astro files.

Color palette

The design is built around a dark neutral base with a yellow accent:
RoleTailwind tokenUsage
Card / sidebar backgroundneutral-800ProjectCard, Sidebar, Badge backgrounds
Subtle borders and tagsneutral-700Tag chips, link button borders, sidebar footer border
Hover / gradient backgroundneutral-700neutral-900Sidebar gradient, hover states
Accentyellow-400Active nav link, hover text on LinkButton
Badge textyellow-200Text inside the animated Badge component
To change the accent color, do a project-wide search for yellow-400 and yellow-300 and replace them with your preferred Tailwind color.

Typography

The Onest Variable font is loaded in src/layouts/MainLayout.astro:
import "@fontsource-variable/onest";
It is set as the primary font family in the layout’s <style> block with a full system-font fallback stack. To switch fonts, install a different @fontsource-variable/* package, update the import, and change "Onest Variable" in the font-family declaration.

View transitions

Native browser view transitions are enabled globally in MainLayout.astro via:
@view-transition {
  navigation: auto;
}
Astro also uses transition:name directives on project cover images in ProjectCard.astro for smooth shared-element transitions between the gallery and detail pages.

Deployment

The live portfolio is hosted on Vercel at https://alexis-galarza-porfolio.vercel.app/.

Build for production

npm run build
Astro compiles the site into the dist/ directory as fully static HTML, CSS, and JavaScript. No server runtime is required.

Hosting options

The dist/ output can be deployed to any static hosting platform:

Vercel

Connect your GitHub repository in the Vercel dashboard. Vercel auto-detects Astro and sets the build command to astro build and the output directory to dist/.

Netlify

Drag and drop the dist/ folder into Netlify Drop, or connect your repository for continuous deployment with the same build settings.

GitHub Pages

Use the official withastro/action GitHub Action to build and publish the dist/ directory to the gh-pages branch on every push.

Any static host

Upload the contents of dist/ to any CDN or static file server — Cloudflare Pages, AWS S3, Render static sites, and others all work without additional configuration.
If you deploy to a subdirectory (e.g., https://username.github.io/alexis-porfolio/), set the base option in astro.config.mjs to match the path prefix, otherwise internal links and assets will resolve incorrectly.

Build docs developers (and LLMs) love