br0tkasten/test.br0tcraft.de
1
0
Fork 0
Code Activity

newWebsite2.0

Browse Source
This commit is contained in:
Br0tcraft
2026-08-20 20:36:47 +02:00
parent 7020f970d8
commit 7d975feae4
100 changed files with 6774 additions and 3327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
index.html
View File

@@ -1,99 +1,266 @@
<!DOCTYPE html>
<html>
<html lang="de">
<head>
<link rel="icon" href="img/favicon.jpg" type="image/png">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>BR0TCRAFT</title>
</head>
<body>
<div class="header">
<h1>BR0TCRAFT</h1>
</div>
<div class="header-image">
<img src="img/Background3.jpg" alt="Header Image">
</div>
<div class="contact-icons">
<a href="your discord link" target="_blank"><img src="img/contact/discord.png" alt="Discord"></a>
<a href="mailto:info.br0tcraft.de"><img src="img/contact/email.png" alt="Email"></a>
<a href="https://github.com/Br0tcraft"><img src="img/contact/github.png" alt="Email"></a>
</div>
<div class="container">
<div class="section">
<div class="section-title">Apps</div>
<a href="apps/Br0tbot/index.html" class="item">
<div class="item-content">
<img src="img/Apps/TigerBr0tbot-large.png" alt="App 1 Image">
<div class="item-text">Br0tbot</div>
</div>
</a>
<a href="apps/Tiny-Snake/index.html" class="item">
<div class="item-content">
<img src="img/Apps/snake-large.png" alt="App 1 Image">
<div class="item-text">Tiny Snake</div>
</div>
</a>
<a href="apps/Br0tkabeln/index.html" class="item">
<div class="item-content">
<img src="img/Apps/Br0tkabelnlarge.png" alt="App 1 Image">
<div class="item-text">Br0tkabeln</div>
</div>
</a>
</div>
<div class="section">
<div class="section-title">Entwicklungsumgebungen</div>
<a href="/enviroments/PocketCode/index.html" class="item devvlog-item">
<div class="item-content">
<img src="img/developmentEnvironment/PocketCode.jpeg" alt="App 1 Image">
<div class="item-text">Pocket Code</div>
</div>
</a>
<a href="" class="item devvlog-item">
<div class="item-content">
<img src="img/Background3.jpg" alt="App 1 Image">
<div class="item-text">bald kommt mehr</div>
</div>
</a>
</div>
<div class="section">
<div class="section-title">Devvlogs</div>
<a href="apps/Tiny-Snake/index.html" class="item devvlog-item">
<div class="item-content">
<img src="img/Apps/Earthlarge.png" alt="App 1 Image">
<div class="item-text">The Simulation</div>
</div>
</a>
<a href="" class="item devvlog-item">
<div class="item-content">
<img src="img/Background3.jpg" alt="App 1 Image">
<div class="item-text">Bald kommt mehr</div>
</div>
</a>
</div>
<div class="section">
<div class="section-title">Anleitungen</div>
<a href="/" class="item anleitung-item">
<div class="item-content">
<img src="/img/developmentEnvironment/PocketCode.jpeg" alt="App 1 Image">
<div class="item-text">Erstes Handy game (Pocket Code) kommt bald</div>
</div>
</a>
<a href="/" class="item anleitung-item">
<div class="item-content">
<img src="/img/Background3.jpg" alt="App 1 Image">
<div class="item-text">mehr kommt bald ... irgendwann ... vielleicht ...</div>
</div>
</a>
</div>
</div>
<script>
document.addEventListener("visibilitychange", (event) => {
if (document.visibilityState == "visible") {
document.title = "BR0TCRAFT";
} else {
document.title = "Come back, please";
<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;
}
});
</script>
.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 &amp; 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>