80 lines
No EOL
3.1 KiB
TypeScript
80 lines
No EOL
3.1 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
import { useLocation, Link } from 'react-router-dom';
|
||
import './Root.css';
|
||
|
||
function Root() {
|
||
const location = useLocation();
|
||
const [imageSrc, setImageSrc] = useState('https://f.imnyang.xyz/profile/imnyang.webp');
|
||
const [gotoHref, setGotoHref] = useState('/');
|
||
useEffect(() => {
|
||
const queryParams = new URLSearchParams(location.search);
|
||
if (queryParams.has('kawaii')) {
|
||
setImageSrc('https://f.imnyang.xyz/profile/magic_imnyang.webp');
|
||
setGotoHref('/');
|
||
} else {
|
||
setImageSrc('https://f.imnyang.xyz/profile/imnyang.webp');
|
||
setGotoHref('/?kawaii');
|
||
}
|
||
if (queryParams.has('no_hair') && queryParams.has("no_ear")) {
|
||
setImageSrc('https://f.imnyang.xyz/profile/no_ear_no_long_hair.png');
|
||
} else if (queryParams.has('no_ear')) {
|
||
setImageSrc('https://f.imnyang.xyz/profile/no_ear.png');
|
||
} else if (queryParams.has('no_hair')) {
|
||
setImageSrc('https://f.imnyang.xyz/profile/no_hair.avif');
|
||
}
|
||
|
||
}, [location.search]);
|
||
|
||
return (
|
||
<div className='App'>
|
||
<div className='container'>
|
||
<div className='left'>
|
||
<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>
|
||
|
||
<div style={{color: 'black'}}>
|
||
<p style={{textAlign: 'left'}}>
|
||
🖥️ Software Engineer
|
||
<br/>
|
||
🎨 Team. <a href='https://sqlare.com'>Sqlare</a>
|
||
<br/><br/>
|
||
📚 Middle School Student in South Korea
|
||
<br/>
|
||
<br/>
|
||
<p style={{color: 'transparent'}}>Enter Furry.</p>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div className='right'>
|
||
<div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
|
||
<a href='https://github.com/imnyang/imnyang'>🤔 About</a>
|
||
<a href='https://blog.imnyang.xyz'>📝 Blog</a>
|
||
<Link to="/timeline">🌈 Timeline</Link>
|
||
</div>
|
||
<div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
|
||
<a href='https://github.com/imnyang'>🐈⬛ Github</a>
|
||
<a href="mailto:me@imnyang.xyz">📬 Mail</a>
|
||
<a href='https://instagram.com/not.furry_'>📸 Instagram</a>
|
||
<a href='https://x.com/mahiro_me'>🐦 X</a>
|
||
</div>
|
||
<div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
|
||
<p style={{color: 'white'}}>Project</p>
|
||
</div>
|
||
<div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
|
||
<a href='https://instagram.com/isangjeong.today'>🥕 isangjeong.today</a>
|
||
<a href='https://github.com/imnyang/FakeAlyac'>💊 FakeAlyac</a>
|
||
<a hidden href='https://qloat.com'>🗨️ Qloat</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Root; |