Quickstart

Get your Astro Portfolio up and running in minutes with this step-by-step guide

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

   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

   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.