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