Skip to content

Commit fc55a23

Browse files
DevLabStudyDevLabStudy
authored
Revise title and update HomeLab content
Updated the title and various text elements to reflect the HomeLab theme. Adjusted CSS styles for improved layout and responsiveness.
1 parent 56763c2 commit fc55a23

1 file changed

Lines changed: 52 additions & 256 deletions

File tree

‎homelab.html‎

Lines changed: 52 additions & 256 deletions
Original file line numberDiff line numberDiff line change
@@ -3,311 +3,107 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>DevLabStudy© | Infrastructure Dashboard</title>
6+
<title>DevLabStudy© | HomeLab & Infrastructure</title>
77

88
<link rel="icon" type="image/png" href="qr-code.png?v=fixed_buttons">
99
<link rel="shortcut icon" type="image/png" href="qr-code.png?v=fixed_buttons">
1010

11-
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3470563127228594" crossorigin="anonymous"></script>
12-
1311
<style>
14-
/* --- BAZA I ZMIENNE KOLORÓW (Light Mode) --- */
12+
/* --- BAZA I ZMIENNE KOLORÓW --- */
1513
:root {
16-
--bg-body: #f4f7fa;
17-
--bg-nav: #ffffff;
18-
--bg-card: #ffffff;
19-
--text-main: #1e293b;
20-
--text-muted: #64748b;
21-
--border-color: #e2e8f0;
22-
--accent-blue: #2563eb;
23-
--accent-green: #10b981;
24-
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
25-
--shadow-md: 0 10px 25px rgba(0,0,0,0.05);
14+
--bg-body: #f4f7fa; --bg-nav: #ffffff; --bg-card: #ffffff;
15+
--text-main: #1e293b; --text-muted: #64748b; --border-color: #e2e8f0;
16+
--accent-blue: #2563eb; --accent-green: #10b981;
17+
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 10px 25px rgba(0,0,0,0.05);
2618
--radius: 12px;
2719
}
2820

