chore: update homepage content and fix live listening refresh

.stignore

@@ -0,0 +1 @@
+node_modules

app/apple-icon.tsx

@@ -10,7 +10,6 @@ export default function AppleIcon() {
   const dataUrl = `data:image/svg+xml;base64,${svg.toString("base64")}`;
 
   return new ImageResponse(
-    // eslint-disable-next-line @next/next/no-img-element
     <img src={dataUrl} width={180} height={180} alt="" />,
     { ...size }
   );

app/components/GitHubActivity.tsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 
 type Day = { date: string; count: number };
-type LastCommit = { message: string; repo: string; sha: string; url: string; timeAgo: string };
 
 const MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
 const CELL = 16;
@@ -42,7 +41,6 @@ function formatDate(dateStr: string): string {
 export default function GitHubActivity() {
   const [weeks, setWeeks] = useState<Day[][]>([]);
   const [total, setTotal] = useState(0);
-  const [lastCommit, setLastCommit] = useState<LastCommit | null>(null);
   const [hoveredInfo, setHoveredInfo] = useState<{ date: string; count: number; rect: DOMRect } | null>(null);
 
   useEffect(() => {
@@ -58,10 +56,9 @@ export default function GitHubActivity() {
   useEffect(() => {
     fetch("/api/github/contributions")
       .then((r) => r.json())
-      .then((data: { weeks?: Day[][]; totalContributions?: number; lastCommit?: LastCommit }) => {
+      .then((data: { weeks?: Day[][]; totalContributions?: number }) => {
         if (data.weeks) setWeeks(data.weeks);
         if (data.totalContributions) setTotal(data.totalContributions);
-        if (data.lastCommit) setLastCommit(data.lastCommit);
       })
       .catch(() => {});
   }, []);

app/hooks/use-now-playing.ts

@@ -21,12 +21,12 @@ export function useNowPlaying(): UseNowPlayingReturn {
   const [data, setData] = useState<NowPlayingResult | null>(null);
   const [displayItem, setDisplayItem] = useState<DisplayItem>(null);
   const [slideClass, setSlideClass] = useState("");
-  const prevUrlRef = useRef<string | null>(null);
+  const prevItemKeyRef = useRef<string | null>(null);
   const slideTimers = useRef<ReturnType<typeof setTimeout>[]>([]);
 
   useEffect(() => {
     const poll = () => {
-      fetch("/api/lastfm/now-playing")
+      fetch("/api/lastfm/now-playing", { cache: "no-store" })
         .then((r) => r.json())
         .then((d: NowPlayingResult) => setData(d))
         .catch(() => setData({ isPlaying: false }));
@@ -39,22 +39,27 @@ export function useNowPlaying(): UseNowPlayingReturn {
 
   useEffect(() => {
     if (!data) return;
+    let cancelled = false;
 
     queueMicrotask(() => {
+      if (cancelled) return;
+
       const nextItem: DisplayItem = data.isPlaying
         ? { title: data.title, artist: data.artist, songUrl: data.songUrl, albumArt: data.albumArt }
         : (data.recentTrack ?? null);
 
       if (!nextItem) {
         setDisplayItem(null);
-        prevUrlRef.current = null;
+        prevItemKeyRef.current = null;
         return;
       }
 
-      if (prevUrlRef.current === nextItem.songUrl) return;
+      const nextItemKey = `${data.isPlaying ? "playing" : "recent"}|${nextItem.songUrl}|${nextItem.title}|${nextItem.artist}`;
+
+      if (prevItemKeyRef.current === nextItemKey) return;
 
-      const hadContent = prevUrlRef.current !== null;
-      prevUrlRef.current = nextItem.songUrl;
+      const hadContent = prevItemKeyRef.current !== null;
+      prevItemKeyRef.current = nextItemKey;
 
       if (!hadContent) {
         setDisplayItem(nextItem);
@@ -72,8 +77,19 @@ export function useNowPlaying(): UseNowPlayingReturn {
         }, 200)
       );
     });
+
+    return () => {
+      cancelled = true;
+    };
   }, [data]);
 
+  useEffect(() => {
+    return () => {
+      slideTimers.current.forEach(clearTimeout);
+      slideTimers.current = [];
+    };
+  }, []);
+
   const dotPlaying = Boolean(data?.isPlaying);
 
   return { data, displayItem, dotPlaying, slideClass };

app/page.tsx

@@ -51,23 +51,27 @@ export default async function Home() {
 
           {/* Values */}
           <div style={{ fontFamily: "'Bitter'", fontWeight: 400, fontSize: 15, lineHeight: 1.9 }} className="text-zinc-700 dark:text-zinc-300">
-            <p>Curious about everything, committed to a few things.</p>
-            <p className="mt-1">Pledged to give 10% of my lifetime income — because some decisions are worth making early.</p>
+            <p>Welcome to my personal space at a corner of human made internet :D</p>
+            <p className="mt-1">I am a believer of <a href="https://en.wikipedia.org/wiki/Longtermism" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 decoration-zinc-300 dark:decoration-zinc-600 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors duration-150"><em>Longtermism</em></a> and <a href="https://www.effectivealtruism.org/" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 decoration-zinc-300 dark:decoration-zinc-600 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors duration-150"><em>Effective Altruism</em></a>.</p>
+            <p className="mt-1">Currently, I&apos;m investigating what I believe when it comes to faith and religion, and what role they play in people&apos;s lives.</p>
+            <p className="mt-1">And I&apos;m also trying to build a consistant lifestyle lol.</p>
           </div>
 
           <div style={{ width: 40, height: 1, margin: "0" }} className="bg-zinc-200 dark:bg-zinc-700" />
 
           {/* Personality / side */}
           <div style={{ fontFamily: "'Bitter'", fontWeight: 400, fontSize: 15, lineHeight: 1.9 }} className="text-zinc-700 dark:text-zinc-300">
-            <p>Up before the city. Barely.</p>
-            <p className="mt-1">Currently reading <a href="https://www.amazon.com/s?k=Thinking+Fast+and+Slow" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 decoration-zinc-300 dark:decoration-zinc-600 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors duration-150"><em>Thinking, Fast and Slow</em></a> and pretending I understand it.</p>
+            <p>I study Maths and I&apos;m always awed by the beauty of deep abstract structures. I love the outline of analysis proofs and I&apos;m mostly obsessed with algebra(but algebra is really hard lol).</p>
+            <p className="mt-1">I really love building things and I dream of building something that can help people / make people happy with a fantastic user experience.</p>
+            <p className="mt-1"><ListeningLine /></p>
+            <p className="mt-1">Currently reading <a href="https://www.amazon.com/Whats-Your-Dream-Passion-Richer/dp/B0FV84D9DY?sr=1-1" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 decoration-zinc-300 dark:decoration-zinc-600 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors duration-150"><em>What&apos;s Your Dream?: Find Your Passion. Love Your Work. Build a Richer Life.</em></a> and trying to ask myself questions in the book to question myself.</p>
             <p className="mt-1"><ListeningLine /></p>
           </div>
 
           {/* Social links — icon row, pinned to bottom */}
           <div className="flex items-center gap-4 mt-auto">
             <a
-              href="mailto:kaichen0728@gmail.com"
+              href="mailto:kaichen.dev.37@gmail.com"
               aria-label="Email"
               className="text-zinc-700 dark:text-zinc-300 opacity-35 hover:opacity-100 transition-opacity duration-300 ease-out"
             >
@@ -109,17 +113,6 @@ export default async function Home() {
                 <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
               </svg>
             </a>
-            <a
-              href="https://t.me/kaiiiichen"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Telegram"
-              className="text-zinc-700 dark:text-zinc-300 opacity-35 hover:opacity-100 transition-opacity duration-300 ease-out"
-            >
-              <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.022c.242-.213-.054-.334-.373-.121l-6.87 4.326-2.96-.924c-.64-.203-.66-.64.135-.954l11.566-4.458c.538-.196 1.006.128.832.939z" />
-              </svg>
-            </a>
           </div>
         </div>
       </div>