diff --git a/package.json b/package.json index 11b68bb..04c0585 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 35eeac2..b92e86c 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/src/components/repos.tsx b/src/components/repos.tsx new file mode 100644 index 0000000..17c88fe --- /dev/null +++ b/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} + ) +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 90119a7..7b2b8c3 100644 --- a/src/index.css +++ b/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 { diff --git a/src/pages/Root.css b/src/pages/Root.css index c1c9ec8..32ea2d3 100644 --- a/src/pages/Root.css +++ b/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) { diff --git a/src/pages/Root.tsx b/src/pages/Root.tsx index 26e1e73..9ef45d3 100644 --- a/src/pages/Root.tsx +++ b/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() {

/?no_hair

{/* /?no_ear */} -

- imnyang +

+ imnyang

-
+

{window.innerWidth <= 768 && ( - Toss + )} - Github - Mail - Instagram - X + + + + +

🖥️ Software Engineer @@ -64,7 +68,7 @@ function Root() {
- 🤔 About + Repos 📝 Blog 🌈 Timeline
@@ -76,7 +80,7 @@ function Root() {