Docs
Instalacion

Instalacion

Como instalar tu aplication.

Guía Completa de Instalación y Configuración

Requisitos del Sistema

  • Node.js 18.0.0 o superior
  • npm o pnpm
  • 4GB RAM mínimo
  • VS Code (recomendado)
  • Terminal

1. Preparación del Entorno

Windows

  1. Instala Node.js:
winget install OpenJS.NodeJS.LTS
# o descarga desde nodejs.org
  1. Verifica la instalación:
node --version  # debe mostrar v18.x o superior
npm --version   # debe mostrar 8.x o superior

macOS

# Con Homebrew
brew install node
 
# Verifica
node --version
npm --version

Linux (Ubuntu/Debian)

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
 
# Verifica
node --version
npm --version

2. Instalación del Proyecto

  1. Prepara el directorio:
cd portfolio
  1. Instala dependencias:
# Con npm
npm install
 
# Con pnpm
pnpm install
  1. Crea archivo de variables de entorno:
# Crea .env.local
touch .env.local
 
# Agrega las variables necesarias
NEXT_PUBLIC_SITE_URL=http://localhost:3000

3. Desarrollo Local

  1. Inicia el servidor:
npm run dev
# o
pnpm dev
  1. Abre http://localhost:3000

4. Configuración de VSCode (Recomendado)

  1. Extensiones recomendadas:
- ESLint
- Prettier
- Tailwind CSS IntelliSense
- PostCSS Language Support
  1. Configuración de workspace:
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

5. Personalización Inicial

  1. Estructura de archivos principales:
portfolio/
├── src/
│   ├── data/         # CONFIGURACIÓN PRINCIPAL
│   │   └── resume.tsx  # ¡EMPIEZA AQUÍ!
│   │
│   ├── app/          # PÁGINAS
│   │   ├── page.tsx    # Página principal
│   │   └── layout.tsx  # Layout principal
│   │
│   └── components/   # COMPONENTES
│       ├── ui/         # Componentes base
│       └── cards/      # Tarjetas y layouts
│
├── public/          # ARCHIVOS ESTÁTICOS
│   └── images/       # Tus imágenes
│
└── content/         # BLOG POSTS
    └── *.mdx         # Archivos de blog
  1. Inicia la personalización:
// src/data/resume.tsx
export const DATA = {
  name: "Tu Nombre",
  title: "Tu Profesión",
  // ... resto de la configuración
}

6. Scripts Disponibles

# Desarrollo
npm run dev       # Inicia servidor de desarrollo
 
# Producción
npm run build    # Construye para producción
npm start        # Inicia en modo producción
 
# Utilidades
npm run lint     # Verifica código
npm run type-check # Verifica tipos

7. Solución de Problemas Comunes

Error: Module not found

# Limpia cache e instalación
rm -rf node_modules .next
npm install

Error: Port 3000 already in use

# Encuentra y mata el proceso
lsof -i :3000
kill -9 <PID>

Error: TypeScript

# Limpia cache de TS
rm -rf .next
rm -rf tsconfig.tsbuildinfo
npm run dev

Problemas con dependencias

# Actualiza todo
npm update
 
# O instala versión específica
npm install @package@version

8. Verificación de Instalación

Comprueba que todo funcione:

  1. El servidor inicia sin errores
  2. La página carga en http://localhost:3000
  3. No hay errores en la consola del navegador
  4. Los estilos de Tailwind funcionan
  5. Las animaciones de Framer Motion funcionan
  6. El modo oscuro funciona
  7. La navegación funciona

9. Próximos Pasos

  1. Personaliza resume.tsx con tu información
  2. Agrega un post de blog en content/
  3. Personaliza colores en globals.css
  4. Modifica componentes según necesites
  5. Prueba en diferentes dispositivos
  6. Optimiza SEO
  7. Prepara para producción

10. Recursos Adicionales

InstalacionAI Search