feat: Add draggable window component and associated functionality
- 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.
This commit is contained in:
parent
83017a3341
commit
82b5b0719c
6 changed files with 182 additions and 2 deletions
|
|
@ -10,13 +10,24 @@ 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">
|
||||
<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">
|
||||
|
|
@ -54,7 +65,8 @@ export default function Page() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<DraggableWindow />
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue