Benched

Benched 3.0 has launched!

This has been a long time coming. I launched the first variation of Benched back in 2017, then updated it almost a year later with a lackluster version "2.0". It is now 2021 and I figured it was time to revisit this old side project of mine.

New Coat of Paint

I trimmed off all the fat, and by that I mean reduced the project down to one portfolio template design. It uses some pretty nifty scroll-snap CSS goodness and has a huge focus on performance.

I figured those who were interested in more heavy customization of the template have the freedom to do so (or can hire me to help them do so).

"Is it Profitable?"

My plan was to eventually stop renewing the domain and possibly let the whole project die. "It isn't making money" was all I could think of, "What's the point of putting effort into it?". I'm proud that I fought back against that impulse. Benched 3.0 is a more streamlined and focused approach than the earlier iterations.

At the very least I'm pleased with it. If others get something out of it - fantastic!

Now that being said, I would be more than grateful if you opted to purchase the template (the suggested price is just $5 on Gumroad) to help support my work on Benched - but by no means should you feel the need to do so. No guilt tripping here - seriously!

Free But Not Open Source?

I know - I advocate open source and then keep Benched behind closed doors?!

My plan is to eventually structure this project in a smarter way for the open source community. I'll keep you posted!


Support

For any questions or comments, please reach out on Twitter

For bug reports, special requests or issues shoot me an email.

Setup Free Hosting

If this is your first time setting up any form of web hosting, take a look at the "Beginner" setup process. If you are familiar with hosting services, take a look at the "Advanced" section.

Beginner

  1. Go to: Netlify Drop
  2. Drag & drop your benched folder into the site
  3. Have a cold drink and relax - you're done!

Netlify Drop will setup a generated subdomain for your portfolio. Sign up (free) with Netlify in order to make this subdomain persistent (you can also follow these instructions to setup a custom domain)

Advanced

  1. Go to: DigitalOcean (get $100 credit with this link)
  2. Create a new account and navigate to the App Platform
  3. Follow the steps to hook-up your project repo with DigitalOcean
  4. You now have a portfolio that will rebuild when changes are made to your repo!

Documentation

This step-by-step guide will help you setup your Benched website. Do not be scared away by some of the jargon at first glance - it is actually very simple!1

First Steps

  1. Login to your Dribbble account & go to Settings > Applications
  2. Select register a new application (give it any name)
  3. Set the website url to: https://benched.site
  4. Set the callback url to: https://benched.site?callback
  5. Save the application

Authentication

  1. Go to: https://dribbble.com/oauth/authorize?client_id=CLIENT_ID (replace the CLIENT_ID with the one from your Dribbble application)
  2. Authorize your application
  3. You will be redirected to: http://benched.site?callback?code=THIS_WILL_BE_A_NEW_CODE
  4. Copy the code & save it for later

Generating Your Token

  1. Go to: apitester.com
  2. Select the POST action from the dropdown
  3. Enter the url: https://dribbble.com/oauth/token?client_id=CLIENT_ID&client_secret=CLIENT_SECRET&code=COPIED_CODE
  1. Click Test to receive your access token
  2. Copy the access token from the response body output

Adding Your Token

  1. Open the included scripts.js file from the downloaded files
  2. Add your access token to: var accessToken (line 5)
  3. While you are editing the scripts.js file, be sure to the mailContact and numberOfShots respectively
  4. You are done!

More Advanced Options


  1. You can thank Dribbble for updating their API to require all this nonsense (I know - authentication and security blah, blah blah) 

Custom Domains

Both Netlify and DigitalOcean support the use of custom domains. Depending on the hosting provider you've chosen, find the proper instructions below:


About

Benched is a streamlined, single page portfolio template that automatically pulls-in your latest shots from Dribbble. (Just like it says on the homepage)

Benched Details

About the Author

My name is Bradley Taunt, I'm a designer, developer and open source advocate. I made Benched to scratch my own personal itch of using Dribbble as a main portfolio.

That's really all there is to say!


Create a free portfolio from your Dribbble shots

Benched is a streamlined, single page portfolio template that automatically pulls-in your latest shots from Dribbble. Download the files, then simply follow the setup instructions.

Live Demo    Download


Features

  • lightweight & fast
  • minimal, responsive design
  • auto-grabs 15 latest hi-res shots1
  • step-by-step documentation

Optional Extras

  • free web hosting setup
  • custom domain setup

  1. Only high definition Dribbble shots are supported ("normal" resolution shots will not work)