imnyang
82b5b0719c- Implemented DraggableWindose component with drag-and-drop capabilities. - Added shake detection to close the window after multiple shakes. - Integrated responsive design for mobile devices. - Created TXT component to display a clickable text icon with hover effects. - Included image assets for the draggable window and text icon.
93 lines
3.8 KiB
TypeScript
93 lines
3.8 KiB
TypeScript
'use client';
|
|
import Projects from "@/components/Projects";
|
|
import TimelineComponent from "@/components/timeline";
|
|
import Image from "next/image";
|
|
import DraggableWindow from "@/components/DraggableWindow";
|
|
import ReadmeWindow from "@/components/ReadmeWindow";
|
|
import Snowfall from 'react-snowfall';
|
|
import { useTheme } from "next-themes";
|
|
import { Banner } from "@/components/ui/banner";
|
|
import { LinkIcon, TreeDeciduous, TreePalmIcon, TreesIcon } from "lucide-react";
|
|
import { useState } from "react";
|
|
import Contact from "@/components/Contact";
|
|
import DraggableWindose from "@/components/DraggableWindose";
|
|
import TXT from "@/components/txt";
|
|
|
|
export default function Page() {
|
|
const { theme } = useTheme();
|
|
const [show, setShow] = useState(true);
|
|
const [targetPosition, setTargetPosition] = useState<{ x: number; y: number } | null>(null);
|
|
const [windowVisible, setWindowVisible] = useState(true);
|
|
|
|
const handleTXTHover = (position: { x: number; y: number } | null) => {
|
|
setTargetPosition(position);
|
|
if (position) {
|
|
setWindowVisible(true);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="min-h-screen w-screen overflow-y-scroll snap-y snap-mandatory relative">
|
|
<Snowfall color={theme === 'dark' ? '#ffffff' : '#bcbcd6ff'} />
|
|
|
|
<div className="max-w-3xl w-full flex flex-row h-auto mx-auto gap-4 items-center my-8 lg:px-0 px-8">
|
|
<Image
|
|
src="/Frame.svg"
|
|
alt="logo"
|
|
className="w-fit h-fit"
|
|
width={30}
|
|
height={30}
|
|
/>
|
|
<h1 className="font-ntype text-3xl text-foreground/70">
|
|
<a href="mailto:me@imnya.ng">me@imnya.ng</a>
|
|
</h1>
|
|
</div>
|
|
<div className="max-w-3xl w-full flex mx-auto mb-8">
|
|
<Contact />
|
|
</div>
|
|
<section id="about" className="w-full snap-start snap-always flex flex-col items-center justify-center px-8 lg:px-0">
|
|
<div className="max-w-3xl w-full mb-8">
|
|
<Banner
|
|
show={show}
|
|
onHide={() => setShow(false)}
|
|
icon={
|
|
<TreeDeciduous className="w-4 h-4 text-green-800" />
|
|
}
|
|
title={
|
|
<>
|
|
제 크리스마스 트리를 꾸며주세요!
|
|
</>
|
|
}
|
|
action={{
|
|
label: "트리 꾸미러 가기",
|
|
onClick: () => window.open("https://imnya.ng/tree", "_blank"),
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<DraggableWindose targetPosition={targetPosition} isVisible={windowVisible} onClose={() => setWindowVisible(false)} onDragStart={() => setTargetPosition(null)} />
|
|
<TXT onHover={handleTXTHover} />
|
|
<div className="max-w-3xl w-full">
|
|
<p>나의 <strong>어두움</strong>이 다른 사람들에겐 <strong>빛</strong>이 되길 바라는 <strong>개발자, 정보보안전문가</strong> 남현석입니다.</p>
|
|
<p><strong>초등학교 시절 운영체제</strong>에 흥미를 느껴 컴퓨터를 시작했고, 이후 프로그래밍에 관심을 갖게 되었습니다.</p>
|
|
<p><strong>초등학교 4학년 때 Python</strong>으로 프로그래밍을 시작했으며, 현재는 <strong>TypeScript</strong>를 주로 사용합니다.</p>
|
|
<p>최근에는 정보보안 분야 중 <strong>웹 해킹</strong>에 관심이 많습니다.</p>
|
|
<br />
|
|
<ReadmeWindow />
|
|
<br />
|
|
<p>대표적인 프로젝트들은 아래와 같습니다.</p>
|
|
<Projects />
|
|
<br />
|
|
<TimelineComponent />
|
|
|
|
<div className="text-muted-foreground text-sm">
|
|
<br />
|
|
<p>© 2025 HyunSuk Nam. All rights reserved.</p>
|
|
<p>이 웹사이트의 일부 이미지는 생성형 인공지능을 통해 제작되었습니다.</p>
|
|
<br />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|