RAX7

Ширину/высоту менять в css (строки 71-72), вендорные префиксы были удалены за ненадобностью и чтобы не замусоривали код.

border-image

Единицы измерения добавь

@keyframes animeSvg {
  0% {
    stroke-dashoffset: calc(var(--stroke-dash) * 3px);
  }
  50% {
    stroke-dashoffset: calc(var(--stroke-dash) * 2px);
  }
  100% {
    stroke-dashoffset: calc(var(--stroke-dash) * 1px);
  }
}

Держи, сделал небольшой набросок.

а если они касаются друг друга, они приобретают цвет другого элемента

Эту часть уже лень делать. Хотя это не сложно, нужно только добавить еще две таких же кляксы и посчитать расстояние между их центрами, что бы понять пересекаются ли они и нужно ли у них менять цвет.

.grid {
    display: grid;
    gap: 15px;
    grid-template-columns: 475px 180px 475px;
    justify-content: center;
}
 
.grid__item {
    background-color: #000;
    height: 320px;
}

.grid__item:nth-child(odd) {
  grid-column-end: span 2;
}

.grid__item:nth-last-child(-n + 2) {
  grid-column: 1 / span 1;
}

.grid__item:nth-last-child(-n + 1) {
  grid-column: 2 / span 2;
}

Свойство animation-duration неанимируемое. И да, придется писать костыль на js

index.html
- <link rel="stylesheet" href="/color.css">
+ <link rel="stylesheet" href="/resume/color.css">

.accordion__wrapper.active .accordion__button::after {
    transform: translateY(-50%) rotate(180deg);
}

При сплошном фоновом цвете хорошо работает border-image

При более сложных случаях - фон можно засунуть в SVG и там уже сделать маску, например как в этом примере.

1. Кривую проще нарисовать на js. Добавить в разметку элементов, которые будут служить опорными точками для кривой и построить сглаженную кривую, например этим способом
   
2. Перемещать точку по кривой можно с помощью метода getPointAtLength - он вернет координаты точки
   
3. Для того чтобы точка оставалась во вьюпорте и не уезжала за его границы нужно отключить нативный скрол и скролить страницу так, чтобы точка была вертикально по центру
   

https://9elements.github.io/fancy-border-radius/

Чтобы грани куба зависели и от ширины и от высоты нужно взять минимум/максимум между width и height. CSS calc такое не умеет делать, но в некоторых случаях могут пригодиться единицы измерения vmin/vmax

https://developer.mozilla.org/en-US/docs/Web/SVG/E...

Не забудь ставить на паузу видео слайдах которые не видны в данный момент.