Try a different skill presentation option

app/people/page.tsx

@@ -5,7 +5,11 @@ import {
   UserProfileCard,
   UserProfileContainer,
 } from "~/components/UserProfileCard";
-import { compareByName, getAllUserProfiles } from "~/src/data/user-profile";
+import {
+  compareByName,
+  getAllUserProfiles,
+  type UserProfile,
+} from "~/src/data/user-profile";
 import { strip } from "~/src/utils";
 
 /** Refresh data every 5 minutes */
@@ -34,12 +38,31 @@ async function Page() {
           <UserProfileCard
             key={profile.id}
             profile={profile}
-            label={profile.tags}
+            label={<Skills profile={profile} />}
           />
         ))}
       </UserProfileContainer>
     </main>
   );
 }
 
+const Skills = ({ profile }: { profile: UserProfile }) => (
+  <ul className="text-balance">
+    {profile.tags.split(/;\s*/).map((tag) => (
+      <li key={tag} className="inline">
+        {tag}
+        <span
+          className="bg-center bg-no-repeat tracking-[0.8em]"
+          style={{ backgroundImage: `url(${bulletImage})` }}
+        >
+          {" "}
+        </span>
+      </li>
+    ))}
+  </ul>
+);
+
+const bulletImage =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMkMEa+wAAAAnSURBVBhXY/Dz89MA4sNA/B9Ka4AEYQIwfBgkiCwAxjhVopnppwEApxQqhnyQ+VkAAAAASUVORK5CYII=";
+
 export default Page;

components/UserProfileCard.tsx

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -10,7 +11,7 @@ import { Route } from "~/src/routing";
 export type Props = {
   profile: Pick<UserProfile, "name" | "avatarUrl" | "id"> &
     Partial<Pick<UserProfile, "roles">>;
-  label?: string;
+  label?: ReactNode;
 };
 
 export const UserProfileCard = ({ profile, label }: Props) => (
@@ -49,7 +50,7 @@ export const UserProfileCard = ({ profile, label }: Props) => (
     </div>
     <div className="flex flex-col gap-2 self-center">
       <h3 className="typo-subtitle">{profile.name}</h3>
-      {label && <p className="typo-caption leading-relaxed">{label}</p>}
+      {label && <div className="typo-caption leading-relaxed">{label}</div>}
     </div>
   </Link>
 );