Crear un portafolio de Dribbble auto-hospedado con Dribbbox
Dribbble es un sitio web popular en la esfera del diseño donde puede compartir sus proyectos, diseños, maquetas e incluso regalos de WIP. A cambio, recibirá comentarios y críticas de otros diseñadores, lo que es bueno para impulsar su diseño al siguiente nivel..
Si desea personalizar la forma en que muestra su cartera, puede mostrar las tomas bajo su propio dominio. Para ayudarte con eso, puedes probar Dribbbox.
Dribbbox es una biblioteca que nos ayuda a mostrar las tomas de Dribbble bajo nuestro propio dominio, sin ningún problema. Veamos cómo puedes configurar Dribbbox para mostrar tus obras de arte..
Instalación de Dribbbox
Supongo que tiene su dominio y una configuración de servidor; un alojamiento compartido debería funcionar bien. De lo contrario, puede ejecutar un servidor local si no tiene uno. Si necesita instrucciones sobre cómo configurar un servidor local con AMPPS, lea sobre esto aquí.
Descargue el paquete ZIP y cargue el contenido en el servidor. Incluya index.html, config.js y la carpeta de activos.
Abre el config.js y especifique el nombre de usuario para recuperar su cartera de Dribbble.
En este caso, estoy usando la cartera de Thoriq Firdaus para la demostración. Así es como recuperas la cartera..
dribbbox.config = dribbble_username: "tfirdaus", short_description: "Un diseñador de clase mundial que quiere ser", email_address: "[email protected]"
Guárdalo y actualiza la página..
Es realmente tan simple, ¿no es así??
Su cartera en Dribbbox
La configuración es simple. Tienes tres columnas. Sus datos de contacto están en el extremo izquierdo en una barra lateral estática. Sus tomas Dribbble se encuentran en la columna desplazable del medio, y a la derecha, es donde los espectadores pueden ver su proyecto a la vista, uno a la vez. La configuración es perfecta solo como una pantalla, lo que significa que el público no podrá darle comentarios como comentarios o "me gusta". Tampoco podrán compartir tu trabajo..
Dribbbox ha sido optimizado para su visualización en dispositivos móviles. Cuando el sitio web se visualiza en dispositivos móviles, el diseño y el HTML del árbol DOM se reconstruirán a través de mobile.js
. Especifique el ancho de la ventana gráfica mobile.js
debe tener lugar en el index.html
.
(function () var s = document.createElement ("script") s.src = "asset / js /" + (matchMedia ("(max-width: 414px)"). ¿coincide con? "mobile": "desktop" ) + ".js" document.head.appendChild (s)) ()
Conclusión
Dribbbox es una biblioteca útil para mostrar tus tomas Dribbble bajo tu propio nombre de dominio. Es muy intuitivo trabajar con él, incluso si no conoce JavaScript; simplemente agregue su nombre de usuario y (opcionalmente) su dirección de correo electrónico, y estará listo. Si no te gusta la presentación predeterminada, puedes personalizar aún más la apariencia a través de CSS.
Más sobre Hongkiat: aloja tu sitio web estático en Dropbox con Pancake