Update some stuff

html/index.html

@@ -40,18 +40,22 @@
                         </section>
 
                         <section>
-                        <h3>My <span class="accentuated">background</span></h3>
+                            <h3>My <span class="accentuated">background</span></h3>
-                        <p>
+                            <p>
-                            Bla bla bla lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                                I hold a Bachelor's degree in Full-Stack Development,
-                        </p>
+                                where I gained solid experience in both front-end and
+                                back-end technologies. I am currently pursuing a
+                                Master’s degree to further strengthen my skills and
+                                deepen my expertise in software development, DevOps,
+                                machine learning, embedded systems, and network administration.
+                            </p>
                         </section>
 
                         <section>
-                        <h3>My <span class="accentuated">skills</span></h3>
+                            <h3>My <span class="accentuated">skills</span></h3>
-                        <p>
+                            <p>
-                            Java, C#, Python, JavaScript / TypeScript, Node.js, Vue, PostgreSQL, Docker.
+                                Java, C#, Python, JavaScript / TypeScript, Node.js, Vue, PostgreSQL, Docker.
-                        </p>
+                            </p>
-
                         </section>
                         <section>
                         <h3><span class="accentuated">Connect</span> with me</h3>
@@ -84,6 +88,7 @@
                 <h1>Check out my live projects</h1>
 
                 <div class="card-list">
+
                     <div class="card punched-card">
                         <a href="https://unluckiest.naaturel.be">
                             <img src="./assets/unluckiest.png" class="thumbnail" alt="Unluckiest">
@@ -110,61 +115,7 @@
 
                 </div>
             </div>
-
+        </div>
-
-                <!--<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>-->
-            <!--<footer>
-                <p>Scroll down to get started</p>
-                <div><img src="./assets/arrow.svg" alt="arrow"></div>
-            </footer>-->
-
-            <!--<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>
-                        <a href="https://letsmeet.naaturel.be"><img src="./assets/letsmeet.png" alt="letsmeet"></a>
-                    </div>
-
-                </div>
-                <div class="separator"></div>
-                <div>
-                    <h1>Connect with me!</h1>
-                    <hr/>
-                    <div class="links">
-                        <ul>
-                            <li><a href="https://github.com/Naaturel/">Github</a></li>
-                            <li><a href="https://x.com/naaturel_/">X (Twitter)</a></li>
-                            <li><a href="https://www.instagram.com/naaturel_/">Instagram</a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>-->
     </main>
 
 

html/projects.html

@@ -3,8 +3,43 @@
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="./styles/style.css">
+    <link rel="stylesheet" href="./styles/introduction.css">
+    <link rel="stylesheet" href="./styles/mobile.css">
+
 </head>
 <body>
+<main>
+
+    <div class="container" style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+
+        <div class="card">
+            <h2>Hello there</h2>
+            <hr/>
+            <h3> I'm a floating card </h3>
+            <p> Try to hover me ! </p>
+        </div>
+
+    </div>
+
+</main>
 
 </body>
+
+<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>

html/scripts/CardTilter.js

@@ -15,8 +15,11 @@ export class CardTilter {
 
     watch(){
         this.card.addEventListener('mousemove', (e) => {
-            const rotations = this.calculatePositions(e.clientX, e.clientY);
+            const rect = this.card.getBoundingClientRect();
-            this.transform(rotations.x, rotations.y);
+            const positions = this.calculatePositions(rect, e.clientX, e.clientY);
+            const percentages = this.calculatePercentage(rect, positions.x, positions.y);
+
+            this.transform(percentages.x, percentages.y);
         });
 
         this.card.addEventListener('mouseleave', () => {
@@ -24,22 +27,28 @@ export class CardTilter {
         });
     }
 
-    calculatePositions(cursorX, cursorY) {
+    calculatePositions(rect, cursorX, cursorY) {
-        const rect = this.card.getBoundingClientRect();
         const x = cursorX - rect.left;
         const y = cursorY - rect.top;
-
+        return {x : x, y : y};
-        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) {
+    calculatePercentage(rect, cursorX, cursorY) {
-        this.card.style.transform = `translateY(-5px) perspective(${this.perspective}px) rotateX(${rotationX}deg) rotateY(${rotationY}deg) scale(1.02)`;
+        const percentX = ((cursorX / rect.width) - 0.5).toFixed(2);
+        const percentY = ((cursorY / rect.height) - 0.5).toFixed(2);
+        return {x : percentX, y : percentY};
+    }
+
+    transform(percX, percY) {
+
+        const rotationX = -percY * this.tilt;
+        const rotationY = percX * this.tilt;
+
+        this.card.style.transform = `
+        perspective(${this.perspective}px) 
+        rotateX(${rotationX}deg) 
+        rotateY(${rotationY}deg) 
+        scale(1.02)`;
     }
 
     reset(){

html/styles/introduction.css

@@ -57,6 +57,10 @@
     line-height: 1.25rem;
 }
 
+.introduction-text p {
+    text-align: justify;
+}
+
 .introduction-text > section {
     margin-top: 2rem;
 }