Added ripple effect on buttons

and scrollbar on projects

Author: slmnsh

index.html

@@ -90,14 +90,18 @@ <h1>Hi, I'm Salman</h1>
             </div>
         </div>
         <div class="links">
-            <a href="{{githubUrl}}">Github Link</a>
+            <div class="link">
+                <a href="{{githubUrl}}">Github Link</a>
+            </div>
             {{#url}}
+            <div class="link">
                 <a href="{{url}}">Visit Site</a>
+            </div>
             {{/url}}
         </div>
     </div>
 </script>
 <script src="https://unpkg.com/mustache@latest"></script>
-<script src="./main.js"></script>
 <script src="./projects.js"></script>
+<script src="./main.js"></script>
 </html>

main.css

@@ -138,13 +138,20 @@ nav {
                 flex-wrap: wrap;
                 flex-direction: column;
                 width: 25%;
-                overflow-y: scroll;
+                overflow-y: hidden;
                 scroll-snap-type: x mandatory;
                 height: 500px;
-                scrollbar-width: none;
+                scrollbar-width: thin;
+                scrollbar-color: var(--border-color) transparent;
                 &::-webkit-scrollbar {
-                    display: none;
+                    height: 5px;
+                    background-color: transparent;
                 }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 10px;
+                    background-color: var(--border-color);
+                }
+                
             }
             .project {
                 display: flex;
@@ -169,13 +176,33 @@ nav {
                     font-weight: bolder;
                 }
                 .links {
-                    margin: 30px auto 20px auto;
+                    display: flex;
+                    margin: 30px auto 20px auto;                  
                 }
-                a {
+                .link {
                     border: 1px solid var(--border-color);
-                    padding: 10px;
+                    position: relative;
                     border-radius: 5px;
                     margin: 0 5px;
+                    overflow: hidden;
+                    cursor: pointer;
+                    user-select: none;
+                    a {
+                        display: block;
+                        padding: 10px;
+                    }
+                    .ripple {
+                        position: absolute;
+                        background-color: var(--border-color);
+                        opacity: .5;
+                        height: 250px;
+                        width: 250px;
+                        border-radius: 50%;
+                        pointer-events: none;
+                        border: 1px solid var(--border-color);
+                        animation: ripple 1.5s;
+                        transform: translate(-50%, -50%);
+                    }
                 }
             }
         }
@@ -203,6 +230,20 @@ nav {
         }
     }
 }
+@keyframes ripple {
+    0% {
+        height: 0px;
+        width: 0px;
+        opacity: 1;
+    }
+    80% {
+        height: 250px;
+        width: 250px;
+    }
+    100% {
+        opacity: 0;
+    }
+}
 
 
 @media (max-width: 768px){

main.css.map

@@ -30,4 +30,17 @@ request.onload = () => {
             projectList.innerHTML += rendered
         }
     });
+    linkBtn = document.querySelectorAll(".project .links .link")
+    ripple = document.createElement("div")
+    ripple.classList.add("ripple")
+    linkBtn.forEach(link => {
+        link.addEventListener("click", function (e) {
+            ripple.style.left = e.layerX + "px"
+            ripple.style.top = e.layerY + "px"
+            e.target.appendChild(ripple)
+            ripple.addEventListener("animationend", ()=>{
+                ripple.remove()
+            })
+        })
+    })
 }