266 lines
7.8 KiB
HTML
266 lines
7.8 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 | Home</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>
|
|
.hero-short {
|
|
font-size: 1.15rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.7;
|
|
max-width: 560px;
|
|
}
|
|
|
|
.hero-short strong {
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.expand-toggle {
|
|
background: none;
|
|
border: none;
|
|
color: var(--accent-primary);
|
|
font-family: var(--font-code);
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin-top: 0.75rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.expand-toggle:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.hero-long {
|
|
display: none;
|
|
font-size: 1rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.75;
|
|
max-width: 600px;
|
|
margin-top: 1rem;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
.hero-long.visible {
|
|
display: block;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(4px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Current section */
|
|
.current-block {
|
|
border-left: 2px solid var(--accent-primary);
|
|
padding: 1.5rem 2rem;
|
|
background: rgba(255, 77, 77, 0.04);
|
|
border-radius: 0 var(--radius) var(--radius) 0;
|
|
}
|
|
|
|
.current-label {
|
|
font-family: var(--font-code);
|
|
font-size: 0.75rem;
|
|
color: var(--accent-primary);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.current-block h3 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.1rem;
|
|
color: #fff;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.current-block p {
|
|
color: var(--text-muted);
|
|
font-size: 0.95rem;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.current-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
/* Pinned article */
|
|
.pinned-card {
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: var(--radius);
|
|
padding: 1.5rem;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.pinned-card:hover {
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.pinned-tag {
|
|
font-family: var(--font-code);
|
|
font-size: 0.75rem;
|
|
color: var(--accent-primary);
|
|
margin-bottom: 0.6rem;
|
|
display: block;
|
|
}
|
|
|
|
.pinned-card h3 {
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.pinned-card p {
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
margin-bottom: 1rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar">
|
|
<div class="brand">BR0TCRAFT</div>
|
|
<div class="nav-links">
|
|
<a href="index.html" class="active">Home</a>
|
|
<a href="projects.html">Projects</a>
|
|
<a href="tutorials.html">Dev Notes</a>
|
|
<a href="about.html">About</a>
|
|
<a href="assets.html">Assets</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
|
|
<!-- Hero -->
|
|
<section class="section hero">
|
|
<div class="hero-content">
|
|
|
|
<div class="text-col">
|
|
<div class="social-row">
|
|
<a href="https://discord.gg/deinlink" target="_blank" class="social-link" title="Discord">
|
|
<img src="https://cdn.simpleicons.org/discord/ff4d4d" alt="Discord">
|
|
</a>
|
|
<a href="mailto:info@br0tcraft.de" class="social-link" title="Email">
|
|
<img src="https://cdn.simpleicons.org/gmail/ff4d4d" alt="Email">
|
|
</a>
|
|
<a href="https://github.com/Br0tcraft" target="_blank" class="social-link" title="GitHub">
|
|
<img src="https://cdn.simpleicons.org/github/ff4d4d" alt="Github">
|
|
</a>
|
|
</div>
|
|
|
|
<h1><span style="color:var(--accent-primary)">Br0tcraft</span></h1>
|
|
|
|
<p class="hero-short">
|
|
Ich baue Software, um zu verstehen, wie sie im Kern funktioniert. Am liebsten mit C++, Python oder Dart. Ob
|
|
technische Spielerei oder Nischen-Tools, ich mag Projekte, die nicht nur laufen, sondern auch eine saubere
|
|
Struktur unter der Haube haben.
|
|
<br>
|
|
<strong>Work in progress, mit Liebe zum Detail.</strong>
|
|
</p>
|
|
|
|
<div class="tech-stack" style="margin-top: 1.25rem;">
|
|
<span class="tech-tag">C++</span>
|
|
<span class="tech-tag">C#</span>
|
|
<span class="tech-tag">GDScript</span>
|
|
<span class="tech-tag">Python</span>
|
|
<span class="tech-tag">JavaScript</span>
|
|
<span class="tech-tag">Dart</span>
|
|
<span class="tech-tag">Scratch</span>
|
|
</div>
|
|
|
|
<div style="margin-top: 1.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap;">
|
|
<a href="projects.html" class="btn">Meine Projekte</a>
|
|
<a href="about.html" class="btn"
|
|
style="background: transparent; border: 1px solid #333; color: var(--text-muted);">Über mich</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="avatar-wrapper">
|
|
<img src="img/avatar.png" alt="Br0tcraft Avatar" class="avatar">
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2 style="font-family: var(--font-display); margin-bottom: 0.5rem; color: #fff;">
|
|
Contributions & Open Source
|
|
</h2>
|
|
<p style="color: var(--text-muted); margin-bottom: 2.5rem; max-width: 650px; font-size: 1.05rem;">
|
|
Ich bin definitiv kein Profi. Oft sitze ich vor dem Code und raufe mir die Haare, aber genau das macht den
|
|
Reiz aus. Sich an Projekte wagen, die eigentlich eine Nummer zu groß sind.
|
|
</p>
|
|
|
|
<div class="contribution-grid">
|
|
|
|
<div class="contribution-card">
|
|
<div class="contribution-header">
|
|
<img src="https://github.com/ScratchEverywhere/ScratchEverywhere/blob/main/gfx/icon.png?raw=true"
|
|
alt="Scratch Everywhere" class="contribution-logo">
|
|
<div class="contribution-title-area">
|
|
<h3>Scratch Everywhere</h3>
|
|
<div class="contribution-links">
|
|
<a href="https://github.com/ScratchEverywhere/ScratchEverywhere" target="_blank"
|
|
class="contribution-link">
|
|
<img src="https://cdn.simpleicons.org/github/a0a0a0" alt="GitHub"> Code
|
|
</a>
|
|
<a href="https://github.com/ScratchEverywhere/ScratchEverywhere" target="_blank"
|
|
class="contribution-link">
|
|
<img src="https://cdn.simpleicons.org/planetscale/a0a0a0" alt="Web"> Website
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contribution-body">
|
|
<p>
|
|
Es ist ein Projekt, das Scratch auf Plattformen wie die Wii, den 3DS oder Linux
|
|
bringt.
|
|
Ich lerne hier mehr über C++ und Teamwork als in jedem Tutorial ... auch wenn meine Pull Requests manchmal
|
|
zehn Anläufe brauchen, bis sie passen.
|
|
</p>
|
|
<ul class="contribution-points">
|
|
<li>Arbeit am C++ Kern und der UI-Logik</li>
|
|
<li>Fixing von Bugs (die ich oft erst selbst eingebaut habe)</li>
|
|
<li>Alte Hardware mit modernem Code zum Leben erwecken</li>
|
|
</ul>
|
|
<div class="contribution-status">
|
|
<span class="status-tag">Aktiv dabei</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |