Estoy trabajando en mi portafolio de título, el cual consiste en una landing page con páginas horizontales en WordPress utilizando un tema vacío (underscores). Sin embargo, estoy enfrentando un problema con los saltos bruscos que ocurren al hacer clic en los íconos de flechas y enlaces del menú de navegación para ir a la siguiente sección. Aunque he utilizado la propiedad "scroll-behavior: smooth;" en el article que tiene la clase contenedor para suavizar el desplazamiento, este problema persiste en navegadores distintos a Firefox. Además, he intentado probar diferentes librerías de desplazamiento sin éxito.
https://arabello.laboratoriodiseno.cl/portafolio/
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/
html, body {
font-size: 100%;
}
/*
* =================== HEADER ===================
*/
.bg-body-tertiary{
background-color: transparent;
}
div#navbarNav{
-webkit-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: end;
}
ul#menu-principal-menu{
margin: 0;
text-align: center;
}
a.custom-logo-link{
max-width: 150px;
height: auto;
}
div.site-branding{
background-color: #F8F9FA;
}
/*
* =================== MAIN ARTICLE ===================
*/
article.contenedor {
display: -ms-grid;
display: grid;
-ms-grid-columns: (100vw)[3];
grid-template-columns: repeat(3, 100vw);
grid-auto-rows: auto;
overflow-x: scroll;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
background-image: url('../img/fondo-portafolio.jpg');
margin-bottom: 0;
scroll-behavior: smooth;
}
.slide {
scroll-snap-align: center;
}
.page{
margin-bottom: 0;
}
.content-card-portfolio, .contenedor-habilidades{
gap: .5em;
}
.prueba{
width: 50%;
margin: 0 auto;
position: relative;
margin: auto;
}
.prueba2{
width: 65%;
margin: 0 auto;
position: relative;
}
a.flechaIzq{
position: absolute;
top: 50%;
left: -20%;
font-size: 3rem;
display: block;
}
a.flechaDerec{
position: absolute;
top: 50%;
right: -20%;
font-size: 3rem;
display: block;
}
.verProyecto{
align-items: center;
background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
border: 0;
border-radius: 8px;
box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
box-sizing: border-box;
color: #FFFFFF;
display: flex;
font-family: Phantomsans, sans-serif;
font-size: 20px;
justify-content: center;
line-height: 1em;
max-width: 100%;
min-width: 140px;
padding: 3px;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
cursor: pointer;
}
.verProyecto:active, .verProyecto:hover{
outline: 0;
}
.verProyecto span{
background-color: rgb(5, 6, 45);
padding: 16px 24px;
border-radius: 6px;
width: 100%;
height: 100%;
transition: 300ms;
}
.verProyecto:hover span {
background: none;
}
/*
* =================== MAQUINA ESCRIBIR SECCION1 MAIN ===================
*/
.maquinaEscribir{
white-space: nowrap;
border-right: 4px solid;
width: 19ch;
-webkit-animation: typing 2s steps(19), blink .5s infinite step-end alternate;
animation: typing 2s steps(19), blink .5s infinite step-end alternate;
overflow: hidden;
}
@-webkit-keyframes typing {
from {width: 0}
}
@keyframes typing {
from {width: 0}
}
@-webkit-keyframes blink {
50% {border-color: transparent}
}
@keyframes blink {
50% {border-color: transparent}
}
@media screen and (max-width: 992px) {
.contenedor{
display: block;
}
a.flechaIzq, a.flechaDerec{
display: none;
}
.prueba, .prueba2{
width: 100%;
}
}
<?php
/**
* Template part for displaying page slide in page.php
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package portafolio
*/
?>
//este article tiene la clase contenedor para que vean los estilos que tiene
<article id="post-<?php the_ID(); ?>" <?php post_class('contenedor row'); ?>>
<div class="prueba" id="inicio">
<a href="#contacto" class="flechaIzq smooth-scroll">
<i class="fa-solid fa-arrow-left"></i>
</a>
<section class="slide">
<header>
<h1 class="maquinaEscribir">Hola, soy Arath Abello.</h1>
</header>
<article>
<header>
<h2>Soy un desarrollador web frontend y diseñador del instituto DuocUC.</h2>
</header>
<p>Soy un apasionado por la tecnología y los videojuegos. Desde mi adolescencia me hacía preguntas sobre ¿Cómo estaban creados los sitios web? Quería explorar ese terreno desconocido y emocionante. Y qué mejor que satisfacer la curiosidad con el autoconocimiento adquirido por mi propia voluntad y dar lo mejor de mí para poder cumplir uno de mis objetivos. 😀</p>
<div class="row m-0 justify-content-between contenedor-habilidades">
<?php include get_template_directory() . '/assets/modulos/modulo-portafolio/carpeta-habilidades/loop-habilidades.php' ?>
</div>
</article>
</section>
<a href="#proyectos" class="flechaDerec smooth-scroll">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<div class="prueba2" id="proyectos">
<a href="#inicio" class="flechaIzq smooth-scroll">
<i class="fa-solid fa-arrow-left"></i>
</a>
<section class="slide">
<header>
<h2>Proyectos</h2>
</header>
<article>
<header>
<h3>Revisa más información de mis proyectos pulsando el botón 'Leer más' o visita y prueba el proyecto completo pulsando el botón 'Ver proyecto'.</h3>
</header>
<div class="row m-0 content-card-portfolio">
<?php include get_template_directory() . '/assets/modulos/modulo-portafolio/carpeta-portafolio/loop-portafolio.php' ?>
</div>
</article>
</section>
<a href="#contacto" class="flechaDerec smooth-scroll">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<div class="prueba" id="contacto">
<a href="#proyectos" class="flechaIzq smooth-scroll">
<i class="fa-solid fa-arrow-left"></i>
</a>
<section class="slide">
<header>
<h2>Contacto</h2>
</header>
<article>
<header>
<h3>Para todas las consultas o solicitudes de mis servicios, te invito a llenar este formulario. ✍ </h3>
</header>
<form action="#" method="post" class="formulario">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Escribe tu email" name="email">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Mensaje</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="mensaje" placeholder="Escribe tu mensaje"></textarea>
</div>
<div>
<button type="submit" class="btn btn-primary">Enviar</button>
</div>
</form>
</article>
</section>
<a href="#inicio" class="flechaDerec smooth-scroll">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</article><!-- #post-<?php the_ID(); ?> -->