origami1024

Вот вариант сокращения

<button class="modal-heading__button modal-heading__button-login"  v-if="view==='log'" @click="view='reg'">login</button>
<button class="modal-heading__button modal-heading__button-register"  v-else-if="view==='reg'" @click="view='3rd'">register</button>
<button class="modal-heading__button modal-heading__button-thirdOption"  v-else-if="view==='3rd'" @click="view='log'">the wae of the deval</button>

...
data(){
    return {
        view: 'log'
    }
}
...

вот песочница, если чо
https://codepen.io/origami1024/pen/bGbyWaO

UPD: еще сокращения

Что-то он маску не хавает.
Если выкинуть маску, то работает. И весит меньше)

<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
	<path d="M11.9826 4C9.93339 4 7.90628 4.80442 6.34377 6.36692C3.21874 9.49203 3.21874 14.5544 6.34377 17.6794C9.46879 20.8044 14.5312 20.8044 17.6562 17.6794C20.7813 14.5544 20.7813 9.49203 17.6562 6.36692C16.0937 4.80442 14.0318 4 11.9826 4V4ZM11.9826 5.11384C13.7441 5.11384 15.5053 5.78232 16.8557 7.13269C19.5563 9.83331 19.5563 14.1782 16.8557 16.8788C14.155 19.5795 9.81018 19.5795 7.10953 16.8788C4.40889 14.1782 4.40889 9.83331 7.10953 7.13269C8.45986 5.78232 10.2211 5.11384 11.9826 5.11384V5.11384ZM9.37203 8.03768L8.04934 9.39518L10.6947 12.0057L8.04934 14.6511L9.37203 15.9738L12.0174 13.3632L14.628 15.939L15.9507 14.6163L13.3401 12.0057L15.9507 9.39518L14.628 8.07249L12.0174 10.6831L9.37203 8.03768Z" fill="black"/>
</svg>

Вота несколько вариантов на svg

В самом начале у тебя идет

<svg viewbox="0 0 10 6.7" xmlns="http://www.w3.org/2000/svg">

Здесь в параметре viewbox задаются внутренние координаты (от 0 до 10 по оси X) и от (0 до 6.7 по оси Y).
Тоесть, например, по оси X твои 170px переводятся во внутренних координатах в 11 единиц(от 0 до 10).
Координаты у элементов внутри svg задаются в этих внутренних единицах.

Например, вот первый элемент в маске (прямоугольник):

<rect x=1 y=1 width="8" height="5" fill="white"></rect>

Он начинается по x с координаты 1 (не 0) и по y тоже с не нулевой координаты.
Width - длина в этих внутр единицах, и тд. Поизменяй эти цифры, посмотри что измениться, сам всё поймешь.
У кругов в маске (circle) координаты и радиус также заданы.

Если есть возможность на CSS управлять этими размерами было бы супер.

Да, просто даешь элементам внутри svg имя класса или id, чтобы выглядело вот так (class="circle1"):

<circle class="circle1" cx="9" cy="1" r="1" fill="black"></circle>

И потом в css:

.circle1{
  r: 3;
  cx: 5;
}

Советую и то и то. Официально ты наёмник. А вечером и на выходных фрилансер (Проблема в том, что большие проекты новичкам доверять - большой риск для заказчика, даже не считая большой конкуренции. Нужн брать маленькие проекты на 1 вечер, участвуя в бесчеловечной конкуренции. Конкуренция делает человека профессионалом).

P. S. Времени на девушку/жену не будет, придется её бросить, либо позволить ей любовников.

Можно было gulp еще до html и css изучить, если сильно хотелось

1. Насчет c++ советую забыть про это и делать сети на python. Python - самый распространенный язык среди data scientists и вообще в теме с нейросетями. Кроме того, Python - язык намного легче в изучении, на это можно вообще не тратить время, поймете походу. Можно будет почти полностью забыть о программировании после изучения нескольких больших нейрофреймворков, и полностью погрузится в имплементацию именно нейростей.

2. Насчет изучения сетей - можно много где начать, но если хотите конкурировать с профессионалами, посоветую самого главного авторитета в области - Джофри Хинтона.
Первой краткосрочной целью предлагаю взять изучение его вклада в область.
Первой долгосрочной целью предлагаю взять прочтение всех его статей в оригинале и написание критики на эти работы.
Кроме того из первостепенных целей - история развития области в целом - от одного персептрона к глубоким сетям, с реализацией решения значимых задач, которые эти промежуточные сети позволили решить, и выработка понимания, в чем был прорыв.

Можно задавать высоту псевде в css через переменную.
А из js менять эту переменную.

.theDude{
    --height: 100%;
}
.theDude:before{
	height: var(--height);
}

let el = document.getElementsByClassName('theDude')[0]
el.style.setProperty('--height','200%')

https://codepen.io/origami1024/pen/dyyOoGb

Вота на псевдоэлементах если что

.theDude{
  position: relative;
}
.theDude:before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transform: translate(20px, 20px);
  background-color: gray;
}
.theDude:after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -2;
  transform: translate(40px, 40px);
  background-color: lightgray;
}

Можно в твоем решении использовать flex св-во order каждому блоку
order: n;

Вота на js

let els = document.getElementsByClassName('element')
document.addEventListener("scroll",e=>{
  
  for (let i = 0; i<els.length; i++) {
    if ((els[i].getBoundingClientRect().top>390) & (els[i].getBoundingClientRect().top<460)) {
        els[i].classList.add('bigusElementus')
    } else els[i].classList.remove('bigusElementus')
  }
})

На событии scroll проходишься циклом по всем элементам.
Убираешь у всех уникальный класс.
Элементу, что по координатам в центре добавляешь уникальный класс.

Это убрать:

.check_radio{
  margin-top: .4em;
}

Это добавить:

.label{
  display: flex;
  align-items: center;
}

Вота, пофиксил твои круги, нарисованные через path,
У тебя два верхних path с названиями oval и oval2 съезжали на 80 точек вниз
Изспользовал transform="translate(0,-80)" в двух этих путях

https://codepen.io/origami1024/pen/PooNdGz

правда вот эти овал 3-12 вообще не показываются, они и должны быть невидимыми? Если принцип с транслэйтом понятен, сам уже доделай, ато мне нужно идти петь караоке срочно(

.IuSSD{
  display: flex;
}

Класс в бутстрапе .text-center

height: auto не анимируется.

Используй max-height: 9001px, будет работать так же как height: auto;
https://jsfiddle.net/xq4akve6/

UPD. Вместо 9001px, нужно ставить что-то близкое к реальной height этого элемента, иначе во время анимации появляется задержка.

Эффект телевизионных помех (tv glitch animation)