-
Notifications
You must be signed in to change notification settings - Fork 0
/
page.html
123 lines (102 loc) · 3.23 KB
/
page.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<html><head>
<title>Jordan Rich</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
background-color: #ffffff;
color: #121212;
}
* {
cursor: default;
}
a,
a:visited {
color: blue;
}
a:hover {
color: darkblue;
}
#container {
font-family: "Myriad Pro", "Helvetica Neue", Helvetica;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: .8rem;
margin: 5%;
}
#main {
display: flex;
flex-direction: column;
grid-gap: 1.3rem;
margin-bottom: 1.2rem;
max-width: 60ch;
line-height: 1.2rem;
}
#description {
display: flex;
flex-direction: column;
row-gap: .9rem;
}
#pfp {
width: 64px;
height: 64px;
display: block;
}
#pfp>img {
width: 100%;
}
#links {
margin-top: 1.4rem;
}
#links>*:not(:last-child) {
padding-right: .167rem;
}
#redacted {
background-color: blue;
color: blue;
user-select: none;
}
.fade-1 {
animation-duration: 0.4s;
}
.fade-2 {
animation-duration: 0.7s;
}
.fade-3 {
animation-duration: 0.9s;
}
.fade-4 {
animation-duration: 1.0s;
}
.fade-from-bottom {
animation-name: fade-from-bottom;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}
@keyframes fade-from-bottom {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1
}
}
</style>
</head>
<body>
<div id="container">
<div>
<div id="main">
<div class="fade-from-bottom fade-1">
<a href="/" id="pfp"><img src="/images/me.webp"></a>
</div>
<div>
<div id="description">
<div class="fade-from-bottom fade-2">I currently live in Montréal, Quebec and work on <span id="redacted">redacted</span>. We're <a href="mailto:[email protected]">hiring</a> talented engineers & designers in San Francisco, CA.</div>
<div class="fade-from-bottom fade-3">Previously, I grew up in California and studied at UC Berkeley.</div>
<div class="fade-from-bottom fade-4">You can reach me via <a href="mailto:[email protected]">email</a>, <a href="https://twitter.com/zainamro">twitter</a>, or <a href="https://www.linkedin.com/in/zainamro/">linkedin</a>.</div>
</div>
</div>
</div>
</div>
</div>
</body></html>