Obs: não consegui carregar os icons pq tbm tentei encurtar o código, mas tem como ver o projeto no link abaixo e aqui no stack ao clicar nos cards as descrições ainda aparecem.
Os cards das habilidades é para exibirem uma descrição quando clicados. Está funcionando perfeitamente no desktop, no devtools também funciona quando configuro para mobile, no entanto, quando hospedo no git e abro pelo celular a descrição não aparece, parece ser realmente algo com o touch pois quando clico, o Safari fica tentando "selecionar" o card como se ele fosse um texto (e de fato o ícone é).
//selecionando
const cardList = document.querySelectorAll('.card');//nodeList
const descriptionList = document.querySelectorAll('.description');//nodeList
const field = document.querySelector('.dynamic-text');
for(let i = 0; i < cardList.length; i++){
//elementos recebem seus índices individualmente
const card = cardList[i];
const description = descriptionList[i];
//a função
function showDescription(){
field.innerHTML = description.innerHTML;
}
//colocando função anonima - que chama outra função dentro - num evento de click
card.onclick = function(){
showDescription(description);
}
}
.cards .card1 p.description.description1,
.cards .card2 p.description.description2,
.cards .card3 p.description.description3,
.cards .card4 p.description.description4,
.cards .card5 p.description.description5,
.cards .card6 p.description.description6{
visibility: hidden;
display: flex;
}
.cards .card1,
.cards .card2,
.cards .card3,
.cards .card4,
.cards .card5,
.cards .card6 {
font-size: 40pt;
width: 80px;
height: 80px;
background-color: rgb(0, 0, 0);
border-radius: 10%;
padding-top: 15px;
margin: 10px 40px 0 0;
box-shadow: 5px 5px 15px #aaaaaa;
}
<script src="https://kit.fontawesome.com/44fcfe4b8a.js" crossorigin="anonymous"></script>
<div id="skills-container">
<h1 data-aos="fade-right">Habilidades</h1>
<div class="skills-content">
<div class="cards">
<div class=" card card1" onclick="showDescription('.description1')" data-aos="fade-right">
<i class="fa-brands fa-html5"></i>
<p class="description description1">HTML(Linguagem de Marcação de HiperTexto) é uma linguagem de marcação utilizada na construção de páginas na Web.</p>
</div>
<div class="card card2" onclick="showDescription('.description2')" data-aos="fade-right">
<i class="fa-brands fa-css3"></i>
<p class="description description2">CSS(Folhas de Estilo em Cascata) é uma linguagem de estilo usada para descrever a apresentação de um documento escrito em HTML.</p>
</div>
<div class="card card3" onclick="showDescription('.description3')" data-aos="fade-right">
<i class="fa-brands fa-js"></i>
<p class="description description3">JavaScript (às vezes abreviado para JS) é uma linguagem leve, interpretada e baseada em objetos com funções de primeira classe, mais conhecida como a linguagem de script para páginas web.</p>
</div>
<div class="card card4" onclick="showDescription('.description4')" data-aos="fade-right">
<i class="fa-solid fa-comments"></i>
<p class="description description4">Habilidade de comunicação.</p>
</div>
<div class="card card5" onclick="showDescription('.description5')" data-aos="fade-right">
<i class="fa-solid fa-people-group"></i>
<p class="description description5">Habilidade para trabalhar em grupo.</p>
</div>
<div class="card card6" onclick="showDescription('.description6')" data-aos="fade-right">
<i class="fa-solid fa-pen-clip"></i>
<p class="description description6">Habilidade com escrita.</p>
</div>
</div>
<p class="dynamic-text">/*Clique em cima para ver uma breve descrição da habilidade*/</p>