Development Commit
This commit is contained in:
imnyang
parent
43d6fd1a14
commit
251b71787b
8 changed files with 87 additions and 194 deletions
63
src/App.tsx
63
src/App.tsx
|
|
@ -4,55 +4,32 @@ import { Route, Routes } from 'react-router-dom';
|
|||
import { useEffect } from 'react';
|
||||
|
||||
function App() {
|
||||
const keySequence: string[] = [];
|
||||
const targetSequence = 'furry';
|
||||
|
||||
useEffect(() => {
|
||||
const keySequence: string[] = [];
|
||||
const targetSequence = 'furry';
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
// 단일 키 입력 감지
|
||||
console.log(`Key: ${event.key} with keycode ${event.keyCode} has been pressed`);
|
||||
console.log(`KeySquare: ${keySequence.join('')}`);
|
||||
// 특정 문자열 시퀀스 감지
|
||||
keySequence.push(event.key);
|
||||
if (keySequence.length > targetSequence.length) {
|
||||
keySequence.shift();
|
||||
}
|
||||
|
||||
|
||||
if (event.key === 'm') {
|
||||
console.log('Get mail');
|
||||
document.location.href = 'mailto:me@imnyang.xyz';
|
||||
}
|
||||
if (event.key === 'g') {
|
||||
console.log('Get Github');
|
||||
document.location.href = 'https://github.com/imnyang';
|
||||
}
|
||||
if (event.key === 'b') {
|
||||
console.log('Get Github');
|
||||
document.location.href = 'https://blog.imnyang.xyz';
|
||||
}
|
||||
if (event.key === 't') {
|
||||
console.log('Get Timeline');
|
||||
document.location.href = 'https://imnyang.xyz/timeline';
|
||||
}
|
||||
if (event.key === 'i') {
|
||||
console.log('Get isangjeong.today');
|
||||
document.location.href = 'https://instagram.com/isangjeong.today';
|
||||
}
|
||||
|
||||
if (keySequence.join('') === targetSequence) {
|
||||
console.log('Furry sequence detected!');
|
||||
document.location.href = 'https://ny64.kr?from=imnyang_root_page';
|
||||
}
|
||||
// 단일 키 입력 감지
|
||||
console.log(`Key: ${event.key} with keycode ${event.keyCode} has been pressed`);
|
||||
console.log(`KeySquare: ${keySequence.join('')}`);
|
||||
// 특정 문자열 시퀀스 감지
|
||||
keySequence.push(event.key);
|
||||
if (keySequence.length > targetSequence.length) {
|
||||
keySequence.shift();
|
||||
}
|
||||
if (keySequence.join('') === targetSequence) {
|
||||
console.log('Furry sequence detected!');
|
||||
document.location.href = 'https://ny64.kr?from=imnyang_root_page';
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [keySequence]);
|
||||
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Routes>
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
.Help {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 50vw;
|
||||
height: 50vh;
|
||||
background-color: #141414;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 10px;
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.Help.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.key_container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.key {
|
||||
background-color: #000000;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import './Help.css';
|
||||
import Draggable from 'react-draggable';
|
||||
|
||||
export default function Help() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'F1') {
|
||||
event.preventDefault();
|
||||
setIsVisible(!isVisible);
|
||||
console.log('Help!');
|
||||
}
|
||||
if (event.key === 'Escape') {
|
||||
setIsVisible(false);
|
||||
console.log('Help!');
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [isVisible]);
|
||||
|
||||
return (
|
||||
<Draggable defaultPosition={{ x: 0, y: 0 }}>
|
||||
<div className={`Help ${isVisible ? 'visible' : ''}`}>
|
||||
<h1>Help</h1>
|
||||
<div style={{display: 'flex', flexDirection: 'row', gap: 100}}>
|
||||
<p>
|
||||
<div className='key_container'>
|
||||
<p className='key'>F1</p>
|
||||
<p>Help</p>
|
||||
</div>
|
||||
<div className='key_container'>
|
||||
<p className='key'>l</p>
|
||||
<p>Change nameIndex</p>
|
||||
</div>
|
||||
|
||||
<div className='key_container'>
|
||||
<p className='key'>furry</p>
|
||||
<p>Show Furry</p>
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
<div className='key_container'>
|
||||
<p className='key'>m</p>
|
||||
<p>Mailto</p>
|
||||
</div>
|
||||
<div className='key_container'>
|
||||
<p className='key'>g</p>
|
||||
<p>Github</p>
|
||||
</div>
|
||||
<div className='key_container'>
|
||||
<p className='key'>b</p>
|
||||
<p>Blog</p>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Draggable>
|
||||
);
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #101010;
|
||||
background-color: #41444B;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
|
@ -30,10 +30,13 @@ a:hover {
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
color: white;
|
||||
background-color: #101010;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,39 @@
|
|||
|
||||
|
||||
.App {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #41444B;
|
||||
color: black;
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
background-color: #DFC7D4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-color: #101010;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.profile {
|
||||
width: 256px;
|
||||
background-color: transparent;
|
||||
.right {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #41444B;
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import Markdown from "react-markdown";
|
||||
import Help from '../component/help';
|
||||
import './Timeline.css';
|
||||
import markdown from './Timeline.md';
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue