91 lines
3 KiB
TypeScript
91 lines
3 KiB
TypeScript
import type { Route } from "./+types/home";
|
|
import React, { useEffect, useState } from "react";
|
|
import { Link, useNavigate } from "react-router";
|
|
|
|
import { AnimatedTabs } from "~/components/AnimatedTabs";
|
|
import Readme from "~/components/README";
|
|
import TimelineComponents from "~/components/TimelineComponents";
|
|
import Top from "~/components/Top";
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [
|
|
{ title: "암냥" },
|
|
{ name: "description", content: "Student Developer" },
|
|
];
|
|
}
|
|
|
|
export default function Home() {
|
|
const navigate = useNavigate();
|
|
const [activeTab, setActiveTab] = useState("Home");
|
|
const ref = React.useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (activeTab === "Home") {
|
|
navigate("/");
|
|
} else if (activeTab === "Timeline") {
|
|
navigate("/#timeline");
|
|
}
|
|
}, [activeTab, navigate]);
|
|
|
|
useEffect(() => {
|
|
if (window.location.hash === "#timeline") {
|
|
setActiveTab("Timeline");
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div ref={ref} className="flex flex-col w-full items-center">
|
|
<header className="w-full md:w-2/5 h-auto flex flex-row justify-between p-5">
|
|
<Link to="/" accessKey="h" title="💕 Alt + H" className="text-2xl">
|
|
💕
|
|
</Link>
|
|
<div className="flex items-center">
|
|
<AnimatedTabs activeTab={activeTab} setActiveTab={setActiveTab} />
|
|
</div>
|
|
</header>
|
|
<Top />
|
|
{/* ActivatedTab */}
|
|
<div className="w-full md:w-2/5">
|
|
{activeTab === "Home" && (
|
|
<div className="flex flex-col items-center justify-center">
|
|
<p className="text-lg text-neutral-400">
|
|
{/* Read README.md with remark<Readme /> */}
|
|
<br />
|
|
<p>
|
|
<kbd>
|
|
<img
|
|
src="https://github.com/user-attachments/assets/8ea8ff1d-7e2c-4a2b-b688-38c21647ad8c"
|
|
alt="암냥 & 남냥"
|
|
title=""
|
|
width="850"
|
|
style={{ borderRadius: "10px" }}
|
|
/>
|
|
</kbd>
|
|
</p>
|
|
<br />
|
|
<p>
|
|
<a href="https://skillicons.dev">
|
|
<kbd>
|
|
<img
|
|
width={850}
|
|
src="https://skillicons.dev/icons?i=typescript,js,c,cpp,java,kotlin,py,html,css,react,nextjs,tailwind,vite,nodejs,bun,elysia,express,fastapi,firebase,mongodb,postgres,sqlite,docker,nginx,github,githubactions,git,gradle,arduino,raspberrypi,figma,cloudflare,bots"
|
|
/>
|
|
</kbd>
|
|
</a>
|
|
</p>
|
|
</p>
|
|
<p className="text-white">Normal Student Developer</p>
|
|
<a href="https://sqlare.com" className="text-white">
|
|
Team. Sqlare
|
|
</a>
|
|
</div>
|
|
)}
|
|
{activeTab === "Timeline" && (
|
|
<div className="flex flex-col items-center justify-center">
|
|
<TimelineComponents />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|