Wowie what a gay little website for my gay little self
aria.coffee
Add auto updating age to website
+61
-4
+27
-1
src/pages/index.astro
+27
-1
src/pages/index.astro
···
5
5
import Social from "../components/Social.astro";
6
6
import BaseLayout from "../layouts/BaseLayout.astro";
7
7
const pageTitle = "Aria";
8
+
9
+
const currentDate = new Date();
10
+
const ariaBirthDate = new Date("2002-05-07");
11
+
12
+
const seconds = (currentDate.getTime() - ariaBirthDate.getTime()) / 1000;
13
+
14
+
const age = seconds/31556952;
8
15
---
9
16
10
17
<BaseLayout pageTitle={pageTitle}>
···
12
19
<main>
13
20
<h1 class="text-4xl">Welcome!~</h1>
14
21
<p>
15
-
I'm Aria, a 22 year old software developer and electronics
22
+
I'm Aria, a <span class="tooltip">{Math.floor(age)}<span class="tooltiptext"><nobr>{age.toFixed(8)} years to be exact!</nobr></span></span> year old software developer and electronics
16
23
repair tech out of rural <span style="color: #D4F7CF;"
17
24
>Australia <span
18
25
class="backdrop-brightness-200 px-1 text-2xl rounded"
···
29
36
<h1>Socials:</h1>
30
37
<Social />
31
38
</Partition>
39
+
<script>
40
+
setInterval(() => {
41
+
const currentDate = new Date();
42
+
const ariaBirthDate = new Date("2002-05-07");
43
+
44
+
const seconds = (currentDate.getTime() - ariaBirthDate.getTime()) / 1000;
45
+
46
+
const age = seconds/31556952;
47
+
48
+
const ageElem = document.querySelector('.tooltip');
49
+
50
+
ageElem!.outerHTML = `<span class="tooltip">${Math.floor(age)}<span class="tooltiptext"><nobr>${age.toFixed(8)} years to be exact!</nobr></span></span>`;
51
+
}, 1000);
52
+
</script>
53
+
54
+
<style is:inline>
55
+
56
+
</style>
32
57
</BaseLayout>
58
+
+34
-3
src/styles/aria.css
+34
-3
src/styles/aria.css
···
12
12
/* ,url("/static/fonts/comic shanns.otf")
13
13
format("opentype"), url("/static/fonts/comic shanns 2.ttf")
14
14
format("truetype"); */
15
-
font-display: swap;
16
-
}
15
+
font-display: swap;
16
+
}
17
17
18
18
@font-face {
19
19
font-family: "Comic Mono";
···
72
72
}
73
73
74
74
a:hover {
75
-
text-decoration-color: #F5A8B7;
75
+
text-decoration-color: #f5a8b7;
76
76
transition: text-decoration-color 0.25s;
77
77
}
78
78
···
132
132
height: 1em;
133
133
vertical-align: -0.125em;
134
134
}
135
+
136
+
.tooltip {
137
+
position: relative;
138
+
display: inline-block;
139
+
text-decoration: underline 2px;
140
+
text-underline-offset: 2px;
141
+
text-decoration-color: #fff;
142
+
}
143
+
144
+
.tooltip:hover {
145
+
text-decoration-color: #f5a8b7;
146
+
transition: text-decoration-color 0.25s;
147
+
}
148
+
149
+
.tooltip .tooltiptext {
150
+
visibility: hidden;
151
+
width: auto;
152
+
background-color: black;
153
+
color: #fff;
154
+
text-align: center;
155
+
border-radius: 6px;
156
+
padding: 5px 0;
157
+
158
+
/* Position the tooltip */
159
+
position: absolute;
160
+
z-index: 1;
161
+
}
162
+
163
+
.tooltip:hover .tooltiptext {
164
+
visibility: visible;
165
+
}