Skip to content

Commit 0ba6cfa

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent 4d91723 commit 0ba6cfa

1 file changed

Lines changed: 169 additions & 77 deletions

File tree

‎index.html‎

Lines changed: 169 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -3,105 +3,197 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>DevLabStudy© | System Hub</title>
6+
<title>DevLabStudy© | Hub</title>
77
<link rel="icon" type="image/png" href="/qr-code.png">
88
<style>
99
:root {
10-
--bg-body: #0f172a; --bg-card: #1e293b;
10+
--bg-body: #0f172a; --bg-nav: rgba(15, 23, 42, 0.8); --bg-card: #1e293b;
1111
--text-main: #f8fafc; --text-muted: #94a3b8; --border-color: #334155;
1212
--accent-blue: #3b82f6; --accent-purple: #8b5cf6; --accent-green: #10b981;
13+
--radius-lg: 24px; --radius-md: 16px;
1314
}
15+
1416
body {
1517
font-family: 'Inter', -apple-system, sans-serif; background: var(--bg-body); color: var(--text-main);
16-
margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
18+
margin: 0; padding: 0; min-height: 100vh; -webkit-font-smoothing: antialiased;
19+
}
20+
21+
/* --- NAVBAR (Zgodnie z Twoimi wytycznymi) --- */
22+
.navbar {
23+
background: var(--bg-nav); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color);
24+
padding: 15px 40px; display: flex; justify-content: space-between; align-items: center;
25+
position: sticky; top: 0; z-index: 100;
1726
}
18-
.hub-container { max-width: 1100px; width: 100%; padding: 40px; text-align: center; }
27+
.nav-brand { font-size: 1.5rem; font-weight: 800; text-decoration: none; color: var(--text-main); letter-spacing: -0.5px; width: 200px; }
1928

