Skip to content

Commit ce33477

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent 61350f2 commit ce33477

1 file changed

Lines changed: 79 additions & 66 deletions

File tree

‎index.html‎

Lines changed: 79 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3,111 +3,124 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>TobiMessi | Infrastructure & Dev</title>
6+
<title>TobiMessi | Infrastructure & Orbit</title>
77
<style>
88
:root {
9-
--bg: #0d1117;
10-
--card: #161b22;
11-
--border: #30363d;
12-
--text: #c9d1d9;
13-
--accent: #58a6ff;
14-
--yellow: #f0e042;
9+
--bg: #f8f9fa; /* Jasne, nowoczesne tło */
10+
--card: #ffffff; /* Białe karty */
11+
--border: #e1e4e8;
12+
--text-main: #24292e;
13+
--text-sub: #586069;
14+
--accent: #0366d6; /* Profesjonalny niebieski */
15+
--highlight: #28a745; /* Zielony akcent sukcesu */
1516
}
1617
body {
1718
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
1819
background-color: var(--bg);
19-
color: var(--text);
20+
color: var(--text-main);
2021
margin: 0;
2122
display: flex;
2223
justify-content: center;
2324
padding: 40px 20px;
2425
}
25-
.wrapper {
26-
max-width: 600px;
27-
width: 100%;
28-
}
29-
.profile-header {
30-
text-align: center;
31-
margin-bottom: 40px;
32-
}
33-
.profile-header h1 {
34-
font-size: 2rem;
35-
margin-bottom: 5px;
36-
color: var(--accent);
37-
}
26+
.container { max-width: 650px; width: 100%; }
27+
header { text-align: center; margin-bottom: 40px; }
28+
h1 { margin: 0; font-size: 2.2rem; font-weight: 800; letter-spacing: -1px; }
29+
3830
.card {
3931
background: var(--card);
4032
border: 1px solid var(--border);
41-
border-radius: 12px;
42-
padding: 24px;
33+
border-radius: 16px;
34+
padding: 30px;
4335
margin-bottom: 20px;
44-
transition: transform 0.2s;
36+
box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Delikatny cień */
4537
}
46-
.card:hover { border-color: #8b949e; }
47-
.card h2 { margin-top: 0; font-size: 1.2rem; color: var(--accent); }
48-
.card p { line-height: 1.6; font-size: 0.95rem; color: #8b949e; }
38+
.card h2 { margin-top: 0; color: var(--text-main); font-size: 1.3rem; border-bottom: 2px solid var(--bg); padding-bottom: 10px; }
39+
.card p { line-height: 1.6; color: var(--text-sub); margin-bottom: 15px; }
4940

50-
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
51-
.status-dot { height: 10px; width: 10px; background-color: #238636; border-radius: 50%; display: inline-block; margin-right: 5px; }
41+
.infra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
42+
.infra-item {
43+
background: var(--card);
44+
border: 1px solid var(--border);
45+
border-radius: 16px;
46+
padding: 20px;
47+
text-align: center;
48+
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
49+
}
50+
.status { color: var(--highlight); font-size: 0.75rem; font-weight: bold; margin-bottom: 5px; }
5251

53-
/* Styl dla przycisków wsparcia */
54-
.sponsor-grid {
55-
display: flex;
56-
flex-direction: column;
57-
gap: 15px;
58-
align-items: center;
59-
margin-top: 20px;
52+
.goals-list { padding-left: 20px; color: var(--text-sub); }
53+
.goals-list li { margin-bottom: 10px; }
54+
.goals-list strong { color: var(--text-main); }
55+
56+
.support-section { text-align: center; }
57+
.actions { display: flex; flex-direction: column; align-items: center; gap: 20px; }
58+
59+
.qr-small {
60+
width: 120px;
61+
border-radius: 12px;
62+
border: 1px solid var(--border);
63+
padding: 5px;
64+
background: white;
6065
}
61-
.mini-qr { width: 100px; opacity: 0.7; transition: 0.3s; }
62-
.mini-qr:hover { opacity: 1; }
6366

64-
iframe { border-radius: 12px; }
67+
footer { text-align: center; margin-top: 40px; font-size: 0.85rem; color: var(--text-sub); }
6568
</style>
6669
</head>
6770
<body>
6871

69-
<div class="wrapper">
70-
<div class="profile-header">
72+
<div class="container">
73+
<header>
7174
<h1>TobiMessi</h1>
72-
<p>Full-stack Dev • Self-Hosting Enthusiast • Creator of Orbit</p>
75+
<p style="color: var(--text-sub);">Infrastructure Architect & Orbit Creator</p>
76+
</header>
77+
78+
<div class="infra-grid">
79+
<div class="infra-item">
80+
<div class="status">● ACTIVE</div>
81+
<strong>HP Enterprise Cluster</strong>
82+
<p style="font-size: 0.8rem; margin-top: 5px; color: var(--text-sub);">Primary Production</p>
83+
</div>
84+
<div class="infra-item">
85+
<div class="status">● ACTIVE</div>
86+
<strong>Asus Server</strong>
87+
<p style="font-size: 0.8rem; margin-top: 5px; color: var(--text-sub);">Management Node</p>
88+
</div>
7389
</div>
7490

7591
<div class="card">
76-
<h2>About Me & My Projects</h2>
77-
<p>I'm a developer building <strong>Project Orbit</strong>, a lightweight container management tool. I focus on automation and high-performance server architecture.</p>
92+
<h2>Mission: Project Orbit</h2>
93+
<p>I am developing <strong>Orbit</strong> — a professional, lightweight container management suite. It aims to bridge the gap between complex orchestration and ease of use for home-lab enthusiasts.</p>
7894
</div>
7995

80-
<div class="grid">
81-
<div class="card">
82-
<h2><span class="status-dot"></span> HP Server</h2>
83-
<p style="font-size: 0.8rem;">Production Node. Docker & Orbit environment.</p>
84-
</div>
85-
<div class="card">
86-
<h2><span class="status-dot"></span> Asus Node</h2>
87-
<p style="font-size: 0.8rem;">Monitoring & RSS services. 24/7 uptime.</p>
88-
</div>
96+
<div class="card">
97+
<h2>Funding & Development Goals</h2>
98+
<p>Support is used to build a robust development environment:</p>
99+
<ul class="goals-list">
100+
<li><strong>Hardware Upgrades:</strong> Scaling the HP Enterprise server for Orbit stress-testing.</li>
101+
<li><strong>Development Costs:</strong> Funding the architecture and API deployment for the Orbit app.</li>
102+
<li><strong>Infrastructure:</strong> Maintaining 24/7 availability and Gigabit fiber connectivity.</li>
103+
</ul>
89104
</div>
90105

91-
<div class="card">
92-
<h2>Support the Infrastructure</h2>
93-
<p>All contributions help maintain the 24/7 home-lab and electricity costs for Project Orbit development.</p>
94-
95-
<div class="sponsor-grid">
96-
<iframe src="https://github.com/sponsors/TobiMessi/button" title="Sponsor TobiMessi" height="32" width="114" style="border: 0;"></iframe>
106+
<div class="card support-section">
107+
<h2>Support the Projects</h2>
108+
<div class="actions">
109+
<iframe src="https://github.com/sponsors/TobiMessi/button" title="Sponsor TobiMessi" height="32" width="114" style="border: 0; border-radius: 6px;"></iframe>
97110

98111
<script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="TobiK0" data-color="#FFDD00" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#000000" data-font-color="#000000" data-coffee-color="#ffffff" ></script>
99-
100-
<p style="font-size: 0.8rem; margin-bottom: 5px;">Or scan for mobile support:</p>
101-
<img src="qr-code.png" class="mini-qr" alt="QR">
112+
113+
<div>
114+
<p style="font-size: 0.8rem; color: var(--text-sub); margin-bottom: 10px;">Mobile Quick Support:</p>
115+
<img src="qr-code.png" class="qr-small" alt="QR Support">
116+
</div>
102117
</div>
103118
</div>
104119

105-
<footer style="text-align: center; font-size: 0.8rem; color: #484f58; margin-top: 20px;">
106-
<p>1 Gbps Fiber • Linux/Docker • JetBrains IDE</p>
120+
<footer>
121+
<p>Built with Passion • Powered by HP Enterprise • Managed via JetBrains</p>
107122
</footer>
108123
</div>
109124

110125
</body>
111126
</html>
112-
</body>
113-
</html>

0 commit comments

Comments
 (0)