142 lines
4.7 KiB
TypeScript
142 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatedSection } from "@/shared/components/animated-section";
|
|
import { SectionHeading } from "@/shared/components/section-heading";
|
|
import {
|
|
Database,
|
|
Server,
|
|
Smartphone,
|
|
Globe,
|
|
Container,
|
|
Shield,
|
|
Cpu,
|
|
Layers,
|
|
GitBranch,
|
|
MonitorSmartphone,
|
|
Cloud,
|
|
Workflow,
|
|
} from "lucide-react";
|
|
|
|
interface TechItem {
|
|
name: string;
|
|
icon: React.ReactNode;
|
|
}
|
|
|
|
interface TechCategory {
|
|
title: string;
|
|
description: string;
|
|
items: TechItem[];
|
|
accent: string;
|
|
}
|
|
|
|
const techCategories: TechCategory[] = [
|
|
{
|
|
title: "Enterprise Backend",
|
|
description: "Core systems & microservices",
|
|
accent: "from-blue-500 to-cyan-500",
|
|
items: [
|
|
{ name: "Java", icon: <Cpu size={22} /> },
|
|
{ name: "Spring Boot", icon: <Layers size={22} /> },
|
|
{ name: "Apache Kafka", icon: <Workflow size={22} /> },
|
|
{ name: "REST API", icon: <Server size={22} /> },
|
|
{ name: "gRPC", icon: <GitBranch size={22} /> },
|
|
{ name: "Spring Security", icon: <Shield size={22} /> },
|
|
],
|
|
},
|
|
{
|
|
title: "Database & Infrastructure",
|
|
description: "Data management & DevOps",
|
|
accent: "from-emerald-500 to-teal-500",
|
|
items: [
|
|
{ name: "PostgreSQL", icon: <Database size={22} /> },
|
|
{ name: "Redis", icon: <Database size={22} /> },
|
|
{ name: "Docker", icon: <Container size={22} /> },
|
|
{ name: "Kubernetes", icon: <Cloud size={22} /> },
|
|
{ name: "Jenkins CI/CD", icon: <GitBranch size={22} /> },
|
|
{ name: "Nginx", icon: <Server size={22} /> },
|
|
],
|
|
},
|
|
{
|
|
title: "Frontend Development",
|
|
description: "Modern web interfaces",
|
|
accent: "from-violet-500 to-purple-500",
|
|
items: [
|
|
{ name: "React / Next.js", icon: <Globe size={22} /> },
|
|
{ name: "TypeScript", icon: <Cpu size={22} /> },
|
|
{ name: "Tailwind CSS", icon: <Layers size={22} /> },
|
|
{ name: "Framer Motion", icon: <Workflow size={22} /> },
|
|
],
|
|
},
|
|
{
|
|
title: "Mobile Development",
|
|
description: "Cross-platform apps",
|
|
accent: "from-orange-500 to-rose-500",
|
|
items: [
|
|
{ name: "React Native", icon: <Smartphone size={22} /> },
|
|
{ name: "Flutter", icon: <MonitorSmartphone size={22} /> },
|
|
],
|
|
},
|
|
];
|
|
|
|
export function TechStackSection() {
|
|
return (
|
|
<section
|
|
id="tech-stack"
|
|
className="section-padding relative bg-muted/30"
|
|
>
|
|
{/* Subtle background */}
|
|
<div className="absolute inset-0 grid-pattern opacity-20" />
|
|
|
|
<div className="relative max-w-6xl mx-auto px-6">
|
|
<AnimatedSection>
|
|
<SectionHeading
|
|
badge="Tech Arsenal"
|
|
title="Technology Stack"
|
|
subtitle="A comprehensive toolkit forged through years of enterprise development, from backend infrastructure to mobile interfaces."
|
|
/>
|
|
</AnimatedSection>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{techCategories.map((category, catIndex) => (
|
|
<AnimatedSection key={category.title} delay={catIndex * 0.1}>
|
|
<div className="group relative h-full p-6 rounded-2xl bg-card border border-border/50 hover:border-accent/30 transition-all duration-500 hover:shadow-lg">
|
|
{/* Category header */}
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div
|
|
className={`w-10 h-10 rounded-xl bg-gradient-to-br ${category.accent} flex items-center justify-center text-white shadow-lg`}
|
|
>
|
|
<Layers size={18} />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-sm">{category.title}</h3>
|
|
<p className="text-xs text-muted-foreground">
|
|
{category.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tech items grid */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
|
{category.items.map((tech) => (
|
|
<div
|
|
key={tech.name}
|
|
className="flex items-center gap-2.5 px-3 py-2.5 rounded-xl bg-muted/50 border border-border/30 hover:border-accent/30 hover:bg-accent/5 transition-all duration-300 group/item"
|
|
>
|
|
<span className="text-muted-foreground group-hover/item:text-accent transition-colors">
|
|
{tech.icon}
|
|
</span>
|
|
<span className="text-xs font-mono font-medium truncate">
|
|
{tech.name}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</AnimatedSection>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|