robre/portfolio-selfmade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update personal information and localization in various components
Deploy Portfolio Selfmade / deploy (push) Failing after 15s
Details

Browse Source
This commit is contained in:
robgit21
2026-05-10 14:52:21 +02:00
parent 4ff07915b8
commit 430e02c8ce
14 changed files with 337 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/features/projects/components/ProjectCard.tsx
+21 -19
View File
@@ -12,58 +12,58 @@ interface ProjectCardProps {
export const ProjectCard: React.FC<ProjectCardProps> = ({ project, index }) => {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
layout
initial={{ opacity: 0, y: 22 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: index * 0.1 }}
whileHover={{ y: -10 }}
className="group rounded-xl overflow-hidden border border-green-500/30 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm hover:border-green-500/60 transition-all duration-300"
transition={{ duration: 0.45, delay: index * 0.08, ease: 'easeOut' }}
whileHover={{ y: -8, scale: 1.01 }}
className="group rounded-3xl overflow-hidden border border-green-500/25 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm hover:border-green-500/55 transition-all duration-300 shadow-[0_20px_60px_-40px_rgba(34,197,94,0.8)]"
>
{/* Image */}
<div className="relative h-64 overflow-hidden bg-gradient-to-br from-gray-900 to-black">
<img
src={project.image}
alt={project.title}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-out"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div className="absolute inset-0 bg-gradient-to-t from-black/85 to-transparent"></div>
</div>
{/* Content */}
<div className="p-6">
{/* Category Badge */}
<div className="inline-block mb-4 px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50">
<div className="inline-flex items-center gap-2 mb-4 px-3 py-1 rounded-full bg-green-500/15 border border-green-500/25">
<span className="text-green-400 text-xs font-semibold">{project.category}</span>
</div>
<h3 className="text-xl font-bold text-white mb-2">{project.title}</h3>
<p className="text-gray-400 text-sm mb-4 line-clamp-2">{project.description}</p>
<h3 className="text-2xl font-bold text-white mb-3">{project.title}</h3>
<p className="text-gray-400 text-sm mb-5 line-clamp-3">{project.description}</p>
{/* Tags */}
<div className="flex flex-wrap gap-2 mb-6">
{project.tags.slice(0, 3).map((tag) => (
<span
key={tag}
className="text-xs px-2 py-1 rounded border border-green-500/30 text-green-400"
className="text-xs px-2 py-1 rounded-full border border-green-500/25 text-green-300 bg-white/5"
>
{tag}
</span>
))}
{project.tags.length > 3 && (
<span className="text-xs px-2 py-1 text-gray-500">
<span className="text-xs px-2 py-1 rounded-full text-gray-400 bg-gray-900/40">
+{project.tags.length - 3}
</span>
)}
</div>
{/* Links */}
<div className="flex gap-3">
<div className="flex flex-wrap gap-3">
{project.link && (
<motion.a
href={project.link}
whileHover={{ scale: 1.1 }}
target="_blank"
rel="noreferrer"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-green-500/20 hover:bg-green-500/30 text-green-400 transition-colors text-sm font-medium"
className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-green-500/20 hover:bg-green-500/30 text-green-300 transition-colors text-sm font-medium"
>
<ExternalLink size={16} />
Live
@@ -72,9 +72,11 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({ project, index }) => {
{project.github && (
<motion.a
href={project.github}
whileHover={{ scale: 1.1 }}
target="_blank"
rel="noreferrer"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="flex items-center gap-2 px-4 py-2 rounded-lg border border-green-500/30 hover:border-green-500/60 text-gray-300 hover:text-white transition-colors text-sm font-medium"
className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-green-500/25 hover:border-green-500/50 text-gray-300 hover:text-white transition-colors text-sm font-medium"
>
<FaGithub size={16} />
Code
apps/web/src/features/projects/components/ProjectsSection.tsx
+6 -6
View File
@@ -5,12 +5,12 @@ import { ProjectCard } from './ProjectCard';
import AnimatedSection from '../../../shared/components/AnimatedSection';
import type { Project } from '../../../shared/types';
type Category = 'All' | 'Web Apps' | 'UI Components' | 'Full Stack';
type Category = 'Alle' | 'Webanwendungen' | 'UI-Komponenten' | 'Fullstack';
export const ProjectsSection: React.FC = () => {
const [selectedCategory, setSelectedCategory] = useState<Category>('All');
const [selectedCategory, setSelectedCategory] = useState<Category>('Alle');
const categories: Category[] = ['All', 'Web Apps', 'UI Components', 'Full Stack'];
const categories: Category[] = ['Alle', 'Webanwendungen', 'UI-Komponenten', 'Fullstack'];
const filteredProjects = projectsData.filter(
(project: Project) =>
@@ -29,14 +29,14 @@ export const ProjectsSection: React.FC = () => {
transition={{ duration: 0.5 }}
className="inline-block px-4 py-2 rounded-full border border-green-500/50 bg-green-500/10 mb-6"
>
<span className="text-green-400 text-sm font-medium">My Work</span>
<span className="text-green-400 text-sm font-medium">Meine Projekte</span>
</motion.div>
<h2 className="text-4xl sm:text-5xl font-bold text-white mb-4">
Featured Projects
Ausgewählte Projekte
</h2>
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
Showcasing my best work and achievements
Eine Auswahl meiner besten Lösungen und Erfolge
</p>
</div>