29-
/* --- TRYB CIEMNY (Dark Mode) --- */
3021
@media (prefers-color-scheme: dark) {
3122
:root {
32-
--bg-body: #0f172a;
33-
--bg-nav: #1e293b;
34-
--bg-card: #1e293b;
35-
--text-main: #f8fafc;
36-
--text-muted: #94a3b8;
37-
--border-color: #334155;
38-
--accent-blue: #3b82f6;
39-
--accent-green: #10b981;
40-
--shadow-sm: 0 4px 6px rgba(0,0,0,0.3);
41-
--shadow-md: 0 10px 25px rgba(0,0,0,0.4);
23+
--bg-body: #0f172a; --bg-nav: #1e293b; --bg-card: #1e293b;
24+
--text-main: #f8fafc; --text-muted: #94a3b8; --border-color: #334155;
25+
--accent-blue: #3b82f6; --accent-green: #10b981;
26+
--shadow-sm: 0 4px 6px rgba(0,0,0,0.3); --shadow-md: 0 10px 25px rgba(0,0,0,0.4);
4227
}
4328
.btn { box-shadow: none !important; border: 1px solid var(--border-color); }
4429
.btn-gh { background: #111827 !important; }
45-
.btn-x { background: #000000 !important; }
46-
.btn-tiktok { background: #111827 !important; }
30+
.btn-patreon { background: #111827 !important; }
4731
.focus-box { background: rgba(59, 130, 246, 0.1) !important; }
4832
}
4933

50-
/* --- GLOBALNE USTAWIENIA --- */
5134
body {
5235
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
53-
background: var(--bg-body);
54-
color: var(--text-main);
55-
margin: 0;
56-
padding: 0;
57-
line-height: 1.6;
58-
-webkit-font-smoothing: antialiased;
59-
}
60-
61-
/* --- NAVBAR (Pasek Nawigacji) --- */
62-
.navbar {
63-
background: var(--bg-nav);
64-
border-bottom: 1px solid var(--border-color);
65-
padding: 15px 30px;
66-
display: flex;
67-
justify-content: space-between;
68-
align-items: center;
69-
position: sticky;
70-
top: 0;
71-
z-index: 100;
72-
box-shadow: var(--shadow-sm);
73-
}
74-
75-
.nav-brand {
76-
font-size: 1.5rem;
77-
font-weight: 800;
78-
letter-spacing: -0.5px;
79-
color: var(--text-main);
80-
text-decoration: none;
81-
}
82-
83-
.nav-links {
84-
display: flex;
85-
gap: 10px;
86-
flex-wrap: wrap;
87-
justify-content: flex-end;
88-
}
89-
90-
/* --- PRZYCISKI (Sleek design) --- */
91-
.btn {
92-
display: inline-block;
93-
border-radius: 8px;
94-
text-decoration: none;
95-
font-weight: 600;
96-
font-size: 0.85rem;
97-
color: white !important;
98-
transition: all 0.2s ease;
99-
box-shadow: var(--shadow-sm);
100-
text-align: center;
101-
box-sizing: border-box;
102-
white-space: nowrap;
103-
padding: 8px 16px;
104-
}
105-
106-
/* BRUTALNA SIŁA CSS - Wymuszenie identycznych rozmiarów */
107-
.nav-links .btn {
108-
width: 140px !important;
109-
min-width: 140px !important;
110-
max-width: 140px !important;
111-
flex: none !important; /* Blokuje elastyczność Flexboxa */
112-
padding-left: 0 !important;
113-
padding-right: 0 !important;
114-
}
115-
.support-links .btn {
116-
width: 170px !important;
117-
min-width: 170px !important;
118-
max-width: 170px !important;
119-
flex: none !important;
120-
padding-left: 0 !important;
121-
padding-right: 0 !important;
36+
background: var(--bg-body); color: var(--text-main); margin: 0; padding: 0; line-height: 1.6; -webkit-font-smoothing: antialiased;
12237
}
12338

124-
.btn:hover { transform: translateY(-2px); opacity: 0.9; }
125-
126-
.btn-gh { background: #24292e; }
127-
.btn-reddit { background: #FF4500; }
128-
.btn-yt { background: #FF0000; }
129-
.btn-x { background: #000000; }
130-
.btn-tiktok { background: #010101; }
131-
.btn-coffee { background: #FFDD00; color: #000 !important; }
132-
.btn-patreon { background: #FF424D; }
39+
/* --- NOWY NAVBAR --- */
40+
.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; }
13342

134-
.btn-orbit {
135-
background: #4b0082;
136-
padding: 12px 24px !important;
137-
font-size: 1rem;
138-
display: inline-block;
139-
text-align: center;
140-
margin: 20px auto;
141-
max-width: 300px !important;
142-
border-radius: 8px;
143-
width: auto !important;
144-
white-space: normal !important;
145-
}
43+
/* Menu wewnętrzne */
44+
.nav-internal-links { display: flex; gap: 20px; align-items: center; }
45+
.nav-internal-links a { text-decoration: none; color: var(--text-muted); font-weight: 600; transition: color 0.2s; }
46+
.nav-internal-links a:hover, .nav-internal-links a.active { color: var(--accent-blue); }
14647

147-
/* --- GŁÓWNY KONTENER --- */
148-
.container {
149-
max-width: 1200px;
150-
margin: 40px auto;
151-
padding: 0 20px;
152-
}
48+
.container { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
15349

154-
/* --- HERO SECTION --- */
155-
.hero {
156-
text-align: center;
157-
margin-bottom: 50px;
158-
}
159-
.hero h1 {
160-
font-size: 2.2rem;
161-
margin-bottom: 10px;
162-
}
163-
.hero p {
164-
color: var(--text-muted);
165-
font-size: 1.1rem;
166-
max-width: 600px;
167-
margin: 0 auto;
168-
}
50+
.hero { text-align: center; margin-bottom: 50px; }
51+
.hero h1 { font-size: 2.2rem; margin-bottom: 10px; }
52+
.hero p { color: var(--text-muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
16953

170-
/* --- FOCUS BOX --- */
171-
.focus-box {
172-
background: #eff6ff;
173-
border-left: 5px solid var(--accent-blue);
174-
padding: 25px 30px;
175-
border-radius: var(--radius);
176-
margin: 30px auto 50px auto;
177-
max-width: 800px;
178-
box-shadow: var(--shadow-sm);
179-
}
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); }
18055
.focus-box h3 { margin-top: 0; color: var(--accent-blue); font-size: 1.2rem; margin-bottom: 10px; }
18156

182-
/* --- NAGŁÓWKI SEKCJI --- */
183-
.section-title {
184-
font-size: 1.4rem;
185-
font-weight: 700;
186-
border-bottom: 2px solid var(--border-color);
187-
padding-bottom: 10px;
188-
margin-bottom: 25px;
189-
color: var(--text-main);
190-
}
191-
192-
/* --- SIATKA SERWERÓW (Grid) --- */
193-
.nodes-grid {
194-
display: grid;
195-
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
196-
gap: 20px;
197-
margin-bottom: 50px;
198-
align-items: stretch;
199-
}
200-
201-
.node-card {
202-
background: var(--bg-card);
203-
border: 1px solid var(--border-color);
204-
padding: 25px;
205-
border-radius: var(--radius);
206-
box-shadow: var(--shadow-sm);
207-
transition: all 0.2s ease;
208-
position: relative;
209-
display: flex;
210-
flex-direction: column;
211-
}
212-
.node-card:hover {
213-
border-color: var(--accent-blue);
214-
transform: translateY(-4px);
215-
box-shadow: var(--shadow-md);
216-
}
217-
218-
.status-badge {
219-
position: absolute;
220-
top: 25px;
221-
right: 25px;
222-
background: rgba(16, 185, 129, 0.1);
223-
color: var(--accent-green);
224-
padding: 4px 10px;
225-
border-radius: 20px;
226-
font-weight: 700;
227-
font-size: 0.7rem;
228-
text-transform: uppercase;
229-
letter-spacing: 0.5px;
230-
}
231-
.status-vps {
232-
background: rgba(37, 99, 235, 0.1);
233-
color: var(--accent-blue);
234-
}
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); }
23558

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); }
23665
.node-name { display: block; font-size: 1.2rem; font-weight: 700; margin-bottom: 15px; color: var(--text-main); padding-right: 60px;}
237-
23866
.specs { font-size: 0.9rem; color: var(--text-muted); margin-top: auto; }
239-
.spec-line {
240-
display: flex;
241-
align-items: center;
242-
margin-bottom: 8px;
243-
padding-bottom: 8px;
244-
border-bottom: 1px solid var(--border-color);
245-
}
67+
.spec-line { display: flex; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
24668
.spec-line:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
24769
.spec-icon { margin-right: 10px; font-weight: bold; color: var(--text-main); opacity: 0.7; width: 65px; display: inline-block; }
24870

249-
/* --- SUPPORT SECTION --- */
250-
.support-section {
251-
background: var(--bg-card);
252-
border: 1px solid var(--border-color);
253-
border-radius: var(--radius);
254-
padding: 40px;
255-
text-align: center;
256-
margin-top: 50px;
257-
box-shadow: var(--shadow-sm);
258-
}
259-
.support-links {
260-
display: flex;
261-
justify-content: center;
262-
gap: 15px;
263-
margin-top: 20px;
264-
flex-wrap: wrap;
265-
}
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; }
26675

267-
/* --- FOOTER --- */
268-
footer {
269-
text-align: center;
270-
color: var(--text-muted);
271-
font-size: 0.85rem;
272-
margin: 50px 0 30px 0;
273-
padding-top: 20px;
274-
border-top: 1px solid var(--border-color);
275-
}
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; }
27678

277-
/* --- RWD (Dla telefonów) --- */
278-
@media (max-width: 768px) {
279-
.navbar { flex-direction: column; gap: 15px; padding: 15px; }
280-
.nav-links { justify-content: center; }
281-
.hero h1 { font-size: 1.8rem; }
282-
.container { margin-top: 20px; }
283-
}
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; } }
28482
</style>
28583
</head>
28684
<body>
28785

28886
<nav class="navbar">
289-
<a href="#" class="nav-brand">DevLabStudy©</a>
290-
<div class="nav-links">
291-
<a href="https://github.com/DevLabStudy" class="btn btn-gh">GitHub</a>
292-
<a href="https://www.youtube.com/channel/UCisFPSU_Y8hznpqrcewcJAg?app=desktop" class="btn btn-yt">YouTube</a>
293-
<a href="https://x.com/DevLabStudy" class="btn btn-x">X / Twitter</a>
294-
<a href="https://www.reddit.com/user/TobiMessi201/" class="btn btn-reddit">Reddit</a>
295-
<a href="https://www.tiktok.com/@devlabstudy" class="btn btn-tiktok">TikTok</a>
87+
<a href="/" class="nav-brand">DevLabStudy©</a>
88+
89+
<div class="nav-internal-links">
90+
<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>
29694
</div>
29795
</nav>
29896

29997
<main class="container">
30098
<section class="hero">
301-
<h1>Self-Taught Infrastructure Enthusiast</h1>
302-
<p>Building, learning, and optimizing home-lab environments, Linux systems, and Docker containers.</p>
303-
304-
<a href="/blog.html" class="btn btn-orbit">Read my blog</a>
99+
<h1>Infrastructure & HomeLab</h1>
100+
<p>Buduję, uczę się i optymalizuję środowiska serwerowe, systemy Linux oraz kontenery Docker.</p>
305101
</section>
306102

307103
<div class="focus-box">
308104
<h3>Current Journey: Docker Optimization</h3>
309105
<p>
310-
Right now, I am deep-diving into <strong>Docker image optimization</strong>. My goal is to learn how to build efficient, secure, and lightweight images for the <strong>Orbit™</strong> project, testing them across my home-lab nodes.
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.
311107
</p>
312108
</div>
313109

@@ -383,7 +179,7 @@ <h2 class="section-title">HomeLab Nodes & Infrastructure</h2>
383179
<section class="support-section">
384180
<h2 style="margin-top: 0; color: var(--accent-blue);">Support My Journey</h2>
385181
<p style="color: var(--text-muted); max-width: 600px; margin: 0 auto;">
386-
Every donation helps me buy new parts for my home-lab, cover domain/server costs, and provides more time to learn and develop the <strong>Orbit™ Application</strong>.
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>.
387183
</p>
388184

389185
<div class="support-links">

0 commit comments

Comments
 (0)