-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
79 lines (71 loc) · 6.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="An aspiring coder and amateur photographer." />
<title>João Silva</title>
<link rel="stylesheet" href="index.css" />
<script src="index.js"></script>
</head>
<body>
<main>
<div class="layout">
<div class="imageContainer">
<img alt="A photo of myself. The photo is in black and white, and i am taking a photo of myself, using a twin lens camera at waist level, looking towards a mirror. My hair is a bit scruffy." src="public/images/selfie.webp" />
</div>
<div class="textContainer">
<header>
<h1>A software developer</h1>
<h2>in perpetual
<span class="movingContainer">
<!-- Do not break lines to avoid introducing whitespaces -->
<!-- https://www.w3.org/TR/REC-html40/struct/text.html#h-9.1 -->
<span class="moving">m</span><span class="moving">o</span><span class="moving">t</span><span class="moving">i</span><span class="moving">o</span><span class="moving">n</span>
</span>
</h2>
</header>
<section>
<p>A growing coder and amateur photographer.</p>
<p>Currently at <a target="_blank" rel="noopener noreferrer" href="https://uphold.com">Uphold</a>, previously at <a target="_blank" rel="noopener noreferrer" href="https://moxy.studio/">MOXY</a>.</p>
</section>
<nav>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/threequartersjohn">github</a> / <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/joao_silva.90/">photos</a> / <a target="_blank" rel="noopener noreferrer" href="https://glass-train-5c6.notion.site/Jo-o-Silva-927e110fb20c4ee3ace07ec1bb11da78">cv</a> / <a target="_blank" rel="noopener noreferrer" href="mailto:joaorfcsilva@gmail.com">email</a>
</nav>
<footer>
<div class="themeSelectionContainer">
<label id="colorThemeLabel" class="hidden" for="colorTheme">Change the color theme:</label>
<input aria-labelledby="colorThemeLabel" class="themeRange" type="range" id="colorTheme" min="0" max="2" value="0">
<div class="colorThemeOptions">
<span>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="20px" width="20px" xmlns="http://www.w3.org/2000/svg">
<path d="M12.741,20.917a9.389,9.389,0,0,1-1.395-.105,9.141,9.141,0,0,1-1.465-17.7,1.177,1.177,0,0,1,1.21.281,1.273,1.273,0,0,1,.325,1.293,8.112,8.112,0,0,0-.353,2.68,8.266,8.266,0,0,0,4.366,6.857,7.628,7.628,0,0,0,3.711.993,1.242,1.242,0,0,1,.994,1.963h0A9.148,9.148,0,0,1,12.741,20.917ZM10.261,4.05a.211.211,0,0,0-.065.011,8.137,8.137,0,1,0,9.131,12.526h0a.224.224,0,0,0,.013-.235.232.232,0,0,0-.206-.136A8.619,8.619,0,0,1,14.946,15.1a9.274,9.274,0,0,1-4.883-7.7,9.123,9.123,0,0,1,.4-3.008.286.286,0,0,0-.069-.285A.184.184,0,0,0,10.261,4.05Z"></path>
</svg>
</span>
<span>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="20px" width="20px" xmlns="http://www.w3.org/2000/svg">
<path d="M21.917,13.484a4.381,4.381,0,0,0-5.19-4.26,6.281,6.281,0,0,0-11.75,2.19,3.237,3.237,0,0,0-2.66,2,3.433,3.433,0,0,0,.82,3.74c1.12,1.03,2.54.89,3.94.89h10.15a4.514,4.514,0,0,0,4.69-4.32Zm-4.65,3.56c-1.19.01-2.38,0-3.56,0-2.75,0-5.49.06-8.23,0a2.383,2.383,0,0,1-2.33-1.73,2.333,2.333,0,0,1,2.28-2.94.515.515,0,0,0,.5-.5,5.3,5.3,0,0,1,10.11-1.81.5.5,0,0,0,.56.23,3.366,3.366,0,0,1,4.33,3.32A3.489,3.489,0,0,1,17.267,17.044Z"></path>
</svg>
</span>
<span>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="20px" width="20px" xmlns="http://www.w3.org/2000/svg">
<path d="M12,18.09A6.09,6.09,0,1,1,18.09,12,6.1,6.1,0,0,1,12,18.09ZM12,6.91A5.09,5.09,0,1,0,17.09,12,5.1,5.1,0,0,0,12,6.91Z"></path><path d="M11.5,2.568v1.6a.5.5,0,1,0,1,0v-1.6a.5.5,0,1,0-1,0Z"></path><path d="M12.5,21.432v-1.6a.5.5,0,0,0-1,0v1.6a.5.5,0,1,0,1,0Z"></path><path d="M21.432,11.5h-1.6a.5.5,0,0,0,0,1h1.6a.5.5,0,1,0,0-1Z"></path><path d="M2.568,12.5h1.6a.5.5,0,1,0,0-1h-1.6a.5.5,0,1,0,0,1Z"></path><path d="M18.316,4.977l-.992.992-.141.141a.514.514,0,0,0-.146.353.508.508,0,0,0,.146.354.5.5,0,0,0,.354.146.515.515,0,0,0,.353-.146l.992-.992.141-.141a.515.515,0,0,0,.147-.354.508.508,0,0,0-.147-.353.5.5,0,0,0-.353-.147.522.522,0,0,0-.354.147Z"></path><path d="M5.684,19.023l.992-.992.141-.141a.514.514,0,0,0,.146-.353.508.508,0,0,0-.146-.354.5.5,0,0,0-.354-.146.515.515,0,0,0-.353.146l-.992.992-.141.141a.515.515,0,0,0-.147.354.508.508,0,0,0,.147.353.5.5,0,0,0,.353.147.522.522,0,0,0,.354-.147Z"></path><path d="M19.023,18.316l-.992-.992-.141-.141a.514.514,0,0,0-.353-.146.508.508,0,0,0-.354.146.5.5,0,0,0-.146.354.515.515,0,0,0,.146.353l.992.992.141.141a.515.515,0,0,0,.354.147.508.508,0,0,0,.353-.147.5.5,0,0,0,.147-.353.522.522,0,0,0-.147-.354Z"></path><path d="M4.977,5.684l.992.992.141.141a.514.514,0,0,0,.353.146.508.508,0,0,0,.354-.146.5.5,0,0,0,.146-.354.515.515,0,0,0-.146-.353l-.992-.992-.141-.141A.515.515,0,0,0,5.33,4.83a.508.508,0,0,0-.353.147.5.5,0,0,0-.147.353.522.522,0,0,0,.147.354Z"></path>
</svg>
</span>
</div>
</div>
<div class="themeSelectionContainer">
<label id="sizeThemeLabel" class="hidden" for="sizeTheme">Change the font size:</label>
<input aria-labelledby="sizeThemeLabel" class="themeRange" type="range" id="sizeTheme" min="0" max="2" value="0">
<div class="sizeThemeOptions">
<span>A</span>
<span>A</span>
<span>A</span>
</div>
</div>
</footer>
</div>
</div>
</main>
</body>
</html>