86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
import { FadeIn } from "./fade-in";
|
|
import { CV_DATA } from "@/lib/cv-data";
|
|
|
|
const CONTACT_ITEMS = [
|
|
{
|
|
label: "E-mail",
|
|
value: CV_DATA.contact.email,
|
|
href: `mailto:${CV_DATA.contact.email}`,
|
|
},
|
|
{
|
|
label: "Locatie",
|
|
value: CV_DATA.contact.location,
|
|
href: null,
|
|
},
|
|
{
|
|
label: "Website",
|
|
value: "jp-visser.nl",
|
|
href: "https://jp-visser.nl",
|
|
},
|
|
];
|
|
|
|
export function ContactSection() {
|
|
return (
|
|
<section
|
|
id="contact"
|
|
className="mx-auto max-w-[900px]"
|
|
style={{ padding: "100px clamp(20px, 6vw, 80px) 60px" }}
|
|
>
|
|
<FadeIn>
|
|
<p
|
|
className="text-[13px] font-semibold uppercase mb-3"
|
|
style={{ color: "#c2339b", letterSpacing: 3 }}
|
|
>
|
|
Neem contact op
|
|
</p>
|
|
<h2
|
|
className="font-serif font-normal mb-12"
|
|
style={{
|
|
fontSize: "clamp(32px, 4vw, 48px)",
|
|
color: "#e8e4df",
|
|
letterSpacing: -1,
|
|
}}
|
|
>
|
|
Contact
|
|
</h2>
|
|
</FadeIn>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
|
|
{CONTACT_ITEMS.map((item, i) => (
|
|
<FadeIn key={item.label} delay={i * 0.1}>
|
|
<div
|
|
className="rounded-2xl p-7"
|
|
style={{
|
|
background: "rgba(255,255,255,0.03)",
|
|
border: "1px solid rgba(255,255,255,0.06)",
|
|
}}
|
|
>
|
|
<p
|
|
className="text-[12px] font-semibold uppercase mb-2"
|
|
style={{
|
|
color: "rgba(255,255,255,0.35)",
|
|
letterSpacing: 2,
|
|
}}
|
|
>
|
|
{item.label}
|
|
</p>
|
|
{item.href ? (
|
|
<a
|
|
href={item.href}
|
|
className="text-[15px] no-underline"
|
|
style={{ color: "#c2339b" }}
|
|
>
|
|
{item.value}
|
|
</a>
|
|
) : (
|
|
<p className="text-[15px]" style={{ color: "#e8e4df" }}>
|
|
{item.value}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</FadeIn>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|