asdfasdf

package.json

@@ -20,6 +20,7 @@
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@nextui-org/kbd": "^2.0.33",
     "@nextui-org/react": "^2.4.6",
+    "@tippyjs/react": "^4.2.6",
     "autoprefixer": "^10.4.20",
     "framer-motion": "^11.3.21",
     "highlight.js": "^11.10.0",
@@ -32,7 +33,8 @@
     "rehype-highlight": "^7.0.0",
     "styled-components": "^6.1.12",
     "tailwind": "^4.0.0",
-    "tailwindcss": "^3.4.7"
+    "tailwindcss": "^3.4.7",
+    "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

pnpm-lock.yaml

@@ -35,6 +35,9 @@ importers:
       '@nextui-org/react':
         specifier: ^2.4.6
         version: 2.4.6(@types/react@18.3.3)(framer-motion@11.3.27(@emotion/is-prop-valid@1.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.10)
+      '@tippyjs/react':
+        specifier: ^4.2.6
+        version: 4.2.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.41)
@@ -74,6 +77,9 @@ importers:
       tailwindcss:
         specifier: ^3.4.7
         version: 3.4.10
+      tippy.js:
+        specifier: ^6.3.7
+        version: 6.3.7
     devDependencies:
       '@types/react':
         specifier: ^18.3.3
@@ -1808,6 +1814,12 @@ packages:
   '@swc/types@0.1.12':
     resolution: {integrity: sha512-wBJA+SdtkbFhHjTMYH+dEH1y4VpfGdAc2Kw/LK09i9bXd/K6j6PkDcFCEzb6iVfZMkPRrl/q0e3toqTAJdkIVA==}
 
+  '@tippyjs/react@4.2.6':
+    resolution: {integrity: sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -3722,6 +3734,9 @@ packages:
   timer2@1.0.0:
     resolution: {integrity: sha512-UOZql+P2ET0da+B7V3/RImN3IhC5ghb+9cpecfUhmYGIm0z73dDr3A781nBLnFYmRzeT1AmoT4w9Lgr8n7n7xg==}
 
+  tippy.js@6.3.7:
+    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
+
   to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -6514,6 +6529,12 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
+  '@tippyjs/react@4.2.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      tippy.js: 6.3.7
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 0.7.34
@@ -8846,6 +8867,10 @@ snapshots:
 
   timer2@1.0.0: {}
 
+  tippy.js@6.3.7:
+    dependencies:
+      '@popperjs/core': 2.11.8
+
   to-fast-properties@2.0.0: {}
 
   to-regex-range@5.0.1:

src/components/repos.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+export default function Repos() {
+    const [userInfo, setUserInfo] = useState({ public_repos: 0, followers: 0 });
+
+    useEffect(() => {
+      async function fetchUserInfo() {
+        try {
+          const response = await fetch("https://api.github.com/users/imnyang");
+          const data = await response.json();
+          setUserInfo({ public_repos: data.public_repos, followers: data.followers });
+        } catch (error) {
+          console.error("Error fetching user info:", error);
+        }
+      }
+  
+      fetchUserInfo();
+    }, []);
+
+    return (
+        <>{userInfo.public_repos}</>
+    )
+}

src/index.css

@@ -9,7 +9,6 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
   background-color: #41444B;
 
@@ -21,11 +20,11 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: #ffe7fb;
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: #ffe7fb;
 }
 
 body {
@@ -36,7 +35,7 @@ body {
   flex-direction: row;
 
   color: white;
-  background-color: #101010;
+  background-color: #373236;
 }
 
 h1 {
@@ -56,7 +55,7 @@ button {
   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  border-color: #ffe7fb;
 }
 button:focus,
 button:focus-visible {

src/pages/Root.css

@@ -5,7 +5,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  background-color: #101020;
+  background-color: #262225;
   color: black;
 }
 
@@ -18,10 +18,27 @@
   justify-content: center;
 }
 
+.profile {
+    border-radius: 100%;
+}
+
+.profile:hover {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .left {
   width: 40%;
   height: 100%;
-  background-color: #DFC7D4;
+  background-color: #373236;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -38,7 +55,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: #101020;
+  background-color: #262225;
 }
 
 @media screen and (max-width: 768px) {

src/pages/Root.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useState } from 'react';  
 import { useLocation, Link } from 'react-router-dom';
+import Repos from '../components/repos';
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css'
 import './Root.css';
 
 function Root() {
@@ -33,20 +36,21 @@ function Root() {
           <p style={{color: 'transparent'}}>/?no_hair</p>
           {/* /?no_ear */}
           <img src={imageSrc} width={256} className='profile' />
-          <h1 style={{color: '#241f22', fontSize: 60, margin: 0, fontWeight: '700'}}>
+          <h1 style={{color: '#ffe7fb', fontSize: 60, margin: 0, fontWeight: '700'}}>
-            <Link style={{color: '#241f22', fontSize: 60, margin: 0, fontWeight: '700'}} to={gotoHref}>imnyang</Link>
+            <Link style={{color: '#ffe7fb', fontSize: 60, margin: 0, fontWeight: '700'}} to={gotoHref}>imnyang</Link>
           </h1>
 
-          <div style={{color: 'black'}}>
+          <div style={{color: 'white'}}>
             <p style={{textAlign: 'left'}}>
                 <div style={{display: 'flex', flexDirection: 'row', gap: 25, alignItems: 'center', justifyContent: 'center'}}>
                 {window.innerWidth <= 768 && (
-                  <a href='supertoss://send?bank=토스뱅크&accountNo=100079352039&origin=qr' style={{ color: 'black', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}><i className="fa-solid fa-circle-dollar-to-slot" style={{ fontSize: '24px' }} />Toss</a>
+                  <Tippy content="Toss" placement="bottom"><a href='supertoss://send?bank=토스뱅크&accountNo=100079352039&origin=qr' style={{ color: '#b2a1af', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}><i className="fa-solid fa-circle-dollar-to-slot" style={{ fontSize: '24px' }} /></a></Tippy>
                 )}
-                <a href='https://github.com/imnyang' style={{ color: 'black', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}><i className="fa-brands fa-github" style={{ fontSize: '24px' }} />Github</a>
+                
-                <a href="mailto:me@imnyang.xyz" style={{ color: 'black', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}><i className="fa-solid fa-at" style={{ fontSize: '24px' }} />Mail</a>
+                <Tippy content="Github" placement="bottom"><a href='https://github.com/imnyang' style={{ color: '#b2a1af', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}><i className="fa-brands fa-github" style={{ fontSize: '24px' }} /></a></Tippy>
-                <a href='https://instagram.com/not.furry_' style={{ color: 'black', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}><i className="fa-brands fa-instagram" style={{ fontSize: '24px' }} />Instagram</a>
+                <Tippy content="Mail" placement="bottom"><a href="mailto:me@imnyang.xyz" style={{ color: '#b2a1af', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}><i className="fa-solid fa-at" style={{ fontSize: '24px' }} /></a></Tippy>
-                <a href='https://x.com/mahiro_me' style={{ color: 'black', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}><i className="fa-brands fa-x-twitter" style={{ fontSize: '24px' }} />X</a>
+                <Tippy content="Instagram" placement="bottom"><a href='https://instagram.com/not.furry_' style={{ color: '#b2a1af', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}><i className="fa-brands fa-instagram" style={{ fontSize: '24px' }} /></a></Tippy>
+                <Tippy content="X" placement="bottom"><a href='https://x.com/mahiro_me' style={{ color: '#b2a1af', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}><i className="fa-brands fa-x-twitter" style={{ fontSize: '24px' }} /></a></Tippy>
                 </div>
               <br/>
               🖥️ Software Engineer
@@ -64,7 +68,7 @@ function Root() {
 
         <div className='right'>       
           <div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
-            <a href='https://github.com/imnyang/imnyang'>🤔 About</a>
+            <a href='https://github.com/imnyang'><i className="fa-brands fa-github" style={{ color: 'white', paddingRight: 8 }} /><Repos /> Repos</a>
             <a href='https://blog.imnyang.xyz'>📝 Blog</a>
             <Link to="/timeline">🌈 Timeline</Link>
           </div>
@@ -76,7 +80,7 @@ function Root() {
             <a hidden href='https://qloat.com'>🗨️ Qloat</a>
           </div>
           <div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
-            <a href='https://instagram.com/isangjeong.today'>🥕 isangjeong.today</a>
+            <a href='https://instagram.com/today.isangjeong'>🥕 isangjeong.today</a>
             <a href='https://github.com/imnyang/FakeAlyac'>💊 FakeAlyac</a>
           </div>
         </div>