Skip to content

Commit d870f6c

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent 011200d commit d870f6c

1 file changed

Lines changed: 51 additions & 38 deletions

File tree

‎index.html‎

Lines changed: 51 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,64 +3,77 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>DevLabStudy© | Hub</title>
7-
<link rel="icon" type="image/png" href="/qr-code.png?v=fixed_buttons">
6+
<title>DevLabStudy© | System Hub</title>
7+
<link rel="icon" type="image/png" href="/qr-code.png">
88
<style>
99
:root {
10-
--bg-body: #f4f7fa; --bg-card: #ffffff;
11-
--text-main: #1e293b; --text-muted: #64748b; --border-color: #e2e8f0;
12-
--accent-blue: #2563eb; --accent-purple: #4b0082; --accent-green: #10b981;
13-
--shadow-sm: 0 4px 6px rgba(0,0,0,0.05); --shadow-md: 0 10px 25px rgba(0,0,0,0.1);
10+
--bg-body: #0f172a; --bg-card: #1e293b;
11+
--text-main: #f8fafc; --text-muted: #94a3b8; --border-color: #334155;
12+
--accent-blue: #3b82f6; --accent-purple: #8b5cf6; --accent-green: #10b981;
1413
}
15-
@media (prefers-color-scheme: dark) {
16-
:root {
17-
--bg-body: #0f172a; --bg-card: #1e293b;
18-
--text-main: #f8fafc; --text-muted: #94a3b8; --border-color: #334155;
19-
--accent-blue: #3b82f6; --accent-purple: #8b5cf6;
20-
--shadow-sm: 0 4px 6px rgba(0,0,0,0.3); --shadow-md: 0 10px 25px rgba(0,0,0,0.4);
21-
}
14+
body {
15+
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;
2217
}
23-
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg-body); color: var(--text-main); margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; justify-content: center; align-items: center; -webkit-font-smoothing: antialiased; }
24-
.hub-container { max-width: 800px; width: 100%; padding: 40px 20px; text-align: center; box-sizing: border-box; }
25-
.brand-title { font-size: 3rem; font-weight: 800; margin-bottom: 10px; letter-spacing: -1px; }
26-
.brand-subtitle { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 50px; }
27-
.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 50px; }
28-
.path-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 30px 20px; text-decoration: none; color: var(--text-main); transition: all 0.3s ease; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; }
29-
.path-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent-blue); }
30-
.path-icon { font-size: 2.5rem; margin-bottom: 15px; }
31-
.path-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
32-
.path-desc { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
33-
.social-links { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
34-
.social-btn { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); text-decoration: none; padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; transition: 0.2s; }
35-
.social-btn:hover { background: var(--border-color); }
18+
.hub-container { max-width: 1000px; width: 100%; padding: 40px; text-align: center; }
19+
20+
/* Header Section */
21+
.header { margin-bottom: 60px; }
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: 50px; }
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.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
31+
display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden;
32+
}
33+
.path-card:hover { transform: translateY(-10px); border-color: var(--accent-blue); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
34+
.path-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent-blue); opacity: 0; transition: 0.3s; }
35+
.path-card:hover::before { opacity: 1; }
36+
37+
.path-icon { font-size: 3rem; margin-bottom: 20px; }
38+
.path-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; }
39+
.path-desc { font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; }
40+
41+
/* Socials */
42+
.social-links { display: flex; justify-content: center; gap: 20px; }
43+
.social-btn { color: var(--text-muted); text-decoration: none; font-weight: 600; transition: 0.3s; padding: 10px 20px; border-radius: 10px; border: 1px solid var(--border-color); }
44+
.social-btn:hover { color: var(--text-main); background: var(--border-color); }
3645
</style>
3746
</head>
3847
<body>
3948
<div class="hub-container">
40-
<div class="brand-title">DevLabStudy©</div>
41-
<div class="brand-subtitle">Self-Taught Infrastructure Enthusiast</div>
49+
<header class="header">
50+
<h1 class="brand-title">DevLabStudy©</h1>
51+
<div class="status-bar"><span class="dot"></span> All Systems Operational</div>
52+
</header>
53+
4254
<div class="path-grid">
43-
<a href="/blog" class="path-card" style="border-top: 4px solid var(--accent-blue);">
55+
<a href="/blog" class="path-card" style="--accent-blue: #3b82f6;">
4456
<div class="path-icon">📚</div>
45-
<div class="path-title">DevLab Blog</div>
46-
<p class="path-desc">Articles, insights, Docker optimization, and IT knowledge.</p>
57+
<div class="path-title">Knowledge Base</div>
58+
<p class="path-desc">Deep dives into Docker optimization, Linux kernel, and cloud infrastructure.</p>
4759
</a>
48-
<a href="/homelab" class="path-card" style="border-top: 4px solid var(--accent-green);">
60+
<a href="/homelab" class="path-card" style="--accent-blue: #10b981;">
4961
<div class="path-icon">🖥️</div>
50-
<div class="path-title">My HomeLab</div>
51-
<p class="path-desc">Infrastructure, Proxmox servers, and node status.</p>
62+
<div class="path-title">HomeLab Dashboard</div>
63+
<p class="path-desc">Live overview of my Proxmox cluster and distributed edge nodes.</p>
5264
</a>
53-
<a href="/orbit" class="path-card" style="border-top: 4px solid var(--accent-purple);">
65+
<a href="/orbit" class="path-card" style="--accent-blue: #8b5cf6;">
5466
<div class="path-icon">🚀</div>
5567
<div class="path-title">Orbit™ Project</div>
56-
<p class="path-desc">Work in progress. Project roadmap and architecture.</p>
68+
<p class="path-desc">Next-gen container orchestration for resource-constrained hardware.</p>
5769
</a>
5870
</div>
59-
<div class="social-links">
71+
72+
<footer class="social-links">
6073
<a href="https://github.com/DevLabStudy" class="social-btn">GitHub</a>
6174
<a href="https://www.youtube.com/@devlabstudy" class="social-btn">YouTube</a>
6275
<a href="https://x.com/DevLabStudy" class="social-btn">X / Twitter</a>
63-
</div>
76+
</footer>
6477
</div>
6578
</body>
6679
</html>

0 commit comments

Comments
 (0)