81 lines
3.2 KiB
TypeScript
81 lines
3.2 KiB
TypeScript
import { Mail, Github, Twitter, Linkedin } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
const socialLinks = [
|
|
{ icon: Github, label: "GitHub", href: "https://github.com/JulianRadix" },
|
|
{ icon: Twitter, label: "Twitter", href: "https://cdn.prod.website-files.com/65ba70a5bb6f912baf0094a3/692588c50754ada9941bfd11_glenncatteeuw.com_404(1440).webp" },
|
|
{ icon: Linkedin, label: "LinkedIn", href: "https://linkedin.com/in/JulianRadix" },
|
|
]
|
|
|
|
export function Contact() {
|
|
return (
|
|
<section id="contact" className="py-24 border-t border-border">
|
|
<div className="max-w-4xl mx-auto px-6">
|
|
<div className="grid md:grid-cols-[200px_1fr] gap-8 md:gap-12">
|
|
{/* Section label */}
|
|
<div>
|
|
<h2 className="font-mono text-sm text-muted-foreground uppercase tracking-wider">Contact</h2>
|
|
<div className="mt-2 w-12 h-px bg-primary" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="space-y-8">
|
|
<div className="space-y-4">
|
|
<p className="text-lg text-foreground">
|
|
Want to discuss a project, ask a technical question, or just say hello?
|
|
</p>
|
|
<p className="text-muted-foreground">
|
|
I'm always open to interesting conversations about backend systems, infrastructure, or building
|
|
developer tools.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Email */}
|
|
<div className="space-y-3">
|
|
<h3 className="font-mono text-xs text-muted-foreground uppercase tracking-wider">Email</h3>
|
|
<div className="flex items-center gap-3">
|
|
<Mail size={16} className="text-primary" />
|
|
<a
|
|
href="mailto:hello@atticl.com"
|
|
className="font-mono text-foreground hover:text-primary transition-colors"
|
|
>
|
|
hello@atticl.com
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Social links */}
|
|
<div className="space-y-3">
|
|
<h3 className="font-mono text-xs text-muted-foreground uppercase tracking-wider">Elsewhere</h3>
|
|
<div className="flex flex-wrap gap-4">
|
|
{socialLinks.map((link) => (
|
|
<Link
|
|
key={link.label}
|
|
href={link.href}
|
|
target="_blank"
|
|
className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<link.icon size={18} />
|
|
<span className="text-sm">{link.label}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Terminal-style response time */}
|
|
<div className="bg-card border border-border rounded-lg p-4 font-mono text-sm">
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<span className="text-primary">$</span>
|
|
<span>response_time</span>
|
|
</div>
|
|
<div className="mt-2 text-muted-foreground">
|
|
<span className="text-terminal">{">"} Usually within 24-48 hours</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|