š§
Se trata de una web que nos permite crear una tarjeta para hablar sobre proyectos personales. En la pĆ”gina web podemos introducir los datos del proyecto y obtener una vista maquetada con esta informaciĆ³n, y asĆ tener guardados nuestros proyectos de forma fĆ”cil y sencilla.
El diseƱo principal nos fue entregado por el Product Owner de Adalab a travĆ©s de Zeplin, brindĆ”ndonos la oportunidad de realizar modificaciones segĆŗn nuestras necesidades.
En pleno desarrollo del sitio web, el Product Owner autorizĆ³ los cambios que propusimos. Esto ha permitido que el diseƱo experimentara una metamorfosis mĆ”gica con la incorporaciĆ³n de tonos granates, lilas y morados del fondo y los botones. TambiĆ©n se ha cambiado por ejemplo, el icono a un gatito (fiel compaƱero de las brujas), el cual nos redirige a la pĆ”gina de inicio.
Sin embargo, lo mĆ”s destacado es, sin duda, la estela de luz que acompaƱa al cursor durante la navegaciĆ³n, que le ortorga un aura verdaderamente embrujada.
Esta aplicaciĆ³n se compone de varias pĆ”ginas. La principal, el Landing, donde se muestran las tarjetas de todos los proyectos creados y que estĆ”n guardados en la base de datos. Desde aquĆ se puede acceder al detalle de cada una de las tarjetas, borrarlas e incluso organizarlas de forma alfabĆ©tica.
AtravĆ©s del botĆ³n nuevo proyecto se accede a la siguiente pĆ”gina, en la que se encuentra estas Ć”reas:
- SecciĆ³n de formulario:
AquĆ, la usuaria debe completar obligatoriamente todos los campos con los datos del proyecto:
- Nombre del proyecto
- Eslogan
- Repositorio
- Enlace de la demostraciĆ³n del proyecto
- Tecnologias usadas
- Breve descripciĆ³n del proyecto
TambiƩn es necesario cumplementar los datos de la autora: - Nombre del autor - Puesto de trabajo.
-
SecciĆ³n de Preview: Para saber como va quedando, a medida que la usuaria escribe sus datos, se irĆ”n volcando en una Preview.
-
SecciĆ³n Tarjeta: Una vez que a la usuaria le gusta como ha quedado la tarjeta de su proyecto, puede generar un enlace con la vista maquetada de la informaciĆ³n en una pĆ”gina detalle.
AdemĆ”s, si por algĆŗn motivo la usuaria necesita terminar de completar el formulario mĆ”s tarde, no pasa nada, los datos se guardan en el Local Storage.
Si ademĆ”s necesita borrar estos datos tambiĆ©n tiene disponible un botĆ³n de Reset en forma de basura para borrar todos los datos proporcionados, incluso en el Local Storage.
- Visual Studio Code - Editor de cĆ³digo.
- React - Framework de JavaScript.
- HTML Lenguaje de marcado para la estructura.
- SASS - Para aƱadir estilos.
- Zeplin - Plantilla de diseƱo
- Git - Para el control de versiones.
- Github - Como repositorio remoto.
- Github Pages - Para la publicaciĆ³n, sin base de datos.
- MySQL Workbench - Sistema de gestiĆ³n de bases de datos que funciona como cliente de MySQL
- Freedb.tech - Servidor de base de datos en linea
- Render - Para la publicaciĆ³n, con base de datos.
){kind=icon}
){kind=icon}
){kind=icon}
