Skip to content

Commit 2e6fcc5

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent 79c18d5 commit 2e6fcc5

1 file changed

Lines changed: 45 additions & 56 deletions

File tree

‎index.html‎

Lines changed: 45 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -7,66 +7,56 @@
77
<link rel="icon" type="image/jpeg" href="/profileIcon_g3ffyg7edeeg1.jpeg">
88
<style>
99
:root {
10-
--bg-body: #050505; --bg-nav: rgba(5, 5, 5, 0.7); --bg-card: #111;
11-
--text-main: #f8fafc; --text-muted: #94a3b8; --border-color: rgba(255, 255, 255, 0.1);
12-
--accent-blue: #3b82f6; --accent-purple: #8b5cf6; --accent-green: #10b981;
10+
--bg-nav: rgba(5, 5, 5, 0.85); --text-main: #f8fafc; --text-muted: #94a3b8;
11+
--border-color: rgba(255, 255, 255, 0.1); --accent-blue: #3b82f6;
1312
}
14-
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg-body); color: var(--text-main); margin: 0; min-height: 100vh; overflow-x: hidden; }
13+
14+
/* TWOJE NOWE TŁO Z SERWERAMI */
15+
body {
16+
font-family: 'Inter', -apple-system, sans-serif; margin: 0; min-height: 100vh;
17+
background: #000 url('/background.png') no-repeat center center fixed;
18+
background-size: cover; color: var(--text-main); overflow-x: hidden;
19+
}
20+
21+
/* Przyciemnienie obrazka, żeby tekst był czytelny */
22+
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1; }
1523

16-
/* --- PERFEKCYJNY NAVBAR (Z Community po prawej) --- */
17-
.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; }
18-
.nav-left { flex: 1; display: flex; justify-content: flex-start; }
24+
/* --- NOWY NAVBAR (Community z lewej, linki z prawej) --- */
25+
.navbar { position: sticky; top: 0; z-index: 100; 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; }
26+
27+
.nav-left { display: flex; align-items: center; gap: 30px; }
1928
.nav-brand { font-size: 1.5rem; font-weight: 800; text-decoration: none; color: var(--text-main); letter-spacing: -0.5px; }
20-
.nav-center { flex: 2; display: flex; justify-content: center; gap: 30px; }
21-
.nav-center a { text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.95rem; transition: color 0.3s; }
22-
.nav-center a:hover, .nav-center a.active { color: var(--accent-blue); }
23-
.nav-right { flex: 1; display: flex; justify-content: flex-end; }
29+
30+
/* Rozsuwane Community po lewej */
2431
.dropdown { position: relative; display: inline-block; padding: 10px 0; }
25-
.dropbtn { color: var(--text-muted); font-weight: 600; font-size: 0.95rem; transition: 0.3s; cursor: pointer; }
26-
.dropdown:hover .dropbtn { color: var(--text-main); }
27-
.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; }
32+
.dropbtn { color: var(--text-main); font-weight: 700; font-size: 0.95rem; cursor: pointer; background: rgba(255,255,255,0.1); padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border-color); transition: 0.3s; }
33+
.dropdown:hover .dropbtn { background: rgba(255,255,255,0.2); }
34+
.dropdown-content { display: none; position: absolute; left: 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; }
2835
.dropdown:hover .dropdown-content { display: block; opacity: 1; transform: translateY(0); }
2936
.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; }
3037
.dropdown-content a:last-child { border-bottom: none; }
31-
.dropdown-content a:hover { background: rgba(255,255,255,0.05); padding-left: 25px; }
32-
33-
/* --- NOWY KONCEPT GŁÓWNEJ STRONY --- */
34-
.hero-container { position: relative; min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; padding: 20px; }
35-
36-
/* Świecąca kula w tle */
37-
.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; }
38-
@keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } }
38+
.dropdown-content a:hover { background: rgba(255,255,255,0.1); padding-left: 25px; }
3939

