newWebsite2.0
This commit is contained in:
Br0tcraft
309
about.html
Normal file
309
about.html
Normal file
@@ -0,0 +1,309 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user