El Portafolio de Alexander Harmon
Descripción del proyecto
Haz clic en el botón de abajo para verDesafío
Recién graduado de la universidad, me embarqué en un proyecto personal para consolidar mis habilidades de desarrollo web y explorar técnicas avanzadas. El objetivo era crear «alexanderharmon.dev», un sitio web que sirviera como portafolio y como plataforma de aprendizaje. Esto presentó varios desafíos clave:
- Interacción y Animación Avanzadas: Mi meta era implementar animaciones e interacciones complejas en el fondo del sitio web, llevando mis habilidades de JavaScript y CSS más allá de sus aplicaciones básicas. Esto requirió profundizar en técnicas de animación avanzadas, optimizar el rendimiento y asegurar la compatibilidad con diferentes navegadores.
- Navegación de Una Sola Página con Barra Lateral Persistente: Quería que alexanderharmon.dev fuera una sola página con una navegación fluida entre secciones, manteniendo una barra lateral persistente para facilitar el acceso a diversas áreas de contenido. Esto implicó priorizar la experiencia del usuario, elaborar código JavaScript eficiente para un desplazamiento suave y aplicar principios de diseño receptivo (responsive design) para garantizar un comportamiento coherente en una variedad de tamaños de pantalla.
- Construcción Desde Cero: Para maximizar la experiencia de aprendizaje y demostrar mi comprensión completa del desarrollo front-end, opté por construir todo el sitio web desde cero, prescindiendo del uso de frameworks o plantillas preexistentes. Esto exigió un dominio profundo de los fundamentos de HTML, CSS y JavaScript.
Solución
Para abordar estos desafíos, implementé las siguientes soluciones:
- Animaciones Personalizadas con JavaScript y CSS: Utilicé JavaScript y CSS para crear animaciones visualmente cautivadoras y elementos interactivos en el fondo del sitio web. Esto implicó la implementación de técnicas como transiciones de CSS, animaciones keyframe, y animaciones impulsadas por JavaScript utilizando
requestAnimationFramepara un rendimiento optimizado. El enfoque se centró en ofrecer efectos suaves y visualmente atractivos que mejoraran la experiencia del usuario de alexanderharmon.dev. - Navegación de Una Sola Página con Barra Lateral Persistente: Aprovechando JavaScript y CSS, implementé un sistema de navegación de una sola página complementado por una barra lateral fija. Esto incluyó el uso de JavaScript para crear animaciones de desplazamiento suave (smooth scrolling) que se activan al hacer clic en los enlaces de navegación, y CSS para posicionar y estilizar la barra lateral persistente. Se aplicaron principios de diseño receptivo (responsive design) para garantizar la funcionalidad óptima de la barra lateral en una variedad de tamaños de pantalla.
- Desarrollo Desde Cero: Construí alexanderharmon.dev completamente desde cero, basándome únicamente en HTML, CSS y JavaScript. Este enfoque me permitió obtener una comprensión más profunda de las tecnologías subyacentes y utilizar plenamente mis habilidades para lograr el diseño y la funcionalidad deseados.
Resultado
Las soluciones implementadas culminaron en un sitio web personal único y técnicamente desafiante, alexanderharmon.dev, que muestra exitosamente mis habilidades a la vez que sirve como una valiosa experiencia de aprendizaje:
- Demostración de Habilidades Avanzadas de Front-End: Alexanderharmon.dev demuestra de manera efectiva mi capacidad para crear animaciones complejas, interacciones y un sistema de navegación de una sola página utilizando JavaScript y CSS. Esto sirve como una poderosa pieza de portafolio, mostrando mi competencia en el desarrollo front-end.
- Aprendizaje Mejorado y Desarrollo de Habilidades: Construir alexanderharmon.dev desde cero me permitió profundizar significativamente mi comprensión de las tecnologías centrales de desarrollo web y explorar técnicas avanzadas. Esta experiencia mejoró sustancialmente mi conjunto de habilidades y me preparó para proyectos de desarrollo web más complejos en el futuro.
- Experiencia de Usuario Única y Atractiva: La combinación de animaciones fluidas, navegación clara y un diseño limpio crea una experiencia de usuario única y atractiva para los visitantes de alexanderharmon.dev. Esto hace que el sitio web sea memorable y muestre eficazmente mi trabajo.
Galería
after effects of clicking the background square
Backend Activities Pop up