Merge pull request #2 from imnyang/dev

Dev

next.config.ts

@@ -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;

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.17.9",
-    "@types/node": "^20",
+    "@types/react": "^18.3.12",
-    "@types/react": "^18",
+    "@types/react-dom": "^18.3.1",
-    "@types/react-dom": "^18",
+    "eslint": "^8.57.1",
-    "postcss": "^8",
+    "eslint-config-next": "15.0.3",
-    "tailwindcss": "^3.4.1",
+    "postcss": "^8.4.49",
-    "eslint": "^8",
+    "tailwindcss": "^3.4.15",
-    "eslint-config-next": "15.0.3"
+    "typescript": "^5.7.2"
   }
 }

src/app/globals.css

@@ -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;
 
-* {
+:root {
-  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;
+    --bg: var(--ctp-mocha-base);
-  margin: 0;
+    --fg: var(--ctp-mocha-crust);
-  padding: 0;
+    --primary: var(--ctp-mocha-lavender);
-  box-sizing: border-box;
+    --secondary: var(--ctp-mocha-mauve);
+    --accent: var(--ctp-mocha-peach);
+    --accent-foreground: var(--ctp-mocha-text);
 }
 
-html, body {
+.main {
-  width: 100%;
+    background-color: var(--bg);
-  height: 100%;
+    color: var(--fg);
-  margin: 0;
+    width: 100vw;
-  padding: 0;
+    min-height: 100vh;
-  overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
-body {
+.avatar:hover {
-  color: rgba(255, 255, 255, 0.87);
+    animation: rotate 1000ms linear infinite;
-  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);
 }

src/app/index.css

@@ -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;
-    }
-}

src/app/layout.tsx

@@ -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>

src/app/old/index.css

@@ -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;
+    }
+}

src/app/old/page.tsx

@@ -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>
+  );
+}

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="main">
-      <div className="container">
+      <div className="profile flex flex-col items-center gap-4">
-        <div className="left">
+        <Image src={imageSrc} width={128} height={128} className="rounded-full avatar" alt="Profile" priority />
-          <p style={{ color: "transparent" }}>/?no_hair</p>
+        <h1 className="text-white text-2xl font-bold">hyun._.suk</h1>
-          {/* /?no_ear */}
+        <div className="flex flex-row gap-6">
-          <Image 
+          {isMobile && (
-            src={imageSrc} 
+            <SocialLink href="supertoss://send?bank=토스뱅크&accountNo=100079352039&origin=qr" icon="fa-solid fa-circle-dollar-to-slot" tooltip="Toss" />
-            width={256} 
+          )}
-            height={256}
+          <SocialLink href="https://github.com/imnyang" icon="fa-brands fa-github" tooltip={`Github | ${userInfo.public_repos} Repos`} />
-            className="profile" 
+          <SocialLink href="mailto:me@imnyang.xyz" icon="fa-solid fa-at" tooltip="Mail" />
-            alt="Profile"
+          <SocialLink href="https://instagram.com/fur_local" icon="fa-brands fa-instagram" tooltip="Instagram" />
-            priority
+          <SocialLink href="https://x.com/fur_local" icon="fa-brands fa-x-twitter" tooltip="X" />
-          />
-          <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>

src/app/timeline/page.tsx

@@ -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>