Ivan Bogachev

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

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

чтобы слово "in" было ниже "Work" на одну строчку, а "minimalism" ниже "in" также на одну строчку?

.in {
    vertical-align: -1em;
}

.minimal {
    vertical-align: -2em;
}

На маке и под виндой, нужно отображение контента шрифтом по умолчанию

font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif

• -apple-system - для macOS
  
• BlinkMacSystemFont - обратно для macOS
  
• Segoe UI - Windows (начиная с Висты)
  
• Roboto - Ведроид
  
• Oxygen - Линуксы с кедами
  
• Ubuntu - Собственно Ubuntu и некоторые ее производные
  
• Cantarell - Линуксы с гномами
  
• Fira Sans - Шрифт от мозиллы (был сделан для Firefox OS, теперь не очень понятно, нужно это или нет, я так ни разу и не видел вживую устройства с этой ОС)
  
• Droid Sans - Старый ведроид
  
• Helvetica Neue - Еще немного старых маков
  
• sans-serif - На всякий случай
  

чтобы клик срабатывал верно

div.onclick = (e) => {
    e.target.classList.toggle("ss");
}

function listener(e) {
    this.classList.toggle("ss");
}

div.onclick = (e) => {
    listener.call(e.target, e);
}

Мне бы описания от вас, примеры...

background: linear-gradient(to right, #f77 0%, #f77 30%, #fff 30%, #fff 100%);

• Asset - актив, полезная вещь (в нашем контексте - файл), которую мы используем для чего-либо. Например используете иконку на странице - она есть ассет. То же самое относится к скриптам, файлам со стилями и.т.д.
  
• Bundle - связка, пучок; набор вещей, объединенных в одну кучу. В нашем контексте это набор ассетов (отдельных полезных файлов), собранных хитрым образом в один большой файл.