Updated about

src/components/AboutSection.tsx

@@ -4,9 +4,11 @@
  * Asymmetric layout: text left, abstract visual right
  */
 
+import { EarthIcon, LayersIcon, TargetIcon, ZapIcon } from "lucide-react";
 import { useEffect, useRef } from "react";
 
-const ABOUT_VISUAL = "https://d2xsxph8kpxj0f.cloudfront.net/310519663439135967/RkRL4wd7YzNoLyaN7suWbR/about-visual-Y4xCyLgcmnZTRAJCDCgU7o.webp";
+const ABOUT_VISUAL =
+  "https://d2xsxph8kpxj0f.cloudfront.net/310519663439135967/RkRL4wd7YzNoLyaN7suWbR/about-visual-Y4xCyLgcmnZTRAJCDCgU7o.webp";
 
 function useReveal() {
   const ref = useRef<HTMLDivElement>(null);
@@ -20,7 +22,7 @@ function useReveal() {
           observer.disconnect();
         }
       },
-      { threshold: 0.15 }
+      { threshold: 0.15 },
     );
     observer.observe(el);
     return () => observer.disconnect();
@@ -29,10 +31,10 @@ function useReveal() {
 }
 
 const highlights = [
-  { icon: "⚡", label: "Currently", value: "Grinding on SaaS products" },
+  { Icon: ZapIcon, label: "Currently", value: "Grinding on SaaS products" },
-  { icon: "🦀", label: "Fav Stack", value: "Rust · TypeScript · Linux" },
+  { Icon: LayersIcon, label: "Fav Stack", value: "Rust · TypeScript · Linux" },
-  { icon: "🎯", label: "Focus", value: "Low-level systems & UI/UX" },
+  { Icon: TargetIcon, label: "Focus", value: "Low-level systems & UI/UX" },
-  { icon: "🌍", label: "Based in", value: "Albania" },
+  { Icon: EarthIcon, label: "Based in", value: "Albania" },
 ];
 
 export default function AboutSection() {
@@ -40,7 +42,11 @@ export default function AboutSection() {
   const ref2 = useReveal();
 
   return (
-    <section id="about" className="py-32 relative" style={{ background: "#080808" }}>
+    <section
+      id="about"
+      className="py-32 relative"
+      style={{ background: "#080808" }}
+    >
       {/* Subtle top border */}
       <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
 
@@ -51,9 +57,7 @@ export default function AboutSection() {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
           {/* Left: Text */}
           <div ref={ref1} className="reveal">
-            <h2
+            <h2 className="section-heading text-4xl sm:text-5xl text-white mb-8 leading-tight">
-              className="section-heading text-4xl sm:text-5xl text-white mb-8 leading-tight"
-            >
               Building the future,
               <br />
               <span className="text-white/40">one commit at a time.</span>
@@ -64,32 +68,43 @@ export default function AboutSection() {
               style={{ fontFamily: "'DM Sans', sans-serif" }}
             >
               <p>
-                I'm <strong className="text-white font-semibold">Klesti Selimaj</strong> — a 16-year-old software developer
+                I'm{" "}
-                and entrepreneur from Albania with 6 years of hands-on experience. I started coding at 10 and
+                <strong className="text-white font-semibold">
+                  Klesti Selimaj
+                </strong>{" "}
+                — a 16-year-old software developer and entrepreneur from Albania
+                with 6 years of hands-on experience. I started coding at 10 and
                 never stopped.
               </p>
               <p>
-                My passion lies in <strong className="text-white/80">low-level systems programming</strong>, building
+                My passion lies in{" "}
-                developer tools, and crafting polished user experiences. I work primarily in{" "}
+                <strong className="text-white/80">
+                  low-level systems programming
+                </strong>
+                , building developer tools, and crafting polished user
+                experiences. I work primarily in{" "}
                 <strong className="text-white/80">Rust</strong> and{" "}
-                <strong className="text-white/80">TypeScript</strong>, and I'm deeply interested in
+                <strong className="text-white/80">TypeScript</strong>, and I'm
-                hacking, Linux internals, and TUI applications.
+                deeply interested in hacking, Linux internals, and TUI
+                applications.
               </p>
               <p>
-                Beyond code, I'm building towards a successful SaaS product — combining my technical depth
+                Beyond code, I'm building towards a successful SaaS product —
-                with an entrepreneurial mindset to create tools that developers actually want to use.
+                combining my technical depth with an entrepreneurial mindset to
+                create tools that developers actually want to use.
               </p>
             </div>
 
             {/* Highlights grid */}
             <div className="mt-10 grid grid-cols-2 gap-3">
               {highlights.map((h) => (
-                <div
+                <div key={h.label} className="glass rounded-xl p-4 card-hover">
-                  key={h.label}
+                  <div className="flex items-center gap-3">
-                  className="glass rounded-xl p-4 card-hover"
+                    <div className="text-lg">{<h.Icon />}</div>
-                >
+                    <div>
-                  <div className="text-lg mb-1">{h.icon}</div>
+                      <div className="terminal-label text-xs mb-0.5">
-                  <div className="terminal-label text-xs mb-0.5">{h.label}</div>
+                        {h.label}
+                      </div>
                       <div
                         className="text-sm text-white/80 font-medium"
                         style={{ fontFamily: "'DM Sans', sans-serif" }}
@@ -97,15 +112,29 @@ export default function AboutSection() {
                         {h.value}
                       </div>
                     </div>
+                  </div>
+                </div>
               ))}
             </div>
 
             {/* Social links */}
             <div className="mt-8 flex flex-wrap gap-3">
               {[
-                { label: "GitHub", href: "https://github.com/selimaj-dev", icon: "⌥" },
+                {
-                { label: "YouTube", href: "https://youtube.com/@SelimajDev", icon: "▶" },
+                  label: "GitHub",
-                { label: "Instagram", href: "https://instagram.com/selimaj.dev", icon: "◈" },
+                  href: "https://github.com/selimaj-dev",
+                  icon: "⌥",
+                },
+                {
+                  label: "YouTube",
+                  href: "https://youtube.com/@SelimajDev",
+                  icon: "▶",
+                },
+                {
+                  label: "Instagram",
+                  href: "https://instagram.com/selimaj.dev",
+                  icon: "◈",
+                },
               ].map((s) => (
                 <a
                   key={s.label}
@@ -127,7 +156,10 @@ export default function AboutSection() {
               {/* Glow behind image */}
               <div
                 className="absolute inset-0 rounded-2xl blur-3xl opacity-20"
-                style={{ background: "radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%)" }}
+                style={{
+                  background:
+                    "radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%)",
+                }}
               />
               <div className="relative glass rounded-2xl overflow-hidden float-anim">
                 <img
@@ -139,7 +171,10 @@ export default function AboutSection() {
                 {/* Overlay with terminal text */}
                 <div
                   className="absolute bottom-0 left-0 right-0 p-5"
-                  style={{ background: "linear-gradient(to top, rgba(8,8,8,0.9) 0%, transparent 100%)" }}
+                  style={{
+                    background:
+                      "linear-gradient(to top, rgba(8,8,8,0.9) 0%, transparent 100%)",
+                  }}
                 >
                   <div className="terminal-label text-xs">
                     <span className="text-white/30">$</span>{" "}