José Daniel Chinea Marrero — Portfolio

Portfolio personal estilo slides full-screen, con secciones inmersivas, animaciones cuidadas y un panel de administración privado para gestionar los proyectos.

Stack: Next.js 14 (App Router) · TypeScript · Tailwind CSS · Framer Motion · Firebase (Auth + Firestore) · arquitectura en capas estilo MVVM.

---

Tabla de contenidos

• Demo en local
• Arquitectura
• Tecnologías
• Variables de entorno
• Configuración de Firebase
• Estructura del proyecto
• Panel de administración
• Accesibilidad y rendimiento

---

Demo en local

# 1. Instala dependencias
npm install

# 2. (opcional) Copia el archivo de entorno y rellénalo si quieres usar Firebase
cp .env.local.example .env.local

# 3. Levanta el entorno de desarrollo
npm run dev

Abre http://localhost:3000 para la web y http://localhost:3000/admin para el panel de administración.

Modo local sin Firebase: si no defines las variables, la aplicación arranca usando localStorage para los proyectos y un login en memoria. Las credenciales por defecto son admin@local / admin1234 (configurables vía env).

---

Arquitectura

Se sigue una variante de MVVM adaptada a React, con clara separación entre dominio, datos, estado y vista:

src/
├── models/          # Modelos de dominio (Project, ProjectInput, ...)
├── services/        # Adaptadores de datos (Firebase / Local), patrón Repository
│   ├── auth/        # AuthRepository + implementaciones (Firebase, Local)
│   ├── projects/    # ProjectsRepository + implementaciones
│   └── firebase/    # Inicialización de Firebase
├── viewmodels/      # Hooks que exponen estado + acciones (CRUD, refresh, etc.)
├── contexts/        # AuthContext (Provider + hook)
├── components/      # UI (presentational + container)
│   ├── sections/    # Cada slide
│   ├── projects/    # Card y modal
│   └── admin/       # Shell y formularios
├── app/             # Rutas de Next.js (App Router)
│   └── admin/       # Login y CRUD
├── lib/             # Utilidades (cn, etc.)
└── styles/          # Estilos globales

Por qué este enfoque

• Repository pattern desacopla la persistencia: Firebase o localStorage son intercambiables sin tocar UI ni viewmodels. Útil para desarrollo, demos y e2e.
• ViewModels en hooks mantiene la lógica de estado fuera de la vista y la hace fácilmente testeable.
• Context para auth permite proteger rutas administrativas sin acoplar la web pública al SDK de Firebase.
• App Router habilita layouts anidados (/admin/layout.tsx envuelve sólo el área protegida).

---

Tecnologías

Capa	Elección	Por qué
Framework	Next.js 14	App Router, server components donde aplica, optimización de imágenes, fuentes y SEO.
Lenguaje	TypeScript	Modelos fuertemente tipados; menos errores en CRUD y formularios.
Estilos	Tailwind CSS	Sistema de diseño consistente, colores tokenizados (bg, ink, accent, …).
Animaciones	Framer Motion	Transiciones de slide con AnimatePresence, layoutId para el indicador de navegación, whileInView.
Backend	Firebase Auth + Firestore	Auth lista para producción y Firestore como almacén low-ops. Repository alterno con localStorage para dev.
Iconografía	react-icons	Footer y modal.

---

Variables de entorno

.env.local.example contiene la plantilla. Las claves relevantes:

Variable	Uso
NEXT_PUBLIC_FIREBASE_*	Configuración del SDK web de Firebase. Si están vacías, se activa el modo local.
NEXT_PUBLIC_SITE_URL	Usada en metadata SEO/OG (metadataBase).
NEXT_PUBLIC_DEV_ADMIN_EMAIL / _PASSWORD	Credenciales del admin local (sólo cuando no hay Firebase).

---

Configuración de Firebase

1. Crea un proyecto en Firebase Console.

2. Habilita Authentication → Email / Password y crea un usuario administrador.

3. Habilita Firestore Database en modo production y añade estas reglas:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /projects/{projectId} {
         allow read: if true;
         allow write: if request.auth != null
                      && request.auth.token.email == "TU_EMAIL_ADMIN";
       }
       match /settings/{docId} {
         allow read: if true;
         allow write: if request.auth != null
                      && request.auth.token.email == "TU_EMAIL_ADMIN";
       }
     }
   }
   

4. Habilita Storage y añade estas reglas (lectura pública, escritura sólo admin):

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
       match /{allPaths=**} {
         allow read: if true;
         allow write: if request.auth != null
                      && request.auth.token.email == "TU_EMAIL_ADMIN"
                      && request.resource.size < 5 * 1024 * 1024
                      && request.resource.contentType.matches('image/.*');
       }
     }
   }
   

5. En Project settings → SDK setup, copia las claves al archivo .env.local.

Estructura esperada en Firestore:

• Colección projects/ → documentos con los campos del modelo src/models/Project.ts.
• Documento único settings/profile → { avatarUrl, avatarPath, updatedAt }.

Estructura en Storage:

• profile/avatar-{timestamp} — imágenes de avatar.
• projects/{projectId}/{timestamp}-{filename} — imágenes de proyectos (uso futuro).

---

Estructura del proyecto

Las páginas son client components ligeros que delegan en componentes:

• / – Slide deck. Cuatro secciones a pantalla completa con scroll, teclado y touch habilitados.
• /admin/login – Login.
• /admin – Tabla de proyectos con acciones de editar/eliminar.
• /admin/new – Formulario de creación.
• /admin/edit/[id] – Formulario de edición.
• /admin/profile – Subir / restaurar imagen de avatar (Firebase Storage).

El componente SlideDeck gestiona la navegación entre slides con throttling, soporte de teclado (↑/↓/PageUp/PageDown/Home/End/Space), gestos touch (swipe vertical) y wheel.

---

Panel de administración

CRUD completo:

• Crear proyecto con título, categoría, fecha, descripción corta y completa, imágenes (URLs), tags, GitHub y URL en producción.
• Editar y Eliminar desde la tabla.
• Listar ordenado por fecha (descendente).

El portfolio público consume los proyectos vía el mismo viewmodel (useProjectsViewModel). Cualquier cambio en el admin se refleja al recargar la home.

---

Accesibilidad y rendimiento

• Roles ARIA en navegación (tablist, tab, region, dialog).
• Cierre de modal con tecla Escape.
• prefers-reduced-motion desactiva animaciones cuando el usuario lo solicita.
• next/font para Inter, Space Grotesk y JetBrains Mono con display: swap.
• next/image con priority en el avatar y sizes correctos.
• Code-splitting natural del App Router; la sección de proyectos se carga client-only para evitar SSR de localStorage.
• Metadata, OpenGraph y Twitter cards en layout.tsx.

---

Comandos

Comando	Descripción
npm run dev	Servidor de desarrollo.
npm run build	Build de producción.
npm start	Servir el build.
npm run lint	Lint con la config de Next.

---

© 2026 — José Daniel Chinea Marrero.