Skip to content

Commit ed213d3

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

1 file changed

Lines changed: 39 additions & 110 deletions

File tree

‎index.html‎

Lines changed: 39 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -3,197 +3,126 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>DevLabStudy© | 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-nav: rgba(15, 23, 42, 0.8); --bg-card: #1e293b;
10+
--bg-body: #0f172a; --bg-nav: rgba(15, 23, 42, 0.85); --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;
13+
--radius-lg: 24px;
1414
}
1515

16-
body {
17-
font-family: 'Inter', -apple-system, sans-serif; background: var(--bg-body); color: var(--text-main);
18-
margin: 0; padding: 0; min-height: 100vh; -webkit-font-smoothing: antialiased;
19-
}
16+
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg-body); color: var(--text-main); margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; }
2017

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;
26-
}
27-
.nav-brand { font-size: 1.5rem; font-weight: 800; text-decoration: none; color: var(--text-main); letter-spacing: -0.5px; width: 200px; }
18+
/* --- UNIWERSALNY NAVBAR --- */
19+
.navbar { background: var(--bg-nav); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); padding: 15px 40px; display: flex; align-items: center; position: sticky; top: 0; z-index: 100; }
20+
.nav-brand { font-size: 1.5rem; font-weight: 800; text-decoration: none; color: var(--text-main); letter-spacing: -0.5px; margin-right: 40px; }
2821

29-
/* Środek - linki główne */
30-
.nav-center { display: flex; gap: 30px; justify-content: center; flex-grow: 1; }
22+
.nav-center { display: flex; gap: 25px; align-items: center; }
3123
.nav-center a { text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.95rem; transition: color 0.3s; }
3224
.nav-center a:hover, .nav-center a.active { color: var(--accent-blue); }
3325

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;
40-
}
41-
.dropdown:hover .dropbtn { background: var(--accent-blue); color: #fff; }
26+
/* Dropdown Community (Rozsuwane menu) */
27+
.dropdown { position: relative; display: inline-block; padding: 10px 0; }
28+
.dropbtn { color: var(--text-muted); font-weight: 600; font-size: 0.95rem; transition: 0.3s; cursor: pointer; }
29+
.dropdown:hover .dropbtn { color: var(--accent-blue); }
4230

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-
}
31+
.dropdown-content { display: none; position: absolute; left: 0; top: 100%; background-color: var(--bg-card); min-width: 180px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden; z-index: 1; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; }
4932
.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-
}
33+
.dropdown-content a { color: var(--text-main) !important; padding: 12px 20px; text-decoration: none; display: flex; justify-content: space-between; font-size: 0.9rem; font-weight: 600; border-bottom: 1px solid var(--border-color); transition: background 0.2s; }
5434
.dropdown-content a:last-child { border-bottom: none; }
55-
56-
/* Kolory social mediów przy najechaniu */
5735
.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; }
64-
65-
.bento-grid {
66-
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-rows: minmax(180px, auto);
67-
}
6836

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-
}
37+
/* BENTO GRID (Strona główna) */
38+
.container { max-width: 1100px; margin: 50px auto; padding: 0 20px; }
39+
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-rows: minmax(180px, auto); }
40+
.bento-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; justify-content: center; position: relative; transition: transform 0.3s ease, border-color 0.3s ease; }
7441
.bento-card:hover { transform: translateY(-5px); border-color: #475569; }
75-
76-
/* Duży kafelek powitalny */
7742
.span-2 { grid-column: span 2; }
43+
7844
.welcome-title { font-size: 2.8rem; font-weight: 800; margin: 0 0 10px 0; letter-spacing: -1px; }
7945
.welcome-title span { background: linear-gradient(to right, #3b82f6, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
8046
.welcome-desc { color: var(--text-muted); font-size: 1.1rem; max-width: 80%; line-height: 1.6; margin: 0; }
8147

82-
/* Kafelki nawigacyjne (Blog, HomeLab, Orbit) */
8348
.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); }
8549
.card-icon { font-size: 2.5rem; margin-bottom: 15px; }
8650
.card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
8751
.card-desc { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
8852

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 */
9553
.stats-box { display: flex; justify-content: space-around; text-align: center; width: 100%; }
9654
.stat { display: flex; flex-direction: column; }
9755
.stat-num { font-size: 2.5rem; font-weight: 800; color: var(--text-main); }
9856
.stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
9957

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-
}
58+
@media (max-width: 900px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } .navbar { flex-direction: column; padding: 15px; gap: 15px; } .nav-brand { margin-right: 0; } .nav-center { flex-wrap: wrap; justify-content: center; } }
59+
@media (max-width: 600px) { .bento-grid { grid-template-columns: 1fr; } .span-2 { grid-column: span 1; } }
11160
</style>
11261
</head>
11362
<body>
11463

11564
<nav class="navbar">
116-
<a href="/" class="nav-brand">DevLabStudy©</a>
117-
65+
<a href="/" class="nav-brand">DevLabStudy</a>
11866
<div class="nav-center">
11967
<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">
68+
12669
<div class="dropdown">
127-
<div class="dropbtn">Connect ▾</div>
70+
<span class="dropbtn">Community</span>
12871
<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>
72+
<a href="https://github.com/DevLabStudy">GitHub <span>↗</span></a>
73+
<a href="https://www.youtube.com/@devlabstudy">YouTube <span>↗</span></a>
74+
<a href="https://x.com/DevLabStudy">X / Twitter <span>↗</span></a>
75+
<a href="https://www.tiktok.com/@devlabstudy">TikTok <span>↗</span></a>
76+
<a href="https://www.reddit.com/user/devlabstudy">Reddit <span>↗</span></a>
13477
</div>
13578
</div>
79+
80+
<a href="/blog">Blog</a>
81+
<a href="/homelab">HomeLab</a>
82+
<a href="/orbit">Orbit™</a>
13683
</div>
13784
</nav>
13885

13986
<main class="container">
14087
<div class="bento-grid">
141-
14288
<div class="bento-card span-2" style="background: linear-gradient(145deg, #1e293b, #0f172a);">
14389
<h1 class="welcome-title">Building <span>Infrastructure.</span></h1>
14490
<p class="welcome-desc">Self-taught tech enthusiast. Exploring the limits of old hardware with ultra-optimized Docker images and Proxmox virtualization.</p>
14591
</div>
146-
14792
<div class="bento-card" style="align-items: center; border-top: 4px solid var(--accent-green);">
14893
<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>
14994
<div style="font-size: 0.9rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px;">Network Status</div>
15095
<div style="font-size: 1.8rem; font-weight: 800; margin-top: 5px;">1 Gbps</div>
15196
<div style="font-size: 0.85rem; color: var(--accent-green); margin-top: 5px;">Fiber Online</div>
15297
</div>
153-
154-
<a href="/blog" class="bento-card nav-card border-blue">
98+
<a href="/blog" class="bento-card nav-card" style="border-top: 4px solid var(--accent-blue);">
15599
<div class="card-icon">📚</div>
156100
<div class="card-title">Knowledge Base</div>
157101
<p class="card-desc">Read my latest articles, research, and Docker optimization notes.</p>
158102
</a>
159-
160-
<a href="/homelab" class="bento-card nav-card border-green">
103+
<a href="/homelab" class="bento-card nav-card" style="border-top: 4px solid var(--accent-green);">
161104
<div class="card-icon">🖥️</div>
162105
<div class="card-title">HomeLab Status</div>
163106
<p class="card-desc">Check the live status of my Proxmox cluster and hardware specs.</p>
164107
</a>
165-
166-
<a href="/orbit" class="bento-card nav-card border-purple">
108+
<a href="/orbit" class="bento-card nav-card" style="border-top: 4px solid var(--accent-purple);">
167109
<div class="card-icon">🚀</div>
168110
<div class="card-title">Orbit™ Project</div>
169111
<p class="card-desc">Discover my custom container orchestration project for edge devices.</p>
170112
</a>
171-
172113
<div class="bento-card span-2" style="flex-direction: row; align-items: center;">
173114
<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>
115+
<div class="stat"><span class="stat-num">6</span><span class="stat-label">Active Nodes</span></div>
116+
<div class="stat"><span class="stat-num">1</span><span class="stat-label">VPS Server</span></div>
117+
<div class="stat"><span class="stat-num">3+</span><span class="stat-label">Terabytes Storage</span></div>
186118
</div>
187119
</div>
188-
189120
<div class="bento-card" style="text-align: center; justify-content: center;">
190121
<div style="font-size: 2rem; margin-bottom: 10px;">🐧</div>
191122
<div style="font-weight: 700; font-size: 1.1rem;">Linux Mint 22.3</div>
192123
<div style="font-size: 0.85rem; color: var(--text-muted);">Main Workstation OS</div>
193124
</div>
194-
195125
</div>
196126
</main>
197-
198127
</body>
199128
</html>

0 commit comments

Comments
 (0)