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

Initial commit

Browse Source
This commit is contained in:
Laurent
2025-10-23 22:15:21 +02:00
commit 55f963d98b
12 changed files with 279 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.idea/.gitignore generated vendored Normal file
View File

@@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

12
.idea/landing-page.iml generated Normal file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

8
.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/landing-page.iml" filepath="$PROJECT_DIR$/.idea/landing-page.iml" />
</modules>
</component>
</project>

18
html/assets/arrow.svg Normal file
View File

@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
version="1.1"
width="0.153333in" height="0.676667in"
viewBox="0 0 46 203">
<path id="Chemin #1"
fill="none" stroke="black" stroke-width="1"
d="M 3.00,180.00
C 3.00,180.00 23.00,199.89 23.00,200.00
23.00,200.11 3.00,180.00 3.00,180.00 Z
M 43.00,180.00
C 43.00,180.00 23.00,200.00 23.00,200.00
23.00,200.00 43.00,180.00 43.00,180.00 Z
M 23.00,0.00
C 23.00,0.00 23.00,200.00 23.00,200.00
23.00,200.00 23.00,0.00 23.00,0.00 Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 699 B

BIN
html/assets/letsmeet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
html/assets/unluckiest.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 598 KiB

68
html/index.html Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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=Fira+Code:wght@300..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/introduction.css">
<link rel="stylesheet" href="styles/projects.css">
<title>Naaturel</title>
</head>
<body>
<main>
<section id="introduction">
<div class="content">
<h1> Naaturel </h1>
<hr/>
<h2 class="typer"></h2>
</div>
<footer>
<p>Scroll down to get started</p>
<div><img src="/html/assets/arrow.svg" alt="arrow"></div>
</footer>
</section>
<section id="projects">
<div class="content">
<h1> My projects </h1>
<hr/>
<h2>Front</h2>
<div class="project-list">
<a href="https://unluckiest.naaturel.be"><img src="/html/assets/unluckiest.png" alt="unluckiest"></a>
<a href="https://letsmeet.naaturel.be"><img src="/html/assets/letsmeet.png" alt="letsmeet"></a>
</div>
<h2>Back</h2>
<div class="project-list">
<a href=""><img src="" alt=""></a>
<a href=""><img src="" alt=""></a>
</div>
</div>
</section>
<section>Wow you've scrolled so far</section>
</main>
</body>
<script type="module">
import { Typer } from '/html/scripts/Typer.js';
const target = document.getElementsByClassName('typer')[0];
const texts = ["Backend dev", "Frontend dev", "Fullstack software engineer"];
const typer = new Typer({target: target, texts: texts, typingDelay: 150, deletionDelay: 50});
typer.start();
</script>
</html>

62
html/scripts/Typer.js Normal file
View File

@@ -0,0 +1,62 @@
export class Typer {
target;
texts;
typingDelay;
deletionDelay;
pauseAfterWord = 2000;
pauseBetweenWords = 500;
textIndex = 0;
charIndex = 0;
deleting = false;
/**
*
* @param target
* @param texts
* @param typingDelay
* @param deletionDelay
*/
constructor({ target : target, texts : texts, typingDelay : typingDelay, deletionDelay : deletionDelay }) {
this.target = target;
this.texts = texts;
this.typingDelay = typingDelay;
this.deletionDelay = deletionDelay;
}
start(){
if (!this.deleting) {
this.addText();
} else {
this.removeText();
}
}
addText(){
const currentText = this.texts[this.textIndex];
this.charIndex++;
this.target.innerText = currentText.slice(0, this.charIndex);
if (this.charIndex === currentText.length) {
this.deleting = true;
setTimeout(() => this.start(), this.pauseAfterWord);
} else {
setTimeout(() => this.start(), this.typingDelay);
}
}
removeText(){
const currentText = this.texts[this.textIndex];
this.charIndex--;
this.target.innerText = currentText.slice(0, this.charIndex);
if (this.charIndex === 0) {
this.deleting = false;
this.textIndex = (this.textIndex + 1) % this.texts.length;
setTimeout(() => this.start(), this.pauseBetweenWords);
} else {
setTimeout(() => this.start(), this.deletionDelay);
}
}
}

27
html/styles/introduction.css Normal file
View File

@@ -0,0 +1,27 @@
#introduction .content {
flex: 5;
width: 25%;
}
#introduction footer {
flex : 1;
transition: transform 0.5s ease-in-out;
}
footer:hover{
transform: translateY(-20px);
}
hr {
width: 100%;
}
.typer::after {
content: '|';
animation: blink 800ms infinite;
}
@keyframes blink {
from { opacity: 0; }
to { opacity: 1; }
}

22
html/styles/projects.css Normal file
View File

@@ -0,0 +1,22 @@
#projects .content {
display: flex;
flex-direction: column;
}
.project-list {
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);
}

44
html/styles/style.css Normal file
View File

@@ -0,0 +1,44 @@
:root {
}
::-webkit-scrollbar {
display: none;
}
* {
font-family: 'Fira Code', 'PT sans', sans-serif;
box-sizing: border-box;
}
html, body {
height: 100vh;
width: 100vw;
}
html, body, main, section, section div, footer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
main {
justify-content: start;
width: 95%;
height: 95%;
overflow: auto;
scroll-snap-type: y mandatory;
margin : 5px;
}
section {
height: 100%;
min-height: 100%;
width: 100%;
scroll-snap-align: start;
}

10
package.json Normal file
View File

@@ -0,0 +1,10 @@
{
"name": "landing-page",
"version": "1.0.0",
"description": "",
"main": "html/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"private": true
}