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

Add some style

Browse Source
This commit is contained in:
Laurent
2025-10-28 23:16:07 +01:00
parent 55f963d98b
commit 693484d44c
3 changed files with 98 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
html/index.html
View File

@@ -9,9 +9,9 @@
<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">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/introduction.css">
<link rel="stylesheet" href="./styles/projects.css">
<title>Naaturel</title>
@@ -27,37 +27,43 @@
</div>
<footer>
<p>Scroll down to get started</p>
<div><img src="/html/assets/arrow.svg" alt="arrow"></div>
<div><img src="./assets/arrow.svg" alt="arrow"></div>
</footer>
</section>
<section id="projects">
<div class="content">
<h1> My projects </h1>
<div>
<h1> Live 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>
<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>
<h2>Back</h2>
<div class="project-list">
<a href=""><img src="" alt=""></a>
<a href=""><img src="" alt=""></a>
</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>
</section>
<section>Wow you've scrolled so far</section>
</main>
</body>
<script type="module">
import { Typer } from '/html/scripts/Typer.js';
import { Typer } from './scripts/Typer.js';
const target = document.getElementsByClassName('typer')[0];
const texts = ["Backend dev", "Frontend dev", "Fullstack software engineer"];

57
html/styles/projects.css
View File

@@ -1,9 +1,16 @@
#projects .content {
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: space-around;
align-items: start;
width: 75%;
}
#projects .content div hr {
margin : 25px 0 25px 0;
}
.project-list {
.project-list, .links {
display: flex;
flex-direction: row;
gap : 1rem;
@@ -20,3 +27,49 @@
.project-list img:hover {
transform: scale(1.1);
}
.links {
display: flex;
height: 100%;
font-size: 1.3rem;
}
.links ul {
display: flex;
flex-direction: column;
gap: 40px;
padding : 0;
margin: 0;
}
.links ul li {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5rem 1rem;
border-radius: 10px;
transition: background 0.3s ease;
}
.links ul li:hover {
background: rgba(0, 0, 0, 0.1);
}
.links ul li::before {
content: ">";
margin-right: 1rem;
}
.links ul li:hover::before {
animation: blink 1s step-start infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}

20
html/styles/style.css
View File

@@ -8,9 +8,8 @@
* {
font-family: 'Fira Code', 'PT sans', sans-serif;
box-sizing: border-box;
color: #333;
}
html, body {
@@ -25,6 +24,15 @@ html, body, main, section, section div, footer {
justify-content: center;
}
body {
background-color: #e2e2e2;
background-image:
linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
color: #111;
}
main {
justify-content: start;
@@ -42,3 +50,11 @@ section {
width: 100%;
scroll-snap-align: start;
}
ul li{
list-style-type: none;
}
ul li a {
text-decoration: none;
}