feat: update configuration, styles, and components for improved UI and functionality
This commit is contained in:
parent
a3294a0648
commit
1ce743e06a
8 changed files with 118 additions and 70 deletions
|
|
@ -8,6 +8,9 @@ const nextConfig: NextConfig = {
|
|||
turbopack: {
|
||||
root: path.join(__dirname, '.'),
|
||||
},
|
||||
images: {
|
||||
remotePatterns: [new URL('https://api.imnya.ng/**')],
|
||||
},
|
||||
output: 'standalone',
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -209,3 +209,7 @@ body {
|
|||
scroll-snap-align: start;
|
||||
scroll-snap-stop: always;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
18
src/app/not-found.tsx
Normal file
18
src/app/not-found.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen">
|
||||
<figure>
|
||||
<picture className="block bg-gray-100 rounded-xl aspect-1-1 overflow-hidden image-scale object-shadowed mb-8">
|
||||
<Image src="https://api.imnya.ng/mitda/miku" width={200} height={200} alt="Not Found Image" />
|
||||
</picture>
|
||||
</figure>
|
||||
<h1 className="text-4xl font-bold">404</h1>
|
||||
<p>괜찮아요. 이런날도 있는거죠</p>
|
||||
<br/>
|
||||
<a href="/">← Go Home</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,73 +1,36 @@
|
|||
'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 DDayComponent from "@/components/dday";
|
||||
|
||||
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 className="max-w-3xl w-full flex flex-row h-auto mx-auto my-8 items-center justify-between lg:px-0 px-8">
|
||||
<div className="flex flex-row gap-4 items-center">
|
||||
<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>
|
||||
<DDayComponent targetDate={new Date('2010-11-08T03:00:00+09:00')} label="🎂 Birth" />
|
||||
</div>
|
||||
<div className="max-w-3xl w-full flex mx-auto mb-8 px-8 lg:px-0">
|
||||
<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)} /> */}
|
||||
<DraggableWindow />
|
||||
<div className="max-w-3xl w-full">
|
||||
<p>나의 <strong>어두움</strong>이 다른 사람들에겐 <strong>빛</strong>이 되길 바라는 <strong>개발자, 정보보안전문가</strong> 암냥입니다.</p>
|
||||
<div className="max-w-3xl w-full lg:px-0 px-8">
|
||||
<p><strong>더 멋진 세상</strong>을 만들기 위해 노력하는 암냥입니다.</p>
|
||||
<p><strong>초등학교 시절 운영체제</strong>에 흥미를 느껴 컴퓨터를 시작했고, 이후 프로그래밍에 관심을 갖게 되었습니다.</p>
|
||||
<p><strong>초등학교 4학년 때 Python</strong>으로 프로그래밍을 시작했으며, 현재는 <strong>TypeScript</strong>를 주로 사용합니다.</p>
|
||||
<p>최근에는 정보보안 분야 중 <strong>웹 해킹</strong>에 관심이 많습니다.</p>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,45 @@
|
|||
"use client";
|
||||
import { SquareArrowOutUpRight } from 'lucide-react';
|
||||
import { url } from 'node:inspector';
|
||||
|
||||
{/* <a href="https://www.youtube.com/playlist?list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD">Effect Playing Contest 2025 Broadcast Develop</a><br />
|
||||
<a href="https://github.com/imnyang/today.isangjeong">today.isangjeong</a> */}
|
||||
import React from 'react';
|
||||
|
||||
const projects = [
|
||||
{
|
||||
name: 'EPC 2025 Broadcast Manager',
|
||||
url: 'https://www.youtube.com/@adofaigg',
|
||||
desc: '얼불춤 끼얏호우',
|
||||
url: 'https://www.youtube.com/playlist?list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD',
|
||||
desc: 'ADOFAI is web-scale',
|
||||
detail: '달성이 주관하고 ADOFAI.gg가 공동 주최하는 Effect Playing Contest 2025 방송 화면의 대부분의 기능을 개발하였습니다.',
|
||||
tags: ['React', 'ElysiaJS'],
|
||||
},
|
||||
{
|
||||
name: 'NYL',
|
||||
url: 'https://nyl.ny64.kr',
|
||||
desc: '상위 호환',
|
||||
detail: '전국의 중고등학교의 시간표와 급식을 쉽게 확인할 수 있는 앱을 유지보수하고 있습니다.',
|
||||
tags: ['React Native', 'ElysiaJS']
|
||||
name: 'newsletter',
|
||||
url: 'https://github.com/imnyang/newsletter',
|
||||
desc: 'For Memos',
|
||||
detail: '그저 이메일이 오면 Discord 웹훅으로 포워딩합니다.',
|
||||
tags: ['Rust', 'IMAP']
|
||||
},
|
||||
{
|
||||
name: 'memos-rss',
|
||||
url: 'https://github.com/imnyang/memos-rss',
|
||||
desc: 'For Memos',
|
||||
detail: 'Discord 포럼 채널에 RSS 피드에 올라온 내용을 포워딩합니다.',
|
||||
tags: ['Rust', 'Discord Bot', 'RSS']
|
||||
},
|
||||
{
|
||||
name: 'today.isangjeong',
|
||||
url: 'https://instagram.com/today.isangjeong',
|
||||
desc: 'Instagram Bot',
|
||||
detail: '매일 학교의 급식 메뉴를 자동으로 업로드하는 인스타그램 봇입니다.',
|
||||
tags: ['TypeScript', 'Instagram', '@napi-rs/canvas']
|
||||
}
|
||||
];
|
||||
|
||||
export default function Projects() {
|
||||
const [visibleCount, setVisibleCount] = React.useState(3);
|
||||
|
||||
return (
|
||||
<section className="break-keep break-words w-full">
|
||||
<div className="space-y-8">
|
||||
{projects.map((project, idx) => (
|
||||
{projects.slice(0, visibleCount).map((project, idx) => (
|
||||
<div className="space-y-2" key={idx}>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between items-center gap-y-2 gap-x-4">
|
||||
|
|
@ -35,7 +49,7 @@ export default function Projects() {
|
|||
<SquareArrowOutUpRight size={16} />
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-lg font-medium">{project.name}</span>
|
||||
<span className="text-lg">{project.name}</span>
|
||||
)}
|
||||
<span className="text-sm text-muted-foreground text-nowrap">{project.desc}</span>
|
||||
</div>
|
||||
|
|
@ -51,6 +65,14 @@ export default function Projects() {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
{visibleCount < projects.length && (
|
||||
<button
|
||||
onClick={() => setVisibleCount(visibleCount + 3)}
|
||||
className="mt-6 px-4 py-2 bg-muted text-muted-foreground rounded font-medium text-sm hover:bg-muted/80"
|
||||
>
|
||||
더 불러오기
|
||||
</button>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
26
src/components/dday.tsx
Normal file
26
src/components/dday.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
"use client";
|
||||
|
||||
interface DDayComponentProps {
|
||||
targetDate: Date;
|
||||
label: string;
|
||||
|
||||
}
|
||||
|
||||
export default function DDayComponent({ targetDate, label }: DDayComponentProps) {
|
||||
const today = new Date();
|
||||
const diffTime = targetDate.getTime() - today.getTime();
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
|
||||
const getLabel = () => {
|
||||
if (diffDays > 0) return `D-${diffDays}`;
|
||||
if (diffDays < 0) return `D+${Math.abs(diffDays)}`;
|
||||
return `D-Day`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-end text-right text-sm">
|
||||
<span>{getLabel()}</span>
|
||||
<span className="text-muted-foreground">{label} | {targetDate.toDateString()}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -19,8 +19,8 @@ export default function TimelineComponent() {
|
|||
|
||||
const filteredEvents = selectedYear
|
||||
? events.filter(
|
||||
(event) => new Date(event.date).getFullYear() === selectedYear
|
||||
)
|
||||
(event) => new Date(event.date).getFullYear() === selectedYear
|
||||
)
|
||||
: [];
|
||||
|
||||
return (
|
||||
|
|
@ -75,6 +75,13 @@ export default function TimelineComponent() {
|
|||
)}
|
||||
</div>
|
||||
))}
|
||||
{selectedYear === new Date().getFullYear() && (
|
||||
<div className="my-8 flex items-center gap-4">
|
||||
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-muted-foreground to-transparent"></div>
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap">✨ | D-{Math.ceil((new Date(new Date().getFullYear() + 1, 0, 1).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24))}동안 만들어나갈 멋진 것들을 기대해주세요.</span>
|
||||
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-muted-foreground to-transparent"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
export const events = [
|
||||
{
|
||||
description: "선린인터넷고등학교 121기 입학",
|
||||
category: "Education",
|
||||
date: "2026-03-03"
|
||||
},
|
||||
{
|
||||
description: "리눅스 마스터 2급",
|
||||
category: "License",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue