Конан Варвар

https://jsfiddle.net/akobcbkz/

Нет времени объяснять :)
jsfiddle.net/ebnm2L7k

clip-path :)
bennettfeely.com/clippy
https://www.sarasoueidan.com/blog/css-svg-clipping/

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

Сделайте слайдер и внутри еще три слайдера. В чем проблема? :)

Если аватарка у вас задается через тег img то вот так:

img {
  object-fit: cover;
  object-position: center;
}

Если через background:

.image {
  background: url() no-repeat center;
  background-size: cover;
}

А вообще если хотите получить нужный ответ, то присылайте ссылку на песочницу. Так будет лучше.

Самый простой и быстрый способ :)
https://jsfiddle.net/1yyqd6dr/