Página Web · Sitio Corporativo

El sitio que estás viendo: portafolio corporativo con case studies navegables, formulario de contacto propio y despliegue en infraestructura autogestionada.

Ver tecnologías
Solicitar un sitio similar
  • Next.js 15
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Framer Motion
  • Docker
e-core / panel
E-CORE en escritorio, tablet y celular
El problema

Una empresa de software sin sitio propio que lo demuestre

Enseñar el trabajo por capturas sueltas en WhatsApp no transmite el alcance de un sistema. Hacía falta un lugar donde cada proyecto se explicara por sí solo —el problema que resolvía, cómo está construido por dentro, qué hace cada módulo— sin depender de una reunión. Y siendo el sitio de una empresa de desarrollo, tenía que ser el primer argumento de venta: si carga lento o se siente genérico, contradice lo que se ofrece.

Carrusel de soluciones del sitio
La solución

El sitio se construyó con Next.js en App Router: las páginas de cada proyecto se generan de forma estática en el build a partir de un archivo de datos, así que publicar un case study nuevo es añadir una entrada, no maquetar otra página. El formulario de contacto se resuelve en una ruta de servidor del propio Next, sin depender de servicios externos. Todo corre en un contenedor Docker detrás de un proxy inverso con certificado renovado automáticamente, sobre infraestructura propia.

Datos de los case studies (TypeScript)
Next.js 15 · App Router
Páginas estáticas generadas en el build
Ruta de API para el formulario
Contenedor Docker (servidor Node)
Traefik · TLS automático
Visitantes / correo de contacto
Recorrido por la plataforma

Los pilares, explicados

01

Escalar sin maquetar de nuevo

Case studies como sistema de datos

Qué problema resuelve
Cada proyecto nuevo significaba diseñar y maquetar otra página desde cero, así que en la práctica el portafolio nunca se actualizaba.
Qué hace
Un solo conjunto de componentes se alimenta de un archivo de datos tipado. Añadir un proyecto es escribir su entrada —problema, arquitectura, módulos, stack, resultados— y sus capturas; la ruta, el metadato y la página se generan solos.
Beneficio
Publicar un case study pasa de ser un proyecto de diseño a un rato de escritura.
02

Estático donde se puede

Velocidad como requisito

Qué problema resuelve
Un sitio lento en la página de una empresa de software desmiente por sí solo lo que la empresa dice saber hacer.
Qué hace
Las páginas se prerrenderizan en el build y se sirven ya armadas; las imágenes se convierten a AVIF y se entregan en el tamaño que pide cada pantalla, con carga diferida salvo la primera.
Beneficio
Respuestas del servidor en milisegundos y capturas de 400 KB servidas como archivos de 20 KB.
03

Que acompañe, no que estorbe

Animación con criterio

Qué problema resuelve
La animación decorativa suele pagarse con fluidez, sobre todo en teléfonos de gama baja.
Qué hace
Aparición al hacer scroll, inclinación 3D siguiendo el puntero y titulares que entran letra a letra, animando solo propiedades que resuelve la tarjeta gráfica. Los efectos se detienen cuando su sección sale de pantalla y se aligeran en móvil.
Beneficio
El sitio se siente vivo sin que el desplazamiento se vuelva pesado.
04

No como añadido

Accesibilidad de base

Qué problema resuelve
Los sitios muy animados suelen ser incómodos —o inutilizables— para quien navega con teclado o tiene activada la reducción de movimiento.
Qué hace
Se respeta la preferencia de movimiento reducido del sistema degradando a fundidos simples; el diálogo de contacto atrapa el foco y se cierra con Escape; los textos animados se anuncian completos a los lectores de pantalla.
Beneficio
La misma experiencia funciona con mouse, con dedo y con teclado.
05

Del formulario al correo

Contacto sin intermediarios

Qué problema resuelve
Los formularios de terceros añaden dependencias, límites de uso y sus propios rastreadores.
Qué hace
Una ruta de servidor del propio Next valida los datos, escapa el contenido y envía la solicitud por SMTP. Distingue entre persona natural y empresa, pidiendo los campos que corresponden a cada caso, y filtra bots con un campo trampa.
Beneficio
Las solicitudes llegan directas al correo, sin servicios externos de por medio.
06

Contenedores y TLS automático

Infraestructura propia

Qué problema resuelve
Depender de una plataforma de hosting implica costos recurrentes y poco control sobre el entorno.
Qué hace
El sitio se compila en una imagen Docker y corre tras un proxy inverso que emite y renueva el certificado solo. El mismo servidor aloja varios proyectos aislados entre sí, cada uno con su dominio.
Beneficio
Control completo del despliegue y capacidad de alojar proyectos nuevos sin costo adicional.
Stack tecnológico

Cada decisión técnica responde a un requisito real del proyecto, no a una moda.

Next.js 15
React 19
TypeScript
Tailwind CSS 4
Framer Motion
Node.js
Docker
Traefik · TLS
Beneficios

Cada capacidad técnica se traduce en un problema operativo menos.

Portafolio que se explica solo

Cada proyecto cuenta su problema, su arquitectura y sus módulos sin necesidad de una reunión.

Publicar es escribir

Un proyecto nuevo es una entrada de datos, no una página maquetada desde cero.

Carga inmediata

Páginas prerrenderizadas e imágenes en AVIF servidas a la medida de cada pantalla.

Responsive real

Los efectos tienen equivalente táctil: lo que responde al cursor responde al dedo.

Accesible

Respeta la reducción de movimiento, se navega con teclado y funciona con lector de pantalla.

Contacto directo

Formulario propio que envía por SMTP, sin servicios de terceros.

Autoalojado

Docker y proxy inverso con certificado automático sobre servidor propio.

Optimizado para buscadores

Metadatos por proyecto, HTML semántico y contenido servido ya renderizado.

Resultados

6

Case studies publicados

Milisegundos

Respuesta del servidor

AVIF a medida

Imágenes

SMTP propio

Formulario

Docker + TLS automático

Despliegue

100% Responsive

Diseño

E-CORE

Desarrollo sitios corporativos y portafolios rápidos, accesibles y fáciles de mantener, con el contenido estructurado para que crezca sin rehacer el diseño cada vez.

Solicitar proyecto web
Ver soluciones empresariales