feat: スタッフをコンポーネントとして再定義

Author: staticWagomU

2025/src/components/Staff/StaffCard.astro

@@ -1,7 +1,7 @@
 ---
-import GithubIcon from '@/assets/github-icon.png?url'
-import XIcon from '@/assets/x-icon.png?url'
-import BlueSkyIcon from '@/assets/bluesky.jpg?url'
+import GithubIcon from "@/assets/github-icon.png?url";
+import XIcon from "@/assets/x-icon.png?url";
+import BlueSkyIcon from "@/assets/bluesky.jpg?url";
 type Props = {
   name: string;
   alsoKnownAs?: string;
@@ -30,58 +30,58 @@ const { name, alsoKnownAs, image, github, x, bluesky }: Props = Astro.props;
         /></span
       >
     </div>
-    
+
     <div class="grid gap-0.5 text-center">
       <h3 class="text-sm font-semibold md:text-base">
         {name}
       </h3>
-      
-      {alsoKnownAs && 
-      <p class="text-xs text-gray-600">あるいは<b>{alsoKnownAs}</b></p>
+
+      {
+        alsoKnownAs && (
+          <p class="text-xs text-gray-600">
+            あるいは<b>{alsoKnownAs}</b>
+          </p>
+        )
       }
     </div>
-    
-    <div class="grid grid-flow-col auto-cols-max justify-center gap-2">
+
+    <div class="grid auto-cols-max grid-flow-col justify-center gap-2">
       <a
         href={github}
         target="_blank"
         rel="noopener noreferrer"
         class="grid place-items-center text-gray-600 transition-colors hover:text-emerald-600"
       >
-        <img
-          src={GithubIcon}
-          alt="GitHub"
-          class="h-4 w-4" />
+        <img src={GithubIcon} alt="GitHub" class="h-4 w-4" />
         <span class="sr-only">GitHub</span>
       </a>
-      
-      {x &&
-      <a
-        href={x}
-        target="_blank"
-        rel="noopener noreferrer"
-        class="grid place-items-center text-gray-600 transition-colors hover:text-emerald-600"
-      >
-        <img
-          src={XIcon}
-          alt="X (Twitter)"
-          class="h-4 w-4" />
-        <span class="sr-only">X (Twitter)</span>
-      </a>
+
+      {
+        x && (
+          <a
+            href={x}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="grid place-items-center text-gray-600 transition-colors hover:text-emerald-600"
+          >
+            <img src={XIcon} alt="X (Twitter)" class="h-4 w-4" />
+            <span class="sr-only">X (Twitter)</span>
+          </a>
+        )
       }
-      
-      {bluesky &&
-      <a
-        href={bluesky}
-        target="_blank"
-        rel="noopener noreferrer"
-        class="grid place-items-center text-gray-600 transition-colors hover:text-emerald-600">
-        <img
-          src={BlueSkyIcon}
-          alt="Bluesky"
-          class="h-4 w-4" />
-        <span class="sr-only">Bluesky</span>
-      </a>
+
+      {
+        bluesky && (
+          <a
+            href={bluesky}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="grid place-items-center text-gray-600 transition-colors hover:text-emerald-600"
+          >
+            <img src={BlueSkyIcon} alt="Bluesky" class="h-4 w-4" />
+            <span class="sr-only">Bluesky</span>
+          </a>
+        )
       }
     </div>
   </div>

2025/src/components/Staff/index.astro

@@ -2,15 +2,19 @@
 import StaffCard from "./StaffCard.astro";
 ---
 
-<section id="staff" class="bg-emerald-50 py-10 md:py-16">
+<section id="staff" class="bg-emerald-50 py-6 sm:py-8 md:py-12 lg:py-16">
   <div class="container mx-auto px-4">
-    <div class="mb-8 text-center">
-      <h2 class="mb-3 text-2xl font-bold text-gray-900 md:text-3xl">
+    <div class="mb-6 text-center sm:mb-8">
+      <h2
+        class="mb-2 text-xl font-bold text-gray-900 sm:mb-3 sm:text-2xl md:text-3xl"
+      >
         スタッフ
       </h2>
-      <div class="mx-auto h-1 w-16 bg-emerald-500"></div>
+      <div class="mx-auto h-1 w-12 bg-emerald-500 sm:w-16"></div>
     </div>
-    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6">
+    <div
+      class="xs:grid-cols-2 grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
+    >
       <StaffCard
         name="Tatsuhiro Ujihisa"
         image="https://github.com/ujihisa.png"