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.
This commit is contained in:
암냥 2025-10-26 20:31:38 +09:00
commit 10bf4378b6
No known key found for this signature in database
7 changed files with 220 additions and 33 deletions

122
public/art.html Normal file
View file

@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="theme-color" content="#0C0C0C">
<meta name="date" content="2025-10-21T13:11:07.098Z">
<link href="https://fonts.cdnfonts.com/css/cascadia-code" rel="stylesheet">
<title>imnyang</title>
<style>
:root {
--color-primary-light: #FFD7D7;
--color-secondary-light: #EEEEEE;
--color-tertiary-light: #FFFFFF;
--color-quaternary-light: #E4E4E4;
--color-quinary-light: #DADADA;
--color-senary-light: #D7D7D7;
--color-septenary-light: #D0D0D0;
--color-text: #fcf8f9;
--background: #191017;
}
@media (prefers-color-scheme: light) {
:root {
--color-primary-light: #FFD7D7;
--color-secondary-light: #EEEEEE;
--color-tertiary-light: #FFFFFF;
--color-quaternary-light: #E4E4E4;
--color-quinary-light: #DADADA;
--color-senary-light: #D7D7D7;
--color-septenary-light: #D0D0D0;
--color-text: #fcf8f9;
--background: #191017;
}
}
* {
font-variant-ligatures: none;
font-feature-settings: 'liga' 0, 'clig' 0;
}
html, body {
background: var(--background);
color: var(--color-text);
margin: 0;
}
pre {
font-family: 'Cascadia Code', sans-serif;
font-size: 4pt;
line-height: 1.2;
margin: 0px 0;
}
</style>
</head>
<body><pre><span style="color: var(--color-primary-light);"> w _gggggggggggggg ,ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
,g@@@@@@@@@@@@@@@@@ ,@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@@@&apos;,@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@@? @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@P @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@ !@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@ P&quot;&quot;%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@@ ,@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@| @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@P &apos; @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@PQ@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@{ /@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@| @@@@ [@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@g .@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@; @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@@ [@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@ .@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ .@@@ {@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ |@@1 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@@ |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ [@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@@; @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@ [@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@@@ &apos;@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@N @ ! @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@@@</span><span style="color: var(--color-secondary-light);">: </span><span style="color: var(--color-primary-light);">9@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@| @j |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@@W @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ |@F @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@@ </span><span style="color: var(--color-tertiary-light);">/@ </span><span style="color: var(--color-primary-light);">Q@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@ _ @B@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@@&apos;</span><span style="color: var(--color-tertiary-light);">,@@@ </span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@| @F @@, &apos;@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@W </span><span style="color: var(--color-tertiary-light);">@@@@@ </span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ /@@@L @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@@ </span><span style="color: var(--color-tertiary-light);">{@@@@@p </span><span style="color: var(--color-primary-light);">`@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ # @@@@@L @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@@ </span><span style="color: var(--color-tertiary-light);">/@@@@@@@a </span><span style="color: var(--color-primary-light);">`@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&apos; T +</span><span style="color: var(--color-tertiary-light);">a</span><span style="color: var(--color-primary-light);">T@@@@L t@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@@&apos;</span><span style="color: var(--color-tertiary-light);">,@@@@@@@@@\ .</span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ </span><span style="color: var(--color-secondary-light);">, ,</span><span style="color: var(--color-tertiary-light);">,@@_</span><span style="color: var(--color-primary-light);">Q@@@b &apos;@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@&apos;</span><span style="color: var(--color-tertiary-light);">,@@@@@@@@@@@, \</span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@F </span><span style="color: var(--color-secondary-light);">&apos; F</span><span style="color: var(--color-tertiary-light);">@@@@@_</span><span style="color: var(--color-primary-light);">@@@@ %@@@@D&quot; [@@@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@ </span><span style="color: var(--color-tertiary-light);">,@@@@@@@@@@@@@, </span><span style="color: var(--color-primary-light);">Q@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ </span><span style="color: var(--color-secondary-light);">/</span><span style="color: var(--color-tertiary-light);">@@@@@@@@_</span><span style="color: var(--color-primary-light);">0@@</span><span style="color: var(--color-secondary-light);">. </span><span style="color: var(--color-primary-light);">__g@@@@D</span><span style="color: var(--color-tertiary-light);">,</span><span style="color: var(--color-primary-light);">[@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@ </span><span style="color: var(--color-tertiary-light);">_@@@@@@@@@@@@@@@, </span><span style="color: var(--color-primary-light);">[@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@? </span><span style="color: var(--color-tertiary-light);">_@@@@@@@@B&gt;&quot; ___ </span><span style="color: var(--color-primary-light);">&apos;@@B&gt;</span><span style="color: var(--color-tertiary-light);">_g@@</span><span style="color: var(--color-primary-light);">!@@@@@@@@@@@@@@@@@@@g
[@@@@@@@F </span><span style="color: var(--color-tertiary-light);">_________ &quot;&quot;&quot;=4B@, </span><span style="color: var(--color-primary-light);">\@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&quot;+@@@@@@@@@ </span><span style="color: var(--color-tertiary-light);">,@@B=&quot; __g@@@@@@@a \@@@@@@L</span><span style="color: var(--color-primary-light);">T@@@@@@@@@@@@@@@@@@g
[@@@@@@D </span><span style="color: var(--color-tertiary-light);">/@@@@@@@@@@@@@@@@gg__ </span><span style="color: var(--color-primary-light);">&quot;&quot;=B@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g____ </span><span style="color: var(--color-tertiary-light);">__~gW@@@@@@@@@@@@@@@_ &quot;@@@@@@</span><span style="color: var(--color-primary-light);">&apos;@@@@@@@@@@@@@@@@@g
[@@@@@F </span><span style="color: var(--color-tertiary-light);">g@@@@@@@@@@@@@@@@@@@@@a a </span><span style="color: var(--color-primary-light);">-ggp___ &quot;&lt;4@@@@@@@@_g &quot;@@@@@@@@@@@@@@@@@@@@@@@@@@@W </span><span style="color: var(--color-tertiary-light);">@@@@@@@@@@@@@@@@@@@@@@g_ &quot;4@@@L</span><span style="color: var(--color-primary-light);">t@@@@@@@@@@@@@@@g
[@@@@ </span><span style="color: var(--color-tertiary-light);">_@@@@@@@@@@@@@@@@@@@@@@@@@ t,</span><span style="color: var(--color-primary-light);">&apos;@@@@@@@@g~____/@@@@@_ _, @@@@@@@@@@@@@@@@@@@@@@@ ;@</span><span style="color: var(--color-tertiary-light);">g@@@@@@@@@@@@@@@@@@@@@@@@@g_ -___ </span><span style="color: var(--color-primary-light);">&quot;&quot;[@@@@@@@@@g
[BP* </span><span style="color: var(--color-tertiary-light);">&quot;&quot; `&quot;&quot;&quot;=BB@@@,&apos;a </span><span style="color: var(--color-primary-light);">T@@@@@@@@@@@@@@@@@@@ [@_@@@@@@@@@@@@@@@@@@@@@@ @</span><span style="color: var(--color-tertiary-light);">,@@@@@@@@@@@@@@@@@@@BD=&quot;&quot;&quot; &apos;&apos;&lt;B@@_</span><span style="color: var(--color-primary-light);">%@@@@@@@@@@@@g
</span><span style="color: var(--color-tertiary-light);">&quot;&quot;&quot; _gg@@@@@@@@mmgg~______ &lt;. </span><span style="color: var(--color-primary-light);">Q@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@D @/</span><span style="color: var(--color-tertiary-light);">@@@@@@@@@@@@@D&gt;&quot; _ ___g@@@@@@@@@@@@_</span><span style="color: var(--color-primary-light);">+@@@@@@@@@@g
</span><span style="color: var(--color-tertiary-light);">_ </span><span style="color: var(--color-secondary-light);">_ </span><span style="color: var(--color-tertiary-light);">-~---_______ &quot;&quot;&quot;=. , </span><span style="color: var(--color-primary-light);">&apos;&lt;8@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&quot; @F</span><span style="color: var(--color-tertiary-light);">@@@@@@@@@D&quot; __+&quot; __+@@D&gt;&quot;&quot; ____.--- `g@@g_</span><span style="color: var(--color-primary-light);">&quot;8@@@@@@g
</span><span style="color: var(--color-tertiary-light);">,____~_~~~gggg~______ -.._ &quot;&quot;&lt;0B@gg, </span><span style="color: var(--color-secondary-light);">_ </span><span style="color: var(--color-primary-light);">&apos;8@@@@@@@@@@@@PQ@@@@@@@@@@@@@@@@P </span><span style="color: var(--color-tertiary-light);">/ </span><span style="color: var(--color-primary-light);">@F</span><span style="color: var(--color-tertiary-light);">@@@@@@@&quot; ,*&apos; _o@B&gt;&quot; __wr&gt;&quot; __..-===0@@@@@@@@@@g__</span><span style="color: var(--color-secondary-light);">-</span><span style="color: var(--color-primary-light);">&quot;&quot;&quot;
</span><span style="color: var(--color-tertiary-light);">&apos;&gt;&quot;&quot;&quot; &quot; </span><span style="color: var(--color-primary-light);">&gt;, &lt;@@@@@@@@@@ [@@@@@@@@@@@@@@P </span><span style="color: var(--color-secondary-light);">&quot; </span><span style="color: var(--color-primary-light);">@&apos;</span><span style="color: var(--color-tertiary-light);">@@@@@P &apos;__@@D&quot; .-&apos; ... </span><span style="color: var(--color-secondary-light);">__</span><span style="color: var(--color-tertiary-light);">4@@@@@@@@@@@@@@g
;g@@@@@@g </span><span style="color: var(--color-secondary-light);">!</span><span style="color: var(--color-quinary-light);">/</span><span style="color: var(--color-senary-light);">ggggg~_____</span><span style="color: var(--color-quinary-light);">---&quot;-</span><span style="color: var(--color-senary-light);">_</span><span style="color: var(--color-quinary-light);">&quot;. </span><span style="color: var(--color-tertiary-light);">ggg_____ ,</span><span style="color: var(--color-primary-light);">`Q@@@@@@@ [@@@@@@@D @@@@@@ ,@</span><span style="color: var(--color-tertiary-light);">_@@@@F _g@@BP&apos; ..</span><span style="color: var(--color-secondary-light);">_</span><span style="color: var(--color-tertiary-light);">~&apos;</span><span style="color: var(--color-secondary-light);">-~~&quot;</span><span style="color: var(--color-primary-light);">_ggg@B@W@@p</span><span style="color: var(--color-tertiary-light);">&apos;@@@@@@@@@@@@g
[@@@@@@@@ ; </span><span style="color: var(--color-quinary-light);">&apos;</span><span style="color: var(--color-senary-light);">@@@@@@@@@@@@@@@@@@1</span><span style="color: var(--color-quaternary-light);">! </span><span style="color: var(--color-tertiary-light);">@@@@@@@ </span><span style="color: var(--color-senary-light);">&apos;p_</span><span style="color: var(--color-quinary-light);">. </span><span style="color: var(--color-tertiary-light);">-_ </span><span style="color: var(--color-primary-light);">P=B@@) @@@@@@P @@@@@P _P</span><span style="color: var(--color-tertiary-light);">o@@@@&quot; o@D&quot; ___g@@ </span><span style="color: var(--color-primary-light);">_g@@@=</span><span style="color: var(--color-secondary-light);">_~gg_~</span><span style="color: var(--color-primary-light);">_@@@@@@@@p</span><span style="color: var(--color-tertiary-light);">&apos;@@@@@@@@@@@g
[@@@@@@@@ &apos; </span><span style="color: var(--color-quaternary-light);">&apos;</span><span style="color: var(--color-senary-light);">&apos;@@@@@@@@@@@@@@@@@@</span><span style="color: var(--color-quinary-light);">! </span><span style="color: var(--color-tertiary-light);">!@@@@@g </span><span style="color: var(--color-septenary-light);">.</span><span style="color: var(--color-senary-light);">, </span><span style="color: var(--color-tertiary-light);">@@@@@gg___ </span><span style="color: var(--color-primary-light);">.@@@@P ,@@@@B _@@gggg </span><span style="color: var(--color-tertiary-light);">__g@@@@@@@@</span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@@@@@@ </span><span style="color: var(--color-tertiary-light);">@@@@@@@@@@@g
[@@@@@@@@@ </span><span style="color: var(--color-secondary-light);">&apos;</span><span style="color: var(--color-quinary-light);">&apos;</span><span style="color: var(--color-senary-light);">@@@@@@@@@@@@@@@@@@,</span><span style="color: var(--color-quaternary-light);">, </span><span style="color: var(--color-tertiary-light);">@@@@@@ </span><span style="color: var(--color-senary-light);">&apos;;</span><span style="color: var(--color-septenary-light);">_g</span><span style="color: var(--color-senary-light);">.</span><span style="color: var(--color-quaternary-light);">: </span><span style="color: var(--color-tertiary-light);">@@@@@@@@@F </span><span style="color: var(--color-primary-light);">@@@F _@&apos;,@@@P _@@@@@@@9 , p</span><span style="color: var(--color-tertiary-light);">&quot;@@@@@@@@@@@@</span><span style="color: var(--color-primary-light);">9@@@@@@@@@@@@@@@@@@@@@/</span><span style="color: var(--color-tertiary-light);">g@@@@@@@@@@@g
[@@@@@@@@@, </span><span style="color: var(--color-quaternary-light);">&apos;</span><span style="color: var(--color-senary-light);">\@@@@@@@@@@@@@@@@@@</span><span style="color: var(--color-quinary-light);">, </span><span style="color: var(--color-tertiary-light);">{@@@@@ </span><span style="color: var(--color-quinary-light);">{</span><span style="color: var(--color-senary-light);">B </span><span style="color: var(--color-septenary-light);">0,</span><span style="color: var(--color-quinary-light);">; </span><span style="color: var(--color-tertiary-light);">@@@@@@@F</span><span style="color: var(--color-secondary-light);">j </span><span style="color: var(--color-primary-light);">*D o@@ .@B&quot; _@@@@@@@@@@@@g__@</span><span style="color: var(--color-tertiary-light);">&apos;@@@@@@@@@@@L</span><span style="color: var(--color-primary-light);">Q@@@@@@@@@@@@@@@@@@F</span><span style="color: var(--color-tertiary-light);">_@@@@@@@@@@@@@g
[@@@@@@@@@@ </span><span style="color: var(--color-quinary-light);">&apos;</span><span style="color: var(--color-senary-light);">@@@@@@@@@@@@@@@@@@, </span><span style="color: var(--color-tertiary-light);">@@@@@ </span><span style="color: var(--color-quinary-light);">[</span><span style="color: var(--color-senary-light);">g</span><span style="color: var(--color-septenary-light);">-T]</span><span style="color: var(--color-quinary-light);">! </span><span style="color: var(--color-tertiary-light);">[@@@@@</span><span style="color: var(--color-primary-light);">/&apos; _@@@@ _ __@@@@@@@@@@@@@@@@@@@g</span><span style="color: var(--color-tertiary-light);">@@@@@@@@@@@@@_</span><span style="color: var(--color-primary-light);">&lt;@@@@@@@@@@B=&gt;&quot;</span><span style="color: var(--color-secondary-light);">~@g@@_</span><span style="color: var(--color-tertiary-light);">@@@@@@@@@@@g
[@@@@@@@@@@g </span><span style="color: var(--color-senary-light);">&apos;@@@@@@@@@@@@@@@@@@</span><span style="color: var(--color-quinary-light);">\ </span><span style="color: var(--color-tertiary-light);">{@@@@ </span><span style="color: var(--color-quinary-light);">&apos;</span><span style="color: var(--color-senary-light);">@@1</span><span style="color: var(--color-septenary-light);">+</span><span style="color: var(--color-senary-light);">, </span><span style="color: var(--color-tertiary-light);">&apos;@@@F</span><span style="color: var(--color-primary-light);">@@gg@@@@@P _@@@@@@@@@@@@@@@@@@@@@@@&apos;</span><span style="color: var(--color-tertiary-light);">@@@@@@@@@@@@@@@@@@@@@@@@@F</span><span style="color: var(--color-secondary-light);">$@@@@@@@@g</span><span style="color: var(--color-tertiary-light);">@@@@@@@@@@g
[@@@@@@@@@@@l </span><span style="color: var(--color-quaternary-light);">\</span><span style="color: var(--color-senary-light);">V@@@@@@@@@@@@@@@@@!</span><span style="color: var(--color-tertiary-light);">! @@@@ </span><span style="color: var(--color-quaternary-light);">&apos;</span><span style="color: var(--color-senary-light);">[@@@&apos;</span><span style="color: var(--color-secondary-light);">. </span><span style="color: var(--color-tertiary-light);">@@P</span><span style="color: var(--color-primary-light);">@@@@@@@@@@y@@@@@@@@@@@@@@@@@@@@@@@@D</span><span style="color: var(--color-tertiary-light);">g@@@@@@@@@@@@@@@@@@@@@@@@g</span><span style="color: var(--color-secondary-light);">j@@@@@@@@@@ </span><span style="color: var(--color-tertiary-light);">@@@@@@@@@g
[@@@@@@@@@@@@, </span><span style="color: var(--color-quinary-light);">&apos;</span><span style="color: var(--color-senary-light);">@@@@@@@@@BD=&lt;f&gt;&quot;</span><span style="color: var(--color-tertiary-light);">g@@L @@8 ggggg@g @@ </span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@F</span><span style="color: var(--color-tertiary-light);">@@@@@@@@@@@@@@@@@@@@@@@@@H </span><span style="color: var(--color-secondary-light);">]@@@@@@@@@@@</span><span style="color: var(--color-tertiary-light);">[@@@@@@@@g
[@@@@@@@@@@@@@ </span><span style="color: var(--color-quaternary-light);">&apos;</span><span style="color: var(--color-senary-light);">&apos;@B&quot;</span><span style="color: var(--color-tertiary-light);">__~g@@@@@@@@@@@@b &quot; {@@@@@@@ @@,</span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@P</span><span style="color: var(--color-tertiary-light);">_@@@@@@@@@@@@@@@@@@@@@@@@@W3</span><span style="color: var(--color-secondary-light);">:W@@@@@@@@@@@@,</span><span style="color: var(--color-tertiary-light);">@@@@@@@@g
[@@@@@@@@@@@@@@ 0@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@</span><span style="color: var(--color-primary-light);">&apos;@@@@@@@@@@@@@@@@@@@@@@@B=&quot;</span><span style="color: var(--color-tertiary-light);">_g@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g@</span><span style="color: var(--color-secondary-light);">[@@@@@@@@@@@@@</span><span style="color: var(--color-tertiary-light);">@@@@@@@@g
[@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g@@@@b</span><span style="color: var(--color-primary-light);">+@@@@@@@@@@@@@@&quot;</span><span style="color: var(--color-tertiary-light);">~g@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</span><span style="color: var(--color-secondary-light);">&apos;@@@@@@@@@@@@@</span><span style="color: var(--color-tertiary-light);">|@@@@@@@g
[@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g</span><span style="color: var(--color-primary-light);">&quot;&lt;4B@@@BP&quot;</span><span style="color: var(--color-tertiary-light);">o@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</span><span style="color: var(--color-secondary-light);">\@@@@@@@@@@@P</span><span style="color: var(--color-tertiary-light);">j@@@@@@@g
[@@@@@@@@@@@@@@@@@ &apos;@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g</span><span style="color: var(--color-secondary-light);">T@@@@@@@@@@</span><span style="color: var(--color-tertiary-light);">g@@@@@@@@g
[@@@@@@@@@@@@@@@@@@ &apos;@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@,</span><span style="color: var(--color-secondary-light);">@@@@@@@@@g</span><span style="color: var(--color-tertiary-light);">@@@@@@@@@g
[@@@@@@D&gt;&quot;&quot;&quot;&quot;9Q@@@@@ `@@@@@@@@@@B=*&quot;&quot; ___@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@BBBBBB@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@B</span><span style="color: var(--color-secondary-light);">&apos;@@@@@@@@@</span><span style="color: var(--color-tertiary-light);">]@@@@@@@@g
[@@@@&apos;</span><span style="color: var(--color-primary-light);">@R@@@@g</span><span style="color: var(--color-secondary-light);">\ </span><span style="color: var(--color-tertiary-light);">&quot;&quot;&quot;&quot;&quot; -~-`&quot;&quot; _____og@@@@@@@@@@@@@B&gt;&quot;&quot;&quot; </span><span style="color: var(--color-primary-light);">______~ggggggggg@@gg </span><span style="color: var(--color-tertiary-light);">T@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g_</span><span style="color: var(--color-secondary-light);">*B@@@P</span><span style="color: var(--color-tertiary-light);">_@@@@@@@@B&quot;
[@@D</span><span style="color: var(--color-secondary-light);">~ </span><span style="color: var(--color-primary-light);">_@@@@@@@_</span><span style="color: var(--color-secondary-light);">&lt;=====mnmmmmm==r~-=_</span><span style="color: var(--color-tertiary-light);">@@@@@@@@@@@@@@@@@@@@@@@ </span><span style="color: var(--color-primary-light);">_g@@@@@@@@@@@@@@@@@@@@@@@@@F</span><span style="color: var(--color-tertiary-light);">_@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@B&quot; </span><span style="color: var(--color-primary-light);">_og
</span><span style="color: var(--color-tertiary-light);">&apos;@P</span><span style="color: var(--color-primary-light);">_@W@@@@@@@@@@@@@PB+</span><span style="color: var(--color-secondary-light);">~gM@@@@@g_.+^g</span><span style="color: var(--color-tertiary-light);">t@@@@@@@@@@@@@@@@@@@@@ </span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@B====&gt;&quot; </span><span style="color: var(--color-tertiary-light);">_~@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@B&quot; ,oF</span><span style="color: var(--color-primary-light);">g@@g
</span><span style="color: var(--color-tertiary-light);">P</span><span style="color: var(--color-primary-light);">/@@@@@@@@@@@@@g </span><span style="color: var(--color-secondary-light);">-@@@@@M&quot;&quot;&quot; ._~</span><span style="color: var(--color-primary-light);">&quot;</span><span style="color: var(--color-secondary-light);">A8</span><span style="color: var(--color-primary-light);">_g</span><span style="color: var(--color-tertiary-light);">9@@@@@@@@@@@@@@@@@@@@ </span><span style="color: var(--color-primary-light);">9@@@@@@@@@@@@B&gt; </span><span style="color: var(--color-tertiary-light);">_o@@@W@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@P&apos; _gB&quot;</span><span style="color: var(--color-primary-light);">_@@@@g
</span><span style="color: var(--color-secondary-light);">&apos; </span><span style="color: var(--color-primary-light);">&lt;@@@@@@@@@@@@@</span><span style="color: var(--color-secondary-light);">&apos;&lt;</span><span style="color: var(--color-primary-light);">__ggW@@@@@@@@@@@@@</span><span style="color: var(--color-tertiary-light);">|@@@@@@@@@@@@@@@@@@@@,</span><span style="color: var(--color-secondary-light);">&apos;</span><span style="color: var(--color-primary-light);">&quot;8BBB==&quot;&quot; </span><span style="color: var(--color-tertiary-light);">__g@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@D&quot; _@@P</span><span style="color: var(--color-primary-light);">o@@@@@@@g
, </span><span style="color: var(--color-secondary-light);">&quot;</span><span style="color: var(--color-primary-light);">`t@@@@@@@@@@@@@@@@@@@@@@@@@@@@F</span><span style="color: var(--color-tertiary-light);">g@@@@@@@@@@@@@@@@@@@@@@ggggg@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@P&quot; </span><span style="color: var(--color-primary-light);">__g@@@@@@@@@@@@@g
!@@_</span><span style="color: var(--color-secondary-light);">.__ ;</span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@@@@@@@@@&quot;</span><span style="color: var(--color-tertiary-light);">g@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@+ _,</span><span style="color: var(--color-primary-light);">_o@@@@@@@@@@@@@@@@@@g
&apos;@@[</span><span style="color: var(--color-tertiary-light);">_</span><span style="color: var(--color-primary-light);">&lt;B@@@@@@@@@@@</span><span style="color: var(--color-secondary-light);">, </span><span style="color: var(--color-primary-light);">[@@@@@@B=&quot;</span><span style="color: var(--color-secondary-light);">s</span><span style="color: var(--color-tertiary-light);">_g@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@BBB==&gt;&quot;&quot;&quot;&quot;&quot;&quot;&quot;&quot;=0@@&quot; __@@F</span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@@@@g
[g &quot;@_</span><span style="color: var(--color-tertiary-light);">@@@@gp~</span><span style="color: var(--color-secondary-light);">&quot;</span><span style="color: var(--color-tertiary-light);">___</span><span style="color: var(--color-primary-light);">&quot;</span><span style="color: var(--color-secondary-light);">-</span><span style="color: var(--color-tertiary-light);">/ q___~ggg@@@B@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@B*&quot;&quot; _____go~+grqggggggggg~___ &quot;*F</span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@@@@@g
[@@@_ </span><span style="color: var(--color-secondary-light);">&apos;</span><span style="color: var(--color-tertiary-light);">&lt;@@@@@@@@@@@@,&apos;@@@@@@@@@&quot; @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@B=&quot; __~g@@@@@@@@@@@@@@| @@@@@@@@@@@@@@@@@g, </span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@g_</span><span style="color: var(--color-tertiary-light);">.@@@@@@@@@@@L`8@@@@@@P @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@B=&quot; __g@@@@@@@@@@@@@@@@BP&gt;&quot;</span><span style="color: var(--color-secondary-light);">_</span><span style="color: var(--color-tertiary-light);">\ .</span><span style="color: var(--color-secondary-light);">:@@@@@@@@g_</span><span style="color: var(--color-tertiary-light);">4@@@@@@ </span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@_</span><span style="color: var(--color-tertiary-light);">@@@@@@@@@@@@_ `&quot;&quot; __@@@@@@@@@@@@@@@@@@@@@@@@@@@@B&gt; g@@@@@@@@@@@@@B&gt;&quot;</span><span style="color: var(--color-secondary-light);">~g@@@@@@@@ </span><span style="color: var(--color-tertiary-light);">|</span><span style="color: var(--color-secondary-light);">[@@@@@@@@@@@L</span><span style="color: var(--color-tertiary-light);">@@@@@</span><span style="color: var(--color-primary-light);">.g@@@@@@@@@@@@@@@@@@@@@g
[@@@@@@@@@@@__ </span><span style="color: var(--color-tertiary-light);">&quot;&lt;B@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@D&quot; _g@@@ / @@@@@@B&gt;&quot;</span><span style="color: var(--color-secondary-light);">og@@@@@@@@@@@@@@@, </span><span style="color: var(--color-tertiary-light);">[</span><span style="color: var(--color-secondary-light);">@@@@@@@@@@@@@,</span><span style="color: var(--color-tertiary-light);">@@@@1</span><span style="color: var(--color-primary-light);">@@@@@@@@@@@@@@@@@@@@@@g
!BBBBBBBBBBBBBBB.</span><span style="color: var(--color-secondary-light);">.</span><span style="color: var(--color-tertiary-light);">. &quot;&quot;&quot;&quot;&quot;==4BBBBBBBBBBP&gt;&quot;D==4BBBBP .mBBBBBB&quot; BBBB&quot;</span><span style="color: var(--color-secondary-light);">oBBBBBBBBBBBBBBBBBBBBB </span><span style="color: var(--color-tertiary-light);">&quot;</span><span style="color: var(--color-secondary-light);">BBBBBBBBBBBBBh</span><span style="color: var(--color-tertiary-light);">BBBBBa</span><span style="color: var(--color-primary-light);">BBBBBBBBBBBBBBBBBBBBBN
</span></pre></body>
</html>

View file

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

View file

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

View file

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

26
src/app/scrollbar.css Normal file
View file

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

View file

@ -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>

View file

@ -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