feat: enhance styling and layout with new global styles, scrollbar customization, and updated content

- Added Google Sans Code font to globals.css for improved typography.
- Introduced new CSS variables for theming in globals.css, enhancing dark mode support.
- Updated layout.tsx to include custom scrollbar styles from scrollbar.css.
- Modified page.tsx to improve the "About" section with more engaging content.
- Refactored NeoFetch component for better styling and layout consistency.
- Commented out scroll behavior in Top component for smoother navigation.
- Added new art.html file for visual representation in the NeoFetch component.

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%);

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import "./scrollbar.css";
 
 export const metadata: Metadata = {
   title: "남현석 | :two_hearts: imnya.ng",

src/app/page.tsx

@@ -8,11 +8,12 @@ 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/playlist?list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD">Effect Playing Contest 2025 Broadcast Develop</a><br />

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 */

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]">
       <div className="flex flex-col md:flex-row">
         <iframe
-          src="https://f.imnya.ng/.art.html"
+          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 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>

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