init project files

components/sections/TechStack.tsx

@@ -0,0 +1,86 @@
+'use client';
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import * as Si from 'react-icons/si';
+import { techStack } from '@/content/techstack';
+import styles from './TechStack.module.scss';
+
+const categories = ['all', 'language', 'framework', 'tool', 'database'] as const;
+
+export default function TechStack() {
+  const [active, setActive] = useState<string>('all');
+
+  const filtered = active === 'all'
+    ? techStack
+    : techStack.filter(t => t.category === active);
+
+  return (
+    <section className={styles.section} id="tech">
+      <div className={styles.container}>
+        <motion.header
+          className={styles.header}
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-30px' }}
+          transition={{ duration: 0.5 }}
+        >
+          <h2 className={styles.heading}>
+            Technologies<span className={styles.dot}>.</span>
+          </h2>
+          <p className={styles.subtitle}>Languages, frameworks, tools & databases I work with.</p>
+        </motion.header>
+
+        <motion.div
+          className={styles.tabs}
+          role="tablist"
+          initial={{ opacity: 0, y: 12 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.4, delay: 0.08 }}
+        >
+          {categories.map(cat => (
+            <button
+              key={cat}
+              role="tab"
+              aria-selected={active === cat}
+              className={`${styles.tab} ${active === cat ? styles.tabActive : ''}`}
+              onClick={() => setActive(cat)}
+            >
+              {cat.charAt(0).toUpperCase() + cat.slice(1)}
+            </button>
+          ))}
+        </motion.div>
+
+        <motion.div
+          className={styles.grid}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: '-20px' }}
+          variants={{ visible: { transition: { staggerChildren: 0.03, delayChildren: 0.05 } } }}
+        >
+          {filtered.map((tech, i) => {
+            const Icon = (Si as Record<string, React.ElementType>)[tech.icon] ?? Si.SiCoder;
+            return (
+              <motion.div
+                key={tech.name}
+                className={styles.card}
+                variants={{
+                  hidden: { opacity: 0, y: 16 },
+                  visible: { opacity: 1, y: 0 },
+                }}
+                transition={{ duration: 0.35, ease: [0.22, 0.61, 0.36, 1] }}
+                whileHover={{ y: -3, transition: { duration: 0.2 } }}
+              >
+                <span className={styles.iconWrap}>
+                  <Icon className={styles.icon} aria-hidden="true" />
+                </span>
+                <span className={styles.label}>{tech.name}</span>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+
+      </div>
+    </section>
+  );
+}