Skip to content

Commit ff6353d

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent 1de6ee2 commit ff6353d

1 file changed

Lines changed: 60 additions & 75 deletions

File tree

‎index.html‎

Lines changed: 60 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -7,65 +7,74 @@
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.85); --bg-card: #1e293b;
11-
--text-main: #f8fafc; --text-muted: #94a3b8; --border-color: #334155;
10+
--bg-body: #050505; --bg-nav: rgba(5, 5, 5, 0.7);
11+
--text-main: #f8fafc; --text-muted: #94a3b8; --border-color: rgba(255, 255, 255, 0.1);
1212
--accent-blue: #3b82f6; --accent-purple: #8b5cf6; --accent-green: #10b981;
13-
--radius-lg: 24px;
1413
}
1514

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; }
15+
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg-body); color: var(--text-main); margin: 0; min-height: 100vh; overflow-x: hidden; }
1716

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; }
17+
/* --- PERFEKCYJNY NAVBAR (Z Community po prawej) --- */
18+
.navbar { background: var(--bg-nav); backdrop-filter: blur(15px); border-bottom: 1px solid var(--border-color); padding: 15px 40px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
2119

22-
.nav-center { display: flex; gap: 25px; align-items: center; }
20+
.nav-left { flex: 1; display: flex; justify-content: flex-start; }
21+
.nav-brand { font-size: 1.5rem; font-weight: 800; text-decoration: none; color: var(--text-main); letter-spacing: -0.5px; }
22+
23+
.nav-center { flex: 2; display: flex; justify-content: center; gap: 30px; }
2324
.nav-center a { text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.95rem; transition: color 0.3s; }
2425
.nav-center a:hover, .nav-center a.active { color: var(--accent-blue); }
2526

26-
/* Dropdown Community (Rozsuwane menu) */
27+
.nav-right { flex: 1; display: flex; justify-content: flex-end; }
2728
.dropdown { position: relative; display: inline-block; padding: 10px 0; }
2829
.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); }
30-
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; }
30+
.dropdown:hover .dropbtn { color: var(--text-main); }
31+
.dropdown-content { display: none; position: absolute; right: 0; top: 100%; background-color: #111; min-width: 180px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden; z-index: 1; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; }
3232
.dropdown:hover .dropdown-content { display: block; opacity: 1; transform: translateY(0); }
3333
.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; }
3434
.dropdown-content a:last-child { border-bottom: none; }
3535
.dropdown-content a:hover { background: rgba(255,255,255,0.05); padding-left: 25px; }
36+
37+
/* --- NOWY KONCEPT GŁÓWNEJ STRONY --- */
38+
.hero-container { position: relative; min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; padding: 20px; }
3639

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; }
41-
.bento-card:hover { transform: translateY(-5px); border-color: #475569; }
42-
.span-2 { grid-column: span 2; }
40+
/* Świecąca kula w tle */
41+
.glow-orb { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, rgba(139,92,246,0.1) 40%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; filter: blur(50px); animation: pulse 8s infinite alternate; }
42+
@keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } }
43+
44+
/* Szklany panel na środku */
45+
.glass-panel { position: relative; z-index: 1; background: rgba(20, 20, 20, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 30px; padding: 60px 40px; max-width: 800px; width: 100%; text-align: center; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
4346

44-
.welcome-title { font-size: 2.8rem; font-weight: 800; margin: 0 0 10px 0; letter-spacing: -1px; }
45-
.welcome-title span { background: linear-gradient(to right, #3b82f6, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
46-
.welcome-desc { color: var(--text-muted); font-size: 1.1rem; max-width: 80%; line-height: 1.6; margin: 0; }
47+
.main-title { font-size: 3.5rem; font-weight: 900; margin: 0 0 20px 0; letter-spacing: -1.5px; }
48+
.main-title span { background: linear-gradient(135deg, #3b82f6, #8b5cf6, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
49+
.main-desc { font-size: 1.2rem; color: var(--text-muted); line-height: 1.6; margin: 0 auto 50px auto; max-width: 600px; }
4750

48-
.nav-card { text-decoration: none; color: var(--text-main); justify-content: flex-start; }
49-
.card-icon { font-size: 2.5rem; margin-bottom: 15px; }
50-
.card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
51-
.card-desc { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
51+
/* 3 główne ścieżki (Duże przyciski) */
52+
.action-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
53+
.action-btn { display: flex; align-items: center; gap: 15px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); padding: 20px 30px; border-radius: 20px; text-decoration: none; color: var(--text-main); font-weight: 700; font-size: 1.1rem; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); flex: 1; min-width: 200px; }
54+
.action-btn:hover { background: rgba(255,255,255,0.08); transform: translateY(-5px); }
5255

53-
.stats-box { display: flex; justify-content: space-around; text-align: center; width: 100%; }
54-
.stat { display: flex; flex-direction: column; }
55-
.stat-num { font-size: 2.5rem; font-weight: 800; color: var(--text-main); }
56-
.stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
56+
.action-btn.blog:hover { border-color: var(--accent-blue); box-shadow: 0 10px 30px rgba(59,130,246,0.2); }
57+
.action-btn.lab:hover { border-color: var(--accent-green); box-shadow: 0 10px 30px rgba(16,185,129,0.2); }
58+
.action-btn.orbit:hover { border-color: var(--accent-purple); box-shadow: 0 10px 30px rgba(139,92,246,0.2); }
59+
60+
.btn-icon { font-size: 1.8rem; }
5761

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; } }
62+
@media (max-width: 768px) { .navbar { flex-direction: column; padding: 15px; gap: 15px; } .nav-left, .nav-center, .nav-right { justify-content: center; width: 100%; } .action-links { flex-direction: column; } .glass-panel { padding: 40px 20px; } .main-title { font-size: 2.5rem; } }
6063
</style>
6164
</head>
6265
<body>
6366

6467
<nav class="navbar">
65-
<a href="/" class="nav-brand">DevLabStudy</a>
68+
<div class="nav-left">
69+
<a href="/" class="nav-brand">DevLabStudy</a>
70+
</div>
6671
<div class="nav-center">
6772
<a href="/" class="active">Hub</a>
68-
73+
<a href="/blog">Blog</a>
74+
<a href="/homelab">HomeLab</a>
75+
<a href="/orbit">Orbit™</a>
76+
</div>
77+
<div class="nav-right">
6978
<div class="dropdown">
7079
<span class="dropbtn">Community</span>
7180
<div class="dropdown-content">
@@ -76,53 +85,29 @@
7685
<a href="https://www.reddit.com/user/devlabstudy">Reddit <span>↗</span></a>
7786
</div>
7887
</div>
79-
80-
<a href="/blog">Blog</a>
81-
<a href="/homelab">HomeLab</a>
82-
<a href="/orbit">Orbit™</a>
8388
</div>
8489
</nav>
8590

86-
<main class="container">
87-
<div class="bento-grid">
88-
<div class="bento-card span-2" style="background: linear-gradient(145deg, #1e293b, #0f172a);">
89-
<h1 class="welcome-title">Building <span>Infrastructure.</span></h1>
90-
<p class="welcome-desc">Self-taught tech enthusiast. Exploring the limits of old hardware with ultra-optimized Docker images and Proxmox virtualization.</p>
91-
</div>
92-
<div class="bento-card" style="align-items: center; border-top: 4px solid var(--accent-green);">
93-
<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>
94-
<div style="font-size: 0.9rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px;">Network Status</div>
95-
<div style="font-size: 1.8rem; font-weight: 800; margin-top: 5px;">1 Gbps</div>
96-
<div style="font-size: 0.85rem; color: var(--accent-green); margin-top: 5px;">Fiber Online</div>
97-
</div>
98-
<a href="/blog" class="bento-card nav-card" style="border-top: 4px solid var(--accent-blue);">
99-
<div class="card-icon">📚</div>
100-
<div class="card-title">Knowledge Base</div>
101-
<p class="card-desc">Read my latest articles, research, and Docker optimization notes.</p>
102-
</a>
103-
<a href="/homelab" class="bento-card nav-card" style="border-top: 4px solid var(--accent-green);">
104-
<div class="card-icon">🖥️</div>
105-
<div class="card-title">HomeLab Status</div>
106-
<p class="card-desc">Check the live status of my Proxmox cluster and hardware specs.</p>
107-
</a>
108-
<a href="/orbit" class="bento-card nav-card" style="border-top: 4px solid var(--accent-purple);">
109-
<div class="card-icon">🚀</div>
110-
<div class="card-title">Orbit™ Project</div>
111-
<p class="card-desc">Discover my custom container orchestration project for edge devices.</p>
112-
</a>
113-
<div class="bento-card span-2" style="flex-direction: row; align-items: center;">
114-
<div class="stats-box">
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>
118-
</div>
119-
</div>
120-
<div class="bento-card" style="text-align: center; justify-content: center;">
121-
<div style="font-size: 2rem; margin-bottom: 10px;">🐧</div>
122-
<div style="font-weight: 700; font-size: 1.1rem;">Linux Mint 22.3</div>
123-
<div style="font-size: 0.85rem; color: var(--text-muted);">Main Workstation OS</div>
91+
<main class="hero-container">
92+
<div class="glow-orb"></div>
93+
94+
<div class="glass-panel">
95+
<h1 class="main-title">Architecting the <span>Edge.</span></h1>
96+
<p class="main-desc">Self-taught infrastructure enthusiast. Pushing the boundaries of old hardware through Docker optimization and custom orchestration.</p>
97+
98+
<div class="action-links">
99+
<a href="/blog" class="action-btn blog">
100+
<span class="btn-icon">📚</span> Notes
101+
</a>
102+
<a href="/homelab" class="action-btn lab">
103+
<span class="btn-icon">🖥️</span> Cluster
104+
</a>
105+
<a href="/orbit" class="action-btn orbit">
106+
<span class="btn-icon">🚀</span> Orbit™
107+
</a>
124108
</div>
125109
</div>
126110
</main>
111+
127112
</body>
128113
</html>

0 commit comments

Comments
 (0)