asdfasdf
This commit is contained in:
imnyang
parent
24f2988c76
commit
84ce41a32f
6 changed files with 89 additions and 19 deletions
|
|
@ -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",
|
||||
|
|
|
|||
25
pnpm-lock.yaml
generated
25
pnpm-lock.yaml
generated
|
|
@ -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:
|
||||
|
|
|
|||
23
src/components/repos.tsx
Normal file
23
src/components/repos.tsx
Normal file
|
|
@ -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}</>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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'}}>
|
||||
<Link style={{color: '#241f22', fontSize: 60, margin: 0, fontWeight: '700'}} to={gotoHref}>imnyang</Link>
|
||||
<h1 style={{color: '#ffe7fb', fontSize: 60, margin: 0, fontWeight: '700'}}>
|
||||
<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>
|
||||
<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>
|
||||
<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="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>
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue