Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed:

Node.js

Version 18.0 or higher recommended

npm

Comes bundled with Node.js
You can verify your installations by running:
node --version
npm --version

​
Installation

1

Clone the Repository

Get the source code from your repository:
git clone <your-repository-url>
cd cv-staff-web
2

Install Dependencies

Install all required packages using npm:
npm install
This will install:
  • astro (^5.7.13) - The core framework
  • gsap (^3.14.2) - Animation library
  • swiper (^11.2.6) - Slider component
  • @fontsource-variable/onest (^5.2.8) - Typography
3

Configure Environment Variables

Create your environment file from the example:
cp .env.example .env
Edit .env and add your Groq API key:
# Get your API key from: https://console.groq.com/keys
PUBLIC_GROQ_API_KEY=your_api_key_here
The AI chatbot will not work without a valid Groq API key. Sign up for free at console.groq.com.
4

Start Development Server

Launch the local development server:
npm run dev
The site will be available at:
http://localhost:4321
The development server includes hot module replacement (HMR) - changes you make will be reflected instantly in the browser.

​
Available Commands

All commands are run from the root of the project: 
npm run dev
# Starts local dev server at localhost:4321

​
Project Structure

Understand the key files and directories: 
/
├── public/              # Static assets (images, videos, etc.)
│   ├── profile_01.jpeg
│   └── assets/
│       ├── images/
│       └── videos/
├── src/
│   ├── components/      # Reusable Astro components
│   │   ├── Badget.astro
│   │   ├── WelcomeCard.astro
│   │   ├── MarqueeV1.astro
│   │   └── SectionCard.astro
│   ├── data/           # JSON data files
│   │   ├── nico-profile.json
│   │   └── herosliders.json
│   ├── layouts/        # Page layouts
│   │   └── Layout.astro
│   ├── pages/          # Routes (file-based routing)
│   │   └── index.astro
│   ├── scripts/        # Client-side JavaScript
│   │   ├── animations.js      # GSAP animations
│   │   ├── glass-cursor.js    # Custom cursor effect
│   │   └── color-transition.js
│   ├── sections/       # Page sections
│   │   ├── hero.astro
│   │   ├── chatbot.astro
│   │   ├── skills.astro
│   │   ├── works.astro
│   │   └── contact.astro
│   └── styles/         # Global styles
│       ├── reset.css
│       └── styles.css
├── .env                # Environment variables (create this)
├── .env.example        # Environment template
├── astro.config.mjs    # Astro configuration
├── package.json        # Dependencies and scripts
└── tsconfig.json       # TypeScript configuration
The src/pages/ directory uses file-based routing. Each .astro file becomes a route automatically.

​
Basic Customization

Get started with these quick customizations:

​
Update Profile Information

Edit src/data/nico-profile.json with your own information: 
{
  "name": "Your Name",
  "role": "Your Role",
  "description": "Your professional summary",
  "skills": [...],
  "experience": [...]
}

​
Change Color Scheme

Update CSS custom properties in src/layouts/Layout.astro: 
:root {
  --color-primary: #ad0000;        /* Main brand color */
  --color-primary-light: #ff9595;  /* Light variant */
  --color-primary-dark: #103056;   /* Dark variant */
  --color-background: #f2f2f2;     /* Page background */
}

​
Add Your Photos

Replace images in the public/ directory: 
public/
├── profile_01.jpeg     # Main profile photo
└── assets/
    ├── images/
    │   ├── photo_talk.png
    │   ├── photo_setup.jpeg
    │   └── photo_doodle.jpeg
    └── videos/
        └── photo_video.mp4
Then update the photo array in src/sections/hero.astro: 
const photos = [
  { type: "image", src: "/profile_01.jpeg", alt: "Your Name - Portrait" },
  { type: "video", src: "/assets/videos/your_video.mp4", alt: "Your video" },
  // Add more photos...
];

​
Modify Section Content

Each section is a separate component in src/sections/:
  • hero.astro - Landing section with photo slider
  • history.astro - Professional background
  • skills.astro - Skills and technologies
  • works.astro - Work experience/portfolio
  • chatbot.astro - AI assistant
  • contact.astro - Contact information
Edit these files directly to change content.

​
Testing the AI Chatbot

Once your Groq API key is configured:
1

Navigate to AI Chat Section

Scroll to the “Pregunta lo que necesites” section or click the AI Chat link in the navigation
2

Try Quick Questions

Click one of the pre-configured question buttons:
  • Fortalezas (Strengths)
  • CRM (CRM Experience)
  • Contratar (Why Hire)
  • Herramientas (Tools)
3

Ask Custom Questions

Type your own question in the input field and click “Consultar”
The chatbot has a 2-second cooldown between requests to prevent rate limiting. Responses are typically very fast thanks to Groq’s optimized inference.

​
Verifying Everything Works

Check that all features are functioning:

Animations

Hero text should animate in on page load

Photo Slider

Swipe or click to navigate through photos

Glass Cursor

Custom cursor appears on desktop (1024px+)

AI Chatbot

Ask a question and receive a response

Scroll Effects

Sections reveal as you scroll down

Responsive Design

Resize browser to test mobile layouts

​
Troubleshooting

​
Port Already in Use

If port 4321 is already in use: 
# Astro will automatically try port 4322, 4323, etc.
# Or specify a custom port:
npm run dev -- --port 3000

​
AI Chatbot Not Responding

1

Verify API Key

Check that PUBLIC_GROQ_API_KEY is set correctly in .env
2

Check Browser Console

Open DevTools (F12) and look for error messages
3

Test API Key

Verify your API key at console.groq.com

​
Animations Not Working

Check if “Reduce Motion” is enabled in your OS settings:
  • macOS: System Preferences → Accessibility → Display → Reduce motion
  • Windows: Settings → Ease of Access → Display → Show animations
The site respects prefers-reduced-motion and disables animations when this preference is set.

​
Build Errors

Clear the cache and rebuild: 
rm -rf node_modules .astro dist
npm install
npm run build

​
Next Steps

Architecture Overview

Learn about the component structure and design patterns

AI Chatbot Deep Dive

Understand how the AI assistant works

Animation System

Master GSAP animations and effects

Deployment

Deploy your site to production
Ready to customize? Start by updating your profile information and photos, then explore the component structure to make deeper changes.

Build docs developers (and LLMs) love

Get started for freeTalk to us