-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
104 lines (104 loc) · 7.2 KB
/
index.html
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
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
<title>Michele Giorgi</title>
<meta name="description" content="34 years old Frontend developer — Live in Italy — Make websites since 2000 — Work at Moze where we create awesome digital products — Build Formality for fun (and because I hate the gym).">
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
<link rel="manifest" href="assets/site.webmanifest">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta property="og:url" content="https://giorgi.io">
<meta property="og:title" content="Michele Giorgi">
<meta property="og:site_name" content="Michele Giorgi">
<meta property="og:image" content="assets/share.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:site" content="@michelegiorgi">
<meta name="twitter:creator" content="@michelegiorgi">
<meta name="theme-color" content="#FFFFFF">
<style>
html { font-size: 22px; }
body { padding: 2.4rem; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; display: flex; justify-content: space-between; align-items: flex-start; }
main { display: flex; align-items: flex-start; max-width: 54.5rem; }
img { width: 12rem; height: auto; border-radius: 50%; flex-shrink: 0; margin-right: 2.8rem; }
h1 { margin: 0 0 0.75rem; font-size: 1rem; }
h2 { margin: 0 0 1rem; font-weight: bold; font-size: 2.4rem; line-height: 1.25; }
svg { display: inline-block; width: 1.5rem; vertical-align: middle; flex-shrink: 0; cursor: pointer; opacity: 0.3; user-select: none; }
svg:hover { opacity: 1 }
svg use { display: none; }
svg use:first-child { display: block; }
h2 svg { margin: -0.6em -0.075em 0 0.025em; }
body > svg:first-child { display: none; }
ul { list-style: none; opacity: 0.5; margin: 0; padding: 0; }
a { color: inherit }
p { line-height: 1.7; margin: 0 0 1rem; }
sup { font-size: 0.6em; opacity: 0.6; display: inline-block; padding-left: 0.3em; }
small { opacity: 0.5; display: block; line-height: 1.7; }
.dark { background: #222; color: #fff; fill: #fff; }
.dark #toggle-dark use:first-child { display: none; }
.dark #toggle-dark use:last-child { display: block; }
@media(max-width: 1920px) { html { font-size: 21px } }
@media(max-width: 1680px) { html { font-size: 20px } }
@media(max-width: 1280px) { html { font-size: 19px } }
@media(max-width: 1024px) { html { font-size: 17px } body { padding: 2rem } img { width: 10rem } body > svg { margin-left: -0.5rem; } }
@media(max-width: 768px) { main { flex-direction: column } h1 { font-size: 1.2rem; margin-bottom: 0.5rem; } img { margin-bottom: 1.5rem } body > svg { margin-left: -1.5rem; } }
@media(max-width: 480px) { html { font-size: 16px } body { padding: 1.5rem } img { width: 8rem } h2 { font-size: 2.2rem } }
@media(max-width: 400px) { body { padding: 1.4rem } }
</style>
</head>
<body>
<svg>
<symbol id="play" viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
</symbol>
<symbol id="light" viewBox="0 0 24 24">
<path d="M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0 c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2 c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1 C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06 c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41 l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41 c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36 c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/>
</symbol>
<symbol id="dark" viewBox="0 0 24 24">
<path d="M9 2c-1.05 0-2.05.16-3 .46 4.06 1.27 7 5.06 7 9.54 0 4.48-2.94 8.27-7 9.54.95.3 1.95.46 3 .46 5.52 0 10-4.48 10-10S14.52 2 9 2z"/>
</symbol>
</svg>
<main>
<img src="assets/avatar.jpg" width="300" height="300" alt="avatar">
<section>
<h1>Michele Giorgi</h1>
<h2>I tell people I'm a frontend dev, and they believe me<svg viewBox="0 0 24 24"><use xlink:href="#play"/></svg>. These days, some also add the senior prefix, but I think it's because of the little hair left in my head<svg viewBox="0 0 24 24"><use xlink:href="#play"/></svg>.</h2>
<p>34 years old — Live in Italy — Make websites since 2000 — Work at <a rel="noopener noreferrer" target="_blank" href="https://mozestudio.com">Moze</a> where we create awesome digital products — Build <a rel="noopener" target="_blank" href="https://84-24.org">84—24</a><sup>2024</sup>, <a rel="noopener" target="_blank" href="https://formality.dev">Formality</a><sup>2020</sup> and <a rel="noopener" target="_blank" href="https://sheeprush.com">Sheep Rush</a><sup>2013</sup> for fun (and because I hate the gym).</p>
<small>Write me an email at hi-at-this-domain - <a rel="noopener noreferrer" target="_blank" href="https://github.com/michelegiorgi/giorgi">Fork this page</a> on Github</small>
<small>CC0 <a rel="noopener noreferrer" target="_blank" href="https://freesound.org/s/431811/">Ba dum tss</a> by DJczyszy</small>
</section>
</main>
<svg viewBox="0 0 24 24" id="toggle-dark">
<use xlink:href="#dark"/>
<use xlink:href="#light"/>
</svg>
<script>
//play audio buttons
const audio = new Audio('assets/badumtss.mp3')
audio.addEventListener('ended', () => {
audio.currentTime = 0
})
const buttons = document.querySelectorAll('h2 svg')
buttons.forEach((el, i) => {
el.addEventListener('click', () => {
audio.currentTime = 0
audio.play()
})
})
//toggle dark mode
let toggleDarkMode = () => {
const themeColor = document.querySelector('meta[name="theme-color"]')
const isDark = document.body.classList.toggle('dark')
themeColor.setAttribute('content', isDark ? '#222222' : '#FFFFFF')
}
document.getElementById('toggle-dark').addEventListener('click', toggleDarkMode)
//detect dark mode
if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) toggleDarkMode()
</script>
</body>
</html>