Add animated menu cards

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>