package.json

@@ -11,7 +11,6 @@
   "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,9 +14,6 @@ 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
@@ -763,9 +760,6 @@ 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'}
@@ -2334,8 +2328,6 @@ snapshots:
 
   cssesc@3.0.0: {}
 
-  date-fns@4.1.0: {}
-
   debug@4.4.3:
     dependencies:
       ms: 2.1.3

public/icons/age.svg

@@ -1 +0,0 @@
-<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,9 +1,4 @@
 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 [
   {
@@ -13,14 +8,9 @@ export default [
   },
   {
     title: "誕生日",
-    description: format(birthday, "yyyy/MM/dd"),
+    description: "2014/12/8",
     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" />
+    <meta name="color-scheme" content="light dark" />
     {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-wrap
+    flex-col
     gap-3
-    w-[70vw]
+    w-full
     p-5
   `}>
     <span class="font-bold text-4xl w-full mb-3">詳細</span>
@@ -50,6 +50,7 @@ import contacts from "@/constants/contacts";
         description={detail.description}
         img={detail.img}
         href={detail.href}
+        isFullWidth
       />
     ))}
   </div>
@@ -58,7 +59,7 @@ import contacts from "@/constants/contacts";
     flex
     flex-wrap
     gap-3
-    w-[70vw]
+    w-fit
     p-5
   `}>
     <span class="font-bold text-4xl w-full mb-3">リンク</span>
@@ -77,7 +78,7 @@ import contacts from "@/constants/contacts";
     flex
     flex-col
     gap-3
-    w-[70vw]
+    w-full
     p-5
   `}>
     <span class="font-bold text-4xl w-full mb-3">連絡先</span>