309 lines
9.1 KiB
HTML
309 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>BR0TCRAFT | About</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@300;400;600;800&family=Orbitron:wght@700&display=swap"
|
||
rel="stylesheet">
|
||
<style>
|
||
.about-prose {
|
||
max-width: 680px;
|
||
color: var(--text-muted);
|
||
line-height: 1.8;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.about-prose p {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.about-prose strong {
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.trait-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
gap: 1rem;
|
||
margin-top: 1.25rem;
|
||
}
|
||
|
||
.trait-box {
|
||
border: 1px solid #222;
|
||
border-radius: var(--radius);
|
||
padding: 1.25rem 1.5rem;
|
||
}
|
||
|
||
.trait-box .trait-label {
|
||
font-family: var(--font-code);
|
||
font-size: 0.72rem;
|
||
color: var(--accent-primary);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
|
||
.trait-box ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.trait-box ul li {
|
||
color: var(--text-muted);
|
||
font-size: 0.9rem;
|
||
line-height: 1.7;
|
||
padding-left: 1rem;
|
||
position: relative;
|
||
}
|
||
|
||
.trait-box ul li::before {
|
||
content: '–';
|
||
position: absolute;
|
||
left: 0;
|
||
color: #444;
|
||
}
|
||
|
||
/* Journey Timeline */
|
||
.timeline {
|
||
position: relative;
|
||
max-width: 680px;
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 7px;
|
||
top: 6px;
|
||
bottom: 0;
|
||
width: 1px;
|
||
background: #2a2a2a;
|
||
}
|
||
|
||
.tl-item {
|
||
display: flex;
|
||
gap: 1.5rem;
|
||
margin-bottom: 2rem;
|
||
position: relative;
|
||
}
|
||
|
||
.tl-dot {
|
||
width: 15px;
|
||
height: 15px;
|
||
border-radius: 50%;
|
||
background: #1a1a1a;
|
||
border: 1px solid #444;
|
||
flex-shrink: 0;
|
||
margin-top: 4px;
|
||
position: relative;
|
||
z-index: 1;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.tl-item:hover .tl-dot {
|
||
border-color: var(--accent-primary);
|
||
}
|
||
|
||
.tl-label {
|
||
font-family: var(--font-code);
|
||
font-size: 0.75rem;
|
||
color: #555;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.tl-body h4 {
|
||
color: #fff;
|
||
font-size: 0.95rem;
|
||
margin-bottom: 0.4rem;
|
||
}
|
||
|
||
.tl-body p {
|
||
color: var(--text-muted);
|
||
font-size: 0.9rem;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.tl-tag {
|
||
display: inline-block;
|
||
font-size: 0.72rem;
|
||
font-family: var(--font-code);
|
||
color: var(--accent-primary);
|
||
background: rgba(255, 77, 77, 0.07);
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
margin-top: 0.4rem;
|
||
}
|
||
|
||
/* Plans */
|
||
.plan-list {
|
||
max-width: 600px;
|
||
margin-top: 1.25rem;
|
||
}
|
||
|
||
.plan-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
padding: 1rem 0;
|
||
border-bottom: 1px solid #1e1e1e;
|
||
}
|
||
|
||
.plan-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.plan-index {
|
||
font-family: var(--font-code);
|
||
font-size: 0.75rem;
|
||
color: #444;
|
||
min-width: 28px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.plan-item h4 {
|
||
color: #fff;
|
||
font-size: 0.95rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.plan-item p {
|
||
color: var(--text-muted);
|
||
font-size: 0.88rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.section-divider {
|
||
height: 1px;
|
||
background: #1e1e1e;
|
||
margin: 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<nav class="navbar">
|
||
<div class="brand">BR0TCRAFT</div>
|
||
<div class="nav-links">
|
||
<a href="index.html">Home</a>
|
||
<a href="projects.html">Projects</a>
|
||
<a href="tutorials.html">Dev Notes</a>
|
||
<a href="about.html" class="active">About</a>
|
||
<a href="assets.html">Assets</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container">
|
||
<section class="section">
|
||
<h1 style="font-family: var(--font-display); margin-bottom: 2rem; color: #fff;">About me</h1>
|
||
|
||
<div class="about-prose">
|
||
<p>
|
||
Für mich ist Programmieren wie ein aufgeräumter Schreibtisch: Es arbeitet sich einfach besser, wenn die
|
||
Struktur
|
||
stimmt. Während ich Python nutze, um Ideen schnell und verständlich in Prototypen zu verwandeln, reizt mich an
|
||
C++ die Nähe zur Hardware. Es ist für mich der Schlüssel, um nicht nur Code zu schreiben, sondern auch den
|
||
Computer dahinter besser zu begreifen.
|
||
<br><br>
|
||
Aktuell probiere ich mich viel in der 3DS-Homebrew-Szene aus. Dabei liegt mein Fokus nicht auf maximaler
|
||
High-End-
|
||
Performance, sondern auf Handwerk: Ich achte auf Cache-Effizienz bei Iterationen, ein sauberes Error-Handling
|
||
und
|
||
eine Logik, die auch nach Monaten noch nachvollziehbar ist. Ich optimiere lieber Daten im Vorfeld, statt
|
||
später
|
||
Ladezeiten zu flicken.
|
||
<br><br>
|
||
In der Open-Source-Welt trage ich dort bei, wo mich die Themen persönlich packen. Ich muss nicht das nächste
|
||
große Framework erfinden, mir geht es darum, sinnvolle Verbesserungen beizusteuern und durch eigene
|
||
Nischenprojekte zu lernen. Am Ende ist jedes Tool für mich ein Erfolg, wenn es ein echtes Problem löst und
|
||
sich der Code dabei „richtig“ anfühlt.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="section-divider"></div>
|
||
<section class="section">
|
||
<h2 style="font-family: var(--font-display); margin-bottom: 0.5rem; color: #fff;">Journey</h2>
|
||
<p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem;">Was ich bisher so ausprobiert hatte
|
||
</p>
|
||
|
||
<div class="timeline">
|
||
|
||
<div class="tl-item">
|
||
<div class="tl-dot"></div>
|
||
<div class="tl-body">
|
||
<div class="tl-label">Anfang</div>
|
||
<h4>Scratch</h4>
|
||
<p>Wie wahrscheinlich viele andere auch. Logik verstehen, Konzepte ausprobieren, ohne dass ein Compiler
|
||
sich
|
||
beschwert. Es war für mich ein wohl sinnvoller Einstieg in die Welt der Programmierung.</p>
|
||
<span class="tl-tag">Scratch</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tl-item">
|
||
<div class="tl-dot"></div>
|
||
<div class="tl-body">
|
||
<div class="tl-label">Erstes echtes Projekt</div>
|
||
<h4>Unity & C#</h4>
|
||
<p>Mein erstes richtiges Projekt war ein Mobile Game, das ich tatsächlich bis zum Release gebracht habe.
|
||
Es
|
||
war zwar nicht das innovativste Spiel der Welt, aber meine Freunde haben es gespielt und es hat mir
|
||
bewiesen, dass ich Projekte zu Ende bringen kann. C# und Unity waren ein guter Einstieg, aber nach dem
|
||
Projekt wusste ich, das ich tiefer in die Softwareentwicklung eintauchen will. Reinen
|
||
Spielelogik lag mir leider nicht so.</p>
|
||
<span class="tl-tag">C#</span>
|
||
<span class="tl-tag">Unity</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tl-item">
|
||
<div class="tl-dot"></div>
|
||
<div class="tl-body">
|
||
<div class="tl-label">Alternative</div>
|
||
<h4>Godot ausprobiert</h4>
|
||
<p>Schnellere Iterationen, leichtgewichtiger und GDScript war herrlich unkompliziert. Als Unity Ende 2023
|
||
die Lizenzpolitik änderte, fiel der Wechsel leicht. Auch wenn hier kein fertiges Spiel entstanden ist,
|
||
habe ich bei den Experimenten extrem viel über Architektur und sauberen Code gelernt. </p>
|
||
<span class="tl-tag">GDScript</span>
|
||
<span class="tl-tag">Godot</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tl-item">
|
||
<div class="tl-dot"></div>
|
||
<div class="tl-body">
|
||
<div class="tl-label">Parallel</div>
|
||
<h4>Python & JavaScript</h4>
|
||
<p>Python nutze ich vor allem für Backends und Automatisierungen, es ist nach wie vor meine erste Wahl,
|
||
wenn es darum geht, schnell produktiv zu sein. JavaScript war ein kurzer Ausflug, nicht unbedingt meine
|
||
Lieblingssprache, aber ein notwendiges und brauchbares Werkzeug für alles, was im Browser stattfindet.
|
||
</p>
|
||
<span class="tl-tag">Python</span>
|
||
<span class="tl-tag">JavaScript</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tl-item">
|
||
<div class="tl-dot" style="border-color: var(--accent-primary);"></div>
|
||
<div class="tl-body">
|
||
<div class="tl-label">Aktuell</div>
|
||
<h4>C++</h4>
|
||
<p>Hier bin ich momentan. Und das nicht weil es einfach ist, sondern weil ich wissen will, was unter
|
||
der Oberfläche passiert. C++ ist oft frustrierend, aber genau deshalb so lehrreich.</p>
|
||
<span class="tl-tag">C++</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
</body>
|
||
|
||
</html> |