Add: age / Change: card width

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.14",
     "astro": "^5.14.6",
+    "date-fns": "^4.1.0",
     "sharp": "^0.34.4",
     "tailwindcss": "^4.1.14"
   }

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       astro:
         specifier: ^5.14.6
         version: 5.14.6(@types/node@24.8.1)(jiti@2.6.1)(lightningcss@1.30.1)(rollup@4.52.5)(typescript@5.9.3)
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
       sharp:
         specifier: ^0.34.4
         version: 0.34.4
@@ -760,6 +763,9 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -2328,6 +2334,8 @@ snapshots:
 
   cssesc@3.0.0: {}
 
+  date-fns@4.1.0: {}
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3

public/icons/age.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M260-720q-33 0-56.5-23.5T180-800q0-33 23.5-56.5T260-880q33 0 56.5 23.5T340-800q0 33-23.5 56.5T260-720Zm420 200q-25 0-42.5-17.5T620-580q0-25 17.5-42.5T680-640q25 0 42.5 17.5T740-580q0 25-17.5 42.5T680-520ZM180-80v-280h-60v-240q0-33 23.5-56.5T200-680h120q22 0 40 10.5t29 29.5l143 247 41-61q8-12 21.5-19t28.5-7h117q25 0 42.5 17.5T800-420v140h-40v200H600v-284l-31 44h-88L380-496v416H180Z"/></svg>

src/constants/details.ts

@@ -1,4 +1,9 @@
 import { type Props as CardProps } from "@/components/Card.astro";
+import { differenceInYears } from "date-fns";
+import { format } from "date-fns";
+
+const birthday = new Date("2014-12-08T16:14:00+09:00");
+const age = differenceInYears(new Date(), birthday);
 
 export default [
   {
@@ -8,9 +13,14 @@ export default [
   },
   {
     title: "誕生日",
-    description: "2014/12/8",
+    description: format(birthday, "yyyy/MM/dd"),
     img: "cake.svg",
   },
+  {
+    title: "年齢",
+    description: `${age}歳`,
+    img: "age.svg",
+  },
   {
     title: "場所",
     description: "神奈川県",

src/layouts/Layout.astro

@@ -22,7 +22,7 @@ const title = Astro.props.title
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="generator" content={Astro.generator} />
     <link rel="icon" href="/favicon.ico" />
-    <meta name="color-scheme" content="light dark" />
+    <meta name="color-scheme" content="light" />
     {Astro.site && (
       <link rel="canonical" href={Astro.site.href} />
     )}

src/pages/index.astro

@@ -37,9 +37,9 @@ import contacts from "@/constants/contacts";
   
   <div class={`
     flex
-    flex-col
+    flex-wrap
     gap-3
-    w-full
+    w-[70vw]
     p-5
   `}>
     <span class="font-bold text-4xl w-full mb-3">詳細</span>
@@ -50,7 +50,6 @@ import contacts from "@/constants/contacts";
         description={detail.description}
         img={detail.img}
         href={detail.href}
-        isFullWidth
       />
     ))}
   </div>
@@ -59,7 +58,7 @@ import contacts from "@/constants/contacts";
     flex
     flex-wrap
     gap-3
-    w-fit
+    w-[70vw]
     p-5
   `}>
     <span class="font-bold text-4xl w-full mb-3">リンク</span>
@@ -78,7 +77,7 @@ import contacts from "@/constants/contacts";
     flex
     flex-col
     gap-3
-    w-full
+    w-[70vw]
     p-5
   `}>
     <span class="font-bold text-4xl w-full mb-3">連絡先</span>