From 62c0355df1db49dbc5a23dd40506177e0178e900 Mon Sep 17 00:00:00 2001
From: Adam Plesnik <adam.plesnik@gmail.com>
Date: Fri, 8 Nov 2024 20:27:22 +0100
Subject: [PATCH] Update tech

---
 src/content/Tech.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/content/Tech.tsx b/src/content/Tech.tsx
index 3b0da04..9f7ef0e 100644
--- a/src/content/Tech.tsx
+++ b/src/content/Tech.tsx
@@ -1,12 +1,18 @@
 import Em from '@/components/Em'
 import Icon from '@/components/Icon'
 import Tile from '@/components/Tile'
-import { Sparkles } from 'lucide-react'
+import { DraftingCompass, LucideIcon, Sparkles } from 'lucide-react'
 
-const skills: { tech: string; description: string }[] = [
+const skills: { tech: string; description: string; skillIcon?: LucideIcon }[] = [
+  {
+    tech: 'Figma',
+    description: 'Mockups and prototypes, design systems, modes.',
+    skillIcon: DraftingCompass,
+  },
   {
     tech: 'React',
     description: 'TSX, state, queries, micro components, API.',
+    skillIcon: Sparkles,
   },
   { tech: 'Tailwind CSS', description: 'Utility first.' },
   { tech: 'HTML, CSS, Sass', description: 'SEO, a11y, animations, transitions.' },
@@ -14,17 +20,16 @@ const skills: { tech: string; description: string }[] = [
     tech: 'Theme refactoring',
     description: 'Reorganization and tuning of front-end.',
   },
-  { tech: 'Figma', description: 'Mockups and prototypes, design systems, modes.' },
   { tech: '...and more', description: 'Payload CMS, Angular, Vue.js, Vaadin + Java' },
 ]
 
 const Tech = () => {
   return (
     <Tile title="Tech" className="shrink-0 print:break-after-page">
-      <ul className="grid gap-4 md:grid-flow-col-dense md:grid-rows-3">
+      <ul className="grid gap-5 md:grid-flow-col-dense md:grid-rows-3">
         {skills.map((skill, i) => (
           <li key={i} className="group flex items-baseline gap-2">
-            <Icon Icon={Sparkles} className="opacity-0 group-first:opacity-100" />
+            <div className="w-6">{skill.skillIcon && <Icon Icon={skill.skillIcon} />}</div>
             <span className="flex flex-col gap-1">
               <Em>{skill.tech}</Em>
               <span className="block text-sm text-zinc-500">{skill.description}</span>