Create Self-Hosted Dribbble Portfolio with Dribbbox

By . in Web Design. Updated on .

Dribbble is a popular website to in the design sphere where you can share your WIP projects, designs, mockups, and even freebies. In return you will get feedback and criticism from fellow designers which is good to push your design up to the next level.

If you want to personalize how you display your portfolio, you can display the shots under your own domain. To help you with that, you can try out Dribbbox.

Dribbbox is a library that helps us display Dribbble shots under our own domain, will none of the hassle. Let’s take a look at how you can setup Dribbbox for showcasing your works of art.

Dribbbox Installation

I assume that you have your domain and a server setup; a shared hosting should work just fine. Otherwise, you can run a local server if you dont have one. If you need instructions on how to set up a local server with AMPPS, read about it here.

Download the ZIP package, and upload the content to the server. Include the index.html, the config.js, and the assets folder.

Open the config.js and specify the username to retrieve your portfolio from Dribbble.

In this case, I am using Thoriq Firdaus’ portfolio for the demo. Here’s how you retrieve the portfolio.

dribbbox.config = {
  dribbble_username : "tfirdaus",
  short_description : "A world class designer wanna-be.",
  email_address   : "tfirdaus@helloworld.com"
}

Save it and refresh the page.

It’s really that simple, isn’t it?

Your Portfolio on Dribbbox

The setup is simple. You have three columns. Your contact details are at the far left in a static side bar. Your Dribbble shots are in the middle scrollable column, and on the right, is where viewers can see your project in full view, one at a time. The setup is perfect only as a display which means the public won’t be able to give you feedback like comments or likes. They won’t be able to share your work either.

Dribbbox has been optimized for view on mobile devices. When the website is viewed on mobile, the layout as well as the HTML of the DOM tree will be reconstructed through mobile.js. Specify the viewport width of which the mobile.js should take place in the index.html.

(function() {
    var s = document.createElement("script")
    s.src = "assets/js/" + (matchMedia("(max-width: 414px)").matches ? "mobile" : "desktop") + ".js"
    document.head.appendChild(s)
})()

Conclusion

Dribbbox is a handy library to show off your Dribbble shots under your own domain name. It is very intuitive to work with even if you do not know JavaScript; simply add your username and (optionally) your email address, and you are all set. If you don’t like the default presentation, you can further personalize the appearance through CSS.

More On Hongkiat: Host Your Static Website in Dropbox With Pancake

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail