imnyang/imnya.ng
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Development Commit

Browse source
This commit is contained in:
imnyang 2024-08-15 09:18:17 +09:00
commit 251b71787b
8 changed files with 87 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/pages/Root.tsx
View file

@ -1,12 +1,9 @@
import { useEffect, useState, useMemo } from 'react';
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import './Root.css';
import Help from '../component/help';
function Root() {
const location = useLocation();
const name: string[] = useMemo(() => ['imnyang', '아임냥', '암냥', '임냥', '@not.furry_', '@imnyang', '@mahiro_me'], []);
const [nameIndex, setNameIndex] = useState(0);
const [imageSrc, setImageSrc] = useState('https://f.imnyang.xyz/profile/imnyang.webp');
useEffect(() => {
@ -18,43 +15,39 @@ function Root() {
}
}, [location.search]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
console.log(`Key: ${event.key} with keycode ${event.keyCode} has been pressed`);
if (event.key === 'l') {
console.log('Change My Name');
setNameIndex((prevIndex) => (prevIndex + 1) % name.length);
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [name.length, name]);
return (
<div className='App'>
<img src={imageSrc} width={256} className='profile' />
<h1 style={{color: '#fadfee', fontSize: 60, margin: 0}}>
{name[nameIndex]}
</h1>
<div className='key_container'>
<p>Press </p>
<p style={{fontWeight: 800}}>F1</p>
<p> and Check Help</p>
<div className='container'>
<div className='left'>
<img src={imageSrc} width={256} className='profile' />
<h1 style={{color: '#241f22', fontSize: 60, margin: 0}}>
imnyang
</h1>
<div>
<p style={{textAlign: 'left'}}>
🖥️ Software Engineer
<br/>
🎨 UI / UX Designer in <a href='https://sqlare.com'>Sqlare</a>
<br/><br/>
📚 Middle School Student in South Korea
</p>
</div>
</div>
<div className='right'>
<div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
<a href="mailto:me@imnyang.xyz">📬 Mail</a>
<a href='https://github.com/imnyang'>🐈‍⬛ Github</a>
<a href='https://blog.imnyang.xyz'>📝 Blog</a>
</div>
<div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
<a href="/timeline">🌈 Timeline</a>
<a href='https://instagram.com/isangjeong.today'>🥕 isangjeong.today</a>
</div>
</div>
</div>
<div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
<a href="mailto:me@imnyang.xyz">📬 Mail</a>
<a href='https://github.com/imnyang'>🐈‍⬛ Github</a>
<a href='https://blog.imnyang.xyz'>📝 Blog</a>
</div>
<div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
<a href="/timeline">🌈 Timeline</a>
<a href='https://instagram.com/isangjeong.today'>🥕 isangjeong.today</a>
</div>
<Help />
</div>
);
}