Naaturel/landing-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update some stuff

Browse Source
This commit is contained in:
Laurent
2025-11-01 13:00:49 +01:00
parent 823d72fbb3
commit 248667512c
4 changed files with 77 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
html/index.html
View File

@@ -42,7 +42,12 @@
<section>
<h3>My <span class="accentuated">background</span></h3>
<p>
Bla bla bla lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
I hold a Bachelor's degree in Full-Stack Development,
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>
@@ -51,7 +56,6 @@
<p>
Java, C#, Python, JavaScript / TypeScript, Node.js, Vue, PostgreSQL, Docker.
</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 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>

35
html/projects.html
View File

@@ -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>

37
html/scripts/CardTilter.js
View File

@@ -15,8 +15,11 @@ export class CardTilter {
watch(){
this.card.addEventListener('mousemove', (e) => {
const rotations = this.calculatePositions(e.clientX, e.clientY);
this.transform(rotations.x, rotations.y);
const rect = this.card.getBoundingClientRect();
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) {
const rect = this.card.getBoundingClientRect();
calculatePositions(rect, cursorX, cursorY) {
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};
return {x : x, y : y};
};
transform(rotationX, rotationY) {
this.card.style.transform = `translateY(-5px) perspective(${this.perspective}px) rotateX(${rotationX}deg) rotateY(${rotationY}deg) scale(1.02)`;
calculatePercentage(rect, cursorX, cursorY) {
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(){

4
html/styles/introduction.css
View File

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