Skip to content

Instantly share code, notes, and snippets.

@haydenbleasel
Last active April 27, 2016 13:45
Show Gist options
  • Save haydenbleasel/009318b283d38e56ec979ef3790760ee to your computer and use it in GitHub Desktop.
Save haydenbleasel/009318b283d38e56ec979ef3790760ee to your computer and use it in GitHub Desktop.
Dribbble feed for portfolio
#dribbble
.row.clearfix.hidden-xs
noscript Sorry, you need Javascript enabled to view these Dribbble shots.
.column-3
p Simplicity, functionality and accessibility will always remain at the core of my philosphy. I like to combine aspects of print and graphic such as dynamic layouts and typographic flourishes with the principles of modern, minimalism.
$(() => {
'use strict';
const access_token = 'your_access_token',
user = 'your_username',
per_page = 3;
$.getJSON(`https://api.dribbble.com/v1/users/${user}/shots`, { access_token, per_page }, (shots) => {
shots.forEach((shot, index) => $('#dribbble .row').prepend([
'<div class="column-4">',
`<a id="dribbble-${shots.length - index}" class="shot" href="${shot.html_url}" data-title="${shot.title}">`,
`<img src="${shot.images.hidpi}" alt="${shot.title}" />`,
'<div class="description">',
`<p>${shot.title}</p>`,
`<small>${shot.likes_count} likes, ${shot.views_count} views</small>`,
'</div>',
'</a>',
'</div>'
].join('')));
});
});
#dribbble {
p {
margin-top: 90px;
}
.shot {
display: block;
position: relative;
img {
max-width: 350px;
opacity: 0.5;
transition: opacity 0.4s;
}
.description {
position: absolute;
p {
font-family: @sans-serif;
font-weight: 500;
font-size: 22px;
color: @black;
line-height: 1.4;
margin: 0;
}
}
&#dribbble-1 {
.description {
right: -60px;
top: 40%;
}
}
&#dribbble-2 {
margin-top: 90px;
text-align: right;
.description {
top: -37px;
right: 130px;
text-align: left;
}
}
&#dribbble-3 .description {
bottom: -28px;
left: 20px;
}
&:hover img {
opacity: 1;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment