Skip to content

Commit 13a2f76

Browse files
neeoderneeoder
committed
First working startpage
1 parent e2a9fc9 commit 13a2f76

8 files changed

Lines changed: 147 additions & 10 deletions

‎.deepsource.toml‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎.idea/git_toolbox_prj.xml‎

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/jsLibraryMappings.xml‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/material_theme_project_new.xml‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/neeoder.github.io.iml‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,34 @@
11
<!DOCTYPE html>
2-
<html lang="de">
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Neeoder</title>
7+
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Space+Mono&display=swap" rel="stylesheet">
11+
712
<link rel="stylesheet" href="style.css">
813
</head>
914
<body>
10-
<h1>Hello, Animation</h1>
15+
<nav>
16+
<a href="index.html" class="logo">NEEODER</a>
17+
<ul>
18+
<li><a href="projects.html">Projects</a></li>
19+
<li><a href="about.html">About</a></li>
20+
<li><a href="contact.html">Contact</a></li>
21+
</ul>
22+
</nav>
23+
24+
<main>
25+
<section class="hero">
26+
<h1 class="hero-title">NEEODER</h1>
27+
<p class="hero-subtitle">Developer and stuff</p>
28+
</section>
29+
</main>
30+
31+
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
1132
<script src="script.js"></script>
1233
</body>
1334
</html>

‎script.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const textWrapper = document.querySelector('.hero-title');
3+
4+
if (textWrapper) {
5+
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
6+
anime.timeline({loop: false})
7+
.add({
8+
targets: '.hero-title .letter',
9+
scale: [4, 1],
10+
opacity: [0, 1],
11+
translateZ: 0,
12+
easing: "easeOutExpo",
13+
duration: 950,
14+
delay: (el, i) => 70 * i
15+
});
16+
}
17+
});

‎style.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
*, *::before, *::after {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
:root {
8+
--bg-color: #1a1a1a;
9+
--text-color: #f0f0f0;
10+
--primary-color: #00c6ff;
11+
--font-heading: 'Poppins', sans-serif;
12+
--font-body: 'Space Mono', monospace;
13+
}
14+
15+
body {
16+
background-color: var(--bg-color);
17+
color: var(--text-color);
18+
font-family: var(--font-body), serif;
19+
line-height: 1.6;
20+
}
21+
22+
nav {
23+
display: flex;
24+
justify-content: space-between;
25+
align-items: center;
26+
padding: 2rem 5%;
27+
}
28+
29+
nav .logo {
30+
font-family: var(--font-heading), serif;
31+
font-size: 1.5rem;
32+
text-decoration: none;
33+
color: var(--text-color);
34+
}
35+
36+
nav ul {
37+
display: flex;
38+
list-style: none;
39+
gap: 2rem;
40+
}
41+
42+
nav a {
43+
color: var(--text-color);
44+
text-decoration: none;
45+
transition: color 0.3s ease;
46+
}
47+
48+
nav a:hover {
49+
color: var(--primary-color);
50+
}
51+
52+
.hero {
53+
min-height: 80vh;
54+
display: flex;
55+
flex-direction: column;
56+
justify-content: center;
57+
align-items: center;
58+
text-align: center;
59+
padding: 0 5%;
60+
}
61+
62+
.hero-title {
63+
font-family: var(--font-heading), serif;
64+
font-size: 5vw;
65+
font-weight: 700;
66+
letter-spacing: 2px;
67+
}
68+
69+
.hero-title .letter {
70+
display: inline-block;
71+
line-height: 1em;
72+
}
73+
74+
.hero-subtitle {
75+
font-size: 1.2rem;
76+
margin-top: 1rem;
77+
color: #aaa;
78+
}

0 commit comments

Comments
 (0)