nelsbrock/website
2
0
Fork 0
Code Activity

Compare commits

base: nelsbrock/website:fa3ab8ab3667d3565c9aa71d2fd6a8e089ddf50c
Branches Tags
nelsbrock/website:main
...
compare: nelsbrock/website:ca109bcdd8f75411c2177e66c0f63825dd61b647
Branches Tags
nelsbrock/website:main
10 Commits
fa3ab8ab36 ... ca109bcdd8
Author SHA1 Message Date
nelsbrock ca109bcdd8 fix indentation inside index.html 2025-04-09 22:00:25 +02:00
nelsbrock 4eb522ed23 rephrase JavaScript allergy joke 2025-04-07 21:45:01 +02:00
nelsbrock 306f20d132 adjust viewport meta tag 2025-04-07 21:02:57 +02:00
nelsbrock dc34abb731 improve card link hover transition 2025-04-07 20:54:06 +02:00
nelsbrock 6fd5635111 update robots.txt to disallow everything 2025-04-07 18:04:56 +02:00
nelsbrock 4409e3e0c5 improve margins inside card 2025-04-07 17:13:08 +02:00
nelsbrock 131fc85c1d rename pgp_key.asc to niklas_elsbrock.asc 2025-04-07 16:29:19 +02:00
nelsbrock c93ff7c562 fix footer not resizing correctly 2025-04-07 16:21:12 +02:00
nelsbrock 20d7e105ec overhaul (yet again) 2025-04-07 14:45:02 +02:00
nelsbrock d16d574db9 add privacy policy, several fixes 2025-04-07 02:07:51 +02:00
9 changed files with 167 additions and 104 deletions
Expand all files Collapse all files
index.html
+9 -2
View File
@@ -8,11 +8,12 @@
<title>Niklas Elsbrock</title> <title>Niklas Elsbrock</title>
<meta name="description" content="Persönliche Website von Niklas Elsbrock." /> <meta name="description" content="Persönliche Website von Niklas Elsbrock." />
<meta name="copyright" content="Niklas Elsbrock" /> <meta name="copyright" content="Niklas Elsbrock" />
<meta name="viewport" content="width=device-width, initial-scale=0.75" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/resources/style.css" /> <link rel="stylesheet" href="/resources/style.css" />
</head> </head>
<body> <body>
<div class="viewstretch">
<main class="card"> <main class="card">
<div class="main-info"> <div class="main-info">
<h1>Niklas&nbsp;Elsbrock</h1> <h1>Niklas&nbsp;Elsbrock</h1>
@@ -22,14 +23,20 @@
<nav> <nav>
<ul> <ul>
<li><a class="link-github" href="https://github.com/nelsbrock">GitHub</a></li> <li><a class="link-github" href="https://github.com/nelsbrock">GitHub</a></li>
<li><a class="link-bluesky" href="https://bsky.app/profile/nelsbrock.de">Bluesky</a></li>
<li><a class="link-email" href="mailto:mail@nelsbrock.de">E-Mail</a></li> <li><a class="link-email" href="mailto:mail@nelsbrock.de">E-Mail</a></li>
<li><a class="link-pgp-key" href="/pgp_key.asc">PGP</a></li> <li><a class="link-pgp-key" href="/niklas_elsbrock.asc">PGP</a></li>
</ul> </ul>
</nav> </nav>
</main> </main>
</div>
<footer> <footer>
<p>
&copy; 2025 Niklas&nbsp;Elsbrock &copy; 2025 Niklas&nbsp;Elsbrock
&middot; <a href="/privacy.html">Datenschutz</a>
&middot; <a href="/licenses.html">Open-Source-Lizenzen</a> &middot; <a href="/licenses.html">Open-Source-Lizenzen</a>
</p>
<p>Geeignet für Allergiker: Diese Website enthält kein JavaScript.</p>
</footer> </footer>
</body> </body>
</html> </html>
licenses.html
+11 -1
View File
@@ -13,6 +13,7 @@
</head> </head>
<body> <body>
<div class="viewstretch">
<main> <main>
<h1>Open-Source-Lizenzen</h1> <h1>Open-Source-Lizenzen</h1>
@@ -30,7 +31,7 @@
<h3>Icons: <a href="https://fontawesome.com/">Font Awesome Free</a></h3> <h3>Icons: <a href="https://fontawesome.com/">Font Awesome Free</a></h3>
<p> <p>
Copyright (c) 2022 Fonticons, Inc.<br /> Copyright (c) 2024 Fonticons, Inc.<br />
with Reserved Font Name: "Font Awesome".<br /> with Reserved Font Name: "Font Awesome".<br />
Licensed under the <a href="https://scripts.sil.org/OFL">SIL Open Font License, Version 1.1</a>. Licensed under the <a href="https://scripts.sil.org/OFL">SIL Open Font License, Version 1.1</a>.
</p> </p>
@@ -41,5 +42,14 @@
<a href="/" data-icon="&#xf060;">Zurück zur Hauptseite</a> <a href="/" data-icon="&#xf060;">Zurück zur Hauptseite</a>
</p> </p>
</main> </main>
</div>
<footer>
<p>
&copy; 2025 Niklas&nbsp;Elsbrock
&middot; <a href="/privacy.html">Datenschutz</a>
&middot; <a href="/licenses.html">Open-Source-Lizenzen</a>
</p>
<p>Geeignet für Allergiker: Diese Website enthält kein JavaScript.</p>
</footer>
</body> </body>
</html> </html>
pgp_key.asc → niklas_elsbrock.asc
View File
privacy.html
+48
View File
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<!-- Copyright © 2025 Niklas Elsbrock -->
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Niklas Elsbrock &ndash; Datenschutz</title>
<meta name="description" content="Persönliche Website von Niklas Elsbrock." />
<meta name="copyright" content="Niklas Elsbrock" />
<meta name="viewport" content="width=device-width, initial-scale=0.75" />
<link rel="stylesheet" href="/resources/style.css" />
</head>
<body>
<div class="viewstretch">
<main>
<h1>Datenschutz</h1>
<p>Verantwortlich für diese Website ist</p>
<address>
Niklas Elsbrock<br />
<a href="mailto:mail@nelsbrock.de">mail@nelsbrock.de</a>
</address>
<h2>Keine Erfassung von Besucherinformationen</h2>
<p>
Beim Besuch der Website unter www.nelsbrock.de werden keine
personenbezogenen Daten verarbeitet. Zugriffsprotokolle sind
deaktiviert.
</p>
<hr />
<p>
<a href="/" data-icon="&#xf060;">Zurück zur Hauptseite</a>
</p>
</main>
</div>
<footer>
<p>
&copy; 2025 Niklas&nbsp;Elsbrock
&middot; <a href="/privacy.html">Datenschutz</a>
&middot; <a href="/licenses.html">Open-Source-Lizenzen</a>
</p>
<p>Geeignet für Allergiker: Diese Website enthält kein JavaScript.</p>
</footer>
</body>
</html>
resources/fonts/fontawesome/LICENSE.txt
+2 -2
View File
@@ -23,7 +23,7 @@ as SVG and JS file types.
In the Font Awesome Free download, the SIL OFL license applies to all icons In the Font Awesome Free download, the SIL OFL license applies to all icons
packaged as web and desktop font files. packaged as web and desktop font files.
Copyright (c) 2022 Fonticons, Inc. (https://fontawesome.com) Copyright (c) 2024 Fonticons, Inc. (https://fontawesome.com)
with Reserved Font Name: "Font Awesome". with Reserved Font Name: "Font Awesome".
This Font Software is licensed under the SIL Open Font License, Version 1.1. This Font Software is licensed under the SIL Open Font License, Version 1.1.
@@ -123,7 +123,7 @@ OTHER DEALINGS IN THE FONT SOFTWARE.
In the Font Awesome Free download, the MIT license applies to all non-font and In the Font Awesome Free download, the MIT license applies to all non-font and
non-icon files. non-icon files.
Copyright 2022 Fonticons, Inc. Copyright 2024 Fonticons, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in the this software and associated documentation files (the "Software"), to deal in the
resources/fonts/fontawesome/fa-brands-400.woff2
BIN
View File
Binary file not shown.
resources/fonts/fontawesome/fa-solid-900.woff2
BIN
View File
Binary file not shown.
resources/style.css
+56 -58
View File
@@ -4,12 +4,13 @@
*/ */
:root { :root {
--bg-color: #0e180e; --bg-color: hsl(120, 25%, 7%);
--text-color: #c9c9c9; --text-color: hsl(42, 20%, 85%);
--deco-color: #c9c9c9; --deco-color: hsl(42, 20%, 85%);
--link-color: #c9c9c9; --card-link-color: hsl(42, 20%, 85%);
--link-hover-color: #ffffff; --card-link-hover-color: hsl(0, 0%, 100%);
--footer-text-color: #888888; --footer-bg-color: hsl(20, 25%, 5%);
--footer-text-color: hsl(0, 0%, 75%);
} }
@font-face { @font-face {
@@ -136,50 +137,54 @@
} }
html { html {
font-size: 20px;
}
html,
body {
width: 100%;
height: 100%; height: 100%;
font-size: 20px;
scrollbar-width: none;
scroll-snap-type: y proximity;
} }
body { body {
display: flex; height: 100%;
justify-content: center;
align-items: center;
margin: 0; margin: 0;
color: var(--text-color); color: var(--text-color);
background-color: var(--bg-color); background-color: var(--bg-color);
font-family: Inter, sans-serif; font-family: Inter, sans-serif;
} }
.viewstretch {
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
margin: 2rem 0 1rem 0;
font-family: Metropolis, sans-serif; font-family: Metropolis, sans-serif;
} }
hr { hr {
margin: 2rem 0;
border: 4px solid var(--deco-color); border: 4px solid var(--deco-color);
border-radius: 4px; border-radius: 4px;
} }
main { main {
max-width: 40rem;
margin: 2rem;
animation: fadeIn ease 1s; animation: fadeIn ease 1s;
animation-iteration-count: 1; animation-iteration-count: 1;
} }
.card { .card {
display: flex; display: flex;
} gap: 2.25rem;
.card > * {
margin: 0.5rem 1rem;
} }
.card .main-info { .card .main-info {
@@ -189,6 +194,7 @@ main {
} }
.card hr { .card hr {
margin: 0;
animation: enlargeY ease 1s; animation: enlargeY ease 1s;
animation-iteration-count: 1; animation-iteration-count: 1;
} }
@@ -210,13 +216,13 @@ main {
.card nav a { .card nav a {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
color: var(--link-color); color: var(--card-link-color);
text-decoration: none; text-decoration: none;
transition: color 0.25s; transition: color 0.25s;
} }
.card nav a:hover { .card nav a:hover {
color: var(--link-hover-color); color: var(--card-link-hover-color);
} }
.card nav a::before { .card nav a::before {
@@ -226,20 +232,36 @@ main {
margin: 0; margin: 0;
} }
.card nav a.link-github::before {
content: "\f09b";
}
.card nav a.link-bluesky::before {
content: "\e671";
}
.card nav a.link-email::before {
content: "\f0e0";
}
.card nav a.link-pgp-key::before {
content: "\f084";
}
.card nav li::after { .card nav li::after {
width: 0; width: 0;
color: var(--card-link-hover-color);
float: right; float: right;
display: inline-block;
content: "\f100"; content: "\f100";
font-family: 'Font Awesome 6 Free Solid'; font-family: 'Font Awesome 6 Free Solid';
opacity: 0; opacity: 0;
translate: 4em; translate: 2.5em;
} }
.card nav li:hover::after { .card nav li:hover::after {
opacity: 1; opacity: 1;
translate: 1em; translate: 1em;
transition: all 0.5s ease-out; transition: all 0.375s ease-out;
} }
.card nav li:active::after { .card nav li:active::after {
@@ -247,42 +269,14 @@ main {
transition: all 0.05s linear; transition: all 0.05s linear;
} }
/* ----- GITHUB LINK ----- */
.card nav a.link-github:hover {
color: #00bfff;
}
.card nav a.link-github::before {
content: "\f09b";
}
/* ----- E-MAIL LINK ----- */
.card nav a.link-email:hover {
color: #ff7700;
}
.card nav a.link-email::before {
content: "\f0e0";
}
/* ----- PGP KEY LINK ----- */
.card nav a.link-pgp-key:hover {
color: #cf3fff;
}
.card nav a.link-pgp-key::before {
content: "\f084";
}
/* ------------------------ */
footer { footer {
position: absolute; padding: 1rem;
right: 0; text-align: center;
bottom: 0; font-size: 0.75rem;
margin: 0.25rem;
font-size: 0.6rem;
color: var(--footer-text-color); color: var(--footer-text-color);
border-top: 2px dashed var(--footer-text-color);
background-color: var(--footer-bg-color);
scroll-snap-align: end;
} }
a { a {
@@ -311,6 +305,10 @@ a[data-icon]::before {
animation-name: moveFromTop; animation-name: moveFromTop;
} }
.card .main-info p {
margin-bottom: 0;
}
.card hr { .card hr {
animation-name: enlargeX; animation-name: enlargeX;
} }
robots.txt
+1 -1
View File
@@ -1,5 +1,5 @@
User-agent: * User-agent: *
Disallow: /licenses.html Disallow: /
# _ _ _ _ _ _ # _ _ _ _ _ _