En este repositorio puedes encontrar mi portfolio web personal realizado de manera responsive, siguiendo la filosofía mobile first.
Note Enlace directo al proyecto pinchando en el siguiente enlace
¡Bienvenido a mi Portfolio! Si quieres conocerme mejor, así como ver mis proyectos y tecnologías con las que he trabajado accede al enlace.
En este repositorio te presentamos una web sencilla, intuitiva y adaptada a cualquier tipo de dispositivo (móvil, tablet y PC) para que puedas echarle un vistazo en cualquier momento. Diseñado y desarrollado con HTML, Sass y JavaScript, encontrarás una página con la que podrás conocerme mejor.
Se ha utilizado Gulp para automatizar y mejorar flujos de trabajo lentos y repetitivos. La aplicación consiste en desarrollar un sitio web utilizando los siguientes elementos:
- HTML5
- CSS3
- Sass
- JavaScript ES6
- Bootstrap
- Flexbox
- CSS Grid
- Media queries
- Gulp
- webpack
- PixiJS
- Canvas
Cuenta con las siguientes secciones:
- Inicio
Lo primero que se encontrará al acceder a la aplicación web será el inicio, una sección que sirve de landing para el usuario y en la que puede encontrar una barra de navegación superior con todas las secciones a las que puede acceder. A la izquierda puede acceder a las diferentes redes sociales haciendo click sobre su icono y en el centro se sitúa una breve presentación y un botón que le permitirá abrir su aplicación de correo para enviarme un mensaje. En la esquina inferior derecha, el usuario tiene visible un botón que le permite subir al inicio de la página en cualquier momento.
- Sobre mí
En esta segunda sección a la derecha el usuario podrá encontrar una pequeña descripción sobre mí, intereses y cualidades, así como mi experiencia laboral previa, acompañada de una fotografía. También hay un botón que permite descargar mi currículum vitae en formato PDF.
- Habilidades
En esta tercera sección el usuario encontrará dos secciones con las tecnologías que he utilizado divididas en front-end y back-end, acompañadas por una tercera sección con las soft skills.
- Proyectos
En esta cuarta sección se pueden observar los diferentes proyectos que he realizado tanto en grupo como individuales, cada uno acompañados por las tecnologías empleadas, una foto descriptiva y dos iconos que permiten al usuario visitar el repositorio con el proyecto y la página web en la cual se encuentra desplegado.
- Contacta conmigo
Por último, al final de la página el usuario cuenta con un pequeño formulario realizado con Bootstrap a través del cual me puede hacer llegar cualquier mensaje.
El proyecto se ha desarrollado utilizando Gulp, como herramienta de automatización de tareas. También contiene un motor de plantillas HTML y un preprocesador Sass, entre otros elementos.
A la hora de resolver el proyecto se han utilizado las siguientes herramientas:
- HTML con parciales para facilitar la lectura y organización del proyecto
- CSS/Sass
- Flexbox
- Css Grid
- Box model (size, padding and margin)
- Media queries
- Variables y mixins
- JavaScript
- Bootstrap para añadir el formulario con estilos
- Formspree para hacer funcionar el formulario y que los mensajes lleguen al correo electrónico asociado
- Gulp para automartizar tareas de compilación de código
- webpack para compilar y poder usar módulos en el script de JavaScript
- PixiJS y Canvas para crear el fondo de colores aleatorios cada vez que se carga la página
- Control de versiones GIT
- ESLint para encontrar y arreglar problemas que puedan estar en mi código de JavaScript
- Pretier para formatear el código
- Netlify Drop un servidor que permite alojar tu proyecto desplegado en la nube
En primer lugar, para tener el repositorio en tu ordenador:
- Haz click en la esquina superior derecha > Fork.
- Te pedirá que elijas a qué usuario de GitHub quieres bifurcarlo. Elige tu usuario.
- Ve a github.com/tu-usuario/nombre-del-proyecto, clónalo y haz lo que quieras, puedes renombrar el repositorio, cambiar el código, volver a desplegarlo en GitHub Pages...
- Por último y para que todo funcione correctamente, debes desactivar GitHub Pages y volver a activarlo para que GitHub genere la nueva URL correctamente.
Una vez hecho el fork:
- Ábrelo en tu editor de código.
- Abre una terminal e instala las dependencias locales ejecutando en la terminal de comandos...
npm install
Una vez hemos instalado las dependencias, el proyecto debe arrancarse cada vez que nos pongamos a programar ejecutando el siguiente comando:
npm start
Este comando abre una ventana de Chrome y muestra tu página web.
Después de ejecutar npm start ya puedes empezar a editar todos los ficheros que están dentro de la carpeta src/ y programar cómodamente 💫
Por último, si quieres ver tus cambios reflejados en la página web desplegada en GitHub Pages deberás usar el comando npm run docs o npm run push-docs para generar la carpeta y subirlo directamente a GitHub.
Cualquier aportación será bienvenida.
¡¡¡Muchas gracias!!! 🤗