Skip to content

Adalab/project-promo-m-module-2-team-1

Repository files navigation

Imagen1

Listen to my card (o cómo crear y compartir tarjetas de visita profesionales de forma interactiva)

Esta aplicación sirve para generar tarjetas de visita personalizadas y virtuales que se podrán publicar en Twitter. En menos de dos minutos tu tarjeta de presentación estará lista para compartir, con tus datos personales y profesionales, para que, de una forma fácil y rápida, los cazatalentos 😉 puedan consultar tu currículum en LinkedIn y tu perfil de GitHub. Puedes crearla a través de cualquier dispositivo pues es totalmente responsive.

Además, podrás previsualizar cómo va quedando tu tarjeta a medida que la vas rellenando y, para ahorrar tiempo y esfuerzo, toda tu información estará almacenada en tu Navegador en caso de que cierres o recargues la página.

Cómo la hemos creado:

Con una equilibrada mezcla de HTML, CSS, JavaScript y API. Gracias al Starter Kit de Adalab, nos hemos valido de gulp, el cual permite convertir el Sass sobre el que hemos trabajado en CSS, además de estar pendiente de nuestros archivos, compilarlos y recargar el servidor cada vez que hacíamos un cambio 🎉.

Descárgate el repositorio 📥:

Si quieres descargar y clonar el repositorio, tendrás que instalar Node.js y Gulp. A continuación, instala las dependencias locales con npm install y arranca el kit con gulp.

También puedes ver y usar la aplicación a través de este enlace.

Cómo funciona:

De forma sencilla e intuitiva, la página de inicio sirve de carta de presentación del proyecto, cuyo objetivo es hacer networking de forma sencilla y sostenible. Se trata de la landing page, donde te adelantamos lo que puedes hacer con esta herramienta: diseñar una tarjeta, rellenarla con tus datos y compartirla. Clica en 'Comenzar' y ¡que empiece la aventura! 🤓 🌋

Por qué la música:

Hemos querido diferenciarnos de las demás webs dedicadas a la creación de tarjetas aportando un mínimo valor añadido. Como a todas nos apasiona la música, y pensamos que no se puede vivir sin ella, ofrecemos la posibilidad de disfrutar de una buena canción mientras estás creando tu tarjeta. Por ello, al clickar en "Comenzar" te sorprenderá una melodía, un tema musical que te aportará entretenimiento mientras trabajas en la creación de tu tarjeta profesional, ¿no es agradable? 🎵

¿Por dónde empezar?

Ahora que conoces todos los detalles, puedes empezar a crear tu tarjeta de visita personalizada paso a paso.

Diseña 🎨:

En esta sección podrás seleccionar la paleta de colores para tu tarjeta: tonos azules, rojos, amarillos o grises. ¿Te has preguntado alguna vez cuál es el color que mejor te representa?

Rellena 📝:

Aquí podrás introducir tus datos personales y profesionales. Los básicos y necesarios para que puedan acceder a tu información profesional y contactarte. Así que te recomendamos que revises tus perfiles de LinkedIn y GitHub antes de compartirlos y que escojas una foto apropiada que transmita lo buena profesional que eres 👩‍💻.

A medida que completes los campos, en la ventana de la derecha podrás ir previsualizando cómo quedará tu tarjeta: se pintarán tu nombre y profesión, y se imprimirán los iconos de correo electrónico ✉️, teléfono 📳, LinkedIn y GitHub. Exceptuando el número de teléfono, el resto de campos a rellenar son obligatorios para poder crear la tarjeta.

Todos estos datos quedarán almacenados en el local storage para que crear nuevas tarjetas sea más rápido incluso. Cada vez que abras el generador de tarjetas, toda tu información personal reaparecerá y solo tendrás que modificar el campo que te interese. Y, si deseas eliminarla, bastará con pulsar el botón 'Reset' para borrar todos los datos de la tarjeta y del local storage.

Comparte 📢:

¿Ya has rellenado todos tus datos? ¿A qué esperas para compartir? Pincha sobre el botón 'Crear tarjeta', recibe el link de tu tarjeta personalizada y compártela fácilmente y de forma inmediata a través de tu perfil de Twitter. De nada 😎.

Falta algo?

¿Echas de menos que el kit haga algo en concreto? Pidelo sin problema a través de las issues o si te animas a mejorarlo, mándanos un PR :)