newWebsite2.0
This commit is contained in:
Br0tcraft
175
projects.html
Normal file
175
projects.html
Normal file
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BR0TCRAFT | Projekte</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>
|
||||
.project-status {
|
||||
display: inline-block;
|
||||
font-family: var(--font-code);
|
||||
font-size: 0.68rem;
|
||||
padding: 2px 7px;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background: rgba(77, 255, 128, 0.08);
|
||||
color: #4dff80;
|
||||
border: 1px solid rgba(77, 255, 128, 0.15);
|
||||
}
|
||||
|
||||
.status-wip {
|
||||
background: rgba(255, 180, 0, 0.08);
|
||||
color: #ffb400;
|
||||
border: 1px solid rgba(255, 180, 0, 0.15);
|
||||
}
|
||||
|
||||
.status-done {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #555;
|
||||
border: 1px solid #222;
|
||||
}
|
||||
|
||||
.card-stack {
|
||||
font-size: 0.78rem;
|
||||
font-family: var(--font-code);
|
||||
color: var(--accent-primary);
|
||||
margin-top: auto;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.project-links {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
margin-top: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
font-size: 0.78rem;
|
||||
font-family: var(--font-code);
|
||||
color: var(--text-muted);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid #222;
|
||||
border-radius: 4px;
|
||||
padding: 3px 10px;
|
||||
text-decoration: none;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.link-btn:hover {
|
||||
color: #fff;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.link-btn.primary {
|
||||
color: var(--accent-primary);
|
||||
border-color: rgba(255, 77, 77, 0.25);
|
||||
}
|
||||
|
||||
.link-btn.primary:hover {
|
||||
background: rgba(255, 77, 77, 0.08);
|
||||
}
|
||||
</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" class="active">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">
|
||||
<section class="section">
|
||||
<h1 style="font-family: var(--font-display); margin-bottom: 0.5rem; color: #fff;">Projects</h1>
|
||||
<p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 3rem;">
|
||||
Dinge, die ich gebaut habe oder noch baue.
|
||||
</p>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<article class="card">
|
||||
<a href="extensions.html" class="card-image-link">
|
||||
<div
|
||||
style="height: 150px; background: linear-gradient(135deg, #1a0000, #ff4d4d22); display: flex; align-items: center; justify-content: center;">
|
||||
<h2
|
||||
style="font-family: var(--font-display); color: var(--accent-primary); letter-spacing: 1px; font-size: 1.5rem;">
|
||||
EXTENSIONS</h2>
|
||||
</div>
|
||||
</a>
|
||||
<div class="card-content">
|
||||
<span class="project-status status-active">aktiv</span>
|
||||
<h3 class="card-title"><a href="extensions.html">Scratch Extensions</a></h3>
|
||||
<p class="card-desc">Meine Sammlung an Erweiterungen für TurboWarp, PenguinMod und SE!.</p>
|
||||
<div class="card-stack">JS · TurboWarp API</div>
|
||||
<div class="project-links">
|
||||
<a href="extensions.html" class="link-btn primary">→ öffnen</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<a href="/br0tkabeln/" class="card-image-link">
|
||||
<div style="height: 150px; background: #1a0000; overflow: hidden;">
|
||||
<img src="img/Apps/Br0tkabeln.jpg" style="width:100%; height:100%; object-fit: cover;" alt="Br0tkabeln">
|
||||
</div>
|
||||
</a>
|
||||
<div class="card-content">
|
||||
<span class="project-status status-active">aktiv</span>
|
||||
<h3 class="card-title"><a href="/br0tkabeln/">Br0tkabeln</a></h3>
|
||||
<p class="card-desc">Simpler Vokabeltrainer mit Fokus auf Privacy. Keine Accounts, keine Cloud.</p>
|
||||
<div class="card-stack">Python · Flask · JS</div>
|
||||
<div class="project-links">
|
||||
<a href="/br0tkabeln/" class="link-btn primary">→ öffnen</a>
|
||||
<a href="https://github.com/Br0tcraft" target="_blank" class="link-btn">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div style="height: 150px; background: #1a0000; overflow: hidden;">
|
||||
<img src="img/Apps/snake-large.png" style="width:100%; height:100%; object-fit: cover;" alt="Snake">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span class="project-status status-done">abgeschlossen</span>
|
||||
<h3 class="card-title">Tiny Snake</h3>
|
||||
<p class="card-desc">Ein Rewrite des Klassikers. Hauptsächlich um C++ besser zu lernen.</p>
|
||||
<div class="card-stack">C++</div>
|
||||
<div class="project-links">
|
||||
<a href="https://github.com/Br0tcraft" target="_blank" class="link-btn">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div style="height: 150px; background: #111; display: flex; align-items: center; justify-content: center;">
|
||||
<span style="font-family: var(--font-code); font-size: 0.75rem; color: #2a2a2a;">in Arbeit</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span class="project-status status-wip">⧖ in Arbeit</span>
|
||||
<h3 class="card-title">Demnächst</h3>
|
||||
<p class="card-desc">Weitere Projekte folgen. Kein ETA.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user