Add Pages deployment and refine interactions

Author: sanbuphy

.github/workflows/pages.yml

@@ -0,0 +1,53 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+        env:
+          GITHUB_PAGES: "true"
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

src/App.tsx

@@ -7,7 +7,6 @@ import { motion } from "motion/react";
 import { 
   ArrowRight, 
   Github, 
-  MessageSquare, 
   Cpu, 
   BrainCircuit, 
   Network, 
@@ -19,7 +18,7 @@ import {
   Star,
   X
 } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import logoUrl from "./assets/logo.svg";
 
 const LANGUAGES = {
@@ -200,12 +199,19 @@ export default function App() {
   const [view, setViewState] = useState<View>("HOME");
   const [activePostSlug, setActivePostSlug] = useState<string | null>(null);
   const [showWechatQr, setShowWechatQr] = useState(false);
+  const [wechatQrLoaded, setWechatQrLoaded] = useState(false);
+  const jellyBodyRef = useRef<HTMLDivElement | null>(null);
 
   const setView = (nextView: View) => {
     setViewState(nextView);
     setActivePostSlug(null);
   };
 
+  const openWechatQr = () => {
+    setWechatQrLoaded(false);
+    setShowWechatQr(true);
+  };
+
   const t = {
     ZH: {
       name: "WalkingLabs",
@@ -319,6 +325,34 @@ export default function App() {
   const blogPosts = BLOG_POSTS[lang];
   const activePost = activePostSlug ? blogPosts.find((post) => post.slug === activePostSlug) : null;
 
+  useEffect(() => {
+    const body = jellyBodyRef.current;
+    if (!body) return;
+
+    const randomizeJelly = () => {
+      const points = Array.from({ length: 8 }, () => `${Math.round(36 + Math.random() * 30)}%`);
+      const x1 = (0.98 + Math.random() * 0.055).toFixed(3);
+      const y1 = (0.98 + Math.random() * 0.055).toFixed(3);
+      const x2 = (0.98 + Math.random() * 0.055).toFixed(3);
+      const y2 = (0.98 + Math.random() * 0.055).toFixed(3);
+      const r1 = `${(Math.random() * 1.4 - 0.7).toFixed(2)}deg`;
+      const r2 = `${(Math.random() * 1.4 - 0.7).toFixed(2)}deg`;
+
+      body.style.setProperty("--jelly-r1", `${points[0]} ${points[1]} ${points[2]} ${points[3]} / ${points[4]} ${points[5]} ${points[6]} ${points[7]}`);
+      body.style.setProperty("--jelly-r2", `${points[3]} ${points[2]} ${points[1]} ${points[0]} / ${points[7]} ${points[6]} ${points[5]} ${points[4]}`);
+      body.style.setProperty("--jelly-sx1", x1);
+      body.style.setProperty("--jelly-sy1", y1);
+      body.style.setProperty("--jelly-sx2", x2);
+      body.style.setProperty("--jelly-sy2", y2);
+      body.style.setProperty("--jelly-rot1", r1);
+      body.style.setProperty("--jelly-rot2", r2);
+    };
+
+    randomizeJelly();
+    body.addEventListener("animationiteration", randomizeJelly);
+    return () => body.removeEventListener("animationiteration", randomizeJelly);
+  }, []);
+
   return (
     <div className="min-h-screen selection:bg-brand-blue/20">
       {/* Navigation */}
@@ -402,10 +436,10 @@ export default function App() {
             </h1>
 
             <div className="flex flex-col sm:flex-row flex-wrap gap-4 sm:gap-5">
-              <button className="btn-primary">
+              <button className="btn-primary" onClick={() => setView("PROJECTS")}>
                 Explore Projects <ArrowRight className="w-5 h-5" />
               </button>
-              <button className="btn-secondary" onClick={() => setShowWechatQr(true)}>
+              <button className="btn-secondary" onClick={openWechatQr}>
                 <Smile className="w-5 h-5" /> Join Community
               </button>
             </div>
@@ -418,13 +452,13 @@ export default function App() {
               style={{ willChange: "transform" }}
               animate={{ 
                 y: [0, -15, 0],
-                rotate: [-1, 1, -1]
+                rotate: [-0.5, 0.5, -0.5]
               }}
               transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
             >
-              <div className="absolute inset-0 bg-gradient-to-br from-violet-600 to-indigo-400 rounded-[45%_55%_65%_35%/35%_55%_45%_65%] shadow-2xl opacity-90" />
+              <div ref={jellyBodyRef} className="jelly-body absolute inset-0 bg-gradient-to-br from-violet-600 to-indigo-400 shadow-2xl opacity-90" />
 
-              <div className="absolute inset-0 flex flex-col items-center justify-start pt-32 md:pt-36">
+              <div className="jelly-face absolute inset-0 flex flex-col items-center justify-start pt-32 md:pt-36">
                 <div className="flex gap-12 md:gap-16">
                   <motion.div 
                     className="w-3.5 h-7 md:w-5 md:h-12 bg-white rounded-full shadow-sm" 
@@ -501,32 +535,15 @@ export default function App() {
             ))}
 
             {/* Community Bento Cell */}
-            <div className="bento-item bg-ink text-bg-paper col-span-1 md:col-span-2 lg:col-span-3">
-              <div className="flex flex-col md:flex-row gap-12 items-center">
-                <div className="flex-1">
-                  <h3 className="text-3xl mb-4 font-serif italic text-brand-blue">Build with us.</h3>
-                  <p className="text-zinc-400 mb-8 max-w-md">
-                    Join our WeChat Group to discuss Agentic AI, RL, and more. Become part of a long-term, rigorous technical community.
-                  </p>
-                  <div className="flex gap-4">
-                    <button onClick={() => setShowWechatQr(true)} className="bg-white text-ink px-6 py-3 rounded-full font-medium flex items-center gap-2">
-                      <MessageSquare className="w-5 h-5" /> WeChat Group
-                    </button>
-                    <a href="https://github.com/walkinglabs" target="_blank" rel="noreferrer" className="border border-white/20 px-6 py-3 rounded-full font-medium">
-                      Join GitHub
-                    </a>
-                  </div>
-                </div>
-                <div className="w-48 h-48 bg-white p-4 rounded-3xl flex flex-col items-center justify-center gap-2">
-                  <div className="w-full h-full bg-zinc-100 rounded-xl flex items-center justify-center border-2 border-dashed border-zinc-300">
-                    <span className="text-zinc-400 text-[10px] uppercase font-bold text-center px-4">
-                      QR Code Placeholder
-                    </span>
-                  </div>
-                  <span className="text-[10px] text-ink/60 font-mono">SCAN TO JOIN</span>
-                </div>
-              </div>
-            </div>
+            <button
+              onClick={openWechatQr}
+              className="bento-item bg-ink text-bg-paper col-span-1 md:col-span-2 lg:col-span-3 text-left hover:bg-zinc-950 transition-colors"
+            >
+              <h3 className="text-3xl mb-4 font-serif italic text-brand-blue">Build with us.</h3>
+              <p className="text-zinc-400 max-w-md">
+                Join our WeChat Group to discuss Agentic AI, RL, and more. Become part of a long-term, rigorous technical community.
+              </p>
+            </button>
           </div>
         </div>
       </section>
@@ -607,11 +624,11 @@ export default function App() {
             style={{ willChange: "transform, opacity" }}
             className="flex flex-col w-fit mx-auto"
           >
-            <span className="text-[18vw] lg:text-[220px] font-bold leading-[0.85] tracking-tighter block select-none text-black">
+            <span className="text-[20vw] lg:text-[250px] font-bold leading-[0.85] tracking-tighter block select-none text-black">
               WALKING
             </span>
-            <div className="flex justify-end -mt-[5vw] lg:-mt-16">
-              <span className="text-[14vw] lg:text-[180px] font-bold serif-italic text-violet-600 leading-none tracking-tighter block select-none">
+            <div className="flex justify-end -mt-[5.5vw] lg:-mt-20">
+              <span className="text-[16vw] lg:text-[210px] font-bold serif-italic text-violet-600 leading-none tracking-tighter block select-none">
                 LABS
               </span>
             </div>
@@ -1066,13 +1083,30 @@ export default function App() {
               <p className="text-sm text-zinc-500 mb-6">
                 {lang === "EN" ? "Scan the QR code to join the WalkingLabs community." : "扫码加入 WalkingLabs 社区。"}
               </p>
-              <div className="rounded-3xl border border-zinc-100 bg-zinc-50 p-4">
+              <div className="relative rounded-3xl border border-zinc-100 bg-zinc-50 p-4 min-h-[320px] flex items-center justify-center">
+                {!wechatQrLoaded && (
+                  <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 text-zinc-400">
+                    <div className="qr-spinner" />
+                    <span className="text-xs font-bold uppercase tracking-widest">
+                      {lang === "EN" ? "Loading QR" : "加载二维码"}
+                    </span>
+                  </div>
+                )}
                 <img
                   src={WECHAT_QR_URL}
                   alt={lang === "EN" ? "WalkingLabs WeChat QR code" : "WalkingLabs 微信二维码"}
-                  className="w-full rounded-2xl bg-white"
+                  onLoad={() => setWechatQrLoaded(true)}
+                  className={`w-full rounded-2xl bg-white transition-opacity duration-300 ${wechatQrLoaded ? "opacity-100" : "opacity-0"}`}
                 />
               </div>
+              <a
+                href={WECHAT_QR_URL}
+                target="_blank"
+                rel="noreferrer"
+                className="mt-4 inline-block text-xs text-zinc-400 hover:text-violet-700 transition-colors underline underline-offset-4"
+              >
+                {lang === "EN" ? "If it keeps loading, open the GitHub QR image." : "长时间加载不出，可到 GitHub 页面获取二维码。"}
+              </a>
             </div>
           </motion.div>
         </div>

src/index.css

@@ -37,6 +37,77 @@
   padding-right: clamp(1.25rem, 4vw, 4rem);
 }
 
+.jelly-body {
+  --jelly-r1: 52% 48% 58% 42% / 42% 48% 52% 58%;
+  --jelly-r2: 39% 61% 50% 50% / 52% 43% 57% 48%;
+  --jelly-sx1: 1.025;
+  --jelly-sy1: 0.985;
+  --jelly-sx2: 0.99;
+  --jelly-sy2: 1.02;
+  --jelly-rot1: 0.6deg;
+  --jelly-rot2: -0.5deg;
+  border-radius: 45% 55% 65% 35% / 35% 55% 45% 65%;
+  transform-origin: 50% 58%;
+  animation: jelly-breathe 12s ease-in-out infinite;
+  will-change: border-radius, transform;
+}
+
+.jelly-face {
+  animation: jelly-face-drift 12s ease-in-out infinite;
+  will-change: transform;
+}
+
+.qr-spinner {
+  width: 2.75rem;
+  height: 2.75rem;
+  border: 3px solid #e4e4e7;
+  border-top-color: #6d28d9;
+  border-radius: 999px;
+  animation: qr-spin 0.9s linear infinite;
+}
+
+@keyframes qr-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes jelly-breathe {
+  0%,
+  100% {
+    border-radius: 45% 55% 65% 35% / 35% 55% 45% 65%;
+    transform: scale(1) rotate(0deg);
+  }
+  22% {
+    border-radius: var(--jelly-r1);
+    transform: scale(var(--jelly-sx1), var(--jelly-sy1)) rotate(var(--jelly-rot1));
+  }
+  48% {
+    border-radius: var(--jelly-r2);
+    transform: scale(var(--jelly-sx2), var(--jelly-sy2)) rotate(var(--jelly-rot2));
+  }
+  73% {
+    border-radius: var(--jelly-r1);
+    transform: scale(var(--jelly-sy1), var(--jelly-sx1)) rotate(calc(var(--jelly-rot1) * -0.6));
+  }
+}
+
+@keyframes jelly-face-drift {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  22% {
+    transform: translate3d(6px, -3px, 0) scale(0.985, 1.02);
+  }
+  48% {
+    transform: translate3d(-5px, 5px, 0) scale(1.01, 0.99);
+  }
+  73% {
+    transform: translate3d(4px, 3px, 0) scale(0.995, 1.01);
+  }
+}
+
 .bento-grid {
   display: grid;
   @apply grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[1px] bg-zinc-200 border-t border-zinc-200;

vite.config.ts

@@ -6,6 +6,7 @@ import {defineConfig, loadEnv} from 'vite';
 export default defineConfig(({mode}) => {
   const env = loadEnv(mode, '.', '');
   return {
+    base: process.env.GITHUB_PAGES === 'true' ? '/homepage/' : '/',
     plugins: [react(), tailwindcss()],
     define: {
       'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),