1
0

Initial commit

This commit is contained in:
2026-01-03 15:58:49 +01:00
commit 1ef8cfbb80
17 changed files with 8063 additions and 0 deletions

24
.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

15
README.md Normal file
View File

@@ -0,0 +1,15 @@
# [niklas-birk.de](https://niklas-birk.de)
<h2 align="center">
<img width="128" height="128" src="./src/assets/nb-logo.svg">
</h2>
<h3 align="center">Meine eigene kleine Website</h3>
## Getting Started
- `deno run dev` - Starts a dev server at http://localhost:5173/
- `deno run build` - Builds for production, emitting to `dist/`. Prerenders app to static HTML
- `deno run preview` - Starts a server at http://localhost:4173/ to test production build locally

2276
deno.lock generated Normal file

File diff suppressed because it is too large Load Diff

14
index.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/niklas-birk-icon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>Niklas Birk</title>
</head>
<body>
<div id="app"></div>
<script prerender type="module" src="/src/index.tsx"></script>
</body>
</html>

5197
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

24
package.json Normal file
View File

@@ -0,0 +1,24 @@
{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"preact": "^10.26.9",
"preact-iso": "^2.11.1",
"preact-render-to-string": "^6.6.5"
},
"devDependencies": {
"@preact/preset-vite": "^2.10.2",
"eslint": "^9.39.2",
"eslint-config-preact": "^2.0.0",
"typescript": "^5.9.3",
"vite": "^7.0.4"
},
"eslintConfig": {
"extends": "preact"
}
}

157
public/impressum.html Normal file
View File

@@ -0,0 +1,157 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Impressum und Datenschutz</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<style>
:root {
--base: #24273a; /* Macchiato Base */
--mantle: #1e2030; /* Macchiato Mantle */
--text: #cad3f5; /* Macchiato Text */
--subtext: #a5adcb; /* Macchiato Subtext0 */
--lavender: #b7bdf8; /* Macchiato Lavender */
--green: #a6da95; /* Macchiato Green */
--blue: #8aadf4; /* Macchiato Blue */
--yellow: #eed49f; /* Macchiato Yellow */
--surface0: #363a4f; /* Macchiato Surface0 */
}
body {
font-family: 'Fira Sans', system-ui;
background-color: var(--base);
color: var(--text);
max-width: 900px;
margin: 0 auto;
padding: 2rem;
}
h1, h2 {
color: var(--lavender);
border-bottom: 1px solid var(--surface0);
padding-bottom: 0.3em;
text-transform: uppercase;
}
h3 {
color: var(--green);
margin-top: 1.2em;
}
a {
color: var(--blue);
text-decoration: none;
}
a:hover {
color: var(--lavender);
text-decoration: underline;
}
code {
background: var(--surface0);
color: var(--yellow);
padding: 0.2em 0.4em;
border-radius: 4px;
font-family: 'Fira Code', monospace;
}
ol {
padding-left: 1.2rem;
}
footer {
margin-top: 3rem;
border-top: 1px solid var(--surface0);
padding-top: 1rem;
color: var(--subtext);
font-size: 0.9rem;
}
</style>
</head>
<body>
<h1 id="impressum">Impressum</h1>
<p>
Angaben gemäß § 5 TMG:<br>
<strong>Niklas Birk</strong><br>
Wiesertsweiler 26<br>
88069 Tettnang<br>
E-Mail: <a href="mailto:me@niklas-birk.de">me@niklas-birk.de</a>
</p>
<p>
Verantwortlich für den Inhalt nach <em>§ 18 Abs. 2 MStV</em>:<br>
<strong>Niklas Birk</strong> (Anschrift wie oben)
</p>
<h2>Datenschutzerklärung</h2>
<ol>
<li>
<h3>Allgemeines & Verschlüsselung</h3>
<p>Diese Website verarbeitet keine personenbezogenen Daten über das technisch notwendige Maß hinaus.
Kein Tracking, keine Logfiles.</p>
<p>Zum Schutz deiner Daten und zur sicheren Übertragung von Inhalten nutzt diese Website
eine <strong>SSL/TLS-Verschlüsselung</strong>. Die Zertifikatsausstellung und
-erneuerung erfolgt automatisiert über
<a href="https://letsencrypt.org/documents/isrg-cp-cps-v6.0/" target="_blank"><em>Let's Encrypt</em></a>.</p>
</li>
<li>
<h3>Verantwortlicher</h3>
<p>siehe <a href="#impressum">Impressum</a>.</p>
</li>
<li>
<h3>Cookies</h3>
<p>Es werden nur essentielle Cookies gesetzt:</p>
<ul>
<li><code>i_like_gitea</code> Sitzungs-Cookie von Gitea</li>
<li><code>_csrf</code> Schutz vor Cross-Site Request Forgery</li>
</ul>
<p>Die Cookies sind zur technischen Funktionsfähigkeit und zum Abwehr von Gefahren notwendig
und stellen nach <em>Art. 6 Abs. 1 lit. f DSGVO</em> ein berechtigtes Interesse dar.</p>
</li>
<li>
<h3>Hosting</h3>
<p>Die Website wird auf einem virtuellen Server der <a href="https://www.strato.de/impressum/">STRATO
GmbH</a>, Otto-Ostrowski-Straße 7, 10249 Berlin, betrieben. Der Server wird ausschließlich von mir
administriert. STRATO kann jedoch im Rahmen der technischen Infrastruktur automatisch Meta-Daten,
wie IP-Adressen, kurzzeitig verarbeiten (z.B. zur Gefahrenabwehr).
Eine darüber hinausgehende Verarbeitung personenbezogener Daten erfolgt meinerseits nicht.</p>
</li>
<li>
<h3>Keine Server-Logs</h3>
<p>Der Webserver speichert keine IP-Adressen oder Zeitstempel.</p>
</li>
<li>
<h3>Deine Rechte</h3>
<p>Du hast das Recht auf Auskunft, Berichtigung, Löschung und Einschränkung der Verarbeitung deiner
personenbezogenen Daten sowie ein Beschwerderecht bei der zuständigen Datenschutz-Aufsichtsbehörde.
Da keine Daten gespeichert werden, sind Auskunft, Berichtigung oder Löschung in der Praxis allerdings
nicht möglich.</p>
</li>
</ol>
<h2>Haftungsausschluss</h2>
<ol>
<li>
<h3>Inhalte</h3>
<p>Ich übernehme keine Gewähr für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte.</p>
</li>
<li>
<h3>Links</h3>
<p>Externe Links führen zu Inhalten Dritter, für die ich keine Haftung übernehme.</p>
</li>
</ol>
<h2>Urheberrecht und Lizenz</h2>
<p>Alle Inhalte dieser Website und die zugehörigen Software-Projekte sind lizenziert unter der
<a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank">
GNU General Public License, Version 3 (GPL v3)
</a> oder der <a href="https://opensource.org/license/mit" target="_blank">
The MIT License
</a>.</p>
<footer>
<p>Letzte Aktualisierung: Januar 2026 • Catppuccin Macchiato Lavender Vibes</p>
</footer>
</body>
</html>

BIN
public/niklas-birk-icon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

3
public/robots.txt Normal file
View File

@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

BIN
src/assets/git-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

132
src/assets/nb-logo.svg Normal file
View File

@@ -0,0 +1,132 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.2" width="200mm" height="200mm" viewBox="0 0 20000 20000" preserveAspectRatio="xMidYMid" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:presentation="http://sun.com/xmlns/staroffice/presentation" xmlns:smil="http://www.w3.org/2001/SMIL20/" xmlns:anim="urn:oasis:names:tc:opendocument:xmlns:animation:1.0" xmlns:svg="urn:oasis:names:tc:opendocument:xmlns:svg-compatible:1.0" xml:space="preserve">
<defs class="ClipPathGroup">
<clipPath id="presentation_clip_path" clipPathUnits="userSpaceOnUse">
<rect x="0" y="0" width="20000" height="20000"/>
</clipPath>
<clipPath id="presentation_clip_path_shrink" clipPathUnits="userSpaceOnUse">
<rect x="20" y="20" width="19960" height="19960"/>
</clipPath>
</defs>
<defs>
<font id="EmbeddedFont_1" horiz-adv-x="2048">
<font-face font-family="Liberation Serif embedded" units-per-em="2048" font-weight="normal" font-style="normal" ascent="1826" descent="450"/>
<missing-glyph horiz-adv-x="2048" d="M 0,0 L 2047,0 2047,2047 0,2047 0,0 Z"/>
<glyph unicode="ﬡ" horiz-adv-x="1086" d="M 1155,1007 C 1155,978 1146,952 1128,930 1103,955 1081,967 1061,967 1040,967 1013,953 981,924 886,841 809,731 748,592 L 1059,244 C 1101,198 1122,157 1122,121 1122,98 1118,76 1109,54 1100,32 1089,13 1075,-3 1061,-19 1050,-27 1042,-27 1037,-27 1033,-24 1032,-19 1017,27 976,82 911,147 L 391,727 C 342,694 307,660 286,626 265,591 254,552 254,508 254,478 261,447 275,414 289,381 311,343 342,300 372,258 394,221 409,188 423,155 430,123 430,92 430,56 423,25 410,0 L 96,0 96,63 203,63 C 233,63 248,79 248,111 248,128 242,147 230,170 217,193 204,219 189,248 174,277 160,310 148,346 135,382 129,422 129,465 129,511 144,559 174,608 203,657 244,700 295,737 L 348,772 209,928 C 168,977 147,1024 147,1071 147,1093 151,1115 160,1136 169,1157 179,1175 192,1190 205,1205 214,1212 221,1212 228,1212 233,1205 238,1192 248,1161 301,1091 397,981 L 666,684 C 739,791 831,885 942,967 903,967 871,977 848,997 825,1016 813,1043 813,1077 813,1106 822,1135 840,1163 858,1190 875,1204 891,1204 895,1204 897,1202 898,1199 899,1195 899,1187 899,1176 899,1160 902,1148 909,1141 916,1134 929,1131 948,1131 L 1040,1131 C 1076,1131 1104,1120 1125,1098 1145,1076 1155,1046 1155,1007 Z"/>
<glyph unicode="∞" horiz-adv-x="1324" d="M 1382,590 C 1382,480 1352,388 1293,314 1233,240 1158,203 1067,203 927,203 810,291 716,467 673,382 625,318 570,275 515,231 457,209 395,209 300,209 224,244 165,315 106,386 77,479 77,596 77,709 107,801 166,874 225,947 302,983 395,983 465,983 530,962 589,919 648,876 700,812 743,725 786,808 833,871 886,914 938,956 999,977 1069,977 1164,977 1240,941 1297,870 1354,798 1382,705 1382,590 Z M 1088,872 C 1035,872 986,849 942,802 897,755 854,685 811,590 851,496 893,425 938,378 982,331 1033,307 1090,307 1154,307 1206,334 1247,387 1287,440 1307,509 1307,592 1307,672 1287,739 1246,792 1205,845 1153,872 1088,872 Z M 645,596 C 607,689 566,760 522,808 477,855 425,879 365,879 303,879 252,852 213,799 173,745 153,677 153,594 153,510 173,442 212,391 251,339 303,313 369,313 423,313 472,337 517,384 562,431 604,501 645,596 Z"/>
<glyph unicode="∂" horiz-adv-x="874" d="M 928,938 C 928,825 916,705 892,579 868,453 832,344 785,253 737,161 680,91 613,44 546,-3 471,-27 388,-27 287,-27 208,4 152,67 96,129 68,217 68,332 68,435 91,537 138,638 185,739 245,814 318,865 391,915 473,940 564,940 626,940 681,924 729,891 776,858 811,813 834,758 L 838,758 842,874 C 842,1025 817,1141 768,1222 718,1303 646,1343 551,1343 480,1343 404,1315 323,1259 L 287,1292 392,1442 C 445,1465 497,1477 549,1477 671,1477 765,1431 830,1339 895,1246 928,1113 928,938 Z M 813,643 C 801,704 775,755 735,796 694,836 648,856 596,856 535,856 480,833 430,787 380,741 339,672 307,581 274,490 258,398 258,305 258,222 275,158 310,112 345,66 392,43 451,43 505,43 557,67 606,114 655,161 698,231 735,325 772,419 798,525 813,643 Z"/>
<glyph unicode="Σ" horiz-adv-x="1007" d="M 678,748 L 678,697 275,170 536,170 C 605,170 689,172 787,175 884,178 944,181 966,186 L 1023,374 1089,374 1070,0 80,0 80,74 518,646 88,1262 88,1341 1009,1341 1009,1020 943,1020 901,1237 C 826,1246 724,1251 595,1251 L 329,1251 678,748 Z"/>
</font>
</defs>
<defs class="TextShapeIndex">
<g ooo:slide="id1" ooo:id-list="id3 id4 id5 id6 id7 id8 id9 id10 id11"/>
</defs>
<defs class="EmbeddedBulletChars">
<g id="bullet-char-template-57356" transform="scale(0.00048828125,-0.00048828125)">
<path d="M 580,1141 L 1163,571 580,0 -4,571 580,1141 Z"/>
</g>
<g id="bullet-char-template-57354" transform="scale(0.00048828125,-0.00048828125)">
<path d="M 8,1128 L 1137,1128 1137,0 8,0 8,1128 Z"/>
</g>
<g id="bullet-char-template-10146" transform="scale(0.00048828125,-0.00048828125)">
<path d="M 174,0 L 602,739 174,1481 1456,739 174,0 Z M 1358,739 L 309,1346 659,739 1358,739 Z"/>
</g>
<g id="bullet-char-template-10132" transform="scale(0.00048828125,-0.00048828125)">
<path d="M 2015,739 L 1276,0 717,0 1260,543 174,543 174,936 1260,936 717,1481 1274,1481 2015,739 Z"/>
</g>
<g id="bullet-char-template-10007" transform="scale(0.00048828125,-0.00048828125)">
<path d="M 0,-2 C -7,14 -16,27 -25,37 L 356,567 C 262,823 215,952 215,954 215,979 228,992 255,992 264,992 276,990 289,987 310,991 331,999 354,1012 L 381,999 492,748 772,1049 836,1024 860,1049 C 881,1039 901,1025 922,1006 886,937 835,863 770,784 769,783 710,716 594,584 L 774,223 C 774,196 753,168 711,139 L 727,119 C 717,90 699,76 672,76 641,76 570,178 457,381 L 164,-76 C 142,-110 111,-127 72,-127 30,-127 9,-110 8,-76 1,-67 -2,-52 -2,-32 -2,-23 -1,-13 0,-2 Z"/>
</g>
<g id="bullet-char-template-10004" transform="scale(0.00048828125,-0.00048828125)">
<path d="M 285,-33 C 182,-33 111,30 74,156 52,228 41,333 41,471 41,549 55,616 82,672 116,743 169,778 240,778 293,778 328,747 346,684 L 369,508 C 377,444 397,411 428,410 L 1163,1116 C 1174,1127 1196,1133 1229,1133 1271,1133 1292,1118 1292,1087 L 1292,965 C 1292,929 1282,901 1262,881 L 442,47 C 390,-6 338,-33 285,-33 Z"/>
</g>
<g id="bullet-char-template-9679" transform="scale(0.00048828125,-0.00048828125)">
<path d="M 813,0 C 632,0 489,54 383,161 276,268 223,411 223,592 223,773 276,916 383,1023 489,1130 632,1184 813,1184 992,1184 1136,1130 1245,1023 1353,916 1407,772 1407,592 1407,412 1353,268 1245,161 1136,54 992,0 813,0 Z"/>
</g>
<g id="bullet-char-template-8226" transform="scale(0.00048828125,-0.00048828125)">
<path d="M 346,457 C 273,457 209,483 155,535 101,586 74,649 74,723 74,796 101,859 155,911 209,963 273,989 346,989 419,989 480,963 531,910 582,859 608,796 608,723 608,648 583,586 532,535 482,483 420,457 346,457 Z"/>
</g>
<g id="bullet-char-template-8211" transform="scale(0.00048828125,-0.00048828125)">
<path d="M -4,459 L 1135,459 1135,606 -4,606 -4,459 Z"/>
</g>
<g id="bullet-char-template-61548" transform="scale(0.00048828125,-0.00048828125)">
<path d="M 173,740 C 173,903 231,1043 346,1159 462,1274 601,1332 765,1332 928,1332 1067,1274 1183,1159 1299,1043 1357,903 1357,740 1357,577 1299,437 1183,322 1067,206 928,148 765,148 601,148 462,206 346,322 231,437 173,577 173,740 Z"/>
</g>
</defs>
<g>
<g id="id2" class="Master_Slide">
<g id="bg-id2" class="Background"/>
<g id="bo-id2" class="BackgroundObjects"/>
</g>
</g>
<g class="SlideGroup">
<g>
<g id="container-id1">
<g id="id1" class="Slide" clip-path="url(#presentation_clip_path)">
<g class="Page">
<g class="com.sun.star.drawing.CustomShape">
<g id="id3">
<rect class="BoundingBox" stroke="none" fill="none" x="-1" y="-1" width="20004" height="20004"/>
<path fill="rgb(40,42,54)" stroke="none" d="M 10000,0 L 10000,0 C 8245,0 6521,462 5000,1340 3480,2218 2218,3480 1340,5000 462,6521 0,8245 0,10001 L 0,10000 0,10001 C 0,11756 462,13480 1340,15001 2218,16521 3480,17783 5000,18661 6521,19539 8245,20001 10001,20001 L 10000,20001 10001,20001 C 11756,20001 13480,19539 15001,18661 16521,17783 17783,16521 18661,15001 19539,13480 20001,11756 20001,10001 L 20001,10000 20001,10001 20001,10000 C 20001,8245 19539,6521 18661,5000 17783,3480 16521,2218 15001,1340 13480,462 11756,0 10000,0 L 10000,0 Z"/>
<path fill="none" stroke="rgb(40,42,54)" d="M 10000,0 L 10000,0 C 8245,0 6521,462 5000,1340 3480,2218 2218,3480 1340,5000 462,6521 0,8245 0,10001 L 0,10000 0,10001 C 0,11756 462,13480 1340,15001 2218,16521 3480,17783 5000,18661 6521,19539 8245,20001 10001,20001 L 10000,20001 10001,20001 C 11756,20001 13480,19539 15001,18661 16521,17783 17783,16521 18661,15001 19539,13480 20001,11756 20001,10001 L 20001,10000 20001,10001 20001,10000 C 20001,8245 19539,6521 18661,5000 17783,3480 16521,2218 15001,1340 13480,462 11756,0 10000,0 L 10000,0 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.CustomShape">
<g id="id4">
<rect class="BoundingBox" stroke="none" fill="none" x="6389" y="2389" width="7223" height="7223"/>
<path fill="rgb(189,147,249)" stroke="none" d="M 6665,5334 L 6666,5333 C 6549,5450 6465,5596 6422,5756 6379,5916 6379,6084 6422,6244 6465,6404 6549,6550 6666,6667 L 9333,9334 9333,9334 C 9450,9451 9596,9535 9756,9578 9916,9621 10084,9621 10244,9578 10404,9535 10550,9451 10667,9334 L 13334,6667 13334,6667 C 13451,6550 13535,6404 13578,6244 13621,6084 13621,5916 13578,5756 13535,5596 13451,5450 13334,5333 L 10666,2665 10667,2666 10667,2666 C 10550,2549 10404,2465 10244,2422 10084,2379 9916,2379 9756,2422 9596,2465 9450,2549 9333,2666 L 6665,5334 Z"/>
<path fill="none" stroke="rgb(189,147,249)" d="M 6665,5334 L 6666,5333 C 6549,5450 6465,5596 6422,5756 6379,5916 6379,6084 6422,6244 6465,6404 6549,6550 6666,6667 L 9333,9334 9333,9334 C 9450,9451 9596,9535 9756,9578 9916,9621 10084,9621 10244,9578 10404,9535 10550,9451 10667,9334 L 13334,6667 13334,6667 C 13451,6550 13535,6404 13578,6244 13621,6084 13621,5916 13578,5756 13535,5596 13451,5450 13334,5333 L 10666,2665 10667,2666 10667,2666 C 10550,2549 10404,2465 10244,2422 10084,2379 9916,2379 9756,2422 9596,2465 9450,2549 9333,2666 L 6665,5334 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.CustomShape">
<g id="id5">
<rect class="BoundingBox" stroke="none" fill="none" x="6389" y="10389" width="7223" height="7223"/>
<path fill="rgb(255,121,198)" stroke="none" d="M 6665,13334 L 6666,13333 C 6549,13450 6465,13596 6422,13756 6379,13916 6379,14084 6422,14244 6465,14404 6549,14550 6666,14667 L 9333,17334 9333,17334 C 9450,17451 9596,17535 9756,17578 9916,17621 10084,17621 10244,17578 10404,17535 10550,17451 10667,17334 L 13334,14667 13334,14667 C 13451,14550 13535,14404 13578,14244 13621,14084 13621,13916 13578,13756 13535,13596 13451,13450 13334,13333 L 10666,10665 10667,10666 10667,10666 C 10550,10549 10404,10465 10244,10422 10084,10379 9916,10379 9756,10422 9596,10465 9450,10549 9333,10666 L 6665,13334 Z"/>
<path fill="none" stroke="rgb(255,121,198)" d="M 6665,13334 L 6666,13333 C 6549,13450 6465,13596 6422,13756 6379,13916 6379,14084 6422,14244 6465,14404 6549,14550 6666,14667 L 9333,17334 9333,17334 C 9450,17451 9596,17535 9756,17578 9916,17621 10084,17621 10244,17578 10404,17535 10550,17451 10667,17334 L 13334,14667 13334,14667 C 13451,14550 13535,14404 13578,14244 13621,14084 13621,13916 13578,13756 13535,13596 13451,13450 13334,13333 L 10666,10665 10667,10666 10667,10666 C 10550,10549 10404,10465 10244,10422 10084,10379 9916,10379 9756,10422 9596,10465 9450,10549 9333,10666 L 6665,13334 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.CustomShape">
<g id="id6">
<rect class="BoundingBox" stroke="none" fill="none" x="10389" y="6389" width="7223" height="7223"/>
<path fill="rgb(255,184,108)" stroke="none" d="M 10665,9334 L 10666,9333 C 10549,9450 10465,9596 10422,9756 10379,9916 10379,10084 10422,10244 10465,10404 10549,10550 10666,10667 L 13333,13334 13333,13334 C 13450,13451 13596,13535 13756,13578 13916,13621 14084,13621 14244,13578 14404,13535 14550,13451 14667,13334 L 17334,10667 17334,10667 C 17451,10550 17535,10404 17578,10244 17621,10084 17621,9916 17578,9756 17535,9596 17451,9450 17334,9333 L 14666,6665 14667,6666 14667,6666 C 14550,6549 14404,6465 14244,6422 14084,6379 13916,6379 13756,6422 13596,6465 13450,6549 13333,6666 L 10665,9334 Z"/>
<path fill="none" stroke="rgb(255,184,108)" d="M 10665,9334 L 10666,9333 C 10549,9450 10465,9596 10422,9756 10379,9916 10379,10084 10422,10244 10465,10404 10549,10550 10666,10667 L 13333,13334 13333,13334 C 13450,13451 13596,13535 13756,13578 13916,13621 14084,13621 14244,13578 14404,13535 14550,13451 14667,13334 L 17334,10667 17334,10667 C 17451,10550 17535,10404 17578,10244 17621,10084 17621,9916 17578,9756 17535,9596 17451,9450 17334,9333 L 14666,6665 14667,6666 14667,6666 C 14550,6549 14404,6465 14244,6422 14084,6379 13916,6379 13756,6422 13596,6465 13450,6549 13333,6666 L 10665,9334 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.CustomShape">
<g id="id7">
<rect class="BoundingBox" stroke="none" fill="none" x="2389" y="6389" width="7223" height="7223"/>
<path fill="rgb(255,85,85)" stroke="none" d="M 2665,9334 L 2666,9333 C 2549,9450 2465,9596 2422,9756 2379,9916 2379,10084 2422,10244 2465,10404 2549,10550 2666,10667 L 5333,13334 5333,13334 C 5450,13451 5596,13535 5756,13578 5916,13621 6084,13621 6244,13578 6404,13535 6550,13451 6667,13334 L 9334,10667 9334,10667 C 9451,10550 9535,10404 9578,10244 9621,10084 9621,9916 9578,9756 9535,9596 9451,9450 9334,9333 L 6666,6665 6667,6666 6667,6666 C 6550,6549 6404,6465 6244,6422 6084,6379 5916,6379 5756,6422 5596,6465 5450,6549 5333,6666 L 2665,9334 Z"/>
<path fill="none" stroke="rgb(255,85,85)" d="M 2665,9334 L 2666,9333 C 2549,9450 2465,9596 2422,9756 2379,9916 2379,10084 2422,10244 2465,10404 2549,10550 2666,10667 L 5333,13334 5333,13334 C 5450,13451 5596,13535 5756,13578 5916,13621 6084,13621 6244,13578 6404,13535 6550,13451 6667,13334 L 9334,10667 9334,10667 C 9451,10550 9535,10404 9578,10244 9621,10084 9621,9916 9578,9756 9535,9596 9451,9450 9334,9333 L 6666,6665 6667,6666 6667,6666 C 6550,6549 6404,6465 6244,6422 6084,6379 5916,6379 5756,6422 5596,6465 5450,6549 5333,6666 L 2665,9334 Z"/>
</g>
</g>
<g class="TextShape">
<g id="id8">
<rect class="BoundingBox" stroke="none" fill="none" x="10500" y="6500" width="7001" height="7001"/>
<text class="SVGTextShape"><tspan class="TextParagraph"><tspan class="TextPosition" x="12413" y="11841"><tspan font-family="Liberation Serif, serif" font-size="5457px" font-weight="400" fill="rgb(78,40,0)" stroke="none" style="white-space: pre">Σ</tspan></tspan></tspan></text>
</g>
</g>
<g class="TextShape">
<g id="id9">
<rect class="BoundingBox" stroke="none" fill="none" x="2500" y="6500" width="7001" height="7001"/>
<text class="SVGTextShape"><tspan class="TextParagraph"><tspan class="TextPosition" x="4654" y="11841"><tspan font-family="Liberation Serif, serif" font-size="5457px" font-weight="400" fill="rgb(79,0,0)" stroke="none" style="white-space: pre"></tspan></tspan></tspan></text>
</g>
</g>
<g class="TextShape">
<g id="id10">
<rect class="BoundingBox" stroke="none" fill="none" x="6500" y="2300" width="7001" height="6901"/>
<text class="SVGTextShape"><tspan class="TextParagraph"><tspan class="TextPosition" x="8057" y="7591"><tspan font-family="Liberation Serif, serif" font-size="5457px" font-weight="400" fill="rgb(32,3,74)" stroke="none" style="white-space: pre"></tspan></tspan></tspan></text>
</g>
</g>
<g class="TextShape">
<g id="id11">
<rect class="BoundingBox" stroke="none" fill="none" x="6600" y="10300" width="7001" height="7001"/>
<text class="SVGTextShape"><tspan class="TextParagraph"><tspan class="TextPosition" x="8644" y="15440"><tspan font-family="Liberation Serif, serif" font-size="4861px" font-weight="400" fill="rgb(79,0,0)" stroke="none" style="white-space: pre"></tspan></tspan></tspan></text>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

