Development Commit
This commit is contained in:
imnyang
parent
43d6fd1a14
commit
251b71787b
8 changed files with 87 additions and 194 deletions
BIN
bun.lockb
Normal file → Executable file
BIN
bun.lockb
Normal file → Executable file
Binary file not shown.
27
src/App.tsx
27
src/App.tsx
|
|
@ -4,10 +4,10 @@ import { Route, Routes } from 'react-router-dom';
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
useEffect(() => {
|
||||||
const keySequence: string[] = [];
|
const keySequence: string[] = [];
|
||||||
const targetSequence = 'furry';
|
const targetSequence = 'furry';
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleKeyDown = (event: KeyboardEvent) => {
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||||||
// 단일 키 입력 감지
|
// 단일 키 입력 감지
|
||||||
console.log(`Key: ${event.key} with keycode ${event.keyCode} has been pressed`);
|
console.log(`Key: ${event.key} with keycode ${event.keyCode} has been pressed`);
|
||||||
|
|
@ -17,29 +17,6 @@ function App() {
|
||||||
if (keySequence.length > targetSequence.length) {
|
if (keySequence.length > targetSequence.length) {
|
||||||
keySequence.shift();
|
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) {
|
if (keySequence.join('') === targetSequence) {
|
||||||
console.log('Furry sequence detected!');
|
console.log('Furry sequence detected!');
|
||||||
document.location.href = 'https://ny64.kr?from=imnyang_root_page';
|
document.location.href = 'https://ny64.kr?from=imnyang_root_page';
|
||||||
|
|
@ -51,7 +28,7 @@ function App() {
|
||||||
return () => {
|
return () => {
|
||||||
document.removeEventListener('keydown', handleKeyDown);
|
document.removeEventListener('keydown', handleKeyDown);
|
||||||
};
|
};
|
||||||
}, [keySequence]);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
|
|
@ -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-scheme: light dark;
|
||||||
color: rgba(255, 255, 255, 0.87);
|
color: rgba(255, 255, 255, 0.87);
|
||||||
background-color: #101010;
|
background-color: #41444B;
|
||||||
|
|
||||||
font-synthesis: none;
|
font-synthesis: none;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
|
|
@ -30,10 +30,13 @@ a:hover {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
padding: 0;
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
background-color: #101010;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,39 @@
|
||||||
|
|
||||||
|
|
||||||
.App {
|
.App {
|
||||||
width: 100vw;
|
width: 100%;
|
||||||
height: 100vh;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
background-color: #101010;
|
|
||||||
z-index: 9;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile {
|
.right {
|
||||||
width: 256px;
|
width: 55%;
|
||||||
background-color: transparent;
|
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 { useLocation } from 'react-router-dom';
|
||||||
import './Root.css';
|
import './Root.css';
|
||||||
import Help from '../component/help';
|
|
||||||
|
|
||||||
function Root() {
|
function Root() {
|
||||||
const location = useLocation();
|
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');
|
const [imageSrc, setImageSrc] = useState('https://f.imnyang.xyz/profile/imnyang.webp');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -18,33 +15,28 @@ function Root() {
|
||||||
}
|
}
|
||||||
}, [location.search]);
|
}, [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 (
|
return (
|
||||||
<div className='App'>
|
<div className='App'>
|
||||||
|
<div className='container'>
|
||||||
|
<div className='left'>
|
||||||
<img src={imageSrc} width={256} className='profile' />
|
<img src={imageSrc} width={256} className='profile' />
|
||||||
<h1 style={{color: '#fadfee', fontSize: 60, margin: 0}}>
|
<h1 style={{color: '#241f22', fontSize: 60, margin: 0}}>
|
||||||
{name[nameIndex]}
|
imnyang
|
||||||
</h1>
|
</h1>
|
||||||
<div className='key_container'>
|
|
||||||
<p>Press </p>
|
<div>
|
||||||
<p style={{fontWeight: 800}}>F1</p>
|
<p style={{textAlign: 'left'}}>
|
||||||
<p> and Check Help</p>
|
🖥️ 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>
|
||||||
|
|
||||||
|
|
||||||
|
<div className='right'>
|
||||||
<div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
|
<div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
|
||||||
<a href="mailto:me@imnyang.xyz">📬 Mail</a>
|
<a href="mailto:me@imnyang.xyz">📬 Mail</a>
|
||||||
<a href='https://github.com/imnyang'>🐈⬛ Github</a>
|
<a href='https://github.com/imnyang'>🐈⬛ Github</a>
|
||||||
|
|
@ -54,7 +46,8 @@ function Root() {
|
||||||
<a href="/timeline">🌈 Timeline</a>
|
<a href="/timeline">🌈 Timeline</a>
|
||||||
<a href='https://instagram.com/isangjeong.today'>🥕 isangjeong.today</a>
|
<a href='https://instagram.com/isangjeong.today'>🥕 isangjeong.today</a>
|
||||||
</div>
|
</div>
|
||||||
<Help />
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import Markdown from "react-markdown";
|
import Markdown from "react-markdown";
|
||||||
import Help from '../component/help';
|
|
||||||
import './Timeline.css';
|
import './Timeline.css';
|
||||||
import markdown from './Timeline.md';
|
import markdown from './Timeline.md';
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue