Ivan Bogachev

Для меня важно: 1. чтобы в URL не было окончаний .html или в этом роде; 2. чтобы если я в корне сайта создам папку "portfolio", а в ней папку с названием проекта "project-name" в итоге получилось так "site.ru/portfolio/project-name"

С этим проблем не будет.

возникло ощущение, что по сути он не отличается от обычной верстки. Ведь можно также собирать обычную верстку с помощью Gulp, Sass и шаблонизатора Nunjucks.

Да, но... Раскидывание постов по тегам и категориям, rss и sitemap, постраничная навигация, поиск, еще что-то... лениво все это делать самому. Jekyll выступает в качестве готовой конфигурации, которую можно взять и использовать для таких задач, не запариваяь о том, что там есть и как оно работает. В этом его предназначение. Понятно, что jekyll не заменит gulp или webpack в задачах вроде сборки современного фронтенда (ну знаете, это когда 100500 модулей, babel или даже typescript, препроцессоры, постпроцессоры и.т.д.), но вопросы именно файловой структуры сайта и всего, что с ней может быть связано, он решает хорошо и без лишних вопросов.

могу обойтись без админки... или может остаться на WordPress?

Если хочется просто статичное портфолио - то зачем там какая-то cms? Она будет только тормозить и ничего не делать. А еще статику можно на github захостить - бесплатно и достаточно надежно.

Что ж вас всех так тянет к этому канвасу? (риторический вопрос)

1. Анимации буквы под ней фото. Как это делается? Подозреваю что canvas используется

Если вы про большие "прозрачные" буквы, через которые видны фотографии, то никакой канвас там не нужен. Это делается на svg-масках - просто и производительно. Соответственно при перемещении мышки добавляется transform:translate для маски. Задача тривиальная, но оставлю пример для ознакомления. Переход между слайдами делается аналогично.

2. Листание мышкой (зажимаешь появляются направляющие вверх-вниз, вправо-влево).

На нажатие мышки вешаете обработчик, показывающий эти элементы (думаю не стоит говорить о том, как поменять им opacity). Далее точно так же - на событие "перетаскивания" добавляете transform:translate для всех этих линий и transform:scale для кружков. При переходе между слайдами добавляете еще больше трансформаций по вкусу.

Остальные эффекты тоже интересуют. Понятно что css3, js, canvas

Для рисования линий можно опять взять svg и..... Это вообще мощный прием, много куда его можно приткнуть. Появление надписей можно сделать на CSS-анимациях. Вариантов много, можно начать с вот этого примера (только делать все в обратную сторону) или поиграть с размерами псевдоэлементов, положенных поверх текстов. Еще там есть постраничный скролл, но это легко загуглить.

Или можно всё сделать проще?

Так у них [на сайте, на который вы ссылку дали] и так все просто:

1. Есть SVG, в которую через image воткнули картинки. Это обычные png с прозрачным фоном. Каждый человек - отдельная картинка. Можно еще сделать маску вокруг каждого человека, чтобы буквально вырезать его по контуру и определять наведение не по прямоугольнику (как у них), а по силуэту
   
2. Зная положение каждого человека, можно нарисовать текст над ним. Это можно как внутри SVG сделать (но тогда адаптировать сложно будет), так и с помощью обычных div`ов и абсолютного позиционирования из CSS. Если сделать viewbox='0 0 100 100' у SVG, то считать будет проще.
   
3. При наведении на человека (думаю про addEventListener вы знаете):
   
   • Берем большой прямоугольник в SVG, заливаем его черным полупрозрачным, таким образом делается затемнение. Показываем его.
     
   • Человека можно заменить другим человеком (как сделано на том сайте), или применить к нему какой-нибудь фильтр, чтобы цвета изменить. В любом нормальном графическом редакторе вы найдете кучу фильтров.
     
   • Показываем текст
     
     Когда я говорю "показываем" я имею в виду, что есть миллион способов сделать это, от банального отключения display:none или изменения прозрачности и до хитрых анимаций с SVG-масками или еще чем-нибудь.
     
   
   

Посмотрите пример с сердечком из статьи SVG маски и вау-эффекты: о магии простыми словами. Он должен навести на правильные мысли.

Рекомендации от W3C говорят, что можно.

актуально ли использовать gremlin.js

Ну инструмент не очень популярный - всего 636 загрузок с NPM за последний месяц. Давно не обновлялся, но свою задачу по всей видимости продолжает решать, так что если вам он нужен - используйте.

Если б он был такой крутой, то его б все использовали

Используют. Не так много, но используют. Просто инструмент очень узкоспециализированный, его не везде имеет смысл применять. Я на свой сайт не стал бы этот инструмент тащить - две с половиной кнопки-ссылки, ну зачем там такое тестирование? Ну и не забывайте, при разработке большинства (подавляющего, к сожалению) сайтов слова "тестирование интерфейсов", и тем более "автоматизированное" звучат как что-то страшное-страшное и не дающее прибыли здесь и сейчас. Так что многие забивают.

Абсолютное позиционирование, вырезание картинок, before/after... Ох и понапридумывают всякого...

.example {
    background: linear-gradient(to right, #F0F3BD, #F0F3BD), // левая граница
        linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // верхняя
        linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // нижняя
        linear-gradient(to right, #fff, #fff); // правая
    background-size: .5rem 100%, 100% .5rem, 100% .5rem, .5rem 100%;
    background-position: top left, top left, bottom left, top right;
    background-repeat: no-repeat;
}

Один элемент. Один фон. Для всего остального есть CSS.
codepen

Попробовал несколько вариантов, ни один не работает.

На browserhacks.com есть хорошая подборка хаков для определения самых разных браузеров и их версий с помощью CSS или JS. Попробуйте варианты, которые там предлагаются. И будьте внимательны: если вы используете автопрефиксер или что-то для оптимизации CSS, то эти инструменты могут незаметно ломать некоторые хаки при сборке.

Можно нарисовать его градиентом (пример).

...может это какая библиотека js... ...и с помощью js менять длину...

Не нужен тут никакой JS, только два псевдоэлемента, :hover и transform: scale - codepen

И как вообще это реализовать?

Сами алгоритмы простые. С общими идеями таких анимаций вы можете познакомиться в статье про частичные вау-эффекты. А пример того, как добавить к этому мышку, есть вот тут.