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

feat: localize content to German across various components and add profile image

Browse Source
This commit is contained in:
robgit21
2026-05-10 21:18:16 +02:00
parent 430e02c8ce
commit a7e62e84fa
14 changed files with 264 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/features/projects/components/ProjectCard.tsx
+19 -11
View File
@@ -18,35 +18,43 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({ project, index }) => {
viewport={{ once: true }}
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)]"
className="rounded-3xl overflow-hidden border border-green-500/25 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm"
>
{/* Image */}
<div className="relative h-64 overflow-hidden bg-gradient-to-br from-gray-900 to-black">
<img
<motion.img
src={project.image}
alt={project.title}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-out"
className="w-full h-full object-cover"
whileHover={{ scale: 1.1 }}
transition={{ duration: 0.5 }}
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/85 to-transparent"></div>
</div>
{/* Content */}
<div className="p-6">
<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">
<motion.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"
whileHover={{ scale: 1.05 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<span className="text-green-400 text-xs font-semibold">{project.category}</span>
</div>
</motion.div>
<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>
<div className="flex flex-wrap gap-2 mb-6">
{project.tags.slice(0, 3).map((tag) => (
<span
<motion.span
key={tag}
whileHover={{ scale: 1.05, backgroundColor: 'rgba(34,197,94,0.2)' }}
transition={{ type: 'spring', stiffness: 300 }}
className="text-xs px-2 py-1 rounded-full border border-green-500/25 text-green-300 bg-white/5"
>
{tag}
</span>
</motion.span>
))}
{project.tags.length > 3 && (
<span className="text-xs px-2 py-1 rounded-full text-gray-400 bg-gray-900/40">
@@ -61,9 +69,9 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({ project, index }) => {
href={project.link}
target="_blank"
rel="noreferrer"
whileHover={{ scale: 1.05 }}
whileHover={{ scale: 1.05, backgroundColor: 'rgba(34,197,94,0.3)' }}
whileTap={{ scale: 0.95 }}
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"
className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-green-500/20 text-green-300 text-sm font-medium"
>
<ExternalLink size={16} />
Live
@@ -74,9 +82,9 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({ project, index }) => {
href={project.github}
target="_blank"
rel="noreferrer"
whileHover={{ scale: 1.05 }}
whileHover={{ scale: 1.05, borderColor: 'rgba(34,197,94,0.5)', color: '#ffffff' }}
whileTap={{ scale: 0.95 }}
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"
className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-green-500/25 text-gray-300 text-sm font-medium"
>
<FaGithub size={16} />
Code
apps/web/src/features/projects/components/ProjectsSection.tsx
+13 -4
View File
@@ -14,7 +14,7 @@ export const ProjectsSection: React.FC = () => {
const filteredProjects = projectsData.filter(
(project: Project) =>
selectedCategory === 'All' || project.category === selectedCategory
selectedCategory === 'Alle' || project.category === selectedCategory
);
return (
@@ -53,10 +53,19 @@ export const ProjectsSection: React.FC = () => {
onClick={() => setSelectedCategory(category)}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className={`px-6 py-2 rounded-full font-medium transition-all duration-300 ${
animate={{
backgroundColor:
selectedCategory === category ? 'rgba(34,197,94,1)' : 'transparent',
borderColor:
selectedCategory === category
? 'rgba(34,197,94,1)'
: 'rgba(34,197,94,0.3)',
}}
transition={{ duration: 0.2 }}
className={`px-6 py-2 rounded-full font-medium ${
selectedCategory === category
? 'bg-green-500 text-black'
: 'border border-green-500/30 text-gray-300 hover:border-green-500/60'
? 'text-black'
: 'border border-green-500/30 text-gray-300'
}`}
>
{category}