Added scroll-down button

Author: neeoder

home-style.css

@@ -107,6 +107,30 @@ main {
     text-align: center;
 }
 
+.scroll-button {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: #1e1b1e;
+    border-color: aqua;
+    border-width: thick;
+    cursor: pointer;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.scroll-button ion-icon {
+    color: white;
+    font-size: 24px;
+    transform: rotate(180deg);
+}
+
 .project_text {
     color: aquamarine;
     left: 50%;

home.html

@@ -26,13 +26,27 @@ <h2>Logo</h2>
             <div class="bg-text">
                 <h1>Welcome to Neeoder-code</h1>
             </div>
+            <button class="scroll-button">
+                <ion-icon name="chevron-up-outline"></ion-icon>
+            </button>
         </div>
         <div class="project_section">
             <div class="project_text">
                 <h1>My projects</h1>
             </div>
         </div>
     </main>
+    <script>
+        const scrollButton = document.querySelector('.scroll-button');
+        const targetSection = document.querySelector('.project_section');
+
+        scrollButton.addEventListener('click', () => {
+            window.scrollTo({
+                top: targetSection.offsetTop,
+                behavior: 'smooth',
+            });
+        });
+    </script>
     <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
     <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
 </body>