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

fast

Browse source
This commit is contained in:
아임냥 2024-11-01 21:34:35 +09:00
commit 6fd96f8c73
2 changed files with 253 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

116
src/pages/Root.css
View file

@ -1,21 +1,21 @@
.App {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: #262225;
color: black;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: #262225;
color: black;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.profile {
@ -23,63 +23,63 @@
}
.profile:hover {
animation: rotate 1s linear infinite;
animation: rotate 1000ms linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.left {
width: 40%;
height: 100%;
background-color: #373236;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
width: 40%;
height: 100%;
background-color: #373236;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.right {
width: 60%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #262225;
width: 60%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #262225;
}
@media screen and (max-width: 768px) {
.App {
display: flex;
flex-direction: column;
}
.App {
display: flex;
flex-direction: column;
}
.container {
flex-direction: column;
}
.container {
flex-direction: column;
}
.left {
width: 100%;
height: 70%;
.left {
width: 100%;
height: 70%;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
.right {
width: 100%;
height: 30%;
}
}
.right {
width: 100%;
height: 30%;
}
}

254
src/pages/Root.tsx
View file

@ -1,87 +1,223 @@
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';
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() {
const location = useLocation();
const [imageSrc, setImageSrc] = useState('https://f.imnyang.xyz/profile/imnyang.webp');
const [gotoHref, setGotoHref] = useState('/');
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/hatchu_imnyang.webp');
setGotoHref('/');
if (queryParams.has("kawaii")) {
setImageSrc("https://f.imnyang.xyz/profile/hatchu_imnyang.webp");
setGotoHref("/");
} else {
setImageSrc('https://f.imnyang.xyz/profile/imnyang.webp');
setGotoHref('/?kawaii');
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");
}
if (queryParams.has("fast")) {
const style = document.createElement("style");
style.innerHTML = `
.profile:hover {
animation: rotate 1ms linear infinite;
}
`;
document.head.appendChild(style);
}
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'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" as="style" onLoad={() => { (document.querySelector('link[rel="stylesheet"]') as HTMLLinkElement).rel = 'stylesheet'; }}></link>
<div className='container'>
<div className='left'>
<p style={{color: 'transparent'}}>/?no_hair</p>
<div className="App">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
as="style"
onLoad={() => {
(
document.querySelector('link[rel="stylesheet"]') as HTMLLinkElement
).rel = "stylesheet";
}}
></link>
<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: '#ffe7fb', fontSize: 60, margin: 0, fontWeight: '700'}}>
<Link style={{color: '#ffe7fb', fontSize: 60, margin: 0, fontWeight: '700'}} to={gotoHref}>imnyang</Link>
<img src={imageSrc} width={256} className="profile" />
<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: 'white'}}>
<p style={{textAlign: 'left'}}>
<div style={{display: 'flex', flexDirection: 'row', gap: 25, alignItems: 'center', justifyContent: 'center'}}>
<div style={{ color: "white" }}>
<p style={{ textAlign: "left" }}>
<div
style={{
display: "flex",
flexDirection: "row",
gap: 25,
alignItems: "center",
justifyContent: "center",
}}
>
{window.innerWidth <= 768 && (
<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>
<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>
)}
<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/>
<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
<br/>
🎨 Team. <a href='https://sqlare.com'>Sqlare</a>
<br/><br/>
<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>
<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'><i className="fa-brands fa-github" style={{ color: 'white', paddingRight: 8 }} /><Repos /> Repos</a>
<a href='https://blog.imnyang.xyz'>📝 Blog</a>
<div className="right">
<div style={{ display: "flex", flexDirection: "row", gap: 25 }}>
<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>
<div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
<p style={{color: 'white'}}>Project</p>
<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://github.com/sqlare/sqlr.kr/tree/main">🔗 sqlr.kr (SQLite)</a>
<a hidden href='https://qloat.com'>🗨️ Qloat</a>
<div style={{ display: "flex", flexDirection: "row", gap: 25 }}>
<a href="https://github.com/sqlare/sqlr.kr/tree/main">
🔗 sqlr.kr (SQLite)
</a>
<a hidden href="https://qloat.com">
🗨️ Qloat
</a>
</div>
<div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
<a href='https://instagram.com/today.isangjeong'>🥕 isangjeong.today</a>
<a href='https://github.com/imnyang/FakeAlyac'>💊 FakeAlyac</a>
<div style={{ display: "flex", flexDirection: "row", gap: 25 }}>
<a href="https://instagram.com/today.isangjeong">
🥕 isangjeong.today
</a>
<a href="https://github.com/imnyang/FakeAlyac">💊 FakeAlyac</a>
</div>
</div>
</div>