About change and added X

src/app/about/page.tsx

@@ -12,6 +12,7 @@ import {
   Trophy,
   Box,
   FileText,
+  Twitter,
 } from "lucide-react";
 import {
   SiRust,
@@ -21,6 +22,7 @@ import {
   SiPython,
   SiDocker,
   SiLinux,
+  SiX,
 } from "@icons-pack/react-simple-icons";
 import { motion } from "motion/react";
 import {
@@ -33,6 +35,7 @@ import {
   slowFloat,
 } from "@/lib/animations";
 import { cn } from "@/lib/utils";
+import { ComponentType, SVGProps } from "react";
 
 const timeline = [
   {
@@ -77,22 +80,26 @@ const socialLinks: [
   React.ComponentType<React.SVGProps<SVGSVGElement>>,
 ][] = [
   ["https://github.com/selimaj-dev", Github],
+  ["https://instagram.com/selimaj.dev", Instagram],
+  ["https://x.com/selimajdev", SiX],
   ["https://www.linkedin.com/in/klesti-selimaj", Linkedin],
   ["https://youtube.com/@0xkleo", Youtube],
-  ["https://instagram.com/selimaj.dev", Instagram],
   ["https://dev.to/selimaj", ExternalLink],
 ];
 
-export default function About() {
-  const techStack = [
-    { name: "Rust", icon: <SiRust />, color: "text-orange-500" },
-    { name: "TypeScript", icon: <SiTypescript />, color: "text-blue-500" },
-    { name: "React", icon: <SiReact />, color: "text-cyan-500" },
-    { name: "Go", icon: <SiGo />, color: "text-cyan-400" },
-    { name: "Python", icon: <SiPython />, color: "text-yellow-500" },
+const techStack: {
+  name: string;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  color: string;
+}[] = [
+  { name: "Rust", icon: SiRust, color: "text-orange-500" },
+  { name: "TypeScript", icon: SiTypescript, color: "text-blue-500" },
+  { name: "React", icon: SiReact, color: "text-cyan-500" },
+  { name: "Go", icon: SiGo, color: "text-cyan-400" },
+  { name: "Python", icon: SiPython, color: "text-yellow-500" },
   {
     name: "Java",
-      icon: (
+    icon: () => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
@@ -111,10 +118,11 @@ export default function About() {
     ),
     color: "text-red-500",
   },
-    { name: "Docker", icon: <SiDocker />, color: "text-blue-400" },
-    { name: "Linux", icon: <SiLinux />, color: "text-yellow-400" },
-  ];
+  { name: "Docker", icon: SiDocker, color: "text-blue-400" },
+  { name: "Linux", icon: SiLinux, color: "text-yellow-400" },
+];
 
+export default function About() {
   const achievements = [
     {
       icon: <Trophy className="w-10 h-10 text-accent mx-auto" />,
@@ -284,7 +292,7 @@ export default function About() {
                 className="glass-card rounded-2xl p-6 text-center hover-lift group"
               >
                 <div className={cn("text-4xl mb-3 mx-auto w-max", tech.color)}>
-                  {tech.icon}
+                  <tech.icon />
                 </div>
                 <h3 className="font-semibold text-foreground group-hover:text-accent transition-colors">
                   {tech.name}