Skip to content

Commit fe5fa97

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent 3dab8ed commit fe5fa97

1 file changed

Lines changed: 86 additions & 210 deletions

File tree

‎index.html‎

Lines changed: 86 additions & 210 deletions
Original file line numberDiff line numberDiff line change
@@ -1,250 +1,126 @@
11
---
22
layout: default
3-
title: Hub | DevLabStudy
3+
title: Home | DevLabStudy
44
---
55

66
<style>
7-
:root {
8-
--bg-main: #09090b;
9-
--card-bg: #121216;
10-
--accent: #10b981;
11-
--accent-glow: rgba(16, 185, 129, 0.15);
12-
--text-main: #f4f4f5;
13-
--text-dim: #a1a1aa;
14-
--border: #27272a;
15-
}
16-
17-
.devlab-hub {
18-
color: var(--text-main);
19-
font-family: 'JetBrains Mono', monospace;
20-
width: 100%;
7+
/* Pancerne resetowanie szerokości pod mobile – zapobiega psuciu się strony na telefonie */
8+
html, body {
9+
max-width: 100%;
10+
overflow-x: hidden;
11+
margin: 0;
12+
padding: 0;
2113
box-sizing: border-box;
14+
background-color: #09090b; /* Ciemne tło zapobiegające białym pasom po bokach */
2215
}
2316

24-
/* --- WIDOK DLA PC / TABLETU --- *
25-
.desktop-view {
26-
display: block;
17+
*, *:before, *:after {
18+
box-sizing: inherit;
2719
}
2820

29-
.mobile-view {
30-
display: none;
21+
/* Główny kontener strony dostosowany do urządzeń */
22+
.page-container {
23+
width: 100%;
24+
max-width: 900px;
25+
margin: 0 auto;
26+
padding: 40px 20px;
27+
font-family: 'JetBrains Mono', monospace;
3128
}
3229

33-
/* Styl futurystycznego terminala / dashboardu */
34-
.terminal-box {
35-
background: var(--card-bg);
36-
border: 1px solid var(--border);
30+
/* Styl sekcji O mnie */
31+
.about-me-section {
32+
background: #121216;
33+
border: 1px solid #27272a;
3734
border-radius: 12px;
38-
padding: 30px;
39-
position: relative;
40-
overflow: hidden;
41-
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.5);
42-
}
43-
44-
.terminal-header {
45-
display: flex;
46-
align-items: center;
47-
gap: 8px;
48-
margin-bottom: 20px;
49-
padding-bottom: 12px;
50-
border-bottom: 1px solid var(--border);
51-
}
52-
53-
.dot {
54-
width: 12px;
55-
height: 12px;
56-
border-radius: 50%;
57-
}
58-
.dot-red { background: #ef4444; }
59-
.dot-yellow { background: #f59e0b; }
60-
.dot-green { background: #10b981; }
61-
62-
.terminal-title {
63-
font-size: 0.85rem;
64-
color: var(--text-dim);
65-
margin-left: 10px;
35+
padding: 35px;
36+
color: #f4f4f5;
37+
box-shadow: 0 10px 30px -15px rgba(0,0,0,0.5);
6638
}
6739

68-
.hero-content h1 {
69-
font-size: 2rem;
70-
margin: 0 0 10px 0;
71-
letter-spacing: -1px;
72-
color: #fff;
40+
.about-me-section h2 {
41+
color: #10b981;
42+
font-size: 1.4rem;
43+
margin-top: 0;
44+
margin-bottom: 25px;
45+
border-bottom: 1px solid #27272a;
46+
padding-bottom: 10px;
47+
display: inline-block;
7348
}
7449

75-
.hero-content p {
76-
color: var(--text-dim);
50+
.about-me-section p {
51+
color: #a1a1aa;
7752
font-size: 0.95rem;
78-
line-height: 1.6;
79-
margin-bottom: 25px;
53+
line-height: 1.7;
54+
margin-bottom: 20px;
8055
}
8156

82-
/* Szybkie skróty w formie nowoczesnych kafelków */
83-
.quick-links-grid {
84-
display: grid;
85-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
86-
gap: 15px;
87-
margin-top: 25px;
57+
.about-me-section strong {
58+
color: #f4f4f5;
8859
}
8960

90-
.quick-card {
91-
background: #18181b;
92-
border: 1px solid var(--border);
93-
padding: 18px;
94-
border-radius: 8px;
95-
text-decoration: none;
96-
color: var(--text-main);
97-
transition: all 0.2s ease;
61+
.about-badges {
9862
display: flex;
99-
flex-direction: column;
100-
gap: 6px;
101-
}
102-
103-
.quick-card:hover {
104-
border-color: var(--accent);
105-
transform: translateY(-2px);
106-
background: #1f1f23;
107-
}
108-
109-
.quick-card span:first-child {
110-
font-size: 0.75rem;
111-
color: var(--accent);
63+
flex-wrap: wrap;
64+
gap: 10px;
65+
margin-top: 30px;
66+
padding-top: 20px;
67+
border-top: 1px dashed #27272a;
68+
}
69+
70+
.about-badges span {
71+
background: rgba(16, 185, 129, 0.1);
72+
color: #10b981;
73+
border: 1px solid rgba(16, 185, 129, 0.2);
74+
padding: 6px 12px;
75+
border-radius: 6px;
76+
font-size: 0.8rem;
11277
font-weight: bold;
113-
text-transform: uppercase;
114-
}
115-
116-
.quick-card span:last-child {
117-
font-size: 0.95rem;
118-
font-weight: 600;
11978
}
12079

121-
/* --- WIDOK DLA TELEFONU (Aktywowany automatycznie poniżej 768px) --- */
80+
/* --- WIDOK DLA TELEFONU ---
81+
Poniższe reguły nadpisują wygląd automatycznie,
82+
gdy ktoś wejdzie z telefonu (ekran mniejszy niż 768px). */
12283
@media (max-width: 768px) {
123-
.desktop-view {
124-
display: none;
125-
}
126-
.mobile-view {
127-
display: block;
84+
.page-container {
85+
padding: 15px 10px;
12886
}
129-
130-
.mobile-hero {
131-
background: var(--card-bg);
132-
border: 1px solid var(--border);
133-
border-radius: 12px;
87+
.about-me-section {
13488
padding: 20px;
135-
text-align: center;
89+
border-radius: 8px;
13690
}
137-
138-
.mobile-hero h1 {
139-
font-size: 1.5rem;
140-
margin: 0 0 10px 0;
141-
color: #fff;
91+
.about-me-section h2 {
92+
font-size: 1.2rem;
93+
margin-bottom: 15px;
14294
}
143-
144-
.mobile-hero p {
145-
color: var(--text-dim);
95+
.about-me-section p {
14696
font-size: 0.85rem;
147-
margin-bottom: 20px;
148-
}
149-
150-
.mobile-menu-list {
151-
display: flex;
152-
flex-direction: column;
153-
gap: 12px;
154-
}
155-
156-
.mobile-btn {
157-
background: #18181b;
158-
border: 1px solid var(--border);
159-
color: var(--text-main);
160-
padding: 16px;
161-
border-radius: 8px;
162-
text-decoration: none;
163-
font-weight: bold;
164-
font-size: 0.95rem;
165-
display: flex;
166-
justify-content: space-between;
167-
align-items: center;
168-
transition: border-color 0.2s;
169-
}
170-
171-
.mobile-btn:active {
172-
border-color: var(--accent);
173-
background: var(--accent-glow);
97+
line-height: 1.5;
17498
}
175-
176-
.mobile-btn span.arrow {
177-
color: var(--accent);
99+
.about-badges span {
100+
font-size: 0.7rem;
101+
padding: 4px 8px;
178102
}
179103
}
180104
</style>
181105

182-
<div class="devlab-hub">
183-
184-
<!-- == WIDOK PC (Dedykowany interfejs terminala) == -->
185-
<div class="desktop-view">
186-
<div class="terminal-box">
187-
<div class="terminal-header">
188-
<div class="dot dot-red"></div>
189-
<div class="dot dot-yellow"></div>
190-
<div class="dot dot-green"></div>
191-
<div class="terminal-title">devlab@system-core:~ (x86_64)</div>
192-
</div>
193-
194-
<div class="hero-content">
195-
<h1>DevLabStudy Hub</h1>
196-
<p>Centralny punkt zarządzania infrastrukturą, testami wydajnościowymi oraz notatkami z laboratoriów sieciowych i systemowych.</p>
197-
198-
<div style="font-size: 0.8rem; color: var(--accent); margin-bottom: 10px;">> WYBIERZ SEKCIĘ DOCELOWĄ:</div>
199-
200-
<div class="quick-links-grid">
201-
<a href="/Blog" class="quick-card">
202-
<span>// 01</span>
203-
<span>Artykuły & Blog</span>
204-
</a>
205-
<a href="/HomeLab" class="quick-card">
206-
<span>// 02</span>
207-
<span>Architektura Labu</span>
208-
</a>
209-
<a href="/Benchmarks" class="quick-card">
210-
<span>// 03</span>
211-
<span>Wyniki Benchmarków</span>
212-
</a>
213-
<a href="/Orbit" class="quick-card">
214-
<span>// 04</span>
215-
<span>Narzędzia & Inne</span>
216-
</a>
217-
</div>
218-
</div>
106+
<div class="page-container">
107+
<div class="about-me-section">
108+
<h2>// WHOAMI</h2>
109+
110+
<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>
111+
112+
<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>
113+
114+
<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>
115+
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>
117+
118+
<div class="about-badges">
119+
<span>Proxmox & Virtualization</span>
120+
<span>Linux Distro Hopping</span>
121+
<span>MikroTik & Networking</span>
122+
<span>Hardware & DIY</span>
123+
<span>Docker</span>
219124
</div>
220125
</div>
221-
222-
<!-- == WIDOK MOBILNY (Lekki, dotykowy layout zoptymalizowany pod smartfony) == -->
223-
<div class="mobile-view">
224-
<div class="mobile-hero">
225-
<div style="font-size: 0.75rem; color: var(--accent); margin-bottom: 5px; font-weight: bold;">[ MOBILE DASHBOARD ]</div>
226-
<h1>DevLabStudy</h1>
227-
<p>Wybierz sekcję, aby przejść do zawartości:</p>
228-
229-
<div class="mobile-menu-list">
230-
<a href="/Blog" class="mobile-btn">
231-
<span>Artykuły & Blog</span>
232-
<span class="arrow">&rarr;</span>
233-
</a>
234-
<a href="/HomeLab" class="mobile-btn">
235-
<span>Architektura Labu</span>
236-
<span class="arrow">&rarr;</span>
237-
</a>
238-
<a href="/Benchmarks" class="mobile-btn">
239-
<span>Wyniki Benchmarków</span>
240-
<span class="arrow">&rarr;</span>
241-
</a>
242-
<a href="/Orbit" class="mobile-btn">
243-
<span>Narzędzia & Inne</span>
244-
<span class="arrow">&rarr;</span>
245-
</a>
246-
</div>
247-
</div>
248-
</div>
249-
250126
</div>

0 commit comments

Comments
 (0)