Este es el sitio en el que estás ahora mismo. Es un proyecto de Next.js 14 construido y mantenido como un pequeño producto y no como una plantilla; el código es público, así que todos los detalles de abajo son verificables. Obtiene 99/100 en escritorio y 97/100 en móvil en Lighthouse, con 100 en Accesibilidad y SEO.
Qué tiene
-
12 idiomas: El sitio está disponible en inglés, alemán, español, francés, hindi, italiano, japonés, coreano, portugués, ruso, turco y chino. Un contexto de idioma tipado y un mapa de traducciones alimentan el selector, que recuerda tu elección y actualiza el atributo
langde la página para que los lectores de pantalla y los buscadores lean el idioma correcto. Cada cadena está cubierta, incluido el formulario de contacto. -
Un fondo de partículas que se mantiene rápido: Los puntos que siguen al cursor se dibujan en un canvas. Una versión temprana daba tirones porque medía la posición del canvas en cada movimiento del ratón, forzando un recálculo constante del layout. Cachear esa medición eliminó los tirones, y cargar las partículas de forma diferida las mantiene fuera del primer pintado, que es la mayor parte de lo que llevó la puntuación de escritorio a 99.
-
Analíticas que los bloqueadores de anuncios no rompen sin avisar: Los scripts de analíticas cargados desde dominios de terceros son descartados en silencio por bloqueadores como uBlock y Brave, perdiendo entre el 20 y el 40 % de los eventos sin ningún aviso. Enrutar las analíticas a través del propio dominio del sitio mantiene los datos como propios e intactos. Umami se encarga de las estadísticas respetuosas con la privacidad; Google Tag Manager se encarga del resto.
-
Lo básico del SEO hecho como es debido: Datos estructurados para la persona y cada proyecto, etiquetas de idioma correctas en las 12 versiones de cada página, URLs canónicas para que las traducciones no compitan entre sí, y tarjetas de vista previa social generadas por proyecto.
-
Accesibilidad: Un enlace de salto al contenido, contornos de foco visibles para usuarios de teclado, contraste de texto que pasa AA, animaciones decorativas ocultas a los lectores de pantalla y un menú de idioma construido como marcado navegable en condiciones en lugar de un div con estilos.
-
El contenido es solo Markdown: Añadir un proyecto significa dejar un archivo Markdown en la carpeta del idioma correcto: aparece en el siguiente despliegue, totalmente tipado y sin cambios de código. Las visitas a las páginas las cuenta una pequeña función serverless que hashea las IPs en lugar de guardarlas, así que no hay cookies ni datos personales.
Por qué importa
El sitio hace las veces de ejemplo real de cómo están construidos el resto de estos proyectos: rendimiento, analíticas respetuosas con la privacidad, soporte multilingüe y accesibilidad, todo en un solo lugar que puedes inspeccionar. Como el repositorio es abierto, el código se puede contrastar con la descripción.