78 lines
2 KiB
Svelte
78 lines
2 KiB
Svelte
<script lang="ts">
|
|
import Discord from "@inqling/svelte-icons/simple-icons/discord.svelte"
|
|
import GitHub from "@inqling/svelte-icons/simple-icons/github.svelte"
|
|
import Mastodon from "@inqling/svelte-icons/simple-icons/mastodon.svelte"
|
|
import ProtonMail from "@inqling/svelte-icons/simple-icons/protonmail.svelte"
|
|
import { onMount } from "svelte"
|
|
|
|
import HandWave from "$/components/HandWave.svelte"
|
|
import { discordInviteLink } from "$/constants"
|
|
import getAge from "$/utils/getAge"
|
|
|
|
let age = getAge() // run immediately the first time
|
|
|
|
onMount(() => {
|
|
const interval = setInterval(() => {
|
|
age = getAge() // first called after the delay
|
|
}, 100)
|
|
|
|
return () => {
|
|
clearInterval(interval)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<img
|
|
class="mx-auto mb-14 mt-20 aspect-square rounded-full shadow-[0_0_40px_20px] shadow-dark-text-gray"
|
|
src="/favicon.svg"
|
|
alt="logo"
|
|
width="200"
|
|
height="200"
|
|
/>
|
|
|
|
<h1 class="mb-16 px-4 py-2 text-center text-4xl">
|
|
<HandWave />Hello! I am <b>developomp</b>
|
|
</h1>
|
|
|
|
<span>
|
|
I am a <b>{age.toFixed(8)} years old</b> college student studying computer science
|
|
in Seoul, South Korea.
|
|
</span>
|
|
|
|
<h2 class="mt-16 text-xl font-black">Military service</h2>
|
|
October 2023 ~ April 2025
|
|
|
|
<div class="mt-10 flex flex-wrap justify-center">
|
|
<a
|
|
class="social-profile"
|
|
target="_blank"
|
|
href="https://github.com/developomp"
|
|
aria-label="GitHub link"
|
|
>
|
|
<GitHub />
|
|
</a>
|
|
<a
|
|
class="social-profile"
|
|
target="_blank"
|
|
href={discordInviteLink}
|
|
aria-label="Discord link"
|
|
>
|
|
<Discord />
|
|
</a>
|
|
<a
|
|
class="social-profile"
|
|
target="_blank"
|
|
href="https://mastodon.social/@developomp"
|
|
aria-label="Mastodon link"
|
|
>
|
|
<Mastodon />
|
|
</a>
|
|
<a
|
|
class="social-profile"
|
|
target="_blank"
|
|
href="mailto: developomp@protonmail.com"
|
|
aria-label="Email link (ProtonMail)"
|
|
>
|
|
<ProtonMail />
|
|
</a>
|
|
</div>
|