Skip to content

Commit 72b0bb8

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent e73a66c commit 72b0bb8

1 file changed

Lines changed: 120 additions & 31 deletions

File tree

‎index.html‎

Lines changed: 120 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,64 +5,153 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>TobiMessi | Infrastructure</title>
77

8-
<link rel="icon" type="image/png" href="qr-code.png">
8+
<link rel="icon" type="image/png" href="qr-code.png?v=99">
9+
<link rel="shortcut icon" type="image/png" href="qr-code.png?v=99">
910

1011
<style>
11-
body { font-family: -apple-system, sans-serif; background: #f0f2f5; display: flex; justify-content: center; padding: 20px; }
12-
.wrapper { max-width: 600px; width: 100%; }
13-
.card { background: white; border-radius: 15px; padding: 25px; border: 1px solid #ddd; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
14-
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 20px 0; }
15-
.node { background: #fff; border: 1px solid #eee; padding: 15px; border-radius: 10px; text-align: left; }
16-
.btn { display: inline-block; padding: 10px 20px; margin: 5px; border-radius: 8px; text-decoration: none; font-weight: bold; color: white; }
17-
.btn-gh { background: #24292e; }
18-
.btn-rd { background: #ff4500; }
19-
.btn-coffee { background: #FFDD00; color: black; }
20-
/* Styl dla obrazka QR */
21-
.qr-frame {
22-
margin-top: 20px;
23-
padding: 10px;
24-
border: 2px dashed #ccc;
12+
/* Nowoczesny font i tło */
13+
body {
14+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
15+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Gradient tła */
16+
color: #1c1e21;
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
min-height: 100vh;
21+
margin: 0;
22+
padding: 20px;
23+
line-height: 1.6;
24+
}
25+
26+
.wrapper {
27+
max-width: 600px;
28+
width: 100%;
29+
background: rgba(255, 255, 255, 0.95);
30+
padding: 40px;
31+
border-radius: 20px;
32+
box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Cień pod całą stroną */
33+
}
34+
35+
header { text-align: center; margin-bottom: 35px; }
36+
h1 { margin: 0 0 10px 0; font-size: 2.2rem; letter-spacing: -0.5px; color: #111; }
37+
38+
/* Przyciski */
39+
.btn-group { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
40+
.btn {
2541
display: inline-block;
26-
border-radius: 10px;
42+
padding: 10px 24px;
43+
border-radius: 8px;
44+
text-decoration: none;
45+
font-weight: 600;
46+
color: white;
47+
transition: all 0.2s ease;
48+
font-size: 0.9rem;
49+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
50+
}
51+
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
52+
53+
.btn-gh { background: #24292e; }
54+
.btn-reddit { background: #FF4500; }
55+
.btn-coffee { background: #FFDD00; color: #000; }
56+
57+
/* Sekcja Focus */
58+
.focus-box {
59+
background: #e8f3ff;
60+
border-left: 5px solid #0066cc;
61+
padding: 20px;
62+
border-radius: 8px;
63+
margin-bottom: 30px;
64+
}
65+
.focus-box h3 { margin-top: 0; color: #0056b3; font-size: 1.1rem; margin-bottom: 5px; }
66+
67+
/* Grid serwerów */
68+
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 30px; }
69+
.node {
70+
background: white;
71+
border: 1px solid #e1e4e8;
72+
padding: 20px;
73+
border-radius: 12px;
74+
transition: 0.2s;
75+
}
76+
.node:hover { border-color: #0066cc; }
77+
.status { color: #28a745; font-weight: bold; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
78+
79+
/* Sekcja Wsparcia */
80+
.support-card {
81+
text-align: center;
82+
border-top: 2px solid #f0f0f0;
83+
padding-top: 30px;
2784
}
28-
.qr-img { width: 180px; height: auto; display: block; }
85+
86+
.qr-img {
87+
width: 150px;
88+
height: auto;
89+
border: 1px solid #ddd;
90+
padding: 8px;
91+
background: #fff;
92+
border-radius: 12px;
93+
margin-top: 15px;
94+
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
95+
}
96+
97+
footer { text-align: center; color: #888; font-size: 0.8rem; margin-top: 40px; }
98+
2999
@media (max-width: 500px) { .grid { grid-template-columns: 1fr; } }
30100
</style>
31101
</head>
32102
<body>
33103

34104
<div class="wrapper">
35-
<header style="text-align: center; margin-bottom: 20px;">
105+
<header>
36106
<h1>TobiMessi</h1>
37-
<a href="https://github.com/TobiMessi" class="btn btn-gh">GitHub</a>
38-
<a href="https://www.reddit.com/user/TobiMessi201/" class="btn btn-rd">Reddit</a>
107+
<p style="color: #555; margin-bottom: 20px;">Infrastructure Architect & Docker Developer</p>
108+
<div class="btn-group">
109+
<a href="https://github.com/TobiMessi" class="btn btn-gh">GitHub</a>
110+
<a href="https://www.reddit.com/user/TobiMessi201/" class="btn btn-reddit">Reddit</a>
111+
</div>
39112
</header>
40113

114+
<div class="focus-box">
115+
<h3>Current Focus: Orbit Docker Image</h3>
116+
<p style="margin: 0; font-size: 0.95rem; color: #333;">
117+
Developing a highly optimized, custom Docker image for Project Orbit.
118+
Aiming for maximum performance across distributed hardware nodes.
119+
</p>
120+
</div>
121+
41122
<div class="grid">
42123
<div class="node">
43-
<strong style="color: #28a745;">● HP Compaq Pro 6300</strong><br>
44-
<small>i5-3470 | 8GB RAM</small>
124+
<span class="status">● Online</span><br>
125+
<strong style="display:block; margin-top:8px;">HP Compaq Pro 6300</strong>
126+
<small style="color: #666;">i5-3470 | 8GB RAM</small>
45127
</div>
46128
<div class="node">
47-
<strong style="color: #28a745;">● Asus VivoBook 15</strong><br>
48-
<small>N4000 | 4GB RAM</small>
129+
<span class="status">● Online</span><br>
130+
<strong style="display:block; margin-top:8px;">Asus VivoBook 15</strong>
131+
<small style="color: #666;">N4000 | 4GB RAM</small>
49132
</div>
50133
</div>
51134

52-
<div class="card">
53-
<h3>Support & Docker Dev</h3>
54-
<p>I am optimizing my custom Docker image for Project Orbit.</p>
135+
<div class="support-card">
136+
<h2 style="margin-top: 0; font-size: 1.5rem;">Support the Project</h2>
137+
<p style="color: #666; font-size: 0.9rem; margin-bottom: 20px;">
138+
Your support directly funds hardware upgrades (SSD/RAM) and development time.
139+
</p>
55140

56-
<div style="margin: 15px 0;">
141+
<div class="btn-group">
57142
<a href="https://github.com/sponsors/TobiMessi" class="btn btn-gh">Sponsor</a>
58143
<a href="https://www.buymeacoffee.com/TobiK0" class="btn btn-coffee">Buy Coffee</a>
59144
</div>
60145

61-
<div class="qr-frame">
62-
<p style="font-size: 0.8rem; margin-bottom: 5px;">Scan QR Code:</p>
63-
<img src="qr-code.png" alt="Jeśli nie widzisz QR, sprawdź nazwę pliku w repozytorium" class="qr-img">
146+
<div style="margin-top: 25px;">
147+
<p style="font-size: 0.8rem; font-weight: bold; color: #888; margin-bottom: 5px;">QUICK MOBILE SCAN</p>
148+
<img src="qr-code.png" alt="Scan to Support" class="qr-img">
64149
</div>
65150
</div>
151+
152+
<footer>
153+
1 Gbps Fiber • Linux Mint 22.2 • Orbit 2026
154+
</footer>
66155
</div>
67156

68157
</body>

0 commit comments

Comments
 (0)