antigravity/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update homepage to a modern German under construction page
Test and Deploy Website / test-and-deploy (push) Successful in 40s
Details

Browse Source
This commit is contained in:
antigravity
2026-06-15 14:27:15 +02:00
parent f0b4f42cb1
commit 71cd0c3a95
3 changed files with 80 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+72 -99
View File
@@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Robert Müller — Software Engineer & Architect</title> <title>Robert Müller — Webseite im Aufbau</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
@@ -15,7 +15,6 @@
--border-color: rgba(255, 255, 255, 0.08); --border-color: rgba(255, 255, 255, 0.08);
--accent-color: #6366f1; --accent-color: #6366f1;
--accent-glow: rgba(99, 102, 241, 0.3); --accent-glow: rgba(99, 102, 241, 0.3);
--accent-secondary: #06b6d4;
--text-main: #f8fafc; --text-main: #f8fafc;
--text-muted: #94a3b8; --text-muted: #94a3b8;
} }
@@ -46,7 +45,7 @@
width: 60vw; width: 60vw;
height: 60vw; height: 60vw;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(6, 182, 212, 0.05) 50%, rgba(0,0,0,0) 70%); background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(6, 182, 212, 0.04) 50%, rgba(0,0,0,0) 70%);
filter: blur(120px); filter: blur(120px);
z-index: 0; z-index: 0;
top: -10vw; top: -10vw;
@@ -59,7 +58,7 @@
width: 50vw; width: 50vw;
height: 50vw; height: 50vw;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, rgba(99, 102, 241, 0.05) 50%, rgba(0,0,0,0) 70%); background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, rgba(99, 102, 241, 0.04) 50%, rgba(0,0,0,0) 70%);
filter: blur(120px); filter: blur(120px);
z-index: 0; z-index: 0;
bottom: -10vw; bottom: -10vw;
@@ -81,7 +80,7 @@
border-radius: 24px; border-radius: 24px;
padding: 4rem 3rem; padding: 4rem 3rem;
width: 100%; width: 100%;
max-width: 650px; max-width: 600px;
text-align: center; text-align: center;
z-index: 10; z-index: 10;
box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6); box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6);
@@ -89,27 +88,44 @@
} }
.container:hover { .container:hover {
border-color: rgba(99, 102, 241, 0.25); border-color: rgba(99, 102, 241, 0.2);
} }
/* Badge */ /* Construction / Under Construction Icon */
.badge { .icon-wrapper {
display: inline-block; width: 80px;
background: rgba(99, 102, 241, 0.08); height: 80px;
margin: 0 auto 2rem;
background: rgba(99, 102, 241, 0.1);
border: 1px solid rgba(99, 102, 241, 0.3); border: 1px solid rgba(99, 102, 241, 0.3);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #a5b4fc; color: #a5b4fc;
padding: 0.4rem 1rem; position: relative;
border-radius: 99px; }
font-size: 0.8rem;
font-weight: 600; .icon-wrapper::after {
text-transform: uppercase; content: '';
letter-spacing: 0.1em; position: absolute;
margin-bottom: 2rem; width: 100%;
height: 100%;
border-radius: 20px;
border: 1px solid var(--accent-color);
opacity: 0;
transform: scale(0.9);
transition: all 0.5s ease;
}
.container:hover .icon-wrapper::after {
opacity: 1;
transform: scale(1.1);
} }
/* Header */ /* Header */
h1 { h1 {
font-size: 3rem; font-size: 2.75rem;
font-weight: 800; font-weight: 800;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
background: linear-gradient(135deg, #ffffff 40%, #a5b4fc 100%); background: linear-gradient(135deg, #ffffff 40%, #a5b4fc 100%);
@@ -119,73 +135,36 @@
} }
.subtitle { .subtitle {
font-size: 1.25rem; font-size: 1.1rem;
color: var(--accent-secondary); color: var(--text-muted);
font-weight: 600; font-weight: 600;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
letter-spacing: 0.05em; letter-spacing: 0.15em;
text-transform: uppercase; text-transform: uppercase;
} }
/* Dynamic greeting */ .divider {
width: 60px;
height: 2px;
background: linear-gradient(90deg, var(--accent-color), #06b6d4);
margin: 1.5rem auto;
}
.greeting { .greeting {
font-size: 1.05rem; font-size: 1rem;
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 2rem; margin-bottom: 1.5rem;
min-height: 24px;
font-style: italic; font-style: italic;
} }
p.description { p.description {
color: var(--text-muted); color: var(--text-muted);
font-size: 1.15rem; font-size: 1.1rem;
line-height: 1.75; line-height: 1.8;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
font-weight: 300; font-weight: 300;
} }
/* Skills Grid */
.skills-title {
font-size: 0.9rem;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.15em;
margin-bottom: 1.2rem;
font-weight: 600;
}
.skills-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 3rem;
}
.skill-card {
background: rgba(255, 255, 255, 0.015);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.skill-card:hover {
background: var(--panel-hover);
border-color: rgba(6, 182, 212, 0.3);
transform: translateY(-4px);
}
.skill-card h3 {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.skill-card p {
font-size: 0.8rem;
color: var(--text-muted);
}
/* Actions / Button */ /* Actions / Button */
.btn { .btn {
display: inline-flex; display: inline-flex;
@@ -194,7 +173,7 @@
background: linear-gradient(135deg, var(--accent-color) 0%, #4f46e5 100%); background: linear-gradient(135deg, var(--accent-color) 0%, #4f46e5 100%);
color: white; color: white;
text-decoration: none; text-decoration: none;
padding: 1rem 2.25rem; padding: 0.9rem 2.25rem;
border-radius: 99px; border-radius: 99px;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
@@ -210,15 +189,15 @@
filter: brightness(1.1); filter: brightness(1.1);
} }
.btn:active { .btn svg {
transform: translateY(0); margin-right: 8px;
} }
/* Footer */ /* Footer */
footer { footer {
margin-top: 3rem; margin-top: 3rem;
font-size: 0.8rem; font-size: 0.8rem;
color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.15);
z-index: 10; z-index: 10;
} }
@@ -227,9 +206,6 @@
padding: 3rem 1.5rem; padding: 3rem 1.5rem;
} }
h1 { font-size: 2.25rem; } h1 { font-size: 2.25rem; }
.skills-grid {
grid-template-columns: 1fr;
}
} }
</style> </style>
</head> </head>
@@ -238,37 +214,34 @@
<div class="ambient-glow-2"></div> <div class="ambient-glow-2"></div>
<div class="container"> <div class="container">
<span class="badge">Online</span> <div class="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
</svg>
</div>
<h1>Robert Müller</h1> <h1>Robert Müller</h1>
<div class="subtitle">Software Engineer & Architect</div> <div class="subtitle">Webseite im Aufbau</div>
<div class="divider"></div>
<div class="greeting" id="greeting-box">...</div> <div class="greeting" id="greeting-box">...</div>
<p class="description"> <p class="description">
Specializing in building robust, high-performance distributed systems, container orchestration, and security-hardened self-hosted platforms. Committed to craftsmanship, optimization, and clean architectures. Herzlich willkommen! Meine neue Internetpräsenz befindet sich aktuell im Aufbau. Bitte schauen Sie zu einem späteren Zeitpunkt noch einmal vorbei. Bei Fragen oder Mitteilungen können Sie mich gerne per E-Mail kontaktieren.
</p> </p>
<div class="skills-title">Core Competencies</div> <a href="mailto:mail@robert-mueller.net" class="btn" id="contact-button">
<div class="skills-grid"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<div class="skill-card"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<h3>DevOps</h3> <polyline points="22,6 12,13 2,6"></polyline>
<p>Docker & Compose</p> </svg>
</div> Kontakt aufnehmen
<div class="skill-card"> </a>
<h3>Backend</h3>
<p>PostgreSQL & Node.js</p>
</div>
<div class="skill-card">
<h3>SysOps</h3>
<p>Nginx & Linux OS</p>
</div>
</div>
<a href="mailto:mail@robert-mueller.net" class="btn" id="contact-button">Get In Touch</a>
</div> </div>
<footer> <footer>
&copy; 2026 Robert Müller. All rights reserved. &copy; 2026 Robert Müller. Alle Rechte vorbehalten.
</footer> </footer>
<script src="js/utils.js"></script> <script src="js/utils.js"></script>
@@ -285,7 +258,7 @@
if (typeof formatGreeting === 'function') { if (typeof formatGreeting === 'function') {
greetingBox.textContent = formatGreeting(timeOfDay, 'Robert Müller'); greetingBox.textContent = formatGreeting(timeOfDay, 'Robert Müller');
} else { } else {
greetingBox.textContent = `Welcome to Robert Müller's portfolio!`; greetingBox.textContent = `Herzlich willkommen!`;
} }
}); });
</script> </script>
public/js/utils.js
+7 -1
View File
@@ -4,7 +4,13 @@ function validateEmail(email) {
} }
function formatGreeting(timeOfDay, name) { function formatGreeting(timeOfDay, name) {
return `Good ${timeOfDay}, welcome to ${name}'s portfolio!`; const greetings = {
morning: 'Guten Morgen',
afternoon: 'Guten Tag',
evening: 'Guten Abend'
};
const greeting = greetings[timeOfDay] || 'Herzlich willkommen';
return `${greeting}, herzlich willkommen auf der Webseite von ${name}!`;
} }
if (typeof module !== 'undefined' && module.exports) { if (typeof module !== 'undefined' && module.exports) {
tests/unit.test.js
+1 -1
View File
@@ -11,6 +11,6 @@ test('Unit Tests: validateEmail', (t) => {
test('Unit Tests: formatGreeting', (t) => { test('Unit Tests: formatGreeting', (t) => {
assert.strictEqual( assert.strictEqual(
formatGreeting('evening', 'Robert Müller'), formatGreeting('evening', 'Robert Müller'),
"Good evening, welcome to Robert Müller's portfolio!" "Guten Abend, herzlich willkommen auf der Webseite von Robert Müller!"
); );
}); });