🎨 Portfolio Themes

Plataforma para descubrir y explorar temas de portafolio profesionales para desarrolladores

---

¿Qué es Portfolio Themes?

Portfolio Themes es un catálogo de temas de portafolio listos para usar, pensado para desarrolladores, diseñadores y profesionales tech. Explora, filtra por perfil y accede al código fuente de cada tema directamente desde la plataforma.

🌐 Demo en vivo: themes-portfolio.vercel.app Construido con Next.js App Router · Generación estática (SSG) · Diseño oscuro responsivo · Sin base de datos

---

✨ Características

	Característica
🔍	Filtrado por categoría en tiempo real
📄	Página de detalle con tags, acciones y temas relacionados
⚡	11 páginas estáticas prerrenderizadas en build time
🌑	Interfaz dark mode, mobile-first
🏷️	Datos tipados en TypeScript — sin base de datos
🚀	Deploy instantáneo en Vercel

---

🧰 Stack Tecnológico

Tecnología	Versión	Rol
Next.js	16.2.3	Framework — App Router + SSG + Turbopack
React	19.2.4	Capa de UI
Tailwind CSS	v4	Estilos utilitarios
TypeScript	5	Tipado estático end-to-end
ESLint	9	Linting con eslint-config-next

---

🗂️ Estructura del Proyecto

Portfolio-Themes/
│
├── app/                          # Next.js App Router
│   ├── layout.tsx                # Layout raíz (Navbar + Footer)
│   ├── page.tsx                  # Home — Hero + temas destacados + CTA
│   ├── globals.css               # Estilos globales y modo oscuro
│   └── themes/
│       ├── page.tsx              # Catálogo completo con filtros
│       └── [slug]/
│           └── page.tsx          # Detalle de tema (generado estáticamente)
│
├── components/
│   ├── Navbar.tsx                # Navegación sticky + menú mobile
│   ├── Footer.tsx                # Barra inferior con redes sociales
│   ├── ThemeCard.tsx             # Tarjeta individual de tema
│   └── ThemeGrid.tsx             # Grid filtrable por categoría
│
├── data/
│   └── themes.ts                 # Fuente única de verdad — tipos + datos
│
├── public/
│   └── previews/                 # Imágenes de previsualización (PNG)
│
├── next.config.ts
├── tsconfig.json
└── package.json

---

🎭 Temas Disponibles

Tema	Categoría	Tags	Destacado
Minimal Dev	Frontend	React · Tailwind · Minimal	⭐
Cyber Security Pro	Seguridad	Dark Mode · Animations · Cybersec	⭐
Full Stack Showcase	Full Stack	Next.js · Blog · Full Stack	⭐
Backend Architect	Backend	Node.js · APIs · Architecture
Creative Designer	Diseño	UI/UX · Animations · Gallery
DevOps Dashboard	DevOps	Docker · K8s · CI/CD

Los temas ⭐ aparecen en la sección destacada de la home.

---

🚀 Instalación y Uso Local

Requisitos

• Node.js 18 o superior
• npm 9 o superior

Pasos

# Clonar el repositorio
git clone https://github.com/Crypt0xDev/Portfolio-Themes.git
cd Portfolio-Themes

# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev

Abrir http://localhost:3000 en el navegador.

Scripts

npm run dev      # Servidor de desarrollo con Turbopack (⚡ rápido)
npm run build    # Build de producción — genera 11 páginas estáticas
npm run start    # Servidor de producción (requiere build previo)
npm run lint     # Análisis estático con ESLint

---

➕ Agregar un nuevo tema

1. Abrir data/themes.ts
2. Añadir una entrada al array themes:

{
  name: 'Mi Nuevo Tema',
  slug: 'mi-nuevo-tema',          // → URL: /themes/mi-nuevo-tema
  description: 'Descripción del tema...',
  category: 'frontend',           // frontend | backend | fullstack | security | design | devops
  previewImage: '/previews/mi-nuevo-tema.png',
  demoUrl: 'https://mi-demo.vercel.app',
  githubUrl: 'https://github.com/usuario/mi-repo',
  tags: ['React', 'Tailwind'],
  featured: false,                 // true → aparece en la sección Home
}

3. (Opcional) Colocar la imagen PNG en public/previews/
4. La ruta /themes/mi-nuevo-tema se genera automáticamente en el siguiente build gracias a generateStaticParams

---

📐 Tipos TypeScript

type Category =
  | 'frontend'
  | 'backend'
  | 'fullstack'
  | 'security'
  | 'design'
  | 'devops';

interface Theme {
  name: string;
  slug: string;
  description: string;
  category: Category;
  previewImage: string;
  demoUrl: string;
  githubUrl: string;
  tags: string[];
  featured?: boolean;
}

---

☁️ Deploy en Vercel

La forma más simple de publicar la plataforma:

1. Sube el repositorio a GitHub
2. Ve a vercel.com/new e importa el repo
3. Vercel detecta Next.js automáticamente — cero configuración
4. El build generará las 11 páginas estáticas listas para producción

---

📚 Documentación

Doc	Descripción
Primeros pasos	Instalación, scripts y verificación del build
Agregar un tema	Cómo añadir nuevos temas al catálogo
Despliegue	Vercel, self-hosted y export estático
Contribuir	Flujo de trabajo, convenciones y PR guide

---

👤 Autor

Crypt0xDev

---

Hecho con ☕ y Next.js  ·  MIT License  ·  2026