20-
/* Header Section */
21-
.header { margin-bottom: 50px; }
22-
.brand-title { font-size: 3.5rem; font-weight: 800; margin: 0; background: linear-gradient(to right, #3b82f6, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
23-
.status-bar { display: inline-flex; align-items: center; gap: 10px; background: #1e293b; padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; border: 1px solid var(--border-color); margin-top: 15px; }
24-
.dot { width: 8px; height: 8px; background: var(--accent-green); border-radius: 50%; box-shadow: 0 0 10px var(--accent-green); }
25-
26-
/* Grid */
27-
.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-bottom: 40px; }
28-
.path-card {
29-
background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 40px 30px;
30-
text-decoration: none; color: inherit; transition: all 0.3s ease;
31-
display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden;
29+
/* Środek - linki główne */
30+
.nav-center { display: flex; gap: 30px; justify-content: center; flex-grow: 1; }
31+
.nav-center a { text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.95rem; transition: color 0.3s; }
32+
.nav-center a:hover, .nav-center a.active { color: var(--accent-blue); }
33+
34+
/* Prawa strona - Rozsuwane menu Social Media */
35+
.nav-right { width: 200px; display: flex; justify-content: flex-end; }
36+
.dropdown { position: relative; display: inline-block; }
37+
.dropbtn {
38+
background: rgba(59, 130, 246, 0.1); color: var(--accent-blue); border: 1px solid rgba(59, 130, 246, 0.3);
39+
padding: 10px 20px; border-radius: 12px; cursor: default; font-weight: 700; font-size: 0.9rem; transition: 0.3s;
3240
}
33-
.path-card:hover { transform: translateY(-5px); border-color: var(--accent-blue); box-shadow: 0 15px 30px rgba(0,0,0,0.4); }
34-
.path-icon { font-size: 3rem; margin-bottom: 20px; }
35-
.path-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; }
36-
.path-desc { font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; }
37-
38-
/* Terminal z logami */
39-
.feed-container { background: #010101; border: 1px solid var(--border-color); border-radius: 15px; padding: 20px; text-align: left; margin-bottom: 50px; font-family: 'Courier New', monospace; box-shadow: inset 0 0 15px rgba(0,255,0,0.1); }
40-
.feed-header { color: #555; border-bottom: 1px solid #222; padding-bottom: 10px; margin-bottom: 15px; font-size: 0.8rem; display: flex; justify-content: space-between; }
41-
.feed-body { color: #00ff00; font-size: 0.85rem; height: 150px; overflow: hidden; position: relative; }
42-
.feed-line { margin-bottom: 5px; opacity: 0; animation: feedIn 0.5s forwards; }
43-
.feed-line.blue { color: #3b82f6; }
44-
.feed-line.purple { color: #8b5cf6; }
45-
46-
@keyframes feedIn { to { opacity: 1; } }
47-
48-
/* Socials */
49-
.social-links { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
50-
.social-btn { color: var(--text-main); text-decoration: none; font-weight: 600; transition: 0.3s; padding: 10px 20px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-card); }
41+
.dropdown:hover .dropbtn { background: var(--accent-blue); color: #fff; }
42+
43+
/* Zawartość menu rozsuwanego */
44+
.dropdown-content {
45+
display: none; position: absolute; right: 0; top: 110%; background-color: var(--bg-card);
46+
min-width: 180px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-radius: 16px; border: 1px solid var(--border-color);
47+
overflow: hidden; z-index: 1; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease;
48+
}
49+
.dropdown:hover .dropdown-content { display: block; opacity: 1; transform: translateY(0); }
50+
.dropdown-content a {
51+
color: var(--text-main); padding: 12px 20px; text-decoration: none; display: flex; align-items: center; justify-content: space-between;
52+
font-size: 0.9rem; font-weight: 600; border-bottom: 1px solid var(--border-color); transition: background 0.2s;
53+
}
54+
.dropdown-content a:last-child { border-bottom: none; }
55+
56+
/* Kolory social mediów przy najechaniu */
57+
.dropdown-content a:hover { background: rgba(255,255,255,0.05); padding-left: 25px; }
58+
.gh:hover { color: #8b949e !important; } .yt:hover { color: #ff0000 !important; }
59+
.x:hover { color: #a8a8a8 !important; } .tt:hover { color: #ff0050 !important; }
60+
.rd:hover { color: #ff4500 !important; }
61+
62+
/* --- BENTO GRID (Nowy wygląd strony głównej) --- */
63+
.container { max-width: 1100px; margin: 50px auto; padding: 0 20px; }
5164

52-
/* Kolory po najechaniu dla poszczególnych platform */
53-
.social-btn:hover { transform: translateY(-3px); }
54-
.btn-gh:hover { background: #24292e; border-color: #24292e; }
55-
.btn-yt:hover { background: #FF0000; border-color: #FF0000; }
56-
.btn-x:hover { background: #000000; border-color: #555; }
57-
.btn-tiktok:hover { background: #ff0050; border-color: #ff0050; color: white; }
58-
.btn-reddit:hover { background: #FF4500; border-color: #FF4500; color: white; }
65+
.bento-grid {
66+
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-rows: minmax(180px, auto);
67+
}
68+
69+
.bento-card {
70+
background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
71+
padding: 30px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
72+
transition: transform 0.3s ease, border-color 0.3s ease;
73+
}
74+
.bento-card:hover { transform: translateY(-5px); border-color: #475569; }
75+
76+
/* Duży kafelek powitalny */
77+
.span-2 { grid-column: span 2; }
78+
.welcome-title { font-size: 2.8rem; font-weight: 800; margin: 0 0 10px 0; letter-spacing: -1px; }
79+
.welcome-title span { background: linear-gradient(to right, #3b82f6, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
80+
.welcome-desc { color: var(--text-muted); font-size: 1.1rem; max-width: 80%; line-height: 1.6; margin: 0; }
81+
82+
/* Kafelki nawigacyjne (Blog, HomeLab, Orbit) */
83+
.nav-card { text-decoration: none; color: var(--text-main); justify-content: flex-start; }
84+
.nav-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
85+
.card-icon { font-size: 2.5rem; margin-bottom: 15px; }
86+
.card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
87+
.card-desc { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
88+
89+
/* Kolory akcentów dla kafelków */
90+
.border-blue:hover { border-color: var(--accent-blue); }
91+
.border-green:hover { border-color: var(--accent-green); }
92+
.border-purple:hover { border-color: var(--accent-purple); }
93+
94+
/* Kafelek ze statystykami */
95+
.stats-box { display: flex; justify-content: space-around; text-align: center; width: 100%; }
96+
.stat { display: flex; flex-direction: column; }
97+
.stat-num { font-size: 2.5rem; font-weight: 800; color: var(--text-main); }
98+
.stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
99+
100+
/* Responsywność */
101+
@media (max-width: 900px) {
102+
.bento-grid { grid-template-columns: repeat(2, 1fr); }
103+
.nav-center { display: none; } /* Na małych ekranach ukrywamy środek, żeby się nie zepsuło */
104+
}
105+
@media (max-width: 600px) {
106+
.bento-grid { grid-template-columns: 1fr; }
107+
.span-2 { grid-column: span 1; }
108+
.navbar { padding: 15px; }
109+
.nav-brand { font-size: 1.2rem; }
110+
}
59111
</style>
60112
</head>
61113
<body>
62-
<div class="hub-container">
63-
<header class="header">
64-
<h1 class="brand-title">DevLabStudy©</h1>
65-
<div class="status-bar"><span class="dot"></span> All Systems Operational</div>
66-
</header>
67-
68-
<div class="feed-container">
69-
<div class="feed-header"><span>> devlab_study.sh</span> <span>LOC: Poland</span></div>
70-
<div class="feed-body">
71-
<div class="feed-line blue">> Initializing core consensus module...</div>
72-
<div class="feed-line">[OK] WireGuard VPN link established.</div>
73-
<div class="feed-line purple">> Orbit™ Core v0.3-alpha: Building images...</div>
74-
<div class="feed-line">Docker image optimization: 98MB -> 12MB.</div>
75-
<div class="feed-line blue">> HomeLab status request: Compaq Pro [Online].</div>
76-
<div class="feed-line">> _</div>
114+
115+
<nav class="navbar">
116+
<a href="/" class="nav-brand">DevLabStudy©</a>
117+
118+
<div class="nav-center">
119+
<a href="/" class="active">Hub</a>
120+
<a href="/blog">Blog</a>
121+
<a href="/homelab">HomeLab</a>
122+
<a href="/orbit">Orbit™</a>
123+
</div>
124+
125+
<div class="nav-right">
126+
<div class="dropdown">
127+
<div class="dropbtn">Connect ▾</div>
128+
<div class="dropdown-content">
129+
<a href="https://github.com/DevLabStudy" class="gh">GitHub <span>↗</span></a>
130+
<a href="https://www.youtube.com/@devlabstudy" class="yt">YouTube <span>↗</span></a>
131+
<a href="https://x.com/DevLabStudy" class="x">X / Twitter <span>↗</span></a>
132+
<a href="https://www.tiktok.com/@devlabstudy" class="tt">TikTok <span>↗</span></a>
133+
<a href="https://www.reddit.com/user/devlabstudy" class="rd">Reddit <span>↗</span></a>
134+
</div>
77135
</div>
78136
</div>
137+
</nav>
138+
139+
<main class="container">
140+
<div class="bento-grid">
141+
142+
<div class="bento-card span-2" style="background: linear-gradient(145deg, #1e293b, #0f172a);">
143+
<h1 class="welcome-title">Building <span>Infrastructure.</span></h1>
144+
<p class="welcome-desc">Self-taught tech enthusiast. Exploring the limits of old hardware with ultra-optimized Docker images and Proxmox virtualization.</p>
145+
</div>
79146

80-
<div class="path-grid">
81-
<a href="/blog" class="path-card" style="border-top: 4px solid var(--accent-blue);">
82-
<div class="path-icon">📚</div>
83-
<div class="path-title">Knowledge Base</div>
84-
<p class="path-desc">Deep dives into Docker optimization, Linux kernel, and cloud infrastructure.</p>
147+
<div class="bento-card" style="align-items: center; border-top: 4px solid var(--accent-green);">
148+
<div style="width: 12px; height: 12px; background: var(--accent-green); border-radius: 50%; box-shadow: 0 0 15px var(--accent-green); margin-bottom: 15px;"></div>
149+
<div style="font-size: 0.9rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px;">Network Status</div>
150+
<div style="font-size: 1.8rem; font-weight: 800; margin-top: 5px;">1 Gbps</div>
151+
<div style="font-size: 0.85rem; color: var(--accent-green); margin-top: 5px;">Fiber Online</div>
152+
</div>
153+
154+
<a href="/blog" class="bento-card nav-card border-blue">
155+
<div class="card-icon">📚</div>
156+
<div class="card-title">Knowledge Base</div>
157+
<p class="card-desc">Read my latest articles, research, and Docker optimization notes.</p>
85158
</a>
86-
<a href="/homelab" class="path-card" style="border-top: 4px solid var(--accent-green);">
87-
<div class="path-icon">🖥️</div>
88-
<div class="path-title">My HomeLab</div>
89-
<p class="path-desc">Live overview of my Proxmox cluster and distributed edge nodes.</p>
159+
160+
<a href="/homelab" class="bento-card nav-card border-green">
161+
<div class="card-icon">🖥️</div>
162+
<div class="card-title">HomeLab Status</div>
163+
<p class="card-desc">Check the live status of my Proxmox cluster and hardware specs.</p>
90164
</a>
91-
<a href="/orbit" class="path-card" style="border-top: 4px solid var(--accent-purple);">
92-
<div class="path-icon">🚀</div>
93-
<div class="path-title">Orbit™ Project</div>
94-
<p class="path-desc">Next-gen container orchestration for resource-constrained hardware.</p>
165+
166+
<a href="/orbit" class="bento-card nav-card border-purple">
167+
<div class="card-icon">🚀</div>
168+
<div class="card-title">Orbit™ Project</div>
169+
<p class="card-desc">Discover my custom container orchestration project for edge devices.</p>
95170
</a>
171+
172+
<div class="bento-card span-2" style="flex-direction: row; align-items: center;">
173+
<div class="stats-box">
174+
<div class="stat">
175+
<span class="stat-num">6</span>
176+
<span class="stat-label">Active Nodes</span>
177+
</div>
178+
<div class="stat">
179+
<span class="stat-num">1</span>
180+
<span class="stat-label">VPS Server</span>
181+
</div>
182+
<div class="stat">
183+
<span class="stat-num">3+</span>
184+
<span class="stat-label">Terabytes Storage</span>
185+
</div>
186+
</div>
187+
</div>
188+
189+
<div class="bento-card" style="text-align: center; justify-content: center;">
190+
<div style="font-size: 2rem; margin-bottom: 10px;">🐧</div>
191+
<div style="font-weight: 700; font-size: 1.1rem;">Linux Mint 22.3</div>
192+
<div style="font-size: 0.85rem; color: var(--text-muted);">Main Workstation OS</div>
193+
</div>
194+
96195
</div>
196+
</main>
97197

98-
<footer class="social-links">
99-
<a href="https://github.com/DevLabStudy" class="social-btn btn-gh">GitHub</a>
100-
<a href="https://www.youtube.com/@devlabstudy" class="social-btn btn-yt">YouTube</a>
101-
<a href="https://x.com/DevLabStudy" class="social-btn btn-x">X / Twitter</a>
102-
<a href="https://www.tiktok.com/@devlabstudy" class="social-btn btn-tiktok">TikTok</a>
103-
<a href="https://www.reddit.com/user/TobiMessi201" class="social-btn btn-reddit">Reddit</a>
104-
</footer>
105-
</div>
106198
</body>
107199
</html>

0 commit comments

Comments
 (0)