40-
/* Szklany panel na środku */
41-
.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); }
42-
.main-title { font-size: 3.5rem; font-weight: 900; margin: 0 0 20px 0; letter-spacing: -1.5px; }
43-
.main-title span { background: linear-gradient(135deg, #3b82f6, #8b5cf6, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
44-
.main-desc { font-size: 1.2rem; color: var(--text-muted); line-height: 1.6; margin: 0 auto 50px auto; max-width: 600px; }
40+
.nav-right { display: flex; align-items: center; gap: 25px; }
41+
.nav-right a { text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.95rem; transition: color 0.3s; }
42+
.nav-right a:hover, .nav-right a.active { color: var(--accent-blue); }
4543

46-
/* 3 główne ścieżki (Duże przyciski) */
47-
.action-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
48-
.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; }
49-
.action-btn:hover { background: rgba(255,255,255,0.08); transform: translateY(-5px); }
50-
.action-btn.blog:hover { border-color: var(--accent-blue); box-shadow: 0 10px 30px rgba(59,130,246,0.2); }
51-
.action-btn.lab:hover { border-color: var(--accent-green); box-shadow: 0 10px 30px rgba(16,185,129,0.2); }
52-
.action-btn.orbit:hover { border-color: var(--accent-purple); box-shadow: 0 10px 30px rgba(139,92,246,0.2); }
53-
.btn-icon { font-size: 1.8rem; }
44+
/* Minimalistyczny tekst na środku */
45+
.hero-content { position: relative; z-index: 2; text-align: center; margin-top: 25vh; padding: 0 20px; }
46+
.hero-title { font-size: 4rem; font-weight: 900; margin: 0; letter-spacing: -2px; text-shadow: 0 4px 20px rgba(0,0,0,0.8); }
47+
.hero-subtitle { font-size: 1.2rem; color: #cbd5e1; margin-top: 15px; font-weight: 500; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
5448

55-
@media (max-width: 768px) { .navbar { flex-direction: column; padding: 15px; gap: 15px; } .nav-left, .nav-center, .nav-right { justify-content: center; width: 100%; } .nav-center { flex-wrap: wrap; } .action-links { flex-direction: column; } .glass-panel { padding: 40px 20px; } .main-title { font-size: 2.5rem; } }
49+
@media (max-width: 768px) { .navbar { flex-direction: column; gap: 15px; } .nav-left, .nav-right { justify-content: center; width: 100%; flex-wrap: wrap; } }
5650
</style>
5751
</head>
5852
<body>
53+
<div class="overlay"></div>
54+
5955
<nav class="navbar">
60-
<div class="nav-left"><a href="/" class="nav-brand">DevLabStudy</a></div>
61-
<div class="nav-center">
62-
<a href="/" class="active">Hub</a>
63-
<a href="/blog">Blog</a>
64-
<a href="/homelab">HomeLab</a>
65-
<a href="/orbit">Orbit™</a>
66-
</div>
67-
<div class="nav-right">
56+
<div class="nav-left">
57+
<a href="/" class="nav-brand">DevLabStudy</a>
6858
<div class="dropdown">
69-
<span class="dropbtn">Community</span>
59+
<span class="dropbtn">Community ▾</span>
7060
<div class="dropdown-content">
7161
<a href="https://github.com/DevLabStudy">GitHub <span>↗</span></a>
7262
<a href="https://www.youtube.com/@devlabstudy">YouTube <span>↗</span></a>
@@ -76,18 +66,17 @@
7666
</div>
7767
</div>
7868
</div>
79-
</nav>
80-
<main class="hero-container">
81-
<div class="glow-orb"></div>
82-
<div class="glass-panel">
83-
<h1 class="main-title">Architecting the <span>Edge.</span></h1>
84-
<p class="main-desc">Self-taught infrastructure enthusiast. Pushing the boundaries of old hardware through Docker optimization and custom orchestration.</p>
85-
<div class="action-links">
86-
<a href="/blog" class="action-btn blog"><span class="btn-icon">📚</span> Notes</a>
87-
<a href="/homelab" class="action-btn lab"><span class="btn-icon">🖥️</span> Cluster</a>
88-
<a href="/orbit" class="action-btn orbit"><span class="btn-icon">🚀</span> Orbit™</a>
89-
</div>
69+
<div class="nav-right">
70+
<a href="/" class="active">Hub</a>
71+
<a href="/blog">Blog</a>
72+
<a href="/homelab">HomeLab</a>
73+
<a href="/orbit">Orbit™</a>
9074
</div>
75+
</nav>
76+
77+
<main class="hero-content">
78+
<h1 class="hero-title">DevLab Environment</h1>
79+
<p class="hero-subtitle">System Administration • Docker Optimization • Edge Computing</p>
9180
</main>
9281
</body>
9382
</html>

0 commit comments

Comments
 (0)