Mi portafolio fue diseñado en WordPress utilizando Elementor Pro, tomando la estética de Apple como referencia para lograr una apariencia minimalista y profesional. Implementé un tema hijo para personalizar y asegurar la inclusión de código CSS y JavaScript, permitiendo funcionalidades avanzadas como filtros para habilidades y proyectos. Los botones de filtrado, diseñados con una estética limpia y refinada, reflejan esta referencia visual.
Para agregar dinamismo, añadi codigo HTML por medio de un widget de Elementor Pro, integrando ademas, desde el functions.php de mi tema hijo, código JavaScript y CSS, lo que permitió recrear el icónico dock de macOS, tanto en apariencia como en efectos al hacer hover. En dispositivos móviles, este dock se adapta para simular un dock de aplicaciones similar al de un teléfono, mejorando la experiencia de usuario en todas las plataformas.
Dentro del tema hijo, añadí una funcionalidad para que, al desplazarse hacia el contenedor de “Skills”, un menú de botones se despliegue desde la parte inferior de la pantalla, ofreciendo enlaces directos a mi perfil de LinkedIn, correo electrónico y un botón de descarga para mi CV.
Para facilitar la administración de contenido y mantener el sitio dinámico, utilicé el plugin “Secure Custom Fields“. Esto permite gestionar inputs personalizados para cada proyecto, como la descripción, el enlace a la web en producción y mi rol en el proyecto, mostrando esta información de manera dinámica en los posts individuales. Además, configuré un campo para actualizar la URL de mi CV; de esta forma, los botones de descarga en toda la web se actualizan automáticamente cada vez que subo una nueva versión.
El Theme Builder de Elementor Pro fue esencial para diseñar templates reutilizables, como la plantilla de proyectos individuales (single project), donde el contenido se genera dinámicamente a partir de los campos personalizados. Para la sección de proyectos en general, configuré una “Loop Grid” que permite que los proyectos destacados, ya sean de desarrollo web o diseño gráfico, se muestren en la parte superior, optimizando la visibilidad de los proyectos clave.
También diseñé el menú de navegación sticky y el pie de página mediante el Theme Builder de Elementor, brindando coherencia en todo el sitio.
Por último, los recursos gráficos, como los gifs de figuras humanas con auras de colores en las secciones de inicio y proyectos, fueron creados previamente utilizando Adobe Photoshop y After Effects, y reutilizados en este portafolio. Además, se integraron animaciones propias de Elementor Pro para enriquecer la experiencia visual del usuario.