Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Hazielgmz/astro-Portfolio/llms.txt

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

​
Quick Start Guide

This guide will walk you through setting up your Astro Portfolio from scratch. You’ll have a fully functional portfolio running locally in less than 10 minutes.
Before you begin, make sure you have Node.js 18.x or higher installed on your system.

​
Installation Steps

1

Clone the Repository

First, clone the Astro Portfolio repository to your local machine:
git clone https://github.com/yourusername/astro-portafolio.git
cd astro-portafolio
Replace yourusername with the actual repository owner or fork the project to your own GitHub account.
2

Install Dependencies

Install the project dependencies using your preferred package manager:
pnpm install
The project was originally built with pnpm. If you encounter issues with other package managers, try using pnpm.
3

Set Up Environment Variables

Create a .env file in the root of your project and add your Supabase credentials:
SUPABASE_URL=your_supabase_project_url
SUPABASE_KEY=your_supabase_anon_key
You can find these values in your Supabase project settings under API → Project URL and Project API keys.
Never commit your .env file to version control. It’s already included in .gitignore.
4

Configure Supabase Database

Set up your Supabase database with the required tables. You’ll need to create the following tables:

​
Required Tables

  1. about_me - Your personal information and bio
  2. careers - Your work experience and career history
  3. projects - Your portfolio projects
  4. tools - Technologies and tools you use
  5. certificates - Your professional certifications
  6. project_tool - Many-to-many relationship between projects and tools
  7. certificate_tool - Many-to-many relationship between certificates and tools

Detailed Setup Guide

See the complete Supabase configuration guide for table schemas and sample data
The Supabase client is configured in src/db/supabase.js:
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.SUPABASE_URL;
const supabaseKey = import.meta.env.SUPABASE_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);
5

Start the Development Server

Run the development server to see your portfolio in action:
pnpm dev
The server will start at http://localhost:4321 (or another port if 4321 is in use).
🚀 astro v5.13.5 started in 85ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose
6

Verify Installation

Open your browser and navigate to http://localhost:4321. You should see:
  • ✅ Animated gradient background
  • ✅ Fixed navigation header
  • ✅ About Me section with your profile
  • ✅ Career timeline
  • ✅ Projects showcase
  • ✅ Tools and technologies section
If sections appear empty, verify that:
  1. Your Supabase credentials are correct
  2. You’ve created and populated the required database tables
  3. The visible field is set to true for your content

​
Available Scripts

The project includes several npm scripts defined in package.json: 
{
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  }
}

​
Script Descriptions

dev

Starts the development server with hot reload

build

Builds your site for production deployment

preview

Preview your production build locally

astro

Run Astro CLI commands directly

​
Project Structure

Here’s an overview of the key files and directories: 
astro-portafolio/
├── src/
│   ├── components/          # Reusable Astro components
│   │   ├── Header.astro     # Animated navigation header
│   │   ├── AboutMe.astro    # Hero section
│   │   ├── Career.astro     # Career timeline
│   │   ├── Projects.astro   # Projects showcase
│   │   ├── Tools.astro      # Tools with modal interactions
│   │   └── icons/           # SVG icon components
│   ├── layouts/
│   │   └── Layout.astro     # Main layout with global styles
│   ├── pages/
│   │   └── index.astro      # Homepage
│   ├── db/
│   │   └── supabase.js      # Supabase client configuration
│   └── styles/
│       └── global.css       # Global CSS styles
├── public/                  # Static assets
├── astro.config.mjs         # Astro configuration
└── package.json             # Project dependencies

​
Next Steps

Now that you have your portfolio running:

Configure Content

Set up your Supabase tables and add your content

Explore Features

Learn about all the features and customization options

Customize Styles

Personalize colors, fonts, and layout to match your brand

Deploy

Deploy your portfolio to Vercel or other platforms

​
Troubleshooting

​
Development Server Won’t Start

If you encounter errors when running pnpm dev:
  1. Clear your node_modules and reinstall: 
    rm -rf node_modules pnpm-lock.yaml
pnpm install
  2. Check your Node.js version: 
    node --version  # Should be 18.x or higher

​
Supabase Connection Issues

If you see database errors:
  1. Verify your environment variables are set correctly
  2. Check that your Supabase project is active
  3. Ensure your API key has the correct permissions
  4. Check the browser console for specific error messages
For more help, check the error messages in your terminal or browser console. They often provide specific guidance on what needs to be fixed.

Build docs developers (and LLMs) love

Get started for freeTalk to us