asdf

app/components/README.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { remark } from 'remark';
+import html from 'remark-html';
+import rehypeStringify from 'rehype-stringify'
+import remarkFrontmatter from 'remark-frontmatter'
+import remarkGfm from 'remark-gfm'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+
+const readmeUrl = 'https://raw.githubusercontent.com/imnyang/imnyang/refs/heads/main/README.md';
+
+const markdownToHtml = async (markdown: string) => {
+    const result = await remark()
+        .use(remarkParse)
+        .use(remarkFrontmatter)
+        .use(remarkGfm)
+        .use(remarkRehype)
+        .use(rehypeStringify)
+        .use(html)
+        .process(markdown);
+    return result.toString();
+};
+
+const README = () => {
+    const [content, setContent] = React.useState<string>('');
+
+    React.useEffect(() => {
+        const fetchAndConvertMarkdown = async () => {
+            const response = await fetch(readmeUrl);
+            const markdown = await response.text();
+            const htmlContent = await markdownToHtml(markdown);
+            setContent(htmlContent);
+        };
+        fetchAndConvertMarkdown();
+    }, []);
+
+    return (
+        <div dangerouslySetInnerHTML={{ __html: content }} />
+    );
+};
+
+export default README;

app/components/TimeCounter.tsx

@@ -1,83 +0,0 @@
-/*
-  All rights reserved to NY0510 (As Known As NY64), 2024
-  https://github.com/NY0510/ny64.kr/blob/main/src/components/ProfileSection.tsx
-*/
-
-import { useState, useEffect } from 'react';
-import { useMotionValue, motion, useMotionTemplate } from "framer-motion";
-
-const birthday = new Date('2021-11-14');
-
-export function TimeCounter() {
-  const mouseX = useMotionValue(0);
-  const mouseY = useMotionValue(0);
-
-  const background = useMotionTemplate`radial-gradient(200px circle at ${mouseX}px ${mouseY}px, rgba(38, 38, 38, 0.4), transparent 80%)`;
-
-  const [afterBirth, setAfterBirth] = useState<string>('');
-  const [tenThousands, setTenThousands] = useState<number>(0);
-  const [animate, setAnimate] = useState<boolean>(false);
-  
-
-	useEffect(() => {
-		const interval = setInterval(() => {
-			const elapsed = new Date().getTime() - birthday.getTime();
-			setAfterBirth(elapsed.toLocaleString());
-
-			const newTenThousands = Math.floor(elapsed / 10000);
-			if (newTenThousands !== tenThousands) {
-				setTenThousands(newTenThousands);
-				setAnimate(true);
-				setTimeout(() => setAnimate(false), 200);
-			}
-		}, 1);
-
-		return () => clearInterval(interval);
-	}, [tenThousands]);
-
-    return (
-      <div
-        onMouseMove={(e) => {
-          const { left, top } = e.currentTarget.getBoundingClientRect();
-  
-          mouseX.set(e.clientX - left);
-          mouseY.set(e.clientY - top);
-        }}
-        className="group relative w-full max-w-[350px] overflow-hidden rounded-xl bg-neutral-950"
-        title='암냥으로 활동한지'
-      >
-        <div className="absolute right-5 top-0 h-px w-80 bg-gradient-to-l from-transparent via-white/30 via-10% to-transparent" />
-        <motion.div
-          className="pointer-events-none absolute -inset-px rounded-xl opacity-0 transition duration-300 group-hover:opacity-100"
-          style={{
-            background: background,
-          }}
-        />
-        <div className="relative flexflex-col gap-3 rounded-xl border border-white/10 px-4 py-5">
-          <div className="space-y-2">
-            <span>암냥 ~  </span>
-            <p className={`text-sm tabular-nums transition duration-200 ease-in-out ${animate ? 'text-neutral-100' : 'text-neutral-400'}`}>
-              {afterBirth} ms
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-
-    /*
-    return (
-      <div className="group relative w-fit mx-auto grid overflow-hidden rounded-3xl px-6 py-3 shadow-[0_1000px_0_0_hsl(0_0%_20%)_inset] transition-colors duration-200">
-        <span>
-          <span className="spark mask-gradient absolute inset-0 h-[100%] w-[100%] animate-flip overflow-hidden rounded-3xl [mask:linear-gradient(white,_transparent_50%)] before:absolute before:aspect-square before:w-[200%] before:rotate-[-90deg] before:animate-rotate before:bg-[conic-gradient(from_0deg,transparent_0_340deg,white_360deg)] before:content-[''] before:[inset:0_auto_auto_50%] before:[translate:-50%_-15%]" />
-        </span>
-        <span className="backdrop absolute inset-px rounded-3xl bg-neutral-950 transition-colors duration-200" />
-        <span className="z-10 flex flex-col items-center gap-2">
-          <span>암냥으로 활동한지</span>
-          <span className={`tabular-nums transition duration-200 ease-in-out ${animate ? 'text-neutral-100' : 'text-neutral-400'}`}>
-            {afterBirth} ms
-          </span>
-        </span>
-      </div>
-    );*/
-  }
-  

app/components/TimelineComponents.tsx

@@ -182,6 +182,7 @@ export default function TimelineComponents() {
               <span className="text-base">{event.description}</span>
             )}
           </div>
+          <p className="tabular-nums text-sm text-gray-500">{event.category}</p>
         </div>
       ))}
     </div>

app/components/Top.tsx

@@ -0,0 +1,20 @@
+export default function Top() {
+    return (
+        <div
+        id="top"
+        className="w-auto text-center flex items-center justify-center flex-col gap-4"
+      >
+        <img
+          src="https://f.imnya.ng/profile/34b47ba35448cc74a659bcec443c3fbc.webp"
+          alt="imnyang"
+          width={200}
+          height={200}
+          className="rounded-full"
+        />
+        <div>
+          <h1 className="text-2xl font-bold">암냥</h1>
+          <p className="text-sm text-neutral-400">@imnyang</p>
+        </div>
+      </div>
+    );
+}