61
src/index.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { hydrate, prerender as ssr } from 'preact-iso';
import nbLogo from './assets/nb-logo.svg';
import gitLogo from './assets/git-logo.png';
import tutLogo from './assets/tutorial-logo.png';
import './style.css';
export function App() {
return (
<div>
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">
<img src={nbLogo} alt="Mein eigenes Logo" height="160" width="160" id="personal-logo" />
</a>
<h1>Niklas Birk</h1>
<section>
<Card
title="Gitea Code Repositories"
img={gitLogo}
description="Ich hoste eine gitea Instanz selbst.
Dort bewahre ich sämtlichen Code von meinen Projekten oder andere Arbeiten auf."
href="https://git.niklas-birk.de/niklas"
/>
<Card
title="Mathematik & Informatik"
img={tutLogo}
description="Falls du etwas über Mathematik, Informatik und das Programmieren lernen willst, dann hier entlang!"
href="https://math.niklas-birk.de"
/>
</section>
<Footer />
</div>
);
}
function Card(props) {
return (
<a href={props.href} target="_blank" class="card">
<h2>{props.title}</h2>
<img src={props.img} alt="Mein eigenes Logo" height="175" width="175" />
<p>{props.description}</p>
</a>
);
}
function Footer(props) {
return (
<footer className="footer">
<a href="/impressum.html" className="footer-link">
Impressum und Datenschutz
</a>
</footer>
);
}
if (typeof window !== 'undefined') {
hydrate(<App/>, document.getElementById('app'));
}
export async function prerender(data) {
return await ssr(<App {...data} />);
}

