diff --git a/src/pages/index.astro b/src/pages/index.astro index 12c78c1..d5b0159 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,6 +5,13 @@ import Greeting from "../components/Greeting"; import Social from "../components/Social.astro"; import BaseLayout from "../layouts/BaseLayout.astro"; const pageTitle = "Aria"; + +const currentDate = new Date(); +const ariaBirthDate = new Date("2002-05-07"); + +const seconds = (currentDate.getTime() - ariaBirthDate.getTime()) / 1000; + +const age = seconds/31556952; --- @@ -12,7 +19,7 @@ const pageTitle = "Aria";

Welcome!~

- I'm Aria, a 22 year old software developer and electronics + I'm Aria, a {Math.floor(age)}{age.toFixed(8)} years to be exact! year old software developer and electronics repair tech out of rural Australia Socials: + + + + diff --git a/src/styles/aria.css b/src/styles/aria.css index fb3af55..4f8a806 100644 --- a/src/styles/aria.css +++ b/src/styles/aria.css @@ -12,8 +12,8 @@ /* ,url("/static/fonts/comic shanns.otf") format("opentype"), url("/static/fonts/comic shanns 2.ttf") format("truetype"); */ - font-display: swap; - } + font-display: swap; +} @font-face { font-family: "Comic Mono"; @@ -72,7 +72,7 @@ a { } a:hover { - text-decoration-color: #F5A8B7; + text-decoration-color: #f5a8b7; transition: text-decoration-color 0.25s; } @@ -132,3 +132,34 @@ a:hover { height: 1em; vertical-align: -0.125em; } + +.tooltip { + position: relative; + display: inline-block; + text-decoration: underline 2px; + text-underline-offset: 2px; + text-decoration-color: #fff; +} + +.tooltip:hover { + text-decoration-color: #f5a8b7; + transition: text-decoration-color 0.25s; +} + +.tooltip .tooltiptext { + visibility: hidden; + width: auto; + background-color: black; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 0; + + /* Position the tooltip */ + position: absolute; + z-index: 1; +} + +.tooltip:hover .tooltiptext { + visibility: visible; +}