From 41cdb5837d2ae26e9c613b09644b9b535a9f86b5 Mon Sep 17 00:00:00 2001
From: Laurent <laurent0206.cr@gmail.com>
Date: Thu, 30 Oct 2025 14:54:32 +0100
Subject: [PATCH] Add animated menu cards

---
 html/index.html              | 51 ++++++++++++++++++++----
 html/projects.html           | 10 +++++
 html/scripts/CardTilter.js   | 48 +++++++++++++++++++++++
 html/styles/introduction.css | 41 +++++++++++++++++++
 html/styles/projects.css     | 74 ++---------------------------------
 html/styles/projects.css.bak | 76 ++++++++++++++++++++++++++++++++++++
 html/styles/style.css        | 10 +++--
 7 files changed, 230 insertions(+), 80 deletions(-)
 create mode 100644 html/projects.html
 create mode 100644 html/scripts/CardTilter.js
 create mode 100644 html/styles/projects.css.bak
diff --git a/html/index.html b/html/index.html
index 6e1eb1d..3a8e1d5 100644
--- a/html/index.html
+++ b/html/index.html
@@ -11,7 +11,7 @@
 
     <link rel="stylesheet" href="./styles/style.css">
     <link rel="stylesheet" href="./styles/introduction.css">
-    <link rel="stylesheet" href="./styles/projects.css">
+    <link rel="stylesheet" href="styles/projects.css">
 
     <title>Naaturel</title>
 
@@ -24,7 +24,7 @@
                 <h1> Naaturel </h1>
                 <hr/>
                 <h2 class="typer"></h2>
-            </div>
+                </div>
             <footer>
                 <p>Scroll down to get started</p>
                 <div><img src="./assets/arrow.svg" alt="arrow"></div>
@@ -32,9 +32,36 @@
         </section>
 
         <section id="projects">
-            <div class="content">
-                <div>
-                    <h1> Live projects </h1>
+                <div class="card-list">
+                    <a>
+                        <div class="card">
+                            <h2>My <span class="accentuated">projects</span></h2>
+                            <hr/>
+                            <p>Get a look at what I've worked on</p>
+                        </div>
+                    </a>
+
+                    <a>
+                        <div class="card">
+                            <h2><span class="accentuated">About</span> me</h2>
+                            <hr/>
+                            <p>Learn more about my skills and background</p>
+                        </div>
+                    </a>
+
+                    <a>
+                        <div class="card">
+                            <h2><span class="accentuated">Contacts</span></h2>
+                            <hr/>
+                            <p>Get in touch with me</p>
+                        </div>
+                    </a>
+            </div>
+
+
+            <!--<div class="content">
+                <div >
+                    <h1>Live projects</h1>
                     <hr/>
                     <div class="project-list">
                         <a href="https://unluckiest.naaturel.be"><img src="./assets/unluckiest.png" alt="unluckiest"></a>
@@ -44,7 +71,7 @@
                 </div>
                 <div class="separator"></div>
                 <div>
-                    <h1> Connect with me! </h1>
+                    <h1>Connect with me!</h1>
                     <hr/>
                     <div class="links">
                         <ul>
@@ -54,7 +81,7 @@
                         </ul>
                     </div>
                 </div>
-            </div>
+            </div>-->
         </section>
 
     </main>
@@ -71,4 +98,14 @@
     typer.start();
 </script>
 
+
+<script type="module">
+    import {CardTilter} from "./scripts/CardTilter.js";
+
+    const cards =  document.querySelectorAll('.card');
+
+    cards.forEach(card => { new CardTilter({card : card, tilt : 15, perspective : 650}) })
+
+</script>
+
 </html>
\ No newline at end of file
diff --git a/html/projects.html b/html/projects.html
new file mode 100644
index 0000000..566549b
--- /dev/null
+++ b/html/projects.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/html/scripts/CardTilter.js b/html/scripts/CardTilter.js
new file mode 100644
index 0000000..881222f
--- /dev/null
+++ b/html/scripts/CardTilter.js
@@ -0,0 +1,48 @@
+export class CardTilter {
+
+    /**
+     *
+     * @param card Card to be moved
+     * @param tilt max tilting angle in degree
+     * @param perspective perspective in pixels
+     */
+    constructor({card : card, tilt : tilt, perspective : perspective}) {
+        this.card = card;
+        this.tilt = tilt;
+        this.perspective = perspective;
+        this.watch()
+    }
+
+    watch(){
+        this.card.addEventListener('mousemove', (e) => {
+            const rotations = this.calculatePositions(e.clientX, e.clientY);
+            this.transform(rotations.x, rotations.y);
+        });
+
+        this.card.addEventListener('mouseleave', () => {
+            this.reset();
+        });
+    }
+
+    calculatePositions(cursorX, cursorY) {
+        const rect = this.card.getBoundingClientRect();
+        const x = cursorX - rect.left;
+        const y = cursorY - rect.top;
+
+        const percentX = (x / rect.width) - 0.5;
+        const percentY = (y / rect.height) - 0.5;
+
+        const rotateX = -percentY * this.tilt;
+        const rotateY = percentX * this.tilt;
+
+        return {x : rotateX, y : rotateY};
+    };
+
+    transform(rotationX, rotationY) {
+        this.card.style.transform = `translateY(-10px) perspective(${this.perspective}px) rotateX(${rotationX}deg) rotateY(${rotationY}deg) scale(1.05)`;
+    }
+
+    reset(){
+        this.card.style.transform = `rotateX(0deg) rotateY(0deg) scale(1)`;
+    }
+}
\ No newline at end of file
diff --git a/html/styles/introduction.css b/html/styles/introduction.css
index 7b422fa..7817c8d 100644
--- a/html/styles/introduction.css
+++ b/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; }
diff --git a/html/styles/projects.css b/html/styles/projects.css
index 89276d2..f072431 100644
--- a/html/styles/projects.css
+++ b/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%;
 }
 
diff --git a/html/styles/projects.css.bak b/html/styles/projects.css.bak
new file mode 100644
index 0000000..5cdc9c5
--- /dev/null
+++ b/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;
+    }
+}
+
diff --git a/html/styles/style.css b/html/styles/style.css
index 7c952a2..b030d76 100644
--- a/html/styles/style.css
+++ b/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);
 }
\ No newline at end of file
