Dribbble feed for portfolio

dribbble.html

#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.

dribbble.js

$(() => {

    '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.less

#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;
        }
    }
}