add a show more button

src/components/Projects.jsx

@@ -1,4 +1,5 @@
 import SingleProject from "./SingleProject.jsx";
+import "../styles/Projects.css"
 function Projects() {
     const desc = "A platform for creating and sharing code snippets with a clean and intuitive design. It allows you to create, share, and discover code snippets with ease."
     return (
@@ -7,6 +8,11 @@ function Projects() {
             <SingleProject image="landscape" title="Portfolio" description={desc} skills={['HTML', 'CSS', 'React', 'Git']} color="orange" />
             <SingleProject image="landscape" title="SAE C++" description={desc} skills={['C++', 'Git']} color="purple" />
             <SingleProject image="landscape" title="Proxmox" description={desc} skills={[]} color="green" />
+            <div className="show-more-container">
+                <p className="show-more-link">
+                    Show more
+                </p>
+            </div>
         </section>
     )
 }

src/index.css

@@ -5,7 +5,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #121212;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

src/styles/Projects.css

@@ -0,0 +1,23 @@
+.show-more-container {
+    text-align: center;
+    margin-top: 2rem;
+}
+
+.show-more-link {
+    display: inline-block;
+    color: #B0B0B0;
+    border: 1px solid #B0B0B0;
+    background-color: transparent;
+    padding: 12px 28px;
+    border-radius: 8px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+.show-more-link:hover {
+    background-color: #B0B0B0;
+    color: #1E1E1E;
+    transform: translateY(-3px);
+    cursor: pointer;
+}

src/styles/SingleProject.css

@@ -57,11 +57,16 @@
 
 
 .single-project-link {
-    color: #EAEAEA;
+    color: #B0B0B0;
     text-decoration: none;
     font-weight: 600;
 }
 
+.single-project-link:hover {
+    cursor: pointer;
+    color: #EAEAEA;
+}
+
 
 
 .single-project-middle {