109
src/style.css Normal file
View File

@@ -0,0 +1,109 @@
:root {
--base: #24273a;
--mantle: #1e2030;
--text: #cad3f5;
--lavender: #b7bdf8;
--lavender-alpha: #b7bdf880;
--surface0: #363a4f;
--surface0-alpha: #363a4fcc;
font-family: "Fira Sans", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color: var(--text);
background-color: var(--base);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
display: flex;
align-items: center;
min-height: 100vh;
}
#app {
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
#personal-logo:hover {
filter: drop-shadow(0 0 2em var(--lavender-alpha));
}
h1 {
font-size: 3rem;
color: var(--lavender);
}
section {
margin-top: 2.5rem;
display: grid;
grid-template-columns: repeat(2, fit-content(33%));
column-gap: 2rem;
justify-content: center;
}
.card {
display: flex;
flex-direction: column;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-align: left;
text-decoration: none;
color: var(--text);
background-color: var(--mantle);
border: 1px solid transparent;
}
.card:hover {
border: 1px solid var(--lavender);
box-shadow: 0 25px 50px -12px var(--lavender-alpha);
}
.card h2 {
color: var(--lavender);
text-transform: uppercase;
}
.card img {
align-self: center;
}
.footer {
padding: 1rem;
margin-top: 2rem;
width: 100%;
}
.footer-link {
text-align: center;
text-decoration: none;
color: var(--text);
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background-color: var(--surface0-alpha);
backdrop-filter: blur(10px);
}
.footer-link:hover {
background-color: var(--surface0);
}
@media (max-width: 639px) {
#app {
margin: 2rem;
}
section {
margin-top: 5rem;
grid-template-columns: 1fr;
row-gap: 1rem;
}
}

