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.

The portfolio follows a standard Astro project layout, with a clear separation between reusable components, content collections, and page routes. Astro’s file-based routing maps every file in src/pages/ directly to a URL, while the src/content/ directory uses typed content collections to manage project data.

​
Directory tree

alexis-porfolio/
├── src/
│   ├── assets/        # Icons and static assets (SVG icon components)
│   ├── components/    # Reusable Astro components
│   ├── content/       # Astro content collections
│   │   ├── config.ts  # Collection schemas (Zod)
│   │   └── projects/  # Project markdown files
│   ├── layouts/       # Page layout components
│   └── pages/         # Route pages (file-based routing)
├── public/            # Static files served as-is (images, favicon)
├── astro.config.mjs   # Astro configuration (integrations, Vite plugins)
├── package.json
└── tsconfig.json

​
Pages

Each file inside src/pages/ becomes a route. The portfolio currently has four top-level routes:
RouteFileDescription
/index.astroHome page — displays a bio and a curated grid of featured projects
/aboutabout.astroSkills list, education background, and personal information
/experienceexperience.astroChronological work history and professional experience
/projectsprojects.astroFull gallery of all projects from the content collection
Individual project detail pages live under /projects/[slug] and are generated dynamically from the markdown files in src/content/projects/.

​
Components

The src/components/ directory contains focused, single-responsibility Astro components. Each is designed to be dropped into any page with minimal configuration.

​
ProjectCard.astro

Renders a single project entry as a card. It accepts a project prop typed as CollectionEntry<"projects"> and reads title, description, image, stack, demoUrl, codeUrl, and videoUrl from the entry’s frontmatter. Key behaviors:
  • Displays a cover image with a hover overlay (“Ver más”) that links to the project detail page.
  • Shows up to four stack tags inline; extra tags collapse behind a <details> disclosure without any JavaScript.
  • The footer renders a LinkButton to either the live demo (demoUrl) or a YouTube video (videoUrl), plus an optional source code link (codeUrl).
  • Wraps VideoModal so YouTube links open in an inline dialog instead of navigating away.

​
Badge.astro

A decorative animated badge intended for section labels or status indicators. It renders a pill-shaped element with a spinning conic-gradient border (gold tones) and a neutral-800 background. Any content passed via <slot /> appears in yellow-200 text inside the pill. No props — purely slot-driven.

​
LinkButton.astro

A smart anchor/button component that accepts href, className, and title props and automatically adapts its rendered element:
  • YouTube URLs — renders a <button> with a data-video attribute instead of an <a>, so VideoModal can intercept the click and open the video in the inline dialog.
  • External URLs — renders an <a> with target="_blank" and rel="noopener noreferrer".
  • Internal URLs — renders a plain <a> with no extra attributes.
All variants share the same Tailwind styling: a bordered rounded button with a hover scale transition and a yellow-300 text tint on hover.

​
Sidebar.astro

The main navigation component, rendered once inside MainLayout.astro. It contains:
  • A logo image linked to /.
  • Icon links to GitHub (https://github.com/LuisAlexis73), LinkedIn, and a CV PDF on Google Drive.
  • A <nav> with four links: Inicio (/), Proyectos (/projects), Experiencia (/experience), and Sobre mí (/about). The active link is highlighted in yellow-400.
  • On mobile, the sidebar is hidden off-screen (-translate-x-full) and toggled by a hamburger button. A semi-transparent overlay closes it when tapped. On lg breakpoints and above, the sidebar is fixed and always visible.

​
VideoModal.astro

A <dialog>-based full-screen video player for YouTube embeds. It renders a single <dialog id="video-dialog"> containing a responsive 16:9 <iframe>. The accompanying <script> module:
  1. Listens for clicks on any element with a data-video attribute (set by LinkButton for YouTube hrefs).
  2. Extracts the YouTube video ID from the URL (supports youtu.be, watch?v=, shorts/, and embed/ formats).
  3. Sets the iframe src to https://www.youtube.com/embed/{id}?autoplay=1&rel=0 and opens the dialog via the native showModal() API.
  4. Clears the iframe src on close to stop playback.
  5. Uses a MutationObserver to bind new triggers added dynamically to the DOM.

​
Content collections

The project collection is defined in src/content/config.ts using Astro’s defineCollection and Zod schemas. Every markdown file in src/content/projects/ is validated against this schema at build time. 
// src/content/config.ts
const projectCollection = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    description: z.string(),
    sintesis: z.string().optional(),
    image: z.string().optional(),
    stack: z.array(z.string()).optional(),
    demoUrl: z.string().url().optional(),
    codeUrl: z.string().url().optional(),
    videoUrl: z.string().url().optional(),
    variant: z.enum(["default", "wide"]).default("default").optional(),
    featured: z.boolean().default(false).optional(),
    date: z.string().optional(),
  }),
});

​
Schema reference

FieldTypeRequiredDescription
titlestringYesDisplay name of the project
descriptionstringYesShort summary shown on cards and the projects gallery
sintesisstringNoAdditional brief synthesis or tagline for the project
imagestringNoPath to the cover image (relative to public/)
stackstring[]NoList of technologies used, displayed as tags on the card
demoUrlstring (URL)NoLink to the live demo; shown as a demo button on the card
codeUrlstring (URL)NoLink to the source code repository
videoUrlstring (URL)NoYouTube URL; renders a video button that opens VideoModal
variant"default" | "wide"NoCard layout variant; defaults to "default"
featuredbooleanNoWhen true, the project appears on the home page grid
datestringNoProject date or completion date (free-form string)

Build docs developers (and LLMs) love

Get started for freeTalk to us