Merge branch 'main' into nextjs

2025-10-29 21:38:16 +09:00 · 2025-10-29 21:38:16 +09:00 · 1d5978dacf
commit 1d5978dacf
parent d6456466c6 506a9bef40
17 changed files with 383 additions and 41 deletions
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -1,4 +1,5 @@
@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
+@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "tailwindcss";
@import "tw-animate-css";

@ -14,6 +15,42 @@
 }

 :root {
+  --background: hsl(340 40% 98%);
+  --foreground: hsl(315 21% 8%);
+  --card: hsl(340 40% 98%);
+  --card-foreground: hsl(315 21% 8%);
+  --popover: hsl(340 40% 98%);
+  --popover-foreground: hsl(315 21% 8%);
+  --primary: hsl(340 25% 15%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(340 25% 95%);
+  --secondary-foreground: hsl(240 5.9% 10%);
+  --muted: hsl(340 20% 95%);
+  --muted-foreground: hsl(340 10% 60%);
+  --accent: hsl(340 25% 94%);
+  --accent-foreground: hsl(240 5.9% 10%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(340 25% 90%);
+  --input: hsl(340 25% 90%);
+  --ring: hsl(315 21% 8%);
+  --chart-1: hsl(12 76% 61%);
+  --chart-2: hsl(173 58% 39%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43 74% 66%);
+  --chart-5: hsl(27 87% 67%);
+  --radius: 0.6rem;
+  --sidebar-background: hsl(340 25% 98%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(340 20% 95%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(340 20% 90%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+.dark {
  --background: hsl(315 21% 8%);
  --foreground: hsl(0 0% 98%);
  --card: hsl(315 21% 8%);
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { ThemeProvider } from "@/components/theme-provider"

 import "./globals.css";
+import "./scrollbar.css";
+import SUPERCOMMAND from "@/components/SUPERCOMMAND";

 export const metadata: Metadata = {
  title: "남현석 | :two_hearts: imnya.ng",
@ -24,6 +26,7 @@ export default function RootLayout({
          disableTransitionOnChange
        >
          {children}
+          <SUPERCOMMAND />
        </ThemeProvider>
      </body>
    </html>
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -1,4 +1,5 @@
 import NeoFetch from "@/components/NeoFetch";
+import Projects from "@/components/Projects";
 import TimelineComponent from "@/components/timeline";
 import Top from "@/components/Top";

@ -8,15 +9,15 @@ export default function Home() {
      <Top />
      <section id="terminal" className="h-screen">
        <NeoFetch />
-        <div className="px-12">
+        <div className="px-12 mt-8">
          <h1 className="text-2xl font-bold mb-4 w-full">💕 About</h1>
-          <p>초등학교 시절 운영체제에 흥미를 느껴 컴퓨터를 시작했고, 이후 프로그래밍에 관심을 갖게 되었습니다.</p>
-          <p>초등학교 4학년 때 Python으로 프로그래밍을 시작했으며, 현재는 TypeScript를 주로 사용합니다.</p>
-          <p>최근에는 정보보안 분야 중 웹 해킹에 관심이 많습니다.</p>
+          <p>오직 <strong>호기심과 실행력</strong>으로만 성장해 온 <strong>개발자, 정보보안전문가</strong> 남현석입니다.</p>
+          <p><strong>초등학교 시절 운영체제</strong>에 흥미를 느껴 컴퓨터를 시작했고, 이후 프로그래밍에 관심을 갖게 되었습니다.</p>
+          <p><strong>초등학교 4학년 때 Python</strong>으로 프로그래밍을 시작했으며, 현재는 <strong>TypeScript</strong>를 주로 사용합니다.</p>
+          <p>최근에는 정보보안 분야 중 <strong>웹 해킹</strong>에 관심이 많습니다.</p>
          <br />
          <p>대표적인 프로젝트들은 아래와 같습니다.</p>
-          <a href="https://www.youtube.com/watch?v=XTdqpdTMZbw&list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD">Effect Playing Contest 2025 Broadcast Develop</a><br />
-          <a href="https://github.com/imnyang/today.isangjeong">today.isangjeong</a>
+          <Projects />
        </div>

        <TimelineComponent />
--- a/src/app/scrollbar.css
+++ b/src/app/scrollbar.css
@ -0,0 +1,26 @@
+/* from reset */
+::-webkit-scrollbar-track {
+    background: 0 0;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--muted-foreground);
+    border: 5px solid var(--background);
+    border-radius: 16px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--foreground);
+}
+
+/* ::-webkit-scrollbar:not(.highlighttable, .highlight table, .gist .highlight) {
+    background: var(--theme);
+}
+*/
+/* reset */
+::-webkit-scrollbar {
+    width: 19px;
+    height: 11px;
+}
+
+/* from PaperMod https://github.com/adityatelange/hugo-PaperMod/blob/c98a924842fc7ee0c14212c316c69ede3ad76ca3/assets/css/includes/scroll-bar.css */
--- a/src/components/NeoFetch.tsx
+++ b/src/components/NeoFetch.tsx
@ -8,19 +8,19 @@ export default function NeoFetch() {
  const wakaTimeData = useWakaTimeData();

  return (
-    <div>
+    <div className="w-full bg-[#191017] text-[#fcf8f9] font-[Google Sans Code] rounded-b-4xl">
      <div className="flex flex-col md:flex-row">
        <iframe
-          src="https://f.imnya.ng/.art.html"
-          className="border-0 w-[430px] h-[430px] scale-75"
+          src="/art.html"
+          className="border-0 min-w-[430px] min-h-[430px] scale-75"
        ></iframe>
-        <div className="px-12 md:py-12 text-lg font-mono">
+        <div className="px-12 md:py-12 text-lg">
          <a href="mailto:contact@imnya.ng" className="text-[#FFD7D7]">
-            imnyang<span className="text-foreground">@</span>adofai.gg
+            imnyang<span className="text-[#fcf8f9]">@</span><a href="https://adofai.gg">adofai.gg</a>
          </a>
          <p>----------</p>

-          <p className="text-foreground">
+          <p>
            <span className="text-[#FFD7D7]">Uptime</span>:{" "}
            {(() => {
              const startDate = new Date("2010-11-08T00:00:00+09:00");
@ -39,12 +39,12 @@ export default function NeoFetch() {
            })()}
          </p>

-          <p className="text-foreground">
+          <p>
            <span className="text-[#FFD7D7]">Experience</span>:{" "}
            {Object.values(events).flat().length}
          </p>

-          <p className="text-foreground">
+          <p>
            <span className="text-[#FFD7D7]">WakaTime</span>:{" "}
            {wakaTimeData?.data?.total_seconds_including_other_language
              ? (() => {
@ -59,7 +59,7 @@ export default function NeoFetch() {
              : "N/A"}
          </p>

-          <p className="text-foreground">
+          <p>
            <span className="text-[#FFD7D7]">Most used Language</span>:{" "}
            {wakaTimeData?.data?.languages[0]?.name || "N/A"}{" "}
            {wakaTimeData?.data?.languages[0]?.total_seconds
@ -79,29 +79,29 @@ export default function NeoFetch() {
            <span className="text-[#FFD7D7]">Terminal</span>: {ipData}
          </p>

-          <p className="text-foreground">
+          <p>
            <span className="text-[#FFD7D7]">Locale</span>: ko_KR.UTF-8
          </p>

          <br />
-          <div id="color" className="grid grid-cols-8 w-fit">
-            <p className="bg-background w-8">⠀⠀</p>
-            <p className="bg-[#f38ba8] w-8">⠀⠀</p>
-            <p className="bg-[#a6e3a1] w-8">⠀⠀</p>
-            <p className="bg-[#f9e2af] w-8">⠀⠀</p>
-            <p className="bg-[#89b4fa] w-8">⠀⠀</p>
-            <p className="bg-[#f5c2e7] w-8">⠀⠀</p>
-            <p className="bg-[#94e2d5] w-8">⠀⠀</p>
-            <p className="bg-muted-foreground w-8">⠀⠀</p>
+          <div id="color" className="grid grid-cols-8 w-fit pb-8">
+            <div className="bg-[#191017] min-w-8">　</div>
+            <div className="bg-[#f38ba8] min-w-8"></div>
+            <div className="bg-[#a6e3a1] min-w-8"></div>
+            <div className="bg-[#f9e2af] min-w-8"></div>
+            <div className="bg-[#89b4fa] min-w-8"></div>
+            <div className="bg-[#f5c2e7] min-w-8"></div>
+            <div className="bg-[#94e2d5] min-w-8"></div>
+            <div className="bg-muted-foreground min-w-8"></div>

-            <p className="bg-[#45475a] w-8">⠀⠀</p>
-            <p className="bg-[#f0c0cd] w-8">⠀⠀</p>
-            <p className="bg-[#c3e9bf] w-8">⠀⠀</p>
-            <p className="bg-[#f0e0bf] w-8">⠀⠀</p>
-            <p className="bg-[#c3d9fd] w-8">⠀⠀</p>
-            <p className="bg-[#f8d2ee] w-8">⠀⠀</p>
-            <p className="bg-[#b1faee] w-8">⠀⠀</p>
-            <p className="bg-foreground w-8">⠀⠀</p>
+            <div className="bg-[#45475a] min-w-8">　</div>
+            <div className="bg-[#f0c0cd] min-w-8"></div>
+            <div className="bg-[#c3e9bf] min-w-8"></div>
+            <div className="bg-[#f0e0bf] min-w-8"></div>
+            <div className="bg-[#c3d9fd] min-w-8"></div>
+            <div className="bg-[#f8d2ee] min-w-8"></div>
+            <div className="bg-[#b1faee] min-w-8"></div>
+            <div className="bg-[#fcf8f9] min-w-8"></div>
          </div>
        </div>
      </div>
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@ -0,0 +1,55 @@
+import { SquareArrowOutUpRight } from 'lucide-react';
+
+{/* <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> */}
+
+const projects = [
+  {
+    name: 'EPC 2025 Broadcast Manager',
+    url: 'https://github.com/NY0510/slunchv2',
+    desc: '얼불춤 끼얏호우',
+    detail: '달성이 주관하고 ADOFAI.gg가 공동 주최하는 Effect Playing Contest 2025 방송 화면의 대부분의 기능을 개발하였습니다.',
+    tags: ['React', 'ElysiaJS'],
+  },
+  {
+    name: '@today.isangjeong',
+    url: 'https://instagram.com/today.isangjeong',
+    desc: '인스타에서 급식 공유를 간편하게',
+    detail: '오늘의 급식을 사진으로 공유하는 인스타그램 계정입니다. 매일 학교 급식을 자동으로 정리하여 제공합니다.',
+    tags: ['TypeScript', '자체 개발 Instagram Library', '@napi-rs/canvas'],
+  },
+];
+
+export default function Projects() {
+  return (
+    <section className="break-keep break-words w-full md:w-1/2">
+      <div className="space-y-8">
+        {projects.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">
+                {project.url ? (
+                  <a href={project.url} target="_blank" rel="noopener noreferrer" className="text-lg text-nowrap items-center gap-x-2 flex flex-row">
+                    {project.name}
+                    <SquareArrowOutUpRight size={16} />
+                  </a>
+                ) : (
+                  <span className="text-lg font-medium">{project.name}</span>
+                )}
+                <span className="text-sm text-muted-foreground text-nowrap">{project.desc}</span>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">{project.detail}</p>
+              </div>
+            </div>
+            <div className="flex gap-2 *:bg-muted *:px-2 *:py-0.5 *:rounded *:text-xs *:font-medium *:text-muted-foreground">
+              {project.tags.map((tag, i) => (
+                <span key={i}>{tag}</span>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
--- a/src/components/SUPERCOMMAND.tsx
+++ b/src/components/SUPERCOMMAND.tsx
@ -0,0 +1,90 @@
+"use client";
+import React from "react";
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+
+export default function SUPERCOMMAND() {
+    const [keySequence, setKeySequence] = React.useState("");
+    const [showDialog, setShowDialog] = React.useState(false);
+    const targetSequence = "MAGICALWORLD";
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+        // 영문자만 처리
+        if (event.key.length === 1 && /[a-zA-Z]/.test(event.key)) {
+            console.log(keySequence);
+            console.log(targetSequence);
+            console.log("Key pressed:", event.key);
+            setKeySequence(prev => {
+                const newSequence = prev + event.key;
+                console.log("New sequence:", newSequence);
+
+                // 목표 시퀀스와 정확히 일치하는지 확인 (대문자만)
+                if (newSequence === targetSequence) {
+                    console.log("Sequence matched!");
+                    setShowDialog(true);
+                    return "";
+                }
+
+                // 목표 시퀀스의 시작 부분과 일치하는지 확인 (대문자만)
+                if (targetSequence.startsWith(newSequence)) {
+                    return newSequence;
+                }
+
+                // 일치하지 않으면 현재 키부터 다시 시작
+                const restartSequence = event.key;
+                if (targetSequence.startsWith(restartSequence)) {
+                    return restartSequence;
+                }
+
+                // 완전히 초기화
+                return "";
+            });
+        } else {
+            // 특수키나 숫자가 입력되면 시퀀스 초기화
+            setKeySequence("");
+        }
+    };
+
+    React.useEffect(() => {
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, []);
+
+    return (
+        <Dialog open={showDialog} onOpenChange={setShowDialog}>
+            <DialogContent className="flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:top-3.5">
+                <DialogHeader className="contents space-y-0 text-left">
+                    <DialogTitle className="border-b px-6 py-4 text-base">
+                        ???
+                    </DialogTitle>
+                    <div className="overflow-y-auto">
+                        <DialogDescription asChild>
+                            <div className="px-6 py-4">
+                                <div className="[&_strong]:text-foreground space-y-4 [&_strong]:font-semibold pb-32">
+                                    <p style={{ whiteSpace: 'pre-line' }}>{`지금바로 윤회!`}
+                                    </p>
+                                </div>
+                            </div>
+                        </DialogDescription>
+                        <DialogFooter className="px-6 py-6 sm:justify-start fixed bottom-0 left-0 w-full bg-background/80 backdrop-blur-sm">
+                            <Button type="button" onClick={() => {
+                                document.cookie = "MagicalGirl=true; path=/";
+                                setShowDialog(false);
+                            }}>Okay</Button>
+                        </DialogFooter>
+                    </div>
+                </DialogHeader>
+            </DialogContent>
+        </Dialog>
+    );
+}
--- a/src/components/Top.tsx
+++ b/src/components/Top.tsx
@ -62,10 +62,10 @@ export default function Top() {
    <section
      id="top"
      className="snap-start h-screen w-full relative"
-      onWheel={(e) => {
-        e.preventDefault();
-        window.scrollBy(0, window.innerHeight * (e.deltaY > 0 ? 1 : -1));
-      }}
+      // onWheel={(e) => {
+      //   e.preventDefault();
+      //   window.scrollBy(0, window.innerHeight * (e.deltaY > 0 ? 1 : -1));
+      // }}
    >
      <Sidebar />
      <div
--- a/src/components/timeline.tsx
+++ b/src/components/timeline.tsx
@ -25,7 +25,7 @@ export default function TimelineComponent() {
  return (
    <div
      id="timeline"
-      className="w-full flex flex-col items-center justify-center px-12 mt-8"
+      className="w-full md:w-1/2 flex flex-col items-center justify-center px-12 mt-8"
    >
      <div className="w-full">
        <h1 className="text-2xl font-bold mb-4 w-full">🌠 수상 및 교육</h1>