Anthuan Vásquez | Full-Stack Engineer

Personal website and professional portfolio built with bleeding-edge web technology. Focused on performance, fluid animations, and AI integration.

🚀 Tech Stack

• Framework: Nuxt 4 (Vue 3 Composition API)
• Styling: Tailwind CSS v4 + Nuxt UI v4
• Animations: GSAP & Motion-V
• AI Integration: LangChain + Groq (Server-side Chatbot)
• Content: Nuxt Content v3 with experimental SQLite support
• Maps: Mapbox GL via nuxt-mapbox
• Testing: Vitest + @nuxt/test-utils
• Runtime: Nitro Engine

✨ Key Features

• Nuxt 4 Architecture: Leveraging the new app/ directory for a cleaner separation of concerns.
• Intelligent Chatbot: Integrated with LLMs via Groq to answer queries about my professional profile.
• Fluid UI/UX: Interactive experience powered by GSAP and Motion-V.
• Dynamic Content: Blog and sections managed through Markdown files with Nuxt Content.
• Interactive Maps: Location and geographic data visualization using Mapbox.
• Type-Safe: 100% TypeScript development with strict checking.

📁 Project Structure (Nuxt 4 Layer)

├── app/                # Frontend Application Layer
│   ├── assets/         # Global styles and Vite assets
│   ├── components/     # Atomic components and sections (Auto-imported)
│   ├── composables/    # State logic and hooks
│   ├── data/           # Prompt configuration and base knowledge
│   ├── layouts/        # Page wrappers
│   ├── pages/          # File-based routing
│   ├── plugins/        # GSAP initialization and other client plugins
│   └── utils/          # Helpers and session utilities
├── content/            # Markdown files for Blog and Data
├── server/             # Nitro Engine (Backend)
│   ├── api/            # REST endpoints and Chatbot logic
│   └── middleware/     # API guards and logging
└── public/             # Static assets

🛠️ Setup

Prerequisites

• Node.js (Latest LTS recommended)
• pnpm (v10+)

Installation

pnpm install

Environment Variables

Copy .env.example to .env and configure the required keys:

• GROQ_API_KEY: For Chatbot integration.
• MAPBOX_ACCESS_TOKEN: For the interactive map.

Development

pnpm dev

🧪 Code Quality

# Linting (Prettier + ESLint)
pnpm lint

# Automatic fix
pnpm lint:fix

# Tests
pnpm test

📦 Deployment

The project is optimized for deployment on platforms like Vercel, Netlify, or via Docker.

pnpm build

---

Designed and developed by Anthuan Vásquez. 🇩🇴