diff options
| -rw-r--r-- | index.html | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..419e01f --- /dev/null +++ b/index.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Denis Chevalier | Staff Software Engineer</title> + <style> + :root { + --bg-color: #0f172a; /* Dark slate background */ + --text-main: #f8fafc; /* Crisp white text */ + --text-muted: #94a3b8; /* Soft gray for the title */ + --accent: #3b82f6; /* Professional blue */ + --accent-hover: #2563eb; /* Slightly darker blue for hover */ + } + + /* Reset and layout */ + body { + margin: 0; + padding: 0; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--bg-color); + color: var(--text-main); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + text-align: center; + } + + /* Centered card */ + .container { + padding: 4rem 3rem; + background: rgba(255, 255, 255, 0.03); + border-radius: 16px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.05); + max-width: 400px; + width: 90%; + } + + /* Typography */ + h1 { + margin: 0; + font-size: 2.5rem; + font-weight: 700; + letter-spacing: -0.02em; + } + + .title { + margin: 0.75rem 0 2.5rem 0; + font-size: 1.25rem; + color: var(--text-muted); + font-weight: 400; + } + + /* Button styling */ + .contact-btn { + display: inline-block; + padding: 0.875rem 2.5rem; + background-color: var(--accent); + color: #ffffff; + text-decoration: none; + border-radius: 9999px; + font-weight: 600; + font-size: 1rem; + transition: all 0.2s ease; + } + + .contact-btn:hover { + background-color: var(--accent-hover); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); + } + + /* Mobile responsiveness */ + @media (max-width: 480px) { + h1 { + font-size: 2rem; + } + .container { + padding: 3rem 1.5rem; + } + } + </style> +</head> +<body> + + <main class="container"> + <h1>Denis Chevalier</h1> + <p class="title">Staff Software Engineer</p> + <a href="mailto:pro@denischevalier.fr" class="contact-btn">Contact Me</a> + </main> + +</body> +</html> |