115 lines
4.3 KiB
TypeScript
115 lines
4.3 KiB
TypeScript
import React from 'react';
|
|
import { Briefcase, Code, Database, Palette, Smartphone, Zap } from 'lucide-react';
|
|
|
|
const Skills: React.FC = () => {
|
|
const experience = [
|
|
{
|
|
title: 'Senior Full-Stack Developer',
|
|
company: 'Tech Innovations Inc.',
|
|
period: '2022 - Present',
|
|
description: 'Leading development of scalable web applications using React, Node.js, and cloud technologies.'
|
|
},
|
|
{
|
|
title: 'Frontend Developer',
|
|
company: 'Digital Solutions Ltd.',
|
|
period: '2020 - 2022',
|
|
description: 'Built responsive user interfaces and improved performance for e-commerce platforms.'
|
|
},
|
|
{
|
|
title: 'Junior Developer',
|
|
company: 'StartupXYZ',
|
|
period: '2019 - 2020',
|
|
description: 'Developed mobile applications and contributed to backend API development.'
|
|
}
|
|
];
|
|
|
|
const specificSkills = [
|
|
{ name: 'React', level: 95, icon: Code },
|
|
{ name: 'TypeScript', level: 90, icon: Code },
|
|
{ name: 'Node.js', level: 85, icon: Database },
|
|
{ name: 'Python', level: 80, icon: Code },
|
|
{ name: 'UI/UX Design', level: 75, icon: Palette },
|
|
{ name: 'Mobile Development', level: 70, icon: Smartphone }
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-background-light">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
<h2 className="text-3xl font-bold text-text sm:text-4xl">
|
|
Experience & Skills
|
|
</h2>
|
|
<p className="mt-4 text-lg text-lines max-w-2xl mx-auto">
|
|
A comprehensive overview of my professional journey and technical expertise
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
{/* Experience Section */}
|
|
<div>
|
|
<div className="flex items-center mb-8">
|
|
<div className="p-3 bg-other rounded-lg mr-4">
|
|
<Briefcase className="h-6 w-6 text-background" />
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-text">Experience</h3>
|
|
</div>
|
|
<div className="space-y-6">
|
|
{experience.map((exp, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-background rounded-lg p-6 border border-lines"
|
|
>
|
|
<h4 className="text-lg font-semibold text-text mb-1">
|
|
{exp.title}
|
|
</h4>
|
|
<p className="text-other font-medium mb-2">
|
|
{exp.company} • {exp.period}
|
|
</p>
|
|
<p className="text-lines text-sm">
|
|
{exp.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Specific Skills Section */}
|
|
<div>
|
|
<div className="flex items-center mb-8">
|
|
<div className="p-3 bg-boxes rounded-lg mr-4">
|
|
<Zap className="h-6 w-6 text-text" />
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-text">Specific Skills</h3>
|
|
</div>
|
|
<div className="space-y-6">
|
|
{specificSkills.map((skill, index) => {
|
|
const IconComponent = skill.icon;
|
|
return (
|
|
<div key={skill.name} className="bg-background rounded-lg p-6 shadow-md border border-lines">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center">
|
|
<div className="p-2 bg-boxes rounded-lg mr-3">
|
|
<IconComponent className="h-5 w-5 text-other" />
|
|
</div>
|
|
<span className="font-semibold text-text">{skill.name}</span>
|
|
</div>
|
|
<span className="text-sm font-medium text-lines">{skill.level}%</span>
|
|
</div>
|
|
<div className="w-full bg-background-light rounded-full h-2">
|
|
<div
|
|
className="bg-other h-2 rounded-full transition-all duration-1000 ease-out"
|
|
style={{ width: `${skill.level}%` }}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Skills; |