76 lines
2.8 KiB
Plaintext
76 lines
2.8 KiB
Plaintext
---
|
|
import FadeIn from "../ui/FadeIn.astro";
|
|
import { FaGithub, FaLinkedin, FaEnvelope } from "react-icons/fa";
|
|
---
|
|
|
|
<footer role="contentinfo" class="mt-20 sm:mt-40 relative">
|
|
<div class="absolute inset-0 theme-bg-gradient opacity-30"></div>
|
|
<div
|
|
class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"
|
|
>
|
|
</div>
|
|
|
|
<div class="max-w-(--breakpoint-xl) mx-auto px-4 sm:px-8 py-20 sm:py-32 relative">
|
|
<div class="grid gap-16 sm:gap-24">
|
|
<FadeIn>
|
|
<div class="text-center space-y-5 sm:space-y-6">
|
|
<h2
|
|
class="font-['DM_Sans'] text-4xl sm:text-6xl font-semibold tracking-tight theme-primary"
|
|
>
|
|
Let's Connect
|
|
</h2>
|
|
<p
|
|
class="font-['Instrument_Sans'] theme-text-70 text-lg sm:text-2xl max-w-2xl mx-auto leading-relaxed"
|
|
>
|
|
Always interested in new opportunities and collaborations.
|
|
</p>
|
|
</div>
|
|
</FadeIn>
|
|
|
|
<FadeIn delay={0.1}>
|
|
<div class="flex flex-col items-center gap-10 sm:gap-14 font-['Instrument_Sans']">
|
|
<a
|
|
href="mailto:jleibl@proton.me"
|
|
class="group flex items-center gap-3 text-xl sm:text-3xl theme-text-90 hover:theme-primary transition-all hover:scale-105 duration-300"
|
|
>
|
|
<span class="p-2 rounded-xl theme-bg-05 border theme-border">
|
|
<FaEnvelope className="w-5 h-5 sm:w-6 sm:h-6" />
|
|
</span>
|
|
jleibl@proton.me
|
|
</a>
|
|
|
|
<div class="flex gap-6 sm:gap-8">
|
|
<a
|
|
href="https://github.com/AtomicWasTaken"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="p-3 sm:p-4 rounded-xl theme-bg-05 border theme-border theme-text-70 hover:theme-text-90 hover:scale-105 transition-all duration-300 shadow-sm"
|
|
aria-label="GitHub Profile"
|
|
>
|
|
<FaGithub className="w-6 h-6 sm:w-7 sm:h-7" />
|
|
</a>
|
|
|
|
<a
|
|
href="https://www.linkedin.com/in/janmarlonleibl/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="p-3 sm:p-4 rounded-xl theme-bg-05 border theme-border theme-text-70 hover:theme-text-90 hover:scale-105 transition-all duration-300 shadow-sm"
|
|
aria-label="LinkedIn Profile"
|
|
>
|
|
<FaLinkedin className="w-6 h-6 sm:w-7 sm:h-7" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</FadeIn>
|
|
|
|
<FadeIn delay={0.2}>
|
|
<div class="pt-8 sm:pt-16 text-center">
|
|
<p class="font-['Instrument_Sans'] theme-text-40 text-xs sm:text-sm tracking-wider">
|
|
© {new Date().getFullYear()} Jan-Marlon Leibl. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
</div>
|
|
</footer>
|