denshooter
976a6360fd
- Neue About/Skills-Sektion hinzugefügt - Verbesserte UI/UX für alle Komponenten - Enhanced Contact Form mit Validierung - Verbesserte Security Headers und Middleware - Sichere Deployment-Skripte (safe-deploy.sh) - Zero-Downtime Deployment Support - Verbesserte Docker-Sicherheit - Umfassende Sicherheits-Dokumentation - Performance-Optimierungen - Accessibility-Verbesserungen
204 lines
8.1 KiB
TypeScript
204 lines
8.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { ExternalLink, Github, Calendar } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
interface Project {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
content: string;
|
|
tags: string[];
|
|
featured: boolean;
|
|
category: string;
|
|
date: string;
|
|
github?: string;
|
|
live?: string;
|
|
}
|
|
|
|
const Projects = () => {
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
|
|
// Load projects from API
|
|
useEffect(() => {
|
|
const loadProjects = async () => {
|
|
try {
|
|
const response = await fetch('/api/projects?featured=true&published=true&limit=6');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setProjects(data.projects || []);
|
|
} else {
|
|
console.error('Failed to fetch projects from API');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading projects:', error);
|
|
}
|
|
};
|
|
|
|
loadProjects();
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<section id="projects" className="py-20 px-4 relative">
|
|
<div className="max-w-7xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
|
|
Featured Projects
|
|
</h2>
|
|
<p className="text-xl text-gray-400 max-w-2xl mx-auto">
|
|
Here are some of my recent projects that showcase my skills and passion for creating innovative solutions.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{projects.map((project, index) => (
|
|
<motion.div
|
|
key={project.id}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
|
whileHover={{ y: -12, scale: 1.02 }}
|
|
className={`group relative overflow-hidden rounded-2xl glass-card card-hover border border-gray-800/50 hover:border-gray-700/50 transition-all ${
|
|
project.featured ? 'ring-2 ring-blue-500/30 shadow-lg shadow-blue-500/10' : ''
|
|
}`}
|
|
>
|
|
<div className="relative h-48 overflow-hidden bg-gradient-to-br from-gray-900 to-gray-800">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10" />
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center p-4">
|
|
<motion.div
|
|
whileHover={{ scale: 1.1, rotate: 5 }}
|
|
className="w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mb-3 shadow-lg"
|
|
>
|
|
<span className="text-2xl font-bold text-white">
|
|
{project.title.split(' ').map(word => word[0]).join('').toUpperCase().slice(0, 2)}
|
|
</span>
|
|
</motion.div>
|
|
<span className="text-sm font-semibold text-gray-300 text-center leading-tight px-2">
|
|
{project.title}
|
|
</span>
|
|
</div>
|
|
|
|
{project.featured && (
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
className="absolute top-4 right-4 px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-xs font-semibold rounded-full shadow-lg"
|
|
>
|
|
⭐ Featured
|
|
</motion.div>
|
|
)}
|
|
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-4 space-x-3">
|
|
{project.github && project.github.trim() !== '' && project.github !== '#' && (
|
|
<motion.a
|
|
href={project.github}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
whileHover={{ scale: 1.15, y: -2 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="p-3 bg-gray-800/90 backdrop-blur-sm rounded-xl text-white hover:bg-gray-700/90 transition-all shadow-lg border border-gray-700/50"
|
|
aria-label="View on GitHub"
|
|
>
|
|
<Github size={20} />
|
|
</motion.a>
|
|
)}
|
|
{project.live && project.live.trim() !== '' && project.live !== '#' && (
|
|
<motion.a
|
|
href={project.live}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
whileHover={{ scale: 1.15, y: -2 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="p-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl text-white hover:from-blue-500 hover:to-purple-500 transition-all shadow-lg"
|
|
aria-label="View live site"
|
|
>
|
|
<ExternalLink size={20} />
|
|
</motion.a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<h3 className="text-xl font-bold text-white group-hover:text-blue-400 transition-colors flex-1 pr-2">
|
|
{project.title}
|
|
</h3>
|
|
<div className="flex items-center space-x-1.5 text-gray-400 flex-shrink-0">
|
|
<Calendar size={14} />
|
|
<span className="text-xs">{new Date(project.date).getFullYear()}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-gray-300 mb-4 leading-relaxed line-clamp-3">
|
|
{project.description}
|
|
</p>
|
|
|
|
<div className="flex flex-wrap gap-2 mb-5">
|
|
{project.tags.slice(0, 4).map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="px-3 py-1 bg-gray-800/60 backdrop-blur-sm text-gray-300 text-xs rounded-lg border border-gray-700/50 hover:border-gray-600 transition-colors"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
{project.tags.length > 4 && (
|
|
<span className="px-3 py-1 bg-gray-800/60 backdrop-blur-sm text-gray-400 text-xs rounded-lg border border-gray-700/50">
|
|
+{project.tags.length - 4}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<Link
|
|
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
|
|
className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-all font-semibold group/link"
|
|
>
|
|
<span>View Details</span>
|
|
<ExternalLink size={16} className="group-hover/link:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="text-center mt-12"
|
|
>
|
|
<Link
|
|
href="/projects"
|
|
className="btn-primary px-8 py-4 text-lg font-semibold inline-flex items-center space-x-2"
|
|
>
|
|
<span>View All Projects</span>
|
|
<ExternalLink size={20} />
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Projects;
|