From dc32a35cfaf274c22d596d48e6559ea0b51637cc Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Thu, 21 Aug 2025 17:15:22 +0200 Subject: [PATCH] add a show more button --- src/components/Projects.jsx | 6 ++++++ src/index.css | 2 +- src/styles/Projects.css | 23 +++++++++++++++++++++++ src/styles/SingleProject.css | 7 ++++++- 4 files changed, 36 insertions(+), 2 deletions(-) create mode 100644 src/styles/Projects.css diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx index e4c1e78..fdbc113 100644 --- a/src/components/Projects.jsx +++ b/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() { +
+

+ Show more +

+
) } diff --git a/src/index.css b/src/index.css index 08a3ac9..1ab2071 100644 --- a/src/index.css +++ b/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; diff --git a/src/styles/Projects.css b/src/styles/Projects.css new file mode 100644 index 0000000..376f3d0 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/styles/SingleProject.css b/src/styles/SingleProject.css index c4a494f..a121d57 100644 --- a/src/styles/SingleProject.css +++ b/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 {