Sencilla aplicación en Vue.js 3 para realizar un portfolio usando Tailwind CSS, Iconify. Para para ello se ha usado un tema dinámico oscuro, y se ha trabajado inyectando los Metatags en cada ruta para mejorar el SEO. Diseño adaptativo para distintos dispositivos y resoluciones.
El objetivo de este proyecto es realizar una aplicación sencilla en Vue.js 3 para realizar un portfolio usando Tailwind CSS e Iconify. A lo largo del desarrollo maquetaremos nuestro portfolio, sus secciones y componentes. Se ha usado un tema dinámico claro y oscuro, sin la necesidad de recargar la página, se almacena en la store y caché detectando si no existe la configuración por defecto del sistema operativo y ordenador. Se ha implementado inyección dinámica de Metatags y Título de las páginas de HTML generadas en cada ruta con el objetivo de mejorar el SEO de las mismas. Se han creado algunos componentes como los modales, la barra de navegación, footer orientados a adaptarse en cualquier dispositivo. Diseño adaptativo a distintas configuraciones.
;
;
Tailwind CSS es un framework CSS que permite un desarrollo ágil, basado en clases de utilidad que se pueden aplicar con facilidad en el código HTML y unos flujos de desarrollo que permiten optimizar mucho el peso del código CSS. Se ha configurado el tema para adaptarlo a las necesidades de nuestro proyecto, ya sea en colores, tipografía, resoluciones o espaciado.
Se ha implementado el tema oscuro siguiendo la documentación de TailwindCSS. Además detecta automáticamente la configuración por defecto de explorador o sistema operativo para cargar el tema según corresponda e intercambia las imágenes dependiendo del tema.
Iconify nos ofrece poder usar iconos en nuestra aplicación de muchas fuentes disponibles, lo que nos ahorra cargar distintas fuentes de iconos y bajo demanda, es decir, no necesitamos cargar el pack completo si no solo se cargarán los iconos que necesitamos.
Se ha manejado el almacenamiento del tema usando la Store Pinia. Pinia es una alternativa a Vuex, pero que nos ofrece mejor compatibilidad para TypeScript usando Vue.js 3.
Se ha añadido en el enrutador funciones para poder inyectar a las vistas los meta tag del HTML necesarios y con ellos mejorar el SEO.
Este proyecto esta desplegado en Netlify en: https://vue-portfolio-tailwind.netlify.app/.
npm install
npm run serve
npm run build
npm run test:unit
npm run test:e2e
npm run lint
Codificado con 💖 por José Luis González Sánchez
Cualquier cosa que necesites házmelo saber por si puedo ayudarte 💬.
Este proyecto esta licenciado bajo licencia MIT, si desea saber más, visite el fichero LICENSE para su uso docente y educativo.
Este proyecto está basado en el tutorial de Nangialai Stoman. Gracias por el contenido 🙂