Awesome profile cards (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 podrás publicar en Twitter. En menos de dos minutos tendrás tu tarjeta de presentación lista para compartir, con tus datos personales y profesionales, para que consultar tu currículum en LinkedIn y tu perfil de GitHub sea fácil y rápido para los cazatalentos 😉. Puedes crearla a través de cualquier dispositivo, pues es totalmente responsive.
Además, podrás previsualizar cómo quedará tu tarjeta a medida que la rellenas y, para no perder el tiempo, toda tu información estará almacenada en el local storage para que generar nuevas tarjetas sea más rápido y eficaz.
Con una equilibrada mezcla de HTML, CSS, JavaScript y API. Gracias al Starter Kit de Adalab, nos hemos valido de gulp, que nos ha permitido 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 🎉.
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.
De forma sencilla e intuitiva. La página de inicio sirve de carta de presentación del proyecto, cuyo objetivo es crear contactos profesionales cómodamente. En la landing page también 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! 🤓 🌋
Al empezar a trabajar con Javascript nos sentiamos algo perdidas y sin saber qué ni cómo hacer las cosas, pero poco a poco fuimos avanzando, sintiendónos unas pobres criaturitas de JS al amparo de de cthulhu esperando poder aprender todo lo necesario para poder sacar adelante este proyecto y cuántos se nos presentasen por delante.
Ahora que conoces todos los detalles, puedes empezar a crear tu tarjeta de visita personalizada paso a paso.
En esta sección podrás seleccionar la paleta de colores para tu tarjeta: tonos azules, rojos o amarillos. ¿Te has preguntado alguna vez cuál es el color que mejor te representa?
Aquí podrás introducir tus datos personales y profesionales básicos. Los necesarios para que puedan acceder a tu información profesional y ponerse en contacto contigo. 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. 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 que esta se borre de la tarjeta y del local storage.
¿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 😎.
Y por último, para adentrarte en todas las maravillas que te hemos contado, pincha en el siguiente enlace: CREATURES OF JS profile-cards.