-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
343 lines (295 loc) · 15.7 KB
/
Copy pathindex.html
File metadata and controls
343 lines (295 loc) · 15.7 KB
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MARKUS KETTNER</title>
<!-- Favicons (rendered from the resting MK logo, transparent) -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicon-512.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://kettner.berlin/">
<meta property="og:title" content="MARKUS KETTNER">
<meta property="og:description" content="Markus Kettner">
<meta property="og:image" content="https://kettner.berlin/kettner.berlin_1200x630.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://kettner.berlin/">
<meta name="twitter:title" content="MARKUS KETTNER">
<meta name="twitter:description" content="Markus Kettner">
<meta name="twitter:image" content="https://kettner.berlin/kettner.berlin_1200x630.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
<style>
body {
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
font-family: "Jost", sans-serif;
font-weight: 500;
overflow: hidden;
}
.stage {
/* Responsive font size: min 2rem, preferred 10vw, max 8rem */
font-size: clamp(2rem, 10vw, 8rem);
text-transform: uppercase;
display: flex;
flex-direction: row;
/* Single line on desktop */
align-items: center;
gap: 0.2em;
cursor: pointer;
/* Remove default anchor styling */
text-decoration: none;
color: inherit;
}
.word {
display: flex;
justify-content: center;
gap: 0.03em;
white-space: nowrap;
}
.letter:not(:first-child) {
margin-left: -0.05em;
}
.letter {
display: inline-block;
color: #fff;
transform-style: preserve-3d;
/* Resting state: 45° rotation with shadow */
/* perspective() per letter gives each its own vanishing point */
transform: perspective(400px) rotateY(45deg);
filter: drop-shadow(-0.15em 0.04em 0.12em rgba(0, 0, 0, 1)) brightness(100%);
/* Smooth transition for hover interaction */
transition: transform 2s ease-in-out, filter 2s ease-in-out, color 2s ease-in-out, margin-left 2s ease-in-out;
}
/* Intro state: flat with no shadow */
.letter.starting {
transform: perspective(400px) rotateY(0deg);
filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)) brightness(100%);
}
/* Hover on the stage to affect all letters (desktop) */
.stage:hover .letter:not(:first-child) {
margin-left: -0.05em;
}
.stage:hover .letter {
transform: perspective(400px) rotateY(0deg);
filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)) brightness(100%);
color: #000;
}
/* Active state for touch devices - toggled via JavaScript */
.stage.active .letter:not(:first-child) {
margin-left: -0.05em;
}
.stage.active .letter {
transform: perspective(400px) rotateY(0deg);
filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)) brightness(100%);
color: #000;
}
.social-links {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-top: 2rem;
}
/* When text wraps to two lines: scale font to match icon row width */
@media (max-width: 800px) {
.stage {
flex-direction: column;
gap: 0.1em;
/* Font-size set dynamically by JavaScript based on icon row width */
font-size: var(--mobile-font-size, clamp(2.5rem, 18vw, 5.5rem));
}
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
/* Match .letter styles */
transform-style: preserve-3d;
transform: perspective(400px) rotateY(45deg);
filter: drop-shadow(-0.15em 0.04em 0.12em rgba(0, 0, 0, 1)) brightness(100%);
transition: transform 2s ease-in-out, filter 2s ease-in-out, color 2s ease-in-out;
opacity: 1;
color: #fff;
/* Reset opacity from previous generic style */
}
.social-links a.starting {
transform: perspective(400px) rotateY(0deg);
filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)) brightness(100%);
}
.social-links a:hover {
transform: perspective(400px) rotateY(0deg);
filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)) brightness(100%);
color: #000;
}
.social-links a:hover svg path,
.social-links a:hover svg circle {
fill: #000;
}
.social-links svg,
.social-links img {
width: 48px;
height: 48px;
}
.social-links svg path,
.social-links svg circle {
fill: #fff;
transition: fill 2s ease-in-out;
}
/* Dark mode - inverted colors */
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
}
/* Resting state: white text with black shadow */
.letter {
color: #fff;
filter: drop-shadow(-0.5em 0.04em 0.12em rgba(0, 0, 0, 1)) brightness(100%);
}
/* Intro starting state: black text, no shadow */
.letter.starting {
color: #000;
filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)) brightness(100%);
}
/* Hover state: white text, no shadow (same as resting color) */
.stage:hover .letter,
.stage.active .letter {
filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)) brightness(100%);
color: #fff;
}
/* Resting state: white icons with black shadow */
.social-links svg path {
fill: #fff;
}
.social-links a {
filter: drop-shadow(-0.5em 0.04em 0.12em rgba(0, 0, 0, 1)) brightness(100%);
color: #fff;
}
/* Intro starting state: black icons, no shadow */
.social-links a.starting {
filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)) brightness(100%);
color: #000;
}
.social-links a.starting svg path,
.social-links a.starting svg circle {
fill: #000;
}
/* Hover state: white icons, no shadow (same as resting color) */
.social-links a:hover {
filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)) brightness(100%);
color: #fff;
}
.social-links a:hover svg path,
.social-links a:hover svg circle {
fill: #fff;
}
}
</style>
</head>
<body>
<a id="name-link" class="stage">
<div class="word">
<span class="letter starting">M</span>
<span class="letter starting">A</span>
<span class="letter starting">R</span>
<span class="letter starting">K</span>
<span class="letter starting">U</span>
<span class="letter starting">S</span>
</div>
<div class="word">
<span class="letter starting">K</span>
<span class="letter starting">E</span>
<span class="letter starting">T</span>
<span class="letter starting">T</span>
<span class="letter starting">N</span>
<span class="letter starting">E</span>
<span class="letter starting">R</span>
</div>
</a>
<div class="social-links">
<a href="http://ig.kettner.berlin" target="_blank" aria-label="Instagram" class="starting">
<svg class="social-icon-fill" width="30" height="30" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.25 9C0.25 4.16751 4.16751 0.25 9 0.25H21C25.8325 0.25 29.75 4.16751 29.75 9V21C29.75 25.8325 25.8325 29.75 21 29.75H9C4.16751 29.75 0.25 25.8325 0.25 21V9ZM9 1.75C4.99594 1.75 1.75 4.99594 1.75 9V21C1.75 25.0041 4.99594 28.25 9 28.25H21C25.0041 28.25 28.25 25.0041 28.25 21V9C28.25 4.99594 25.0041 1.75 21 1.75H9ZM24 7.75H22V6.25H24V7.75ZM8.25 15C8.25 11.2721 11.2721 8.25 15 8.25C18.7279 8.25 21.75 11.2721 21.75 15C21.75 18.7279 18.7279 21.75 15 21.75C11.2721 21.75 8.25 18.7279 8.25 15ZM15 9.75C12.1005 9.75 9.75 12.1005 9.75 15C9.75 17.8995 12.1005 20.25 15 20.25C17.8995 20.25 20.25 17.8995 20.25 15C20.25 12.1005 17.8995 9.75 15 9.75Z"
fill="white"></path>
</svg>
</a>
<a href="http://strava.kettner.berlin" target="_blank" aria-label="Strava" class="starting">
<svg class="social-icon-fill" width="30" height="30" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.9051 17.272C12.0415 17.0499 12.2835 16.9146 12.5441 16.9146H15.9593C16.2417 16.9146 16.5002 17.0733 16.6281 17.3251L18.2869 20.5928L19.9406 17.3259C20.0683 17.0736 20.3271 16.9146 20.6098 16.9146H24.0283C24.2889 16.9146 24.5309 17.0499 24.6673 17.2719C24.8038 17.494 24.8152 17.7709 24.6974 18.0035L18.957 29.3389C18.8293 29.591 18.5706 29.75 18.288 29.75C18.0053 29.7501 17.7466 29.5912 17.6189 29.339L11.8751 18.0036C11.7573 17.7711 11.7687 17.4941 11.9051 17.272ZM13.7649 18.4146L18.2877 27.3403L22.8078 18.4146H21.0708L18.957 22.5903C18.8294 22.8424 18.5709 23.0014 18.2883 23.0016C18.0057 23.0018 17.747 22.8431 17.6191 22.5911L15.4989 18.4146H13.7649Z"
fill="white"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.7997 0.25C13.0824 0.249921 13.3411 0.408792 13.4689 0.660937L21.2788 16.0701C21.3966 16.3026 21.3853 16.5797 21.2489 16.8018C21.1124 17.0239 20.8705 17.1592 20.6098 17.1592H15.961C15.6783 17.1592 15.4197 17.0003 15.2919 16.7482L12.8007 11.8315L10.3148 16.7492C10.1872 17.0017 9.92839 17.1609 9.64549 17.1609H5C4.73941 17.1609 4.49751 17.0256 4.36105 16.8036C4.22459 16.5816 4.21315 16.3047 4.33083 16.0722L12.1307 0.661313C12.2584 0.409096 12.517 0.250079 12.7997 0.25ZM12.8004 2.6599L6.22019 15.6609H9.18424L12.1305 9.83228C12.2581 9.57993 12.5168 9.42077 12.7995 9.42063C13.0823 9.4205 13.3411 9.57941 13.4689 9.83164L16.4217 15.6592H19.3888L12.8004 2.6599Z"
fill="white"></path>
</svg>
</a>
<a href="http://in.kettner.berlin" target="_blank" aria-label="LinkedIn" class="starting">
<svg class="social-icon-fill" width="30" height="30" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.25 3C0.25 1.48122 1.48122 0.25 3 0.25H27C28.5188 0.25 29.75 1.48122 29.75 3V27C29.75 28.5188 28.5188 29.75 27 29.75H3C1.48122 29.75 0.25 28.5188 0.25 27V3ZM3 1.75C2.30964 1.75 1.75 2.30964 1.75 3V27C1.75 27.6904 2.30964 28.25 3 28.25H27C27.6904 28.25 28.25 27.6904 28.25 27V3C28.25 2.30964 27.6904 1.75 27 1.75H3ZM10 9.75H8V8.25H10V9.75ZM8.25 22V12H9.75V22H8.25ZM12.25 12H13.75V13.5359C14.5997 12.7384 15.7428 12.25 17 12.25C19.6234 12.25 21.75 14.3766 21.75 17V22H20.25V17C20.25 15.2051 18.7949 13.75 17 13.75C15.2051 13.75 13.75 15.2051 13.75 17V22H12.25V12Z"
fill="white"></path>
</svg>
</a>
<a href="/apps.html" aria-label="Apps" class="starting">
<svg class="social-icon-fill" viewBox="0 0 1820 1607" fill="none"
xmlns="http://www.w3.org/2000/svg" style="width:auto;height:48px">
<path
d="M906.25,144.875l50.625,-87.5c31.25,-54.687 100.938,-73.125 155.625,-41.875c54.688,31.25 73.125,100.938 41.875,155.625l-487.813,844.375l352.813,0c114.375,0 178.438,134.375 128.75,227.5l-1034.38,0c-63.125,0 -113.75,-50.625 -113.75,-113.75c0,-63.125 50.625,-113.75 113.75,-113.75l290,0l371.25,-643.437l-115.938,-201.25c-31.25,-54.688 -12.812,-123.75 41.875,-155.625c54.688,-31.25 123.75,-12.813 155.625,41.875l49.688,87.812Zm-438.75,1215.31l-109.375,189.687c-31.25,54.688 -100.938,73.125 -155.625,41.875c-54.688,-31.25 -73.125,-100.937 -41.875,-155.625l81.25,-140.625c91.875,-28.437 166.563,-6.562 225.625,64.688Zm941.875,-344.063l295.938,0c63.125,0 113.749,50.625 113.749,113.75c0,63.125 -50.625,113.75 -113.749,113.75l-164.375,0l110.937,192.5c31.25,54.688 12.813,123.75 -41.875,155.625c-54.687,31.25 -123.75,12.813 -155.625,-41.875c-186.875,-324.062 -327.187,-566.562 -420.312,-728.125c-95.313,-164.375 -27.188,-329.375 40,-385.312c74.687,128.125 186.249,321.562 335.312,579.687Z"
fill="white" fill-rule="nonzero" />
</svg>
</a>
</div>
<script>
// Use a short timeout to trigger the transition from the 'starting' state
setTimeout(() => {
document.querySelectorAll('.letter, .social-links a').forEach(element => {
element.classList.remove('starting');
});
}, 100);
// Obfuscated email - decoded at runtime to prevent crawler harvesting
(function () {
const encoded = 'bWFya3VzQGtldHRuZXIuYmVybGlu';
const link = document.getElementById('name-link');
link.href = 'mailto:' + atob(encoded);
})();
// Dynamic font scaling: match text width to icon row width
(function () {
const MOBILE_BREAKPOINT = 800;
const LETTERS_IN_LONGEST_WORD = 7; // "KETTNER"
const EM_PER_LETTER = 0.55; // Effective width per letter with current styling
function updateFontSize() {
const stage = document.querySelector('.stage');
const socialLinks = document.querySelector('.social-links');
if (window.innerWidth <= MOBILE_BREAKPOINT) {
// Measure the actual icon row width
const iconRowWidth = socialLinks.getBoundingClientRect().width;
// Calculate font-size: iconRowWidth / (letters * em_per_letter)
const fontSize = iconRowWidth / (LETTERS_IN_LONGEST_WORD * EM_PER_LETTER);
document.documentElement.style.setProperty('--mobile-font-size', fontSize + 'px');
} else {
// Remove the variable when not in mobile view
document.documentElement.style.removeProperty('--mobile-font-size');
}
}
// Run on load and resize
updateFontSize();
window.addEventListener('resize', updateFontSize);
})();
</script>
</body>
</html>