imnyang
GitHub
commit
c4bc5bcf35
12 changed files with 3971 additions and 301 deletions
|
|
@ -1,7 +1,16 @@
|
|||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "f.imnyang.xyz",
|
||||
port: "",
|
||||
pathname: "/profile/**",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
|
|
|||
18
package.json
18
package.json
|
|
@ -3,7 +3,7 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbopack",
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
|
|
@ -16,13 +16,13 @@
|
|||
"tippy.js": "^6.3.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "15.0.3"
|
||||
"@types/node": "^20.17.9",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-config-next": "15.0.3",
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "^5.7.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3526
pnpm-lock.yaml
generated
Normal file
3526
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
Binary file not shown.
Binary file not shown.
|
|
@ -1,94 +1,30 @@
|
|||
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
|
||||
@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
* {
|
||||
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
:root {
|
||||
--bg: var(--ctp-mocha-base);
|
||||
--fg: var(--ctp-mocha-crust);
|
||||
--primary: var(--ctp-mocha-lavender);
|
||||
--secondary: var(--ctp-mocha-mauve);
|
||||
--accent: var(--ctp-mocha-peach);
|
||||
--accent-foreground: var(--ctp-mocha-text);
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
.main {
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #262225;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#__next {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #ffe7fb;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ffe7fb;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #ffe7fb;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
/* Scrollbar Styles */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(65, 66, 68);
|
||||
border: 1px solid rgb(29, 30, 32);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(155, 156, 157);
|
||||
.avatar:hover {
|
||||
animation: rotate 1000ms linear infinite;
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
.App {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
background-color: #262225;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100vw;
|
||||
min-width: 100vw;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 40%;
|
||||
min-height: 100vh;
|
||||
background-color: #373236;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.profile {
|
||||
border-radius: 100%;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile:hover {
|
||||
animation: rotate 1000ms linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
border-radius: 0;
|
||||
border-bottom-left-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
.right {
|
||||
min-height: auto !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,6 @@
|
|||
import type { Metadata } from "next";
|
||||
import localFont from "next/font/local";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = localFont({
|
||||
src: "./fonts/GeistVF.woff",
|
||||
variable: "--font-geist-sans",
|
||||
weight: "100 900",
|
||||
});
|
||||
const geistMono = localFont({
|
||||
src: "./fonts/GeistMonoVF.woff",
|
||||
variable: "--font-geist-mono",
|
||||
weight: "100 900",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "imnyang",
|
||||
description: "imnyang's portfolio",
|
||||
|
|
@ -32,7 +20,7 @@ export default function RootLayout({
|
|||
/>
|
||||
</head>
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
className={`antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
|
|
|
|||
168
src/app/old/index.css
Normal file
168
src/app/old/index.css
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
|
||||
|
||||
* {
|
||||
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #262225;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#__next {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #ffe7fb;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ffe7fb;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #ffe7fb;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
/* Scrollbar Styles */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(65, 66, 68);
|
||||
border: 1px solid rgb(29, 30, 32);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(155, 156, 157);
|
||||
}
|
||||
|
||||
.App {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
background-color: #262225;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100vw;
|
||||
min-width: 100vw;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 40%;
|
||||
min-height: 100vh;
|
||||
background-color: #373236;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.profile {
|
||||
border-radius: 100%;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile:hover {
|
||||
animation: rotate 1000ms linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
border-radius: 0;
|
||||
border-bottom-left-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
.right {
|
||||
min-height: auto !important;
|
||||
}
|
||||
}
|
||||
208
src/app/old/page.tsx
Normal file
208
src/app/old/page.tsx
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useState, forwardRef } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import Repos from "../components/repos";
|
||||
import Tippy from "@tippyjs/react";
|
||||
import "tippy.js/dist/tippy.css";
|
||||
import "./index.css";
|
||||
|
||||
interface TippyWrapperProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const TippyWrapper = forwardRef<HTMLAnchorElement, TippyWrapperProps>((props, ref) => (
|
||||
<a {...props} ref={ref} />
|
||||
));
|
||||
TippyWrapper.displayName = 'TippyWrapper';
|
||||
|
||||
export default function Home() {
|
||||
const searchParams = useSearchParams();
|
||||
const [imageSrc, setImageSrc] = useState(
|
||||
"https://f.imnyang.xyz/profile/imnyang.webp",
|
||||
);
|
||||
const [gotoHref, setGotoHref] = useState("/");
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMobile(window.innerWidth <= 768);
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth <= 768);
|
||||
};
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchParams.has("kawaii")) {
|
||||
setImageSrc("https://f.imnyang.xyz/profile/hatchu_imnyang.webp");
|
||||
setGotoHref("/");
|
||||
} else {
|
||||
setImageSrc("https://f.imnyang.xyz/profile/imnyang.webp");
|
||||
setGotoHref("/?kawaii");
|
||||
}
|
||||
if (searchParams.has("no_hair") && searchParams.has("no_ear")) {
|
||||
setImageSrc("https://f.imnyang.xyz/profile/no_ear_no_long_hair.png");
|
||||
} else if (searchParams.has("no_ear")) {
|
||||
setImageSrc("https://f.imnyang.xyz/profile/no_ear.png");
|
||||
} else if (searchParams.has("no_hair")) {
|
||||
setImageSrc("https://f.imnyang.xyz/profile/no_hair.avif");
|
||||
}
|
||||
if (searchParams.has("fast")) {
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
.profile:hover {
|
||||
animation: rotate 1ms linear infinite;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
interface SocialLinkProps {
|
||||
href: string;
|
||||
icon: string;
|
||||
tooltip: string;
|
||||
}
|
||||
|
||||
const SocialLink = ({ href, icon, tooltip }: SocialLinkProps) => (
|
||||
<Tippy content={tooltip} placement="bottom">
|
||||
<TippyWrapper
|
||||
href={href}
|
||||
style={{
|
||||
color: "#b2a1af",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<i className={icon} style={{ fontSize: "24px" }} />
|
||||
</TippyWrapper>
|
||||
</Tippy>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<div className="container">
|
||||
<div className="left">
|
||||
<p style={{ color: "transparent" }}>/?no_hair</p>
|
||||
{/* /?no_ear */}
|
||||
<Image
|
||||
src={imageSrc}
|
||||
width={256}
|
||||
height={256}
|
||||
className="profile"
|
||||
alt="Profile"
|
||||
priority
|
||||
/>
|
||||
<h1
|
||||
style={{
|
||||
color: "#ffe7fb",
|
||||
fontSize: 60,
|
||||
margin: 0,
|
||||
fontWeight: "700",
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
style={{
|
||||
color: "#ffe7fb",
|
||||
fontSize: 60,
|
||||
margin: 0,
|
||||
fontWeight: "700"
|
||||
}}
|
||||
href={gotoHref}
|
||||
>
|
||||
hyun._.suk
|
||||
</Link>
|
||||
</h1>
|
||||
|
||||
<div className="mt-5" style={{ color: "white" }}>
|
||||
<div style={{ textAlign: "left" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 25,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{isMobile && (
|
||||
<SocialLink
|
||||
href="supertoss://send?bank=토스뱅크&accountNo=100079352039&origin=qr"
|
||||
icon="fa-solid fa-circle-dollar-to-slot"
|
||||
tooltip="Toss"
|
||||
/>
|
||||
)}
|
||||
<SocialLink
|
||||
href="https://github.com/imnyang"
|
||||
icon="fa-brands fa-github"
|
||||
tooltip="Github"
|
||||
/>
|
||||
<SocialLink
|
||||
href="mailto:me@imnyang.xyz"
|
||||
icon="fa-solid fa-at"
|
||||
tooltip="Mail"
|
||||
/>
|
||||
<SocialLink
|
||||
href="https://instagram.com/not.furry_"
|
||||
icon="fa-brands fa-instagram"
|
||||
tooltip="Instagram"
|
||||
/>
|
||||
<SocialLink
|
||||
href="https://x.com/mahiro_me"
|
||||
icon="fa-brands fa-x-twitter"
|
||||
tooltip="X"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
🖥️ Software Engineer
|
||||
<br />
|
||||
🎨 Team. <a href="https://sqlare.com">Sqlare</a>
|
||||
<br />
|
||||
<br />
|
||||
📚 Middle School Student in South Korea
|
||||
<br />
|
||||
<br />
|
||||
<span style={{ color: "transparent" }}>Enter Furry.</span>
|
||||
</div>
|
||||
</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>
|
||||
<Link href="/timeline">🌈 Timeline</Link>
|
||||
</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://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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
147
src/app/page.tsx
147
src/app/page.tsx
|
|
@ -1,6 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useState, forwardRef } from "react";
|
||||
import { useEffect, useState, forwardRef, Ref } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
|
@ -11,6 +11,7 @@ import "./index.css";
|
|||
|
||||
interface TippyWrapperProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
children: React.ReactNode;
|
||||
ref?: Ref<HTMLAnchorElement>;
|
||||
}
|
||||
|
||||
const TippyWrapper = forwardRef<HTMLAnchorElement, TippyWrapperProps>((props, ref) => (
|
||||
|
|
@ -19,6 +20,22 @@ const TippyWrapper = forwardRef<HTMLAnchorElement, TippyWrapperProps>((props, re
|
|||
TippyWrapper.displayName = 'TippyWrapper';
|
||||
|
||||
export default function Home() {
|
||||
const [userInfo, setUserInfo] = useState({ public_repos: 0, followers: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchUserInfo() {
|
||||
try {
|
||||
const response = await fetch("https://api.github.com/users/imnyang");
|
||||
const data = await response.json();
|
||||
setUserInfo({ public_repos: data.public_repos, followers: data.followers });
|
||||
} catch (error) {
|
||||
console.error("Error fetching user info:", error);
|
||||
}
|
||||
}
|
||||
|
||||
fetchUserInfo();
|
||||
}, []);
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const [imageSrc, setImageSrc] = useState(
|
||||
"https://f.imnyang.xyz/profile/imnyang.webp",
|
||||
|
|
@ -85,122 +102,18 @@ export default function Home() {
|
|||
);
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<div className="container">
|
||||
<div className="left">
|
||||
<p style={{ color: "transparent" }}>/?no_hair</p>
|
||||
{/* /?no_ear */}
|
||||
<Image
|
||||
src={imageSrc}
|
||||
width={256}
|
||||
height={256}
|
||||
className="profile"
|
||||
alt="Profile"
|
||||
priority
|
||||
/>
|
||||
<h1
|
||||
style={{
|
||||
color: "#ffe7fb",
|
||||
fontSize: 60,
|
||||
margin: 0,
|
||||
fontWeight: "700",
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
style={{
|
||||
color: "#ffe7fb",
|
||||
fontSize: 60,
|
||||
margin: 0,
|
||||
fontWeight: "700"
|
||||
}}
|
||||
href={gotoHref}
|
||||
>
|
||||
hyun._.suk
|
||||
</Link>
|
||||
</h1>
|
||||
|
||||
<div className="mt-5" style={{ color: "white" }}>
|
||||
<div style={{ textAlign: "left" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 25,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{isMobile && (
|
||||
<SocialLink
|
||||
href="supertoss://send?bank=토스뱅크&accountNo=100079352039&origin=qr"
|
||||
icon="fa-solid fa-circle-dollar-to-slot"
|
||||
tooltip="Toss"
|
||||
/>
|
||||
)}
|
||||
<SocialLink
|
||||
href="https://github.com/imnyang"
|
||||
icon="fa-brands fa-github"
|
||||
tooltip="Github"
|
||||
/>
|
||||
<SocialLink
|
||||
href="mailto:me@imnyang.xyz"
|
||||
icon="fa-solid fa-at"
|
||||
tooltip="Mail"
|
||||
/>
|
||||
<SocialLink
|
||||
href="https://instagram.com/not.furry_"
|
||||
icon="fa-brands fa-instagram"
|
||||
tooltip="Instagram"
|
||||
/>
|
||||
<SocialLink
|
||||
href="https://x.com/mahiro_me"
|
||||
icon="fa-brands fa-x-twitter"
|
||||
tooltip="X"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
🖥️ Software Engineer
|
||||
<br />
|
||||
🎨 Team. <a href="https://sqlare.com">Sqlare</a>
|
||||
<br />
|
||||
<br />
|
||||
📚 Middle School Student in South Korea
|
||||
<br />
|
||||
<br />
|
||||
<span style={{ color: "transparent" }}>Enter Furry.</span>
|
||||
</div>
|
||||
</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>
|
||||
<Link href="/timeline">🌈 Timeline</Link>
|
||||
</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://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>
|
||||
<div className="main">
|
||||
<div className="profile flex flex-col items-center gap-4">
|
||||
<Image src={imageSrc} width={128} height={128} className="rounded-full avatar" alt="Profile" priority />
|
||||
<h1 className="text-white text-2xl font-bold">hyun._.suk</h1>
|
||||
<div className="flex flex-row gap-6">
|
||||
{isMobile && (
|
||||
<SocialLink href="supertoss://send?bank=토스뱅크&accountNo=100079352039&origin=qr" icon="fa-solid fa-circle-dollar-to-slot" tooltip="Toss" />
|
||||
)}
|
||||
<SocialLink href="https://github.com/imnyang" icon="fa-brands fa-github" tooltip={`Github | ${userInfo.public_repos} Repos`} />
|
||||
<SocialLink href="mailto:me@imnyang.xyz" icon="fa-solid fa-at" tooltip="Mail" />
|
||||
<SocialLink href="https://instagram.com/fur_local" icon="fa-brands fa-instagram" tooltip="Instagram" />
|
||||
<SocialLink href="https://x.com/fur_local" icon="fa-brands fa-x-twitter" tooltip="X" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ export default function Timeline_Page() {
|
|||
<div style={{ display: 'flex', overflow: 'auto', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: 'white', width: '100vw', height: '100vh', background: '#101020' }}>
|
||||
<div style={{height: '70%', overflow: 'auto'}}>
|
||||
<Link href='/'>🏠 Back</Link>
|
||||
<h1>Timeline</h1>
|
||||
<Timeline />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue