AlanCoding Logo
Caso de estudio

MacOS Big Sur Portfolio

Recreación meticulosa e interactiva de la interfaz de macOS Big Sur en el navegador, funcionando como un portafolio web dinámico.

Interfaz interactiva que recrea el sistema operativo macOS Big Sur con ventanas de código y perfil abiertas.

El Reto

Simular un sistema operativo completo dentro del navegador manteniendo una alta fidelidad visual y una gestión de estado fluida para múltiples ventanas activas.

La Solución

Se diseñó una arquitectura basada en React para gestionar el estado de las ventanas flotantes, la profundidad Z-index y la renderización eficiente de estilos modulares con Sass.

ReactTypescriptSass

Innovaciones Técnicas

Manejo de Ventanas Dinámicas

Sistema de arrastre, minimizado y capas Z-index para múltiples aplicaciones simultáneas.

Terminal Emulada

Consola interactiva con comandos personalizados para explorar información del desarrollador.

Fidelidad Visual macOS

Uso de efectos de translucidez (backdrop-blur) y animaciones precisas del sistema operativo.

Resultados Cuantitativos

60 FPS
Fluidez de Animaciones
100%
Fidelidad de Interfaz
< 100ms
Tiempo de Respuesta UI
95+
Puntaje Lighthouse

"Una manera increíblemente creativa y original de presentar proyectos interactivos dentro del navegador."