style: updates chips

src/components/content/ExperienceItem.astro

···
           </p>
         )
       }
-      <ChipGroup chips={experience.technologies} />
+      <ChipGroup chips={experience.technologies} variant="neutral" />
     </div>
   </div>
   <div class="relative hidden xl:flex flex-col items-center">

src/components/ui/Chip.astro

···
 ---
 interface Props {
   label: string;
+  variant?: "primary" | "neutral";
 }
 
-const { label } = Astro.props;
+const { label, variant = "primary" } = Astro.props;
+
+const variantClasses = {
+  primary:
+    "bg-primary-light/3 text-primary shadow-[0_1px_0_0_rgba(174,30,95,0.15)]",
+  neutral: "bg-white text-neutral-primary border border-neutral-primary/10",
+};
 ---
 
 <span
-  class="md:w-auto inline-block py-1 px-3 rounded-full
-      text-xs text-center font-light tracking-wide bg-primary-light/3 text-primary
-      shadow-[0_1px_0_0_rgba(174,30,95,0.15)]"
+  class:list={[
+    "md:w-auto inline-block py-1 px-3 rounded-full text-xs text-center tracking-wide",
+    variantClasses[variant],
+  ]}
 >
   {label}
 </span>

src/components/ui/ChipGroup.astro

···
 
 interface Props {
   chips: string[];
+  variant?: "primary" | "neutral";
 }
 
-const { chips } = Astro.props;
+const { chips, variant = "primary" } = Astro.props;
 ---
 
 <div class="flex flex-row flex-wrap items-start gap-2 py-2 text-white">
-  {chips.map((chip) => <Chip label={chip} />)}
+  {chips.map((chip) => <Chip label={chip} variant={variant} />)}
 </div>