109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
import { ArrowUpRight } from "lucide-react";
|
|
import { useTheme } from "next-themes";
|
|
import BorderGlow from "@/components/BorderGlow";
|
|
import { TextHoverEffect } from "@/components/ui/text-hover-effect";
|
|
|
|
type Project = {
|
|
title: string;
|
|
description: string;
|
|
image: string;
|
|
url: string;
|
|
};
|
|
|
|
const projects: Project[] = [
|
|
{
|
|
title: "Email Sorter",
|
|
description: "Automatisierung · E-Mail-Workflows für Teams",
|
|
image: "/project%20pics/emailsorter.png",
|
|
url: "https://emailsorter.webklar.com/",
|
|
},
|
|
{
|
|
title: "Neutral",
|
|
description: "Website · Markenauftritt & Custom Development",
|
|
image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop",
|
|
url: "#",
|
|
},
|
|
{
|
|
title: "Verbatim Labs",
|
|
description: "Website · UI/UX & individuelle Entwicklung",
|
|
image: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800&h=600&fit=crop",
|
|
url: "#",
|
|
},
|
|
{
|
|
title: "JMK Engineers",
|
|
description: "Website · Technische Präsentation & Lead-Generierung",
|
|
image: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&h=600&fit=crop",
|
|
url: "#",
|
|
},
|
|
{
|
|
title: "GOODZ Club",
|
|
description: "Website · Mehrsprachig & skalierbare Plattform",
|
|
image: "https://images.unsplash.com/photo-1542744094-3a31f272c490?w=800&h=600&fit=crop",
|
|
url: "#",
|
|
},
|
|
];
|
|
|
|
const ProjectShowcase = () => {
|
|
const { resolvedTheme } = useTheme();
|
|
const cardBg = resolvedTheme === "dark" ? "hsl(0 0% 6%)" : "hsl(0 0% 96%)";
|
|
|
|
return (
|
|
<section id="projects" className="pt-8 pb-24 md:pt-12 md:pb-32 bg-background relative">
|
|
{/* TextHoverEffect */}
|
|
<div className="h-[14rem] flex items-center justify-center -mb-4 relative z-10">
|
|
<TextHoverEffect text="Projekte" />
|
|
</div>
|
|
<div className="container mx-auto px-6">
|
|
|
|
{/* Projects Grid */}
|
|
<div className="space-y-2">
|
|
{projects.map((project, index) => (
|
|
<BorderGlow
|
|
key={project.title}
|
|
edgeSensitivity={30}
|
|
glowColor="40 80 80"
|
|
backgroundColor={cardBg}
|
|
borderRadius={8}
|
|
glowRadius={30}
|
|
glowIntensity={0.8}
|
|
coneSpread={25}
|
|
colors={['#c084fc', '#f472b6', '#38bdf8']}
|
|
>
|
|
<a
|
|
href={project.url}
|
|
target={project.url.startsWith("http") ? "_blank" : undefined}
|
|
rel={project.url.startsWith("http") ? "noopener noreferrer" : undefined}
|
|
className="group block p-6 md:p-8"
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
>
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div className="flex-1">
|
|
<h3 className="text-2xl md:text-3xl font-display font-medium text-foreground mb-2 group-hover:text-muted-foreground transition-colors uppercase tracking-tight">
|
|
{project.title}
|
|
</h3>
|
|
<p className="text-muted-foreground text-sm uppercase tracking-wider">
|
|
{project.description}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-24 h-16 md:w-32 md:h-20 rounded overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
|
<img
|
|
src={project.image}
|
|
alt={project.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<ArrowUpRight className="w-6 h-6 text-muted-foreground group-hover:text-foreground transition-colors" />
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</BorderGlow>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ProjectShowcase;
|