NeoCaoh — Pokémon TCG Simulator
Sitio web + blog del simulador NeoCaoh, construido con Nuxt 3, Nuxt Content, Tailwind CSS y Nuxt Auth.
Setup rápido
# 1. Instalar dependencias
npm install
# 2. Copiar variables de entorno
cp .env.example .env
# → Editar .env con tus credenciales OAuth
# 3. Dev server
npm run dev
# → http://localhost:3000
Estructura del proyecto
neocaoh/
├── assets/css/ # main.css (Tailwind + variables CSS)
├── components/
│ ├── layout/ # Nav.vue, Footer.vue
│ ├── home/ # HeroScroll, TypesBar, StatsStrip, FeaturesGrid, StorySection, NewsSection, CtaSection
│ └── blog/ # PostCard.vue
├── composables/
│ ├── useReveal.ts # IntersectionObserver para animaciones de entrada
│ └── useScrollFrames.ts # Animación scroll-driven con canvas
├── content/blog/ # Posts en Markdown (.md)
├── layouts/ # default.vue
├── pages/
│ ├── index.vue # Landing page
│ ├── blog/
│ │ ├── index.vue # Listado de posts
│ │ └── [slug].vue # Post individual
│ └── login.vue # Login con OAuth
├── public/frames/ # ← PON AQUÍ tus frames del Sneasel (frame_0040.jpg … frame_0192.jpg)
└── server/api/auth/ # Handler de NextAuth
Animación del Sneasel
- Copia tu carpeta de frames a
public/frames/
- Los archivos deben llamarse
frame_0040.jpg … frame_0192.jpg
- La animación se activa automáticamente al hacer scroll
Para cambiar los frames, edita components/home/HeroScroll.vue:
startFrame: 40, // primer frame
endFrame: 192, // último frame
framePath: (n) => `/frames/frame_${n}.jpg`,
Agregar un post al blog
Crea un archivo .md en content/blog/:
---
title: "Título del post"
description: "Descripción corta para la card"
date: "2026-04-01"
tag: "Torneo" # Torneo | Update | Comunidad
emoji: "🏆" # Emoji para la thumbnail
---
Contenido en **Markdown**...
El post aparece automáticamente en /blog y en la sección de noticias del home.
Auth — Providers OAuth
Edita server/api/auth/[...].ts para activar los providers que quieras.
Proveedores disponibles en next-auth: GitHub, Discord, Google, Twitter/X y más.
Configura las credenciales en .env:
GITHUB_CLIENT_ID=...
GITHUB_CLIENT_SECRET=...
DISCORD_CLIENT_ID=...
DISCORD_CLIENT_SECRET=...
Deploy
# Build estático (sin SSR)
npm run generate
# O con SSR (Node server)
npm run build
node .output/server/index.mjs
Compatible con Vercel, Netlify y cualquier hosting Node.
