init

2026-03-28 19:48:52 +07:00
parent 0a25960e8f
commit 5b0254d71b
19 changed files with 2016 additions and 1102 deletions
--- a/src/features/skills/tech-stack-section.tsx
+++ b/src/features/skills/tech-stack-section.tsx
@@ -0,0 +1,141 @@
+"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>
+  );
+}