Js первый код (портфолио)

Подключать большую библиотеку, чтобы использовать две функции оттуда - такая себе идея. Если уж jQuery подключено, хорошо бы использовать его по полной, чтобы так не бросалось в глаза, что не умеешь делать анимацию на JS )

Когда setAttribute меняет значение дата-атрибута, свойство dataset не меняется. Поэтому если переходить на dataset - нужно переписать его везде.

В перспективе, использование onclick тоже может доставить проблем: Он может быть только один, а иногда хочется из двух разных мест добавить обработчик события на элемент. Для этого существует item.addEventListener("click", function() { ...});

В чем глубокий смысл создания отдельной функции для каждой кнопки? Все они делают одно и то же, можно без этих `return function`, создать только одну функцию, и добавить её ко всем кнопкам.

data-check on / off можно заменить на добавление / удаление класса.

Не понятно, к чему эти хитрые if-else. Фактически, всю функцию можно заменить на такую:

function () {
    if( this.dataset.check == "on" ) return;

    btn.forEach(e => e.dataset.check = "off");
    this.dataset.check = "on";

    let filter = ( this.dataset.filter == "all" ) ? "" : `="${ this.dataset.filter }"`;
    $("img").hide(500);
    $("img[data-filter" + filter + "]").show(500);
}

Заморочился бы записать анимасьон без jQuery) Лень.
Ну или так...

function() {
    if( $(this).data('check') == "on" ) return;

    let filter = $(this).data('filter') == "all" ? "" : `="${ $(this).data('filter') }"`;

    $('img').hide(500);
    $('img[data-filter' + filter + ']').show(500);

    $('button').data('check', 'off');
    $(this).data('check', 'on');
};

Вишня это ягода, а не фрукт

Вместо .getAttribute("data-filter") можно (и нужно) писать проще:
.dataset.filter
То же самое про .setAttribute("data-***", ***)

пOртфолио