This commit is contained in:
tuna2134
2025-04-29 21:31:34 +00:00
parent ac705d36b0
commit 22109ff516
6 changed files with 98 additions and 96 deletions

1
.prettierrc Normal file
View File

@@ -0,0 +1 @@
tabWidth: 4

View File

@@ -3,32 +3,32 @@ import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
subsets: ["latin"], subsets: ["latin"],
}); });
const geistMono = Geist_Mono({ const geistMono = Geist_Mono({
variable: "--font-geist-mono", variable: "--font-geist-mono",
subsets: ["latin"], subsets: ["latin"],
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "tuna2134", title: "tuna2134",
description: "tuna2134 official website", description: "tuna2134 official website",
}; };
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="ja"> <html lang="ja">
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${geistSans.variable} ${geistMono.variable} antialiased`}
> >
{children} {children}
</body> </body>
</html> </html>
); );
} }

View File

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

View File

@@ -1,30 +1,30 @@
import Image from "next/image"; import Image from "next/image";
const Header: React.FC = async () => { 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 <Image
alt="avatar" alt="avatar"
src={avatarURL} src={avatarURL}
width={156} width={156}
height={156} height={156}
className="mb-2 rounded-full" className="mb-2 rounded-full"
/> />
<h1 className="text-2xl font-bold text-center">tuna2134</h1> <h1 className="text-2xl font-bold text-center">tuna2134</h1>
</div> </div>
</header> </header>
); );
}; };
export default Header; export default Header;

View File

@@ -1,28 +1,28 @@
export interface TimelineData { export interface TimelineData {
title: string; title: string;
datetime: string; datetime: string;
description: string; description: string;
} }
interface Props { interface Props {
timeline: TimelineData[]; timeline: TimelineData[];
} }
const Timeline: React.FC<Props> = ({ timeline }) => { 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"> <h1 className="text-2xl font-bold mb-2 tracking-wider">
{data.title} {data.title}
</h1> </h1>
<p>{data.description}</p> <p>{data.description}</p>
</li> </li>
))} ))}
</ol> </ol>
); );
}; };
export default Timeline; export default Timeline;

View File

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