47 lines
2.1 KiB
Plaintext
47 lines
2.1 KiB
Plaintext
---
|
|
import Social from "../ui/Social.astro";
|
|
import { Icon } from "astro-icon/components";
|
|
|
|
const name = "EFEELE";
|
|
const email = "hello@efeele.dev";
|
|
const github = "https://github.com/EFEELE";
|
|
const linkedin = "https://www.linkedin.com/in/efeele/";
|
|
const instagram = "https://www.instagram.com/efeele.dev/";
|
|
const youtube = "https://www.youtube.com/@efeeledev";
|
|
---
|
|
|
|
<footer
|
|
class="relative bottom-0 w-full px-4 py-8 font-medium text-blacktext dark:bg-transparent dark:border-b-2 dark:border-zinc-800 dark:text-zinc-300 max-lg:mt-3"
|
|
role="contentinfo"
|
|
aria-label="Site footer"
|
|
>
|
|
<nav
|
|
class="mx-auto flex max-w-7xl flex-row items-center justify-between gap-4 text-xl max-xl:px-6 max-sm:flex-col"
|
|
aria-label="Footer navigation"
|
|
>
|
|
<div
|
|
class="relative h-6 cursor-pointer before:absolute before:left-1/2 before:top-1/2 before:h-full before:w-[40%] before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-[#50fd8f25] before:blur-3xl before:opacity-80 before:-z-1 hover:text-mint-500 transition-all [text-shadow:_0_1px_2px_#000]"
|
|
>
|
|
<a href="/" aria-label="Return to homepage">
|
|
<!-- This icon represents the logo -->
|
|
<Icon name="logo" aria-hidden="true" />
|
|
</a>
|
|
</div>
|
|
<div class="text-center">
|
|
<a
|
|
href="https://github.com/EFEELE"
|
|
class="flex items-center justify-center gap-3 text-base font-normal italic max-sm:text-sm"
|
|
aria-label="About the website development"
|
|
><Icon name="code" aria-hidden="true" /> Developed by <strong>EFEELE</strong>, with Astro</a
|
|
>
|
|
</div>
|
|
<div class="flex items-center justify-center gap-5" role="list" aria-label="Social media links">
|
|
<Social link={email} iconName="envelope" label={`Send email to ${email}`} />
|
|
<Social link={instagram} iconName="instagram" label={`Visit ${name} on Instagram`} />
|
|
<Social link={youtube} iconName="youtube" label={`Visit ${name} on YouTube`} />
|
|
<Social link={github} iconName="github" label={`Visit ${name} on GitHub`} />
|
|
<Social link={linkedin} iconName="linkedin" label={`Visit ${name} on LinkedIn`} />
|
|
</div>
|
|
</nav>
|
|
</footer>
|