Add animated menu cards

html/styles/introduction.css

@@ -21,6 +21,47 @@ hr {
     animation: blink 800ms infinite;
 }
 
+.card-list
+{
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    gap: 15px;
+    min-width: 375px;
+    height: 75%;
+    overflow: scroll;
+    padding: 0 20px 0 20px;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+
+    height: 350px;
+    width: 275px;
+
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+
+    padding: 15px;
+
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    will-change: transform;
+}
+
+.card:hover {
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+}
+
+.card p
+{
+    opacity: 0.65;
+}
+
+
 @keyframes blink {
     from { opacity: 0; }
     to { opacity: 1; }

html/styles/projects.css

@@ -1,75 +1,9 @@
-#projects .content {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    align-items: start;
-    width: 75%;
-}
-#projects .content div hr {
-    margin : 25px 0 25px 0;
-}
-
-
-.project-list, .links {
-    display: flex;
-    flex-direction: row;
-    gap : 1rem;
-    margin-bottom: 2rem;
-}
-
-.project-list img {
-    width: 215px;
-    border : solid 1px black;
-    border-radius: 15px;
-    transition: transform 0.2s ease-in-out;
-}
-
-.project-list img:hover {
-    transform: scale(1.1);
-}
-
-
-.links {
-    display: flex;
-    height: 100%;
-    font-size: 1.3rem;
-}
-
-.links ul {
-    display: flex;
-    flex-direction: column;
-    gap: 40px;
-    padding : 0;
-    margin: 0;
-}
-
-.links ul li {
+#projects {
     display: flex;
     flex-direction: row;
     align-items: center;
-
-    padding: 0.5rem 1rem;
-    border-radius: 10px;
-    transition: background 0.3s ease;
-}
-
-.links ul li:hover {
-    background: rgba(0, 0, 0, 0.1);
-}
-
-
-.links ul li::before {
-    content: ">";
-    margin-right: 1rem;
-}
-
-.links ul li:hover::before {
-    animation: blink 1s step-start infinite;
-}
-
-@keyframes blink {
-    50% {
-        opacity: 0;
-    }
+    justify-content: center;
+    width: 95%;
+    height: 95%;
 }
 

html/styles/projects.css.bak

@@ -0,0 +1,76 @@
+#projects .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: start;
+    width: 75%;
+}
+
+#projects .content div hr {
+    margin : 25px 0 25px 0;
+}
+
+
+.project-list, .links {
+    display: flex;
+    flex-direction: row;
+    gap : 1rem;
+    margin-bottom: 2rem;
+}
+
+.project-list img {
+    width: 215px;
+    border : solid 1px black;
+    border-radius: 15px;
+    transition: transform 0.2s ease-in-out;
+}
+
+.project-list img:hover {
+    transform: scale(1.1);
+}
+
+
+.links {
+    display: flex;
+    height: 100%;
+    font-size: 1.3rem;
+}
+
+.links ul {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+    padding : 0;
+    margin: 0;
+}
+
+.links ul li {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    padding: 0.5rem 1rem;
+    border-radius: 10px;
+    transition: background 0.3s ease;
+}
+
+.links ul li:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+
+.links ul li::before {
+    content: ">";
+    margin-right: 1rem;
+}
+
+.links ul li:hover::before {
+    animation: blink 1s step-start infinite;
+}
+
+@keyframes blink {
+    50% {
+        opacity: 0;
+    }
+}
+

html/styles/style.css

@@ -1,5 +1,5 @@
 :root {
-
+    --primary-color: #3dae15;
 }
 
 ::-webkit-scrollbar {
@@ -13,8 +13,8 @@
 }
 
 html, body {
-    height: 100vh;
-    width: 100vw;
+    height: 100dvh;
+    width: 100dvw;
 }
 
 html, body, main, section, section div, footer {
@@ -57,4 +57,8 @@ ul li{
 
 ul li a {
     text-decoration: none;
+}
+
+.accentuated {
+    color: var(--primary-color);
 }