1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<!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">Designer of SAME</p>
<a href="mailto:perso@denischevalier.fr" class="contact-btn">Contact Me</a>
<a href="/git" class="contact-btn">Git Repositories</a>
<p>
You won't find any cookie banners or tracking scripts here. This website is light, simple, and fully functional with JavaScript disabled—just clean, private HTML and CSS as the web was intended.
</p>
</main>
</body>
</html>
|
