dschlueter/jamulix-homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Initial import: was v0 exportiert hat

Browse source
This commit is contained in:
Dieter Schlüter 2026-04-24 17:12:51 +02:00
commit 0194931215
167 changed files with 16465 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

128
components/footer.tsx Normal file
View file

@ -0,0 +1,128 @@
'use client'
import Link from 'next/link'
import { motion } from 'framer-motion'
import { Github, Mail, ArrowUpRight } from 'lucide-react'
const footerLinks = [
{ label: 'Projekte', href: '#projekte' },
{ label: 'Über', href: '#ueber' },
{ label: 'Fokus', href: '#fokus' },
{ label: 'Philosophie', href: '#philosophie' },
]
const legalLinks = [
{ label: 'Impressum', href: '/impressum' },
{ label: 'Datenschutz', href: '/datenschutz' },
]
const socialLinks = [
{ label: 'GitHub', href: 'https://github.com', icon: Github },
{ label: 'E-Mail', href: 'mailto:kontakt@jamulix.de', icon: Mail },
]
export function Footer() {
const currentYear = new Date().getFullYear()
return (
<footer id="kontakt" className="py-16 lg:py-20 border-t border-border">
<div className="max-w-6xl mx-auto px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
>
{/* Main footer content */}
<div className="grid lg:grid-cols-12 gap-12 lg:gap-8">
{/* Brand section */}
<div className="lg:col-span-5">
<Link
href="/"
className="inline-block font-mono text-xl tracking-tight text-foreground hover:text-accent transition-colors"
>
Jamulix
</Link>
<p className="mt-4 text-muted-foreground max-w-sm leading-relaxed">
40 Jahre Programmierung. Von Fortran bis KI.
Linux-Enthusiast seit 1994. Aktuell Python und Rust.
</p>
{/* Social links */}
<div className="flex gap-4 mt-6">
{socialLinks.map((link) => {
const Icon = link.icon
return (
<Link
key={link.label}
href={link.href}
target={link.href.startsWith('http') ? '_blank' : undefined}
rel={link.href.startsWith('http') ? 'noopener noreferrer' : undefined}
className="group flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
aria-label={link.label}
>
<Icon className="size-5" />
<span className="text-sm">{link.label}</span>
{link.href.startsWith('http') && (
<ArrowUpRight className="size-3 opacity-0 group-hover:opacity-100 transition-opacity" />
)}
</Link>
)
})}
</div>
</div>
{/* Navigation */}
<div className="lg:col-span-3 lg:col-start-7">
<h3 className="font-mono text-sm text-accent mb-4">Navigation</h3>
<ul className="space-y-3">
{footerLinks.map((link) => (
<li key={link.href}>
<Link
href={link.href}
className="text-muted-foreground hover:text-foreground transition-colors"
>
{link.label}
</Link>
</li>
))}
</ul>
</div>
{/* Legal */}
<div className="lg:col-span-3">
<h3 className="font-mono text-sm text-accent mb-4">Rechtliches</h3>
<ul className="space-y-3">
{legalLinks.map((link) => (
<li key={link.href}>
<Link
href={link.href}
className="text-muted-foreground hover:text-foreground transition-colors"
>
{link.label}
</Link>
</li>
))}
<li>
<span className="text-muted-foreground/60 text-sm">
Blog (bald)
</span>
</li>
</ul>
</div>
</div>
{/* Bottom bar */}
<div className="mt-16 pt-8 border-t border-border flex flex-col sm:flex-row justify-between items-center gap-4">
<p className="text-sm text-muted-foreground">
&copy; {currentYear} Jamulix. Alle Rechte vorbehalten.
</p>
<p className="font-mono text-xs text-muted-foreground/60">
Gebaut mit Next.js, Tailwind, und viel Kaffee.
</p>
</div>
</motion.div>
</div>
</footer>
)
}