Skip to content

Commit 9409cb3

Browse files
DevLabStudyDevLabStudy
authored
Update homelab.html
1 parent 253ea0a commit 9409cb3

1 file changed

Lines changed: 19 additions & 152 deletions

File tree

‎homelab.html‎

Lines changed: 19 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -4,196 +4,63 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>DevLabStudy© | HomeLab & Infrastructure</title>
7-
8-
<link rel="icon" type="image/png" href="qr-code.png?v=fixed_buttons">
9-
<link rel="shortcut icon" type="image/png" href="qr-code.png?v=fixed_buttons">
10-
7+
<link rel="icon" type="image/png" href="/qr-code.png?v=fixed_buttons">
118
<style>
12-
/* --- BAZA I ZMIENNE KOLORÓW --- */
139
:root {
1410
--bg-body: #f4f7fa; --bg-nav: #ffffff; --bg-card: #ffffff;
1511
--text-main: #1e293b; --text-muted: #64748b; --border-color: #e2e8f0;
1612
--accent-blue: #2563eb; --accent-green: #10b981;
1713
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 10px 25px rgba(0,0,0,0.05);
1814
--radius: 12px;
1915
}
20-
2116
@media (prefers-color-scheme: dark) {
2217
:root {
2318
--bg-body: #0f172a; --bg-nav: #1e293b; --bg-card: #1e293b;
2419
--text-main: #f8fafc; --text-muted: #94a3b8; --border-color: #334155;
2520
--accent-blue: #3b82f6; --accent-green: #10b981;
2621
--shadow-sm: 0 4px 6px rgba(0,0,0,0.3); --shadow-md: 0 10px 25px rgba(0,0,0,0.4);
2722
}
28-
.btn { box-shadow: none !important; border: 1px solid var(--border-color); }
29-
.btn-gh { background: #111827 !important; }
30-
.btn-patreon { background: #111827 !important; }
31-
.focus-box { background: rgba(59, 130, 246, 0.1) !important; }
3223
}
33-
34-
body {
35-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
36-
background: var(--bg-body); color: var(--text-main); margin: 0; padding: 0; line-height: 1.6; -webkit-font-smoothing: antialiased;
37-
}
38-
39-
/* --- NOWY NAVBAR --- */
24+
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg-body); color: var(--text-main); margin: 0; padding: 0; line-height: 1.6; -webkit-font-smoothing: antialiased; }
4025
.navbar { background: var(--bg-nav); border-bottom: 1px solid var(--border-color); padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
41-
.nav-brand { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; color: var(--text-main); text-decoration: none; }
42-
43-
/* Menu wewnętrzne */
26+
.nav-brand { font-size: 1.5rem; font-weight: 800; color: var(--text-main); text-decoration: none; }
4427
.nav-internal-links { display: flex; gap: 20px; align-items: center; }
4528
.nav-internal-links a { text-decoration: none; color: var(--text-muted); font-weight: 600; transition: color 0.2s; }
4629
.nav-internal-links a:hover, .nav-internal-links a.active { color: var(--accent-blue); }
47-
4830
.container { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
49-
5031
.hero { text-align: center; margin-bottom: 50px; }
5132
.hero h1 { font-size: 2.2rem; margin-bottom: 10px; }
5233
.hero p { color: var(--text-muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
53-
54-
.focus-box { background: #eff6ff; border-left: 5px solid var(--accent-blue); padding: 25px 30px; border-radius: var(--radius); margin: 30px auto 50px auto; max-width: 800px; box-shadow: var(--shadow-sm); }
55-
.focus-box h3 { margin-top: 0; color: var(--accent-blue); font-size: 1.2rem; margin-bottom: 10px; }
56-
57-
.section-title { font-size: 1.4rem; font-weight: 700; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; margin-bottom: 25px; color: var(--text-main); }
58-
59-
/* --- SIATKA SERWERÓW --- */
60-
.nodes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 50px; align-items: stretch; }
61-
.node-card { background: var(--bg-card); border: 1px solid var(--border-color); padding: 25px; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: all 0.2s ease; position: relative; display: flex; flex-direction: column; }
62-
.node-card:hover { border-color: var(--accent-blue); transform: translateY(-4px); box-shadow: var(--shadow-md); }
63-
.status-badge { position: absolute; top: 25px; right: 25px; background: rgba(16, 185, 129, 0.1); color: var(--accent-green); padding: 4px 10px; border-radius: 20px; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; }
64-
.status-vps { background: rgba(37, 99, 235, 0.1); color: var(--accent-blue); }
65-
.node-name { display: block; font-size: 1.2rem; font-weight: 700; margin-bottom: 15px; color: var(--text-main); padding-right: 60px;}
66-
.specs { font-size: 0.9rem; color: var(--text-muted); margin-top: auto; }
67-
.spec-line { display: flex; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
68-
.spec-line:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
69-
.spec-icon { margin-right: 10px; font-weight: bold; color: var(--text-main); opacity: 0.7; width: 65px; display: inline-block; }
70-
71-
/* --- PRZYCISKI SUPPORT / SOCIAL --- */
72-
.btn { display: inline-block; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.85rem; color: white !important; transition: all 0.2s ease; box-shadow: var(--shadow-sm); text-align: center; box-sizing: border-box; white-space: nowrap; padding: 10px 20px; }
73-
.btn:hover { transform: translateY(-2px); opacity: 0.9; }
74-
.btn-gh { background: #24292e; } .btn-coffee { background: #FFDD00; color: #000 !important; } .btn-patreon { background: #FF424D; }
75-
76-
.support-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 40px; text-align: center; margin-top: 50px; box-shadow: var(--shadow-sm); }
77-
.support-links { display: flex; justify-content: center; gap: 15px; margin-top: 20px; flex-wrap: wrap; }
78-
79-
footer { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin: 50px 0 30px 0; padding-top: 20px; border-top: 1px solid var(--border-color); }
80-
81-
@media (max-width: 768px) { .navbar { flex-direction: column; gap: 15px; padding: 15px; } .nav-internal-links { justify-content: center; flex-wrap: wrap; } }
34+
.section-title { font-size: 1.4rem; font-weight: 700; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; margin-bottom: 25px; }
35+
.nodes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
36+
.node-card { background: var(--bg-card); border: 1px solid var(--border-color); padding: 25px; border-radius: var(--radius); position: relative; transition: 0.2s; }
37+
.node-card:hover { border-color: var(--accent-blue); transform: translateY(-4px); }
38+
.status-badge { position: absolute; top: 25px; right: 25px; background: rgba(16, 185, 129, 0.1); color: var(--accent-green); padding: 4px 10px; border-radius: 20px; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; }
39+
.node-name { display: block; font-size: 1.2rem; font-weight: 700; margin-bottom: 15px; }
40+
.spec-line { display: flex; align-items: center; margin-bottom: 8px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; font-size: 0.9rem; }
41+
.spec-icon { width: 65px; font-weight: bold; opacity: 0.7; }
42+
footer { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin-top: 50px; padding: 20px; border-top: 1px solid var(--border-color); }
8243
</style>
8344
</head>
8445
<body>
85-
8646
<nav class="navbar">
8747
<a href="/" class="nav-brand">DevLabStudy©</a>
88-
8948
<div class="nav-internal-links">
9049
<a href="/">Hub</a>
91-
<a href="/blog.html">Blog</a>
92-
<a href="/homelab.html" class="active" style="color: var(--accent-blue);">HomeLab</a>
93-
<a href="/orbit.html">Orbit™</a>
50+
<a href="/blog">Blog</a>
51+
<a href="/homelab" class="active">HomeLab</a>
52+
<a href="/orbit">Orbit™</a>
9453
</div>
9554
</nav>
96-
9755
<main class="container">
9856
<section class="hero">
99-
<h1>Infrastructure & HomeLab</h1>
100-
<p>Buduję, uczę się i optymalizuję środowiska serwerowe, systemy Linux oraz kontenery Docker.</p>
57+
<h1>HomeLab & Infrastructure</h1>
58+
<p>Building, learning, and optimizing server environments, Linux systems, and Docker containers.</p>
10159
</section>
102-
103-
<div class="focus-box">
104-
<h3>Current Journey: Docker Optimization</h3>
105-
<p>
106-
Obecnie zgłębiam temat <strong>optymalizacji obrazów Docker</strong>. Moim celem jest nauka budowania wydajnych, bezpiecznych i lekkich obrazów dla projektu <strong>Orbit™</strong>, testując je na węzłach w moim domowym laboratorium.
107-
</p>
108-
</div>
109-
110-
<h2 class="section-title">HomeLab Nodes & Infrastructure</h2>
60+
<h2 class="section-title">Nodes Status</h2>
11161
<div class="nodes-grid">
112-
113-
<div class="node-card">
114-
<span class="status-badge">Online</span>
115-
<span class="node-name">HP Compaq Pro 6300 SFF</span>
116-
<div class="specs">
117-
<div class="spec-line"><span class="spec-icon">CPU:</span> i5-3470 (4 Cores)</div>
118-
<div class="spec-line"><span class="spec-icon">RAM:</span> 16GB DDR3</div>
119-
<div class="spec-line"><span class="spec-icon">Storage:</span> 256GB SSD + 250GB SSD + 1TB HDD + 500GB HDD</div>
120-
</div>
121-
</div>
122-
123-
<div class="node-card">
124-
<span class="status-badge">Online</span>
125-
<span class="node-name">Packard Bell (pve-laptop)</span>
126-
<div class="specs">
127-
<div class="spec-line"><span class="spec-icon">CPU:</span> i5-2410M</div>
128-
<div class="spec-line"><span class="spec-icon">RAM:</span> 8GB</div>
129-
<div class="spec-line"><span class="spec-icon">GPU:</span> GT 540M</div>
130-
<div class="spec-line"><span class="spec-icon">Storage:</span> 120GB SSD</div>
131-
</div>
132-
</div>
133-
134-
<div class="node-card">
135-
<span class="status-badge">Online</span>
136-
<span class="node-name">Motherboard Node</span>
137-
<div class="specs">
138-
<div class="spec-line"><span class="spec-icon">CPU:</span> i3-5005U</div>
139-
<div class="spec-line"><span class="spec-icon">RAM:</span> 8GB</div>
140-
<div class="spec-line"><span class="spec-icon">GPU:</span> GeForce 920M</div>
141-
<div class="spec-line"><span class="spec-icon">Storage:</span> Pendrive 128GB (OS)</div>
142-
</div>
143-
</div>
144-
145-
<div class="node-card">
146-
<span class="status-badge">Online</span>
147-
<span class="node-name">Asus Legacy</span>
148-
<div class="specs">
149-
<div class="spec-line"><span class="spec-icon">CPU:</span> Core 2 Duo T6500</div>
150-
<div class="spec-line"><span class="spec-icon">RAM:</span> 4GB</div>
151-
<div class="spec-line"><span class="spec-icon">GPU:</span> GT 120M</div>
152-
<div class="spec-line"><span class="spec-icon">Storage:</span> 500GB HDD + 160GB HDD</div>
153-
</div>
15462
</div>
155-
156-
<div class="node-card">
157-
<span class="status-badge">Online</span>
158-
<span class="node-name">Asus VivoBook 15</span>
159-
<div class="specs">
160-
<div class="spec-line"><span class="spec-icon">CPU:</span> Celeron N4000</div>
161-
<div class="spec-line"><span class="spec-icon">RAM:</span> 4GB</div>
162-
<div class="spec-line"><span class="spec-icon">Storage:</span> 256GB SSD</div>
163-
</div>
164-
</div>
165-
166-
<div class="node-card">
167-
<span class="status-badge status-vps">Cloud Node</span>
168-
<span class="node-name">VPS Cloud</span>
169-
<div class="specs">
170-
<div class="spec-line"><span class="spec-icon">CPU:</span> 1 vCore</div>
171-
<div class="spec-line"><span class="spec-icon">RAM:</span> 2GB</div>
172-
<div class="spec-line"><span class="spec-icon">OS:</span> Ubuntu 24.04 LTS</div>
173-
<div class="spec-line"><span class="spec-icon">Storage:</span> 10GB SSD</div>
174-
</div>
175-
</div>
176-
177-
</div>
178-
179-
<section class="support-section">
180-
<h2 style="margin-top: 0; color: var(--accent-blue);">Support My Journey</h2>
181-
<p style="color: var(--text-muted); max-width: 600px; margin: 0 auto;">
182-
Każde wsparcie pomaga mi w zakupie nowych części do laboratorium, opłacaniu domen i serwerów VPS oraz daje więcej czasu na rozwój projektu <strong>Orbit™</strong>.
183-
</p>
184-
185-
<div class="support-links">
186-
<a href="https://github.com/sponsors/DevLabStudy" class="btn btn-gh">GitHub Sponsor</a>
187-
<a href="https://www.patreon.com/DevLabStudy" class="btn btn-patreon">Patreon</a>
188-
<a href="https://www.buymeacoffee.com/devlabstudy" class="btn btn-coffee">Buy Me a Coffee</a>
189-
</div>
190-
</section>
191-
19263
</main>
193-
194-
<footer>
195-
<p>1 Gbps Fiber - Linux Mint 22.3 - Orbit™ Project 2026</p>
196-
</footer>
197-
64+
<footer><p>Orbit™ Project 2026</p></footer>
19865
</body>
19966
</html>

0 commit comments

Comments
 (0)