Todos los proyectos

Disponible · Web

Ntu.

Mi publicación de ensayos, artículos y estudios en portugués, con una experiencia de lectura editorial, referencias contextuales y herramientas para retomar un texto.

Mi contribuciónDesarrollo de producto propio
TecnologíasNext.js, React, TypeScript, MDX, Base UI, Tailwind CSS, Zod
El problema
Publicar textos largos conservando su estructura y sus referencias.
Mi contribución
Diseñé la publicación y construí su modelo de contenido, archivo y herramientas de lectura.
El resultado
Publicación en portugués con navegación por secciones, referencias contextuales y preferencias de lectura.
Interfaz de Ntu.
Abrir imagen en tamaño original

Un espacio para mi escritura

Construí Ntu. para publicar mis ensayos, artículos y estudios sin reducirlos a publicaciones breves. Quería conservar la estructura de cada texto, sus referencias y el espacio para desarrollar un argumento, con una experiencia de lectura pensada para ese material.

El proyecto conecta dos partes de mi trabajo: escritura e ingeniería front-end. Diseñé la publicación, estructuré el modelo de contenido y construí el lector, el archivo y la navegación.

El contenido orienta la aplicación

La publicación utiliza MDX local con metadatos tipados y validados por Zod. Mantengo separados el texto original, los datos de publicación y los elementos complementarios de lectura. Así, el mismo contenido alimenta el lector, el archivo, las referencias y la búsqueda.

El árbol Markdown proporciona títulos y secciones para la navegación y el índice de búsqueda. Las páginas se componen en el servidor; las interacciones del cliente se ocupan de las herramientas que necesitan estado en el navegador. La publicación sigue vinculada al control de versiones, sin un CMS separado.

Leer sin perder el hilo

Los textos largos necesitan algo más que una barra de desplazamiento. Construí un índice conectado a la sección actual, progreso a través del cuerpo del texto y una forma de retomar la lectura por sección.

Las notas, definiciones y referencias mantienen enlaces de regreso a su contexto. Quien lee puede ajustar el tamaño de letra, el interlineado y el ancho de columna, utilizar el modo de enfoque y guardar pasajes seleccionados en su navegador. Los controles permanecen disponibles sin competir con el texto.

Utilicé Base UI para superposiciones y controles, manteniendo enlaces y controles de medios nativos cuando encajan con la interacción. El mismo flujo se adapta al escritorio y al móvil.

Un sistema visual editorial

Combiné títulos en Cormorant Garamond, cuerpo en EB Garamond e interfaz en DM Sans. Las superficies oscuras y los detalles puntuales en dorado distinguen la navegación de la columna de lectura. Los ajustes de espacio y ancho permiten elegir una composición cómoda.

El archivo ofrece diferentes entradas a los textos: tipos de publicación, temas, búsqueda y lecturas relacionadas. Ntu. es tanto el lugar donde publico mi escritura como un producto en el que exploro cómo las interfaces pueden apoyar una lectura atenta.

Explora más proyectos Ponte en contacto