Add complete bewerbung Next.js application
- Add all Next.js application files - Include components, app structure, and public assets - Remove empty bewerbung placeholder folder - Update .gitignore for Next.js project 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 4.5
@@ -0,0 +1,170 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
interface Skill {
|
||||
name: string;
|
||||
level: number; // 1-5
|
||||
category: string;
|
||||
}
|
||||
|
||||
const skillsData: Skill[] = [
|
||||
// Programmiersprachen
|
||||
{ name: 'PHP & FW Laravel', level: 4, category: 'Programmiersprachen' },
|
||||
{ name: 'Python & Perl', level: 4, category: 'Programmiersprachen' },
|
||||
{ name: 'JavaScript', level: 4, category: 'Programmiersprachen' },
|
||||
{ name: 'Node.js', level: 3, category: 'Programmiersprachen' },
|
||||
{ name: 'Vue.js / Next.js', level: 4, category: 'Programmiersprachen' },
|
||||
{ name: 'HTML', level: 5, category: 'Programmiersprachen' },
|
||||
{ name: 'CSS & Frameworks', level: 5, category: 'Programmiersprachen' },
|
||||
{ name: 'Sass', level: 4, category: 'Programmiersprachen' },
|
||||
|
||||
// Datenbanken
|
||||
{ name: 'SQL (MS/DB2/Oracle)', level: 4, category: 'Datenbanken' },
|
||||
{ name: 'MySQL, MariaDB, Postgres', level: 4, category: 'Datenbanken' },
|
||||
{ name: 'Redis', level: 4, category: 'Datenbanken' },
|
||||
{ name: 'MongoDB', level: 3, category: 'Datenbanken' },
|
||||
{ name: 'CouchDB', level: 3, category: 'Datenbanken' },
|
||||
{ name: 'Firebase', level: 1, category: 'Datenbanken' },
|
||||
|
||||
// DevOps
|
||||
{ name: 'Linux Bash Scripting', level: 4, category: 'DevOps' },
|
||||
{ name: 'Git / SVN', level: 4, category: 'DevOps' },
|
||||
{ name: 'Docker / Kubernetes', level: 3, category: 'DevOps' },
|
||||
{ name: 'AWS', level: 3, category: 'DevOps' },
|
||||
{ name: 'CI/CD Pipelines', level: 4, category: 'DevOps' },
|
||||
{ name: 'Draw.io Architektur', level: 4, category: 'DevOps' },
|
||||
|
||||
// Grafik & Design
|
||||
{ name: 'Adobe Suite (u.a. PS/XD)', level: 4, category: 'Grafik & Design' },
|
||||
{ name: 'Affinity', level: 4, category: 'Grafik & Design' },
|
||||
{ name: 'FinalCut', level: 4, category: 'Grafik & Design' },
|
||||
];
|
||||
|
||||
const categories = [
|
||||
'Programmiersprachen',
|
||||
'Datenbanken',
|
||||
'DevOps',
|
||||
'Grafik & Design',
|
||||
];
|
||||
|
||||
export default function Skills() {
|
||||
const [activeCategory, setActiveCategory] = useState<string>('Programmiersprachen');
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const currentRef = ref.current;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (currentRef) {
|
||||
observer.observe(currentRef);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (currentRef) {
|
||||
observer.unobserve(currentRef);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const filteredSkills = skillsData.filter((skill) => skill.category === activeCategory);
|
||||
|
||||
return (
|
||||
<section
|
||||
id="skills"
|
||||
ref={ref}
|
||||
className={`py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-bg-light to-white transition-opacity duration-1000 ${
|
||||
isVisible ? 'opacity-100' : 'opacity-0'
|
||||
}`}
|
||||
>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-text text-center mb-4 relative inline-block w-full">
|
||||
Technische Fähigkeiten
|
||||
</h2>
|
||||
<p className="text-center text-text-light mb-12 max-w-2xl mx-auto">
|
||||
Umfassende Expertise in modernen Technologien und Frameworks
|
||||
</p>
|
||||
|
||||
{/* Category Tabs */}
|
||||
<div className="flex flex-wrap justify-center gap-3 mb-12">
|
||||
{categories.map((category, index) => (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() => setActiveCategory(category)}
|
||||
className={`px-5 py-3 rounded-lg font-semibold text-sm transition-all duration-300 ${
|
||||
activeCategory === category
|
||||
? 'bg-primary text-white shadow-lg scale-105'
|
||||
: 'bg-white text-text-light hover:bg-gray-100 hover:text-text shadow-md'
|
||||
} ${isVisible ? 'animate-fade-in' : 'opacity-0'}`}
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Skills Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredSkills.map((skill, index) => (
|
||||
<div
|
||||
key={skill.name}
|
||||
className={`bg-white rounded-lg p-6 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 ${
|
||||
isVisible ? 'animate-fade-in' : 'opacity-0'
|
||||
}`}
|
||||
style={{ animationDelay: `${(index + categories.length) * 50}ms` }}
|
||||
>
|
||||
{/* Skill Name */}
|
||||
<h3 className="font-bold text-text mb-3 text-base">{skill.name}</h3>
|
||||
|
||||
{/* Level Bar */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 bg-gray-200 rounded-full h-2.5 overflow-hidden">
|
||||
<div
|
||||
className="bg-gradient-to-r from-primary to-primary-dark h-full rounded-full transition-all duration-1000 ease-out"
|
||||
style={{
|
||||
width: isVisible ? `${(skill.level / 5) * 100}%` : '0%',
|
||||
transitionDelay: `${(index + categories.length) * 50 + 200}ms`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-bold text-primary min-w-[2rem] text-right">
|
||||
{skill.level}/5
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Level Dots */}
|
||||
<div className="flex gap-1 mt-3">
|
||||
{[1, 2, 3, 4, 5].map((dot) => (
|
||||
<div
|
||||
key={dot}
|
||||
className={`w-2 h-2 rounded-full transition-all duration-300 ${
|
||||
dot <= skill.level ? 'bg-primary' : 'bg-gray-300'
|
||||
}`}
|
||||
style={{
|
||||
transitionDelay: `${(index + categories.length) * 50 + dot * 50}ms`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Info Text */}
|
||||
<div className="mt-12 text-center">
|
||||
<p className="text-text-light text-sm">
|
||||
<strong className="text-primary">Bewertungsskala:</strong> 1 = Grundkenntnisse | 5 = Expertenwissen
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user