Portfolio v2

2025

Diseño y Desarrollo Full Stack

Sobre el proyecto

Portfolio personal desarrollado con las últimas tecnologías de React y Next.js. El proyecto destaca por su diseño minimalista y elegante, con un fuerte énfasis en las animaciones fluidas y la tipografía editorial. Cuenta con un componente "Glimpse" único que muestra previsualizaciones de imágenes al hacer hover sobre enlaces de proyectos.

Características principales

Componente Glimpse con previsualizaciones de imagen en hover
Animaciones avanzadas con Framer Motion y GSAP
Efecto de ruido cinematográfico en el fondo
Tipografía editorial con PP Editorial New
Diseño responsive con Tailwind CSS v4
Optimización de rendimiento con Next.js 16
Sistema de menú fullscreen con animaciones escalonadas
Navegación fluida entre páginas de proyectos

Desafíos técnicos

Optimizar animaciones para mantener 60fps
Crear un sistema de preview de imágenes sin afectar el layout
Integrar tipografías custom manteniendo el rendimiento
Implementar efecto de ruido canvas sin impacto en performance

Stack tecnológico

Next.jsReactTypeScriptTailwindFramer MotionGSAP

Paleta de Colores

Background

#141414

Fondo principal oscuro

Foreground

#FFFFFF

Texto principal

Gray Medium

#8A8A8A

Texto secundario y detalles

Sky Blue Pastel

#A7C7E7

Categoría Frontend

Mint Green Pastel

#B4E7CE

Categoría Backend

Coral Pink Pastel

#F4C2C2

Categoría Herramientas

Lavender Pastel

#E8D5F2

Proyectos destacados

Tipografía e Iconografía

PP Editorial New

Custom

Títulos principales, nombres en cursiva, énfasis editorial

200 (Ultralight)400 (Regular)800 (Ultrabold)

Ignacio Palacio

106px • 400 • italic

Full Stack

72px • 400 • italic

Poppins

Google Font

Títulos de secciones, encabezados

100-900

Desarrollador

72px • 500

Proyectos

72px • 500

Inter

Google Font

Texto del cuerpo, descripciones, UI elements

Variable

Texto de párrafo principal

18px • 400

Metadata y etiquetas

14px • 500

Phosphor Icons

Duotone • Sistema completo de iconografía en peso Duotone

https://phosphoricons.com

Más de 1,200+ iconos disponibles
Estilo duotone con opacidad 0.2 para profundidad
Viewbox consistente de 256x256
Integración inline para mejor rendimiento

Stack Tecnológico

Next.js 16

Framework React con App Router

Server Components
Optimización automática
Routing avanzado

React 19

Biblioteca UI

Hooks modernos
Concurrent rendering
Suspense mejorado

Framer Motion

Animaciones declarativas

Transiciones fluidas
Scroll triggers
Gestos táctiles

GSAP

Animaciones 3D complejas

Flip 3D text
Timeline preciso
Transformaciones avanzadas

Tailwind CSS v4

Framework de utilidades CSS

Sintaxis @theme
JIT compiler
CSS Variables nativas

TypeScript 5

Tipado estático

Type safety
Intellisense
Refactoring seguro

Detalles Técnicos

Efecto de Ruido Cinematográfico

Textura de fondo generada dinámicamente usando Canvas API

Renderizado a 24fps para optimización
Resolución reducida al 50% del viewport
Opacidad: 0.05 con mix-blend-mode: soft-light
Generación aleatoria de píxeles blanco/negro
Canvas en capa fija z-50

const createNoise = () => {
  const imageData = ctx.createImageData(canvas.width, canvas.height);
  const buffer = new Uint32Array(imageData.data.buffer);

  for (let i = 0; i < buffer.length; i++) {
    const noise = Math.random() > 0.5 ? 255 : 0;
    buffer[i] = (255 << 24) | (noise << 16) | (noise << 8) | noise;
  }

  ctx.putImageData(imageData, 0, 0);
};

Componente Glimpse

Sistema único de preview de imágenes al hover

Portal rendering para posicionamiento fixed
Dos modos: single image y fan layout
Animaciones con blur y scale
Seguimiento del cursor en tiempo real
Soporte para SVG e imágenes raster

Inspiración de Diseño

Editorial Design

Tipografía italiana de revistas fashion, uso de cursivas para contraste

Swiss Design

Grid system, espaciado preciso, minimalismo funcional

Motion Design

Micro-interacciones, transiciones fluidas, feedback visual

Brutalism

Contraste extremo, jerarquía clara, ausencia de ornamentación innecesaria