Initial commit

2025-10-23 22:15:21 +02:00
commit 55f963d98b
12 changed files with 279 additions and 0 deletions
--- a/html/index.html
+++ b/html/index.html
@@ -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>