Настройка CSS с помощью JavaScript не ведет себя гладко

Question

Я сейчас создаю персональное резюме и размещаю его вместе с heroku. Я использую Jquery, и моя проблема в том, что когда я занимаюсь локальной разработкой, моя функция window.ready, которая устанавливает некоторые CSS, очень плавная, однако, когда я ее развертываю, она становится очень глючной и медленной. Я попытался добавить преобразование: translateZ (0); чтобы улучшить его, и я попытался минимизировать мой JavaScript. Код ниже, если кто-нибудь знает, что делает его таким медленным. Я был бы признателен за любую помощь. Спасибо.

  $(window).ready(() => {
  $(window).width() > 768 &&
    ((startPos = parseInt(
      $(".one")
        .css("top")
        .slice(0, 4)
    )),
    $(".name-container").css({ "transition-duration": "2s", opacity: "1" }),
    $(".home-mid-text").css({ "transition-duration": "2s", opacity: "1" }),
    $("#nav").css({ "transition-duration": "2s", "margin-left": "135px" }),
    $(".container").css({
      "transition-duration": "2s",
      padding: "50px 140px"
    }));
}),
  $("#date-2019").hover(
    () => {
      $("#date-2019").css({
        "transition-duration": "1.2s",
        transform: "rotate(0)"
      });
    },
    () => {
      $("#date-2019").css({ transform: "rotate(90deg)" });
    }
  );

Вот ссылка на страницу http://kaiferrall.herokuapp.com/