Vue-Portfolio

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.

• Vue-Portfolio
  • Sobre el proyecto
    • Tailwind CSS
    • Tema oscuro
    • Iconify
    • Store
    • Metatag y SEO
  • Despliegue
  • Project setup
    • Compiles and hot-reloads for development
    • Compiles and minifies for production
    • Run your unit tests
    • Run your end-to-end tests
    • Lints and fixes files
    • Customize configuration
  • Autor
    • Contacto
  • Licencia
    • Agradecimientos

Sobre el proyecto

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

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.

Tema oscuro

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

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.

Store

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.

Metatag y SEO

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.

Despliegue

Este proyecto esta desplegado en Netlify en: https://vue-portfolio-tailwind.netlify.app/.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Run your end-to-end tests

npm run test:e2e

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Autor

Codificado con 💖 por José Luis González Sánchez

Contacto

Cualquier cosa que necesites házmelo saber por si puedo ayudarte 💬.

        

Licencia

Este proyecto esta licenciado bajo licencia MIT, si desea saber más, visite el fichero LICENSE para su uso docente y educativo.

Agradecimientos

Este proyecto está basado en el tutorial de Nangialai Stoman. Gracias por el contenido 🙂