Skip to content

Commit 6c86254

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent cff0556 commit 6c86254

1 file changed

Lines changed: 151 additions & 89 deletions

File tree

‎index.html‎

Lines changed: 151 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -6,166 +6,228 @@
66
<head>
77
<meta charset="UTF-8">
88
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9-
<title>DevLab STUDY | Command Center</title>
9+
<title>DevLabStudy | Command Center</title>
1010
<link rel="icon" type="image/jpeg" href="/profileIcon_g3ffyg7edeeg1.jpeg">
11-
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap" rel="stylesheet">
11+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
1212
<style>
1313
:root {
1414
--bg-body: #050505;
15-
--bg-nav: rgba(5, 5, 5, 0.9);
15+
--bg-nav: #050505;
1616
--bg-card: #0e0e0e;
1717
--text-main: #f0f0f0;
1818
--text-muted: #64748b;
1919
--border-color: rgba(255, 255, 255, 0.08);
2020
--accent-blue: #3b82f6;
2121
--accent-green: #4ade80;
22-
--accent-pink: #e11d48;
23-
--accent-coffee: #FFDD00;
2422
}
2523

2624
body {
27-
font-family: 'JetBrains Mono', monospace;
25+
font-family: 'Inter', sans-serif; /* Główny tekst jak na blogu */
2826
background: var(--bg-body);
2927
color: var(--text-main);
3028
margin: 0;
3129
overflow-x: hidden;
32-
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.01) 1px, transparent 0);
33-
background-size: 40px 40px;
3430
}
3531

36-
/* Navbar */
32+
/* Navbar - IDEALNE ODWZOROWANIE */
3733
.navbar {
38-
position: sticky; top: 0; z-index: 1000;
39-
background: var(--bg-nav); backdrop-filter: blur(20px);
34+
background: var(--bg-nav);
4035
border-bottom: 1px solid var(--border-color);
41-
padding: 12px 40px; display: flex; align-items: center; justify-content: space-between;
36+
padding: 15px 40px;
37+
display: flex;
38+
align-items: center;
39+
justify-content: space-between;
4240
}
43-
.nav-brand { font-size: 1.2rem; font-weight: 800; text-decoration: none; color: #fff; text-transform: uppercase; }
44-
.nav-center { display: flex; gap: 20px; }
45-
.nav-center a { text-decoration: none; color: var(--text-muted); font-weight: 400; font-size: 0.85rem; transition: 0.3s; }
46-
.nav-center a:hover, .nav-center a.active { color: var(--accent-blue); }
41+
.nav-brand {
42+
font-size: 1.3rem;
43+
font-weight: 900;
44+
text-decoration: none;
45+
color: #fff;
46+
letter-spacing: -0.5px;
47+
}
48+
.nav-right { display: flex; align-items: center; gap: 25px; }
49+
.nav-links { display: flex; gap: 20px; }
50+
.nav-links a {
51+
text-decoration: none;
52+
color: var(--text-muted);
53+
font-weight: 600;
54+
font-size: 0.9rem;
55+
transition: 0.3s;
56+
}
57+
.nav-links a:hover, .nav-links a.active { color: var(--accent-blue); }
4758

48-
/* Dropdown Community */
59+
/* Community Button - SZARY STYL */
4960
.dropdown { position: relative; display: inline-block; }
50-
.dropbtn { background: none; color: #fff; padding: 6px 14px; border-radius: 4px; border: 1px solid var(--border-color); cursor: pointer; font-family: inherit; font-weight: 700; font-size: 0.8rem; }
51-
.dropdown-content { display: none; position: absolute; right: 0; background: #0a0a0a; min-width: 180px; border: 1px solid var(--border-color); border-radius: 8px; z-index: 1001; }
52-
.dropdown-content a { color: #ccc; padding: 10px 14px; text-decoration: none; display: block; font-size: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
61+
.dropbtn {
62+
background: #1a1a1a;
63+
color: #fff;
64+
padding: 8px 16px;
65+
border-radius: 8px;
66+
border: 1px solid var(--border-color);
67+
cursor: pointer;
68+
font-family: inherit;
69+
font-weight: 700;
70+
font-size: 0.85rem;
71+
}
72+
.dropdown-content {
73+
display: none;
74+
position: absolute;
75+
right: 0;
76+
background: #0e0e0e;
77+
min-width: 180px;
78+
border: 1px solid var(--border-color);
79+
border-radius: 10px;
80+
z-index: 1001;
81+
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
82+
}
83+
.dropdown-content a {
84+
color: #ccc;
85+
padding: 12px 16px;
86+
text-decoration: none;
87+
display: block;
88+
font-size: 0.85rem;
89+
border-bottom: 1px solid rgba(255,255,255,0.05);
90+
}
5391
.dropdown-content a:hover { background: rgba(255,255,255,0.05); color: var(--accent-blue); }
5492
.dropdown:hover .dropdown-content { display: block; }
5593

56-
/* Hero Header (Wyśrodkowane na górze) */
94+
/* Sekcja HERO */
5795
.hero-header {
58-
max-width: 1000px; margin: 60px auto 40px auto; text-align: center; padding: 0 20px;
96+
max-width: 1000px;
97+
margin: 80px auto 50px auto;
98+
text-align: center;
99+
padding: 0 20px;
59100
}
60-
.hero-title { font-size: 3.5rem; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: -2px; line-height: 1; color: var(--text-main); }
101+
.hero-title { font-size: 3.8rem; font-weight: 900; margin: 0; letter-spacing: -2px; line-height: 1; }
61102
.hero-title span { color: var(--accent-blue); }
62-
.hero-subtitle { font-size: 1rem; color: var(--text-muted); margin-top: 15px; max-width: 700px; margin-left: auto; margin-right: auto; }
103+
.hero-subtitle {
104+
font-size: 1.1rem;
105+
color: var(--text-muted);
106+
margin-top: 20px;
107+
max-width: 750px;
108+
margin-left: auto;
109+
margin-right: auto;
110+
line-height: 1.6;
111+
}
63112

64-
/* Dashboard Wrapper */
65-
.dashboard { max-width: 1400px; margin: 0 auto 40px auto; padding: 0 20px; }
113+
/* Dashboard */
114+
.dashboard { max-width: 1300px; margin: 0 auto 60px auto; padding: 0 20px; }
115+
.grid-container { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; }
66116

67-
/* Grid Layout */
68-
.grid-container { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
69-
.card { background: rgba(10, 10, 10, 0.8); border: 1px solid var(--border-color); padding: 25px; border-radius: 8px; position: relative; }
117+
.card {
118+
background: rgba(15, 15, 15, 0.6);
119+
border: 1px solid var(--border-color);
120+
padding: 30px;
121+
border-radius: 16px;
122+
backdrop-filter: blur(10px);
123+
}
70124

71-
/* Main Project Card */
72125
.hero-project {
73-
grid-column: span 1;
74-
height: 480px;
126+
height: 450px;
75127
background: url('/assets/images/IMG_20260304_153435_hdr.jpg') center/cover;
76-
display: flex; align-items: flex-end;
77-
border-radius: 8px; border: 1px solid var(--border-color);
128+
display: flex;
129+
align-items: flex-end;
130+
border-radius: 16px;
131+
border: 1px solid var(--border-color);
132+
}
133+
.hero-overlay { width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.95)); padding: 40px; border-radius: 0 0 16px 16px; }
134+
135+
.btn-blue {
136+
display: inline-block;
137+
background: var(--accent-blue);
138+
color: #fff;
139+
padding: 14px 30px;
140+
border-radius: 10px;
141+
text-decoration: none;
142+
font-weight: 800;
143+
font-size: 0.95rem;
144+
transition: 0.3s;
145+
}
146+
.btn-blue:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3); }
147+
148+
.support-btn {
149+
display: block;
150+
text-decoration: none;
151+
padding: 15px;
152+
border-radius: 10px;
153+
font-weight: 800;
154+
font-size: 0.9rem;
155+
text-align: center;
156+
margin-top: 12px;
157+
transition: 0.3s;
78158
}
79-
.hero-overlay { width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.98)); padding: 40px; border-radius: 0 0 8px 8px; }
80-
81-
.btn-blue { display: inline-block; background: var(--accent-blue); color: #000; padding: 12px 28px; border-radius: 4px; text-decoration: none; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; transition: 0.3s; margin-top: 20px; }
82-
.btn-blue:hover { filter: brightness(1.2); }
83-
84-
/* Sidebar & Support */
85-
.support-btn { display: block; text-decoration: none; padding: 14px; border-radius: 4px; font-weight: 800; font-size: 0.85rem; text-align: center; margin-top: 10px; transition: 0.3s; text-transform: uppercase; }
86-
.support-btn:hover { filter: brightness(1.1); }
87-
88-
.ad-slot { background: rgba(255,255,255,0.01); border: 2px dashed #222; border-radius: 8px; color: #333; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; text-transform: uppercase; margin: 20px 0; font-weight: bold; }
89159

90160
@media (max-width: 1024px) {
91-
.hero-title { font-size: 2.5rem; }
92-
.grid-container { grid-template-columns: 1fr; }
93-
.navbar { padding: 15px; flex-direction: column; gap: 15px; }
161+
.navbar { padding: 15px 20px; }
162+
.grid-container { grid-template-columns: 1fr; }
163+
.hero-title { font-size: 2.8rem; }
94164
}
95165
</style>
96166
</head>
97167
<body>
98168

99169
<nav class="navbar">
100-
<a href="/" class="nav-brand">DEVLAB STUDY</a>
101-
<div class="nav-center">
102-
<a href="/" class="active">Hub</a>
103-
<a href="/blog">Blog</a>
104-
<a href="/homelab">HomeLab</a>
105-
<a href="/orbit">Orbit™</a>
106-
</div>
107-
<div class="dropdown">
108-
<button class="dropbtn">Community ▾</button>
109-
<div class="dropdown-content">
110-
<a href="https://github.com/DevLabStudy" target="_blank">GitHub</a>
111-
<a href="https://www.youtube.com/@devlabstudy" target="_blank">YouTube</a>
112-
<a href="https://www.tiktok.com/@devlabstudy" target="_blank">TikTok</a>
113-
<a href="https://x.com/DevLabStudy" target="_blank">X / Twitter</a>
114-
<a href="https://www.reddit.com/user/devlabstudy" target="_blank">Reddit</a>
170+
<a href="/" class="nav-brand">DevLabStudy</a>
171+
<div class="nav-right">
172+
<div class="nav-links">
173+
<a href="/" class="active">Hub</a>
174+
<a href="/blog">Blog</a>
175+
<a href="/homelab">HomeLab</a>
176+
<a href="/orbit">Orbit™</a>
177+
</div>
178+
<div class="dropdown">
179+
<button class="dropbtn">Community ▾</button>
180+
<div class="dropdown-content">
181+
<a href="https://github.com/DevLabStudy" target="_blank">GitHub</a>
182+
<a href="https://www.youtube.com/@devlabstudy" target="_blank">YouTube</a>
183+
<a href="https://www.tiktok.com/@devlabstudy" target="_blank">TikTok</a>
184+
<a href="https://x.com/DevLabStudy" target="_blank">X / Twitter</a>
185+
<a href="https://www.reddit.com/user/devlabstudy" target="_blank">Reddit</a>
186+
</div>
115187
</div>
116188
</div>
117189
</nav>
118190

119191
<header class="hero-header">
120-
<div style="color: var(--accent-blue); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px;">> SYSTEM_INIT_...</div>
121192
<h1 class="hero-title">DevLab <span>Environment</span></h1>
122-
<p class="hero-subtitle">Centrum zarządzania domową infrastrukturą IT, klastrami Proxmox i projektami DIY. Dokumentujemy ewolucję od Arduino po automatyzację na Linux Mint.</p>
193+
<p class="hero-subtitle">Eksploracja domowej infrastruktury IT, klastrów Proxmox i automatyzacji. Dokumentujemy drogę od pasji do zaawansowanych rozwiązań serwerowych.</p>
123194
</header>
124195

125196
<main class="dashboard">
126197
<div class="grid-container">
127-
128198
<section>
129-
<div class="card hero-project">
199+
<div class="hero-project">
130200
<div class="hero-overlay">
131-
<div style="background: var(--accent-blue); color: #000; padding: 3px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; display: inline-block; margin-bottom: 10px;">[ ACTIVE_LOG ]</div>
132-
<h2 style="font-size: 2.2rem; margin: 0 0 15px 0; font-weight: 800; text-transform: uppercase; line-height: 1.1;">Serwerownia na Drzewie</h2>
133-
<p style="color: #cbd5e1; margin: 0; max-width: 550px; font-size: 0.9rem;">Pełna dokumentacja budowy infrastruktury sieciowej i serwerowej 5 metrów nad ziemią. HP ProLiant, OpenWRT i ESP32 integracja.</p>
134-
<a href="/blog" class="btn-blue">ACCESS_DOCUMENTATION →</a>
201+
<h2 style="font-size: 2rem; margin: 0 0 10px 0; font-weight: 900; color: #fff;">Serwerownia na Drzewie</h2>
202+
<p style="color: #94a3b8; margin: 0 0 25px 0; max-width: 500px; line-height: 1.5;">Budowa bazy IT 5 metrów nad ziemią. Testy stabilności i zasięgu w ekstremalnych warunkach.</p>
203+
<a href="/blog" class="btn-blue">Eksploruj Logi →</a>
135204
</div>
136205
</div>
137206
</section>
138207

139208
<aside style="display: flex; flex-direction: column; gap: 20px;">
140209
<div class="card">
141-
<h3 style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px;">Recent_Entries:</h3>
142-
<div style="display: flex; flex-direction: column; gap: 12px; font-size: 0.85rem;">
143-
{% for post in site.posts limit:5 %}
144-
<a href="{{ post.url }}" style="display: flex; justify-content: space-between; text-decoration: none; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-main);">
145-
<span><b style="color: var(--accent-blue);">></b> {{ post.title }}</span>
146-
<span style="color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; margin-left: 10px;">[{{ post.date | date: "%d.%m.%y" }}]</span>
147-
</a>
148-
{% endfor %}
149-
</div>
210+
<h3 style="font-size: 0.9rem; color: var(--text-muted); margin: 0 0 20px 0; text-transform: uppercase; letter-spacing: 1px;">Ostatnie Wpisy:</h3>
211+
{% for post in site.posts limit:5 %}
212+
<a href="{{ post.url }}" style="display: flex; justify-content: space-between; text-decoration: none; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-main);">
213+
<span style="font-size: 0.9rem;">{{ post.title }}</span>
214+
<span style="color: var(--text-muted); font-size: 0.8rem;">{{ post.date | date: "%d.%m" }}</span>
215+
</a>
216+
{% endfor %}
150217
</div>
151218

152-
<div class="card" style="background: rgba(59, 130, 246, 0.05); border-color: var(--accent-blue);">
153-
<h3 style="font-size: 0.85rem; color: var(--accent-blue); margin-top: 0; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px;">Support_Development:</h3>
154-
<a href="https://patreon.com/DevLabStudy" target="_blank" class="support-btn" style="background: var(--accent-pink); color: #fff;">PATREON</a>
155-
<a href="https://www.buymeacoffee.com/DevLabStudy" target="_blank" class="support-btn" style="background: var(--accent-coffee); color: #000;">BUY ME A COFFEE</a>
219+
<div class="card" style="border-color: var(--accent-blue); background: rgba(59, 130, 246, 0.05);">
220+
<h3 style="font-size: 0.9rem; color: var(--accent-blue); margin: 0 0 15px 0; text-transform: uppercase;">Wsparcie:</h3>
221+
<a href="https://patreon.com/DevLabStudy" target="_blank" class="support-btn" style="background: #e11d48; color: #fff;">PATREON</a>
222+
<a href="https://www.buymeacoffee.com/DevLabStudy" target="_blank" class="support-btn" style="background: #FFDD00; color: #000;">BUY ME A COFFEE</a>
156223
</div>
157224
</aside>
158-
159225
</div>
160-
161-
<div class="ad-slot" style="height: 120px; width: 100%;">MIEJSCE NA REKLAMĘ ADSENSE [BANNER]</div>
162-
163226
</main>
164227

165-
<footer style="text-align: center; padding: 60px; font-size: 0.75rem; color: #333; border-top: 1px solid var(--border-color); background: #080808;">
228+
<footer style="text-align: center; padding: 40px; color: #334155; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;">
166229
&gt; root@devlab:~# uptime _ <br>
167230
21:55:00 up 34 days, 12:45, 1 user, load average: 0.08, 0.03, 0.01
168-
<p>&copy; 2026 DEVLAB STUDY. SYSTEM_STABLE.</p>
169231
</footer>
170232

171233
</body>

0 commit comments

Comments
 (0)