RAX7

Если количество дочерних элементов сетки всегда известно, то можно построить такую ломаную сетку на гридах, добавив в неё вспомогательные колонки/строки и прописав каждому элементу его расположение в сетке.

.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;
}

метод sort не правильно используется

- return aDist < bDist;
+ return aDist - bDist;

скорее всего это и есть причина такого поведения. Результатом aDist < bDist всегда будет либо true, либо false, что в данном контексте будет трактоваться как 1 и 0, т.е. aDist всегда больше или равен bDist и никогда не меньше него. Из-за разных используемых алгоритмов сортировки, разные движки сходят с ума по разному.

Вариант с сортировкой по timestamp:

function setArrayAtPath(obj, path) {
  return path.reduce((acc, val, i) => {
    acc[val] ??= (i === path.length - 1) ? [] : {};
    return acc[val];
  }, obj);
}

const result = links.reduce((acc, val) => {
  const fullPath = val.url.split('/');
  const path = fullPath.slice(0, -1);
  const dir = setArrayAtPath(acc, path);

  let insertIdx = dir.findIndex(o => o.timestamp > val.timestamp);
  insertIdx = insertIdx === -1 ? dir.length : Math.max(0, insertIdx - 1);

  dir.splice(insertIdx, 0, { ...val });
  return acc;
}, {});

console.log(result);

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

Свойство 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 и там уже сделать маску, например как в этом примере.

.swiper {
    width: 100%;
    height: 100%;
    position: initial; / * <-- убрать */
  }

header{
    display: block;
    padding: 10px;
    position: fixed;
    /* ........... */
    z-index: 1;  / * <-- сделать больше */

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

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

<template>
  <swiper
    :navigation="{
      prevEl: prev,
      nextEl: next,
    }"
    :modules="modules"
    class="mySwiper"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
  <div ref="prev" class="swiper-button-prev">prev</div>
  <div ref="next" class="swiper-button-next">next</div>
</template>
<script>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation } from 'swiper';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const prev = ref(null);
    const next = ref(null);
    return {
      modules: [Navigation],
      prev,
      next,
    };
  },
};
</script>

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