20
tsconfig.json Normal file
View File

@@ -0,0 +1,20 @@
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "bundler",
"noEmit": true,
"allowJs": true,
"checkJs": true,
/* Preact Config */
"jsx": "react-jsx",
"jsxImportSource": "preact",
"skipLibCheck": true,
"paths": {
"react": ["./node_modules/preact/compat/"],
"react-dom": ["./node_modules/preact/compat/"]
}
},
"include": ["node_modules/vite/client.d.ts", "**/*"]
}

14
vite.config.ts Normal file
View File

@@ -0,0 +1,14 @@
import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
preact({
prerender: {
enabled: true,
renderTarget: '#app',
},
}),
],
});

View File

@@ -0,0 +1,17 @@
// vite.config.ts
import { defineConfig } from "file:///home/niklas/Dokumente/programmierung/web/niklas-birk.de/node_modules/.deno/vite@7.3.0/node_modules/vite/dist/node/index.js";
import preact from "file:///home/niklas/Dokumente/programmierung/web/niklas-birk.de/node_modules/.deno/@preact+preset-vite@2.10.2/node_modules/@preact/preset-vite/dist/esm/index.mjs";
var vite_config_default = defineConfig({
plugins: [
preact({
prerender: {
enabled: true,
renderTarget: "#app"
}
})
]
});
export {
vite_config_default as default
};
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlUm9vdCI6ICJmaWxlOi8vL2hvbWUvbmlrbGFzL0Rva3VtZW50ZS9wcm9ncmFtbWllcnVuZy93ZWIvbmlrbGFzLWJpcmsuZGUvIiwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9uaWtsYXMvRG9rdW1lbnRlL3Byb2dyYW1taWVydW5nL3dlYi9uaWtsYXMtYmlyay5kZVwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL2hvbWUvbmlrbGFzL0Rva3VtZW50ZS9wcm9ncmFtbWllcnVuZy93ZWIvbmlrbGFzLWJpcmsuZGUvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL2hvbWUvbmlrbGFzL0Rva3VtZW50ZS9wcm9ncmFtbWllcnVuZy93ZWIvbmlrbGFzLWJpcmsuZGUvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJztcbmltcG9ydCBwcmVhY3QgZnJvbSAnQHByZWFjdC9wcmVzZXQtdml0ZSc7XG5cbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuXHRwbHVnaW5zOiBbXG5cdFx0cHJlYWN0KHtcblx0XHRcdHByZXJlbmRlcjoge1xuXHRcdFx0XHRlbmFibGVkOiB0cnVlLFxuXHRcdFx0XHRyZW5kZXJUYXJnZXQ6ICcjYXBwJyxcblx0XHRcdH0sXG5cdFx0fSksXG5cdF0sXG59KTtcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBMFYsU0FBUyxvQkFBb0I7QUFDdlgsT0FBTyxZQUFZO0FBR25CLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzNCLFNBQVM7QUFBQSxJQUNSLE9BQU87QUFBQSxNQUNOLFdBQVc7QUFBQSxRQUNWLFNBQVM7QUFBQSxRQUNULGNBQWM7QUFBQSxNQUNmO0FBQUEsSUFDRCxDQUFDO0FBQUEsRUFDRjtBQUNELENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==