feat: add infinite slider

ruanSignori · Apr 17, 2024 · ebc8f53 · ebc8f53
1 parent 459e88b
commit ebc8f53
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/index.html b/src/index.html
@@ -147,7 +147,7 @@
           <p class="title">
             Prazer, sou Ruan Signori. <br />
             Sou um Desenvolvedor <br />
-            <span class="gradient-text">Web Full Stack</span>
+            &lt; <span class="gradient-text">Web Full Stack</span> />
           </p>
           <p class="subtitle">
             Primeiramente, obrigado por acessar o meu portfólio. 
@@ -176,7 +176,7 @@
     <!-- Skills -->
     <div id="skills" class="page flex">
       <h2>Tecnologias que eu utilizo</h2>
-      <div class="flex infinite-scroll">
+      <div class="flex infinite-scroll max-width">
         <ul class="flex">
           <li>
             <i class="devicon-typescript-plain"></i>

diff --git a/src/styles/Skills.css b/src/styles/Skills.css
@@ -10,14 +10,15 @@
 #skills .infinite-scroll {
   position: relative;
   white-space: nowrap;
+  overflow: hidden;
 }
 
 #skills .infinite-scroll::before,
 #skills .infinite-scroll::after {
   content: "";
   position: absolute;
   top: 0;
-  width: 500px;
+  width: 200px;
   height: 100%;
 
   z-index: 2;
@@ -29,28 +30,28 @@
 
 .infinite-scroll::after {
   left: 0;
-  background-image: linear-gradient(to left, rgba(255, 255, 255, 0), var(--bg-primary) 40%);
+  background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 20% , var(--bg-primary) );
 }
 
 .infinite-scroll::before {
   right: 0;
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--bg-primary) 40%);
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, var(--bg-primary));
 }
 
 /* Logo slide*/
 #skills .infinite-scroll ul {
   display: inline-block;
-  animation: 12s infinite-scroll infinite linear;
+  animation: 15s infinite-scroll infinite linear;
 }
 
 #skills .infinite-scroll ul li {
   list-style: none;
   display: inline-block;
-  margin: 0 5rem;
+  margin: 0 4rem;
 }
 
 #skills ul li i {
-  font-size: 6em;
+  font-size: 5em;
   color: var(--gray-primary);
 }