asdfasdf
This commit is contained in:
imnyang
parent
24f2988c76
commit
84ce41a32f
6 changed files with 89 additions and 19 deletions
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