Skip to content

Commit 2ae640e

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent 600bcda commit 2ae640e

1 file changed

Lines changed: 160 additions & 49 deletions

File tree

‎index.html‎

Lines changed: 160 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,123 +4,234 @@
44
---
55

66
<style>
7-
/* Pancerne resetowanie szerokości pod mobile – zapobiega psuciu się strony na telefonie */
7+
/* Pancerne resetowanie szerokości pod mobile */
88
html, body {
99
max-width: 100%;
1010
overflow-x: hidden;
1111
margin: 0;
1212
padding: 0;
1313
box-sizing: border-box;
14-
background-color: #09090b; /* Ciemne tło zapobiegające białym pasom po bokach */
14+
background-color: #09090b;
1515
}
1616

1717
*, *:before, *:after {
1818
box-sizing: inherit;
1919
}
2020

21-
/* Główny kontener strony dostosowany do urządzeń */
2221
.page-container {
2322
width: 100%;
24-
max-width: 900px;
23+
max-width: 950px;
2524
margin: 0 auto;
2625
padding: 40px 20px;
2726
font-family: 'JetBrains Mono', monospace;
2827
}
2928

30-
/* Styl sekcji O mnie */
31-
.about-me-section {
32-
background: #121216;
29+
/* Hero Banner / Terminal Header */
30+
.hero-header {
31+
background: radial-gradient(circle at top left, rgba(16, 185, 129, 0.15), transparent 50%),
32+
radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.15), transparent 50%),
33+
#121216;
34+
border: 1px solid #27272a;
35+
border-radius: 16px;
36+
padding: 35px;
37+
margin-bottom: 25px;
38+
position: relative;
39+
overflow: hidden;
40+
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.7);
41+
}
42+
43+
.terminal-bar {
44+
display: flex;
45+
align-items: center;
46+
gap: 8px;
47+
margin-bottom: 25px;
48+
padding-bottom: 12px;
49+
border-bottom: 1px solid rgba(255,255,255,0.08);
50+
}
51+
52+
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
53+
.dot-red { background: #ef4444; }
54+
.dot-yellow { background: #f59e0b; }
55+
.dot-green { background: #10b981; }
56+
.terminal-title { color: #71717a; font-size: 0.8rem; margin-left: auto; }
57+
58+
.hero-title {
59+
font-size: 2.2rem;
60+
font-weight: 800;
61+
margin: 0 0 10px 0;
62+
background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
63+
-webkit-background-clip: text;
64+
-webkit-text-fill-color: transparent;
65+
letter-spacing: -1px;
66+
}
67+
68+
.hero-subtitle {
69+
color: #a1a1aa;
70+
font-size: 1rem;
71+
margin: 0 0 25px 0;
72+
line-height: 1.6;
73+
}
74+
75+
/* Grid Kafelków / Quick Stats */
76+
.quick-stats {
77+
display: grid;
78+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
79+
gap: 15px;
80+
margin-bottom: 25px;
81+
}
82+
83+
.stat-card {
84+
background: rgba(18, 18, 22, 0.6);
3385
border: 1px solid #27272a;
3486
border-radius: 12px;
87+
padding: 20px;
88+
backdrop-filter: blur(10px);
89+
transition: all 0.3s ease;
90+
}
91+
92+
.stat-card:hover {
93+
border-color: #10b981;
94+
transform: translateY(-3px);
95+
box-shadow: 0 10px 20px -10px rgba(16, 185, 129, 0.2);
96+
}
97+
98+
.stat-label {
99+
color: #71717a;
100+
font-size: 0.75rem;
101+
text-transform: uppercase;
102+
letter-spacing: 1px;
103+
display: block;
104+
margin-bottom: 5px;
105+
}
106+
107+
.stat-value {
108+
color: #f4f4f5;
109+
font-size: 1.1rem;
110+
font-weight: bold;
111+
}
112+
113+
.stat-value.highlight { color: #10b981; }
114+
.stat-value.blue { color: #3b82f6; }
115+
116+
/* Sekcja Główna Content */
117+
.content-box {
118+
background: #121216;
119+
border: 1px solid #27272a;
120+
border-radius: 16px;
35121
padding: 35px;
36122
color: #f4f4f5;
37-
box-shadow: 0 10px 30px -15px rgba(0,0,0,0.5);
38123
}
39124

40-
.about-me-section h2 {
125+
.section-header {
126+
display: flex;
127+
align-items: center;
128+
gap: 10px;
41129
color: #10b981;
42-
font-size: 1.4rem;
130+
font-size: 1.2rem;
43131
margin-top: 0;
44-
margin-bottom: 25px;
45-
border-bottom: 1px solid #27272a;
46-
padding-bottom: 10px;
47-
display: inline-block;
132+
margin-bottom: 20px;
133+
border-bottom: 1px dashed #27272a;
134+
padding-bottom: 12px;
48135
}
49136

50-
.about-me-section p {
137+
.content-box p {
51138
color: #a1a1aa;
52139
font-size: 0.95rem;
53140
line-height: 1.7;
54141
margin-bottom: 20px;
55142
}
56143

57-
.about-me-section strong {
58-
color: #f4f4f5;
59-
}
144+
.content-box strong { color: #f4f4f5; }
60145

146+
/* Badges / Tag Cloud */
61147
.about-badges {
62148
display: flex;
63149
flex-wrap: wrap;
64150
gap: 10px;
65151
margin-top: 30px;
66152
padding-top: 20px;
67-
border-top: 1px dashed #27272a;
153+
border-top: 1px solid #27272a;
68154
}
69155

70156
.about-badges span {
71-
background: rgba(16, 185, 129, 0.1);
157+
background: rgba(16, 185, 129, 0.08);
72158
color: #10b981;
73159
border: 1px solid rgba(16, 185, 129, 0.2);
74-
padding: 6px 12px;
75-
border-radius: 6px;
160+
padding: 8px 14px;
161+
border-radius: 8px;
76162
font-size: 0.8rem;
77-
font-weight: bold;
163+
font-weight: 600;
164+
transition: all 0.2s ease;
165+
}
166+
167+
.about-badges span:hover {
168+
background: rgba(16, 185, 129, 0.2);
169+
border-color: #10b981;
78170
}
79171

80-
/* --- WIDOK DLA TELEFONU ---
81-
Poniższe reguły nadpisują wygląd automatycznie,
82-
gdy ktoś wejdzie z telefonu (ekran mniejszy niż 768px). */
172+
/* RWD */
83173
@media (max-width: 768px) {
84-
.page-container {
85-
padding: 15px 10px;
86-
}
87-
.about-me-section {
88-
padding: 20px;
89-
border-radius: 8px;
90-
}
91-
.about-me-section h2 {
92-
font-size: 1.2rem;
93-
margin-bottom: 15px;
94-
}
95-
.about-me-section p {
96-
font-size: 0.85rem;
97-
line-height: 1.5;
98-
}
99-
.about-badges span {
100-
font-size: 0.7rem;
101-
padding: 4px 8px;
102-
}
174+
.page-container { padding: 15px 10px; }
175+
.hero-header, .content-box { padding: 20px; border-radius: 12px; }
176+
.hero-title { font-size: 1.6rem; }
177+
.hero-subtitle { font-size: 0.85rem; }
178+
.quick-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
179+
.stat-card { padding: 15px; }
180+
.stat-value { font-size: 0.95rem; }
103181
}
104182
</style>
105183

106184
<div class="page-container">
107-
<div class="about-me-section">
108-
<h2>// WHOAMI</h2>
185+
<!-- Hero Box z klimatem terminala -->
186+
<div class="hero-header">
187+
<div class="terminal-bar">
188+
<span class="dot dot-red"></span>
189+
<span class="dot dot-yellow"></span>
190+
<span class="dot dot-green"></span>
191+
<span class="terminal-title">bash - devlabstudy@node-01:~</span>
192+
</div>
193+
<h1 class="hero-title">DevLabStudy Workspace</h1>
194+
<p class="hero-subtitle">> System Admin / Networking / Homelab Infrastructure & Hardware Testing</p>
195+
</div>
196+
197+
<!-- Szybkie Kafelki ze Statusami -->
198+
<div class="quick-stats">
199+
<div class="stat-card">
200+
<span class="stat-label">Main OS Focus</span>
201+
<span class="stat-value highlight">Debian / Linux</span>
202+
</div>
203+
<div class="stat-card">
204+
<span class="stat-label">Virtualization</span>
205+
<span class="stat-value blue">Proxmox VE</span>
206+
</div>
207+
<div class="stat-card">
208+
<span class="stat-label">Network Edge</span>
209+
<span class="stat-value">MikroTik RouterOS</span>
210+
</div>
211+
<div class="stat-card">
212+
<span class="stat-label">Primary Stack</span>
213+
<span class="stat-value">Docker & Containers</span>
214+
</div>
215+
</div>
216+
217+
<!-- Główna sekcja "O mnie" -->
218+
<div class="content-box">
219+
<h2 class="section-header"><span>//</span> ABOUT_ME & MISSION</h2>
109220

110221
<p>Cześć! Na co dzień jestem uczniem technikum informatycznego, a po godzinach zgłębiam tajniki administracji serwerami, sieci komputerowych i budowania własnej infrastruktury. Wiedzę teoretyczną z przygotowań do egzaminów zawodowych (m.in. sprzęt i sieci) natychmiast przekuwam w praktykę we własnym <strong>domowym laboratorium (Homelab)</strong>.</p>
111222

112223
<p>DevLabStudy to moje centrum dowodzenia i publiczny notatnik. Dokumentuję tu swoje projekty, zarządzanie klastrami w <strong>Proxmoxie</strong>, konfigurację kontenerów (Docker) oraz testy sprzętu sieciowego pokroju routerów MikroTik czy systemów OpenWrt.</p>
113224

114225
<p>Mam słabość do testowania nietypowych systemów operacyjnych. Znajdziesz tu ślady moich eksperymentów z mnóstwem dystrybucji Linuksa – od konfigurowanego deklaratywnie <strong>NixOS</strong>, przez minimalistyczne środowiska bez systemd (jak Void czy antiX), po systemy działające całkowicie w RAM-ie (Tiny Core).</p>
115226

116-
<p>Poza warstwą serwerową, lubię też ubrudzić ręce przy sprzęcie komputerowym i mikrokontrolerach (Arduino, ESP32). Kiedy akurat nie stawiam nowych usług i nie walczę z routingiem, najpewniej relaksuję się przy simracingu lub grach turniejowych.</p>
227+
<p>Poza warstwą serwerową, lubię też ubrudzić ręce przy sprzęcie komputerowym i mikrokontrolerach (Arduino, ESP32). Kiedy akurat nie stawiam nowych usług i nie walczę z routingiem, najpewniej relaksyję się przy simracingu lub grach turniejowych.</p>
117228

118229
<div class="about-badges">
119230
<span>Proxmox & Virtualization</span>
120231
<span>Linux Distro Hopping</span>
121232
<span>MikroTik & Networking</span>
122233
<span>Hardware & DIY</span>
123-
<span>Docker</span>
234+
<span>Docker & Homelab</span>
124235
</div>
125236
</div>
126237
</div>

0 commit comments

Comments
 (0)