format

app/page.tsx

@@ -6,23 +6,27 @@ export default function Home() {
     <>
       <Header />
       <div className="mx-auto max-w-3xl px-4">
-        <Timeline timeline={[
+        <Timeline
-          {
+          timeline={[
-            title: "プログラミングの世界に入り込む",
+            {
-            datetime: "2020/07",
+              title: "プログラミングの世界に入り込む",
-            description: "Discord Botを作るためにPythonを学び始めた。",
+              datetime: "2020/07",
-           },
+              description: "Discord Botを作るためにPythonを学び始めた。",
-          {
+            },
-            title: "sbv2-api 誕生",
+            {
-            datetime: "2025/09",
+              title: "sbv2-api 誕生",
-            description: "Discord botに組み込めたら面白いと思って開発を開始して作った。"
+              datetime: "2025/09",
-          },
+              description:
-          {
+                "Discord botに組み込めたら面白いと思って開発を開始して作った。",
-            title: "New! ウェブサイト6代目開発開始(Proj C)",
+            },
-            datetime: "2025/04",
+            {
-            description: "前のサイトを変えたくなった。そして再び一から作ることにした。"
+              title: "New! ウェブサイト6代目開発開始(Proj C)",
-          },
+              datetime: "2025/04",
-        ]} />
+              description:
+                "前のサイトを変えたくなった。そして再び一から作ることにした。",
+            },
+          ]}
+        />
       </div>
     </>
   );

components/pages/home/header.tsx

@@ -1,24 +1,30 @@
 import Image from "next/image";
 
 const Header: React.FC = async () => {
-    const res = await fetch(
+  const res = await fetch(
-        "https://discord.com/api/v10/users/739702692393517076",
+    "https://discord.com/api/v10/users/739702692393517076",
-        {
+    {
-            headers: {
+      headers: {
-                Authorization: `Bot ${process.env.DISCORD_TOKEN}`,
+        Authorization: `Bot ${process.env.DISCORD_TOKEN}`,
-            }
+      },
-        }
+    },
-    );
+  );
-    const data = await res.json();
+  const data = await res.json();
-    const avatarURL = `https://cdn.discordapp.com/avatars/739702692393517076/${data.avatar}.png?size=1024`
+  const avatarURL = `https://cdn.discordapp.com/avatars/739702692393517076/${data.avatar}.png?size=1024`;
-    return (
+  return (
-        <header className="h-screen w-screen flex justify-center items-center">
+    <header className="h-screen w-screen flex justify-center items-center">
-            <div>
+      <div>
-                <Image alt="avatar" src={avatarURL} width={156} height={156} className="mb-2 rounded-full" />
+        <Image
-                <h1 className="text-2xl font-bold text-center">tuna2134</h1>
+          alt="avatar"
-            </div>
+          src={avatarURL}
-        </header>
+          width={156}
-    )
+          height={156}
-}
+          className="mb-2 rounded-full"
+        />
+        <h1 className="text-2xl font-bold text-center">tuna2134</h1>
+      </div>
+    </header>
+  );
+};
 
-export default Header;
+export default Header;

components/pages/home/timeline.tsx

@@ -1,26 +1,28 @@
 export interface TimelineData {
-    title: string;
+  title: string;
-    datetime: string;
+  datetime: string;
-    description: string;
+  description: string;
 }
 
 interface Props {
-    timeline: TimelineData[];
+  timeline: TimelineData[];
 }
 
 const Timeline: React.FC<Props> = ({ timeline }) => {
-    return (
+  return (
-        <ol className="relative border-s border-gray-200">
+    <ol className="relative border-s border-gray-200">
-            {timeline.map((data, index) => (
+      {timeline.map((data, index) => (
-                <li className="mb-10 ms-6" key={index}>
+        <li className="mb-10 ms-6" key={index}>
-                    <div className="absolute w-3 h-3 bg-[#00F3A4] rounded-full mt-1.5 -start-1.5 border border-white"></div>
+          <div className="absolute w-3 h-3 bg-[#00F3A4] rounded-full mt-1.5 -start-1.5 border border-white"></div>
-                    <p className="text-gray-900/75 mb-1">{data.datetime}</p>
+          <p className="text-gray-900/75 mb-1">{data.datetime}</p>
-                    <h1 className="text-2xl font-bold mb-2 tracking-wider">{data.title}</h1>
+          <h1 className="text-2xl font-bold mb-2 tracking-wider">
-                    <p>{data.description}</p>
+            {data.title}
-                </li>
+          </h1>
-            ))}
+          <p>{data.description}</p>
-        </ol>
+        </li>
-    )
+      ))}
-}
+    </ol>
+  );
+};
 
-export default Timeline;
+export default Timeline;

next.config.ts

@@ -1,18 +1,18 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-    images: {
+  images: {
-        remotePatterns: [
+    remotePatterns: [
-            {
+      {
-                protocol: 'https',
+        protocol: "https",
-                hostname: "cdn.discordapp.com",
+        hostname: "cdn.discordapp.com",
-            }
+      },
-        ]
+    ],
-    }
+  },
 };
 
 if (process.env.OUTPUT === "standalone") {
-    nextConfig.output = "standalone";
+  nextConfig.output = "standalone";
 }
 
 export default nextConfig;

package.json

@@ -6,19 +6,21 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier -w './**/*.{tsx,ts}'"
   },
   "dependencies": {
+    "next": "15.3.1",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.0.0"
-    "next": "15.3.1"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^22.0.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
+    "prettier": "^3.5.3",
-    "tailwindcss": "^4"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }

pnpm-lock.yaml

@@ -30,6 +30,9 @@ importers:
       '@types/react-dom':
         specifier: ^19
         version: 19.1.2(@types/react@19.1.2)
+      prettier:
+        specifier: ^3.5.3
+        version: 3.5.3
       tailwindcss:
         specifier: ^4
         version: 4.1.4
@@ -458,6 +461,11 @@ packages:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  prettier@3.5.3:
+    resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   react-dom@19.1.0:
     resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
     peerDependencies:
@@ -848,6 +856,8 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  prettier@3.5.3: {}
+
   react-dom@19.1.0(react@19.1.0):
     dependencies:
       react: 19.1.0