Co zauważyłem ale pewnie coś by się jeszcze znalazło :
1) Patrzę na ten kod w vue
openModal3: function() {
this.buttonStyle1 = 'display:none;',
this.modalStyle1 = 'display:none;',
this.buttonStyle2 = 'display:none;';
this.modalStyle2 = 'display:none;',
this.buttonStyle3 = 'display:none;',
this.modalStyle3 = 'display:flex;',
this.buttonStyle4 = 'display:none;',
this.modalStyle4 = 'display:none;',
this.lnStyle = 'display:none;',
this.ghStyle = 'display:none;',
this.fbStyle = 'display:none;',
this.instaStyle = 'display:none;',
this.twitterStyle = 'display:none;',
this.backgroundStyle = 'background: rgba(0,0,0, 0.45);'
}
Jest bardzo podobny do kodu dla metody openModal4 openModal2 it. Uważam, że lepiej byłoby zrobić coś w stylu jedna funkcja która ma np. 1 parametr i aktywuje element o podanym numerze. Takie rozwiązanie podpada pod łamanie DRY (don't repeat yourself)
2) Dałbym element footer bo chyba coś takiego masz na stronie
3) Nie dodawaj ikonek za pomocą <i> - poczytaj w internecie dlaczego.
4)Jeżeli w elemencie button masz tylko literę x to dla kogoś kto korzysta z czytnika ekranowego może nie być jasne co dany button robi