feat: update portfolio details and improve layout

Author: graceyuen

app/layout.tsx

@@ -7,8 +7,7 @@ const inter = Inter({ subsets: ["latin"] })
 
 export const metadata: Metadata = {
   title: "Grace Yuen - Portfolio",
-  description: "Full-stack developer passionate about creating digital experiences",
-    generator: 'v0.dev'
+  description: "A Year 2 Computer Science student @HKU",
 }
 
 export default function RootLayout({

app/page.tsx

@@ -43,24 +43,59 @@ export default function Portfolio() {
   }
 
 
-  const experiences = [
+    const experiences = [
     {
       type: "internship" as const,
       title: "IT Wagering Solutions Summer Intern",
       company: "Hong Kong Jockey Club",
       period: "Jul - Aug 2025 (Upcoming)",
       description:
-        "",
+        "Expected to assist with wagering system maintenance and optimization to support transaction processing improvements under senior developer guidance.",
+    },
+    {
+      type: "internship" as const,
+      title: "Business Development Intern (Part-time)",
+      company: "Versitech Limited / Technology Transfer Office (TTO), HKU",
+      period: "Sep 2024 - Jun 2025",
+      description:
+        "Analyzed invention manuscripts and assessed commercial viability to identify global business opportunities, and built a comprehensive documentation website for the Versitech e-Form processor GUI application using the Docsify framework.",
+    },
+    {
+      type: "internship" as const,
+      title: "Student Research Assistant Intern",
+      company: "Department of Data and Systems Engineering (DASE), HKU",
+      period: "Dec 2024 - Jan 2025",
+      description:
+        "Collected 7.5+ hours of motion capture data from 15 participants to train AI models for camera-free gesture recognition and demonstrated the system to 100+ industry partners.",
+    },
+    {
+      type: "internship" as const,
+      title: "Student Teaching Assistant for ENGG1330 Computer Programming I",
+      company: "School of Computing & Data Science, HKU",
+      period: "Sep - Nov 2024",
+      description:
+        "Selected as one of 38 tutors from 535 students to host weekly Python tutorial sessions for first-year engineering students. Provided comprehensive guidance on fundamental programming concepts including syntax, control statements, functions, and data types through teaching materials and active participation in course forums.",
+    },
+    {
+      type: "internship" as const,
+      title: "IT Software Technician Intern",
+      company: "Yew Chung Education Foundation",
+      period: "Jun - Aug 2024",
+      description:
+        "Coordinated the deployment of the Asset Management and Tracking System (AMTS) across 10 campuses for 18,000+ assets.",
     },
   ]
 
+
 
 
   const projects = [    {
       id: 1,
       title: "The Hidden Eden",
       description: "An immersive 3D artwork designed for exploration in virtual reality",
       technologies: ["Blender", "Meta Quest 3", "Gravity Sketch"],
+      prototypeUrl: "",
+      githubUrl: "https://github.com/gracetyy/CCST9049_ProjectII_Group2D3",
       details:
         "Created as a CCST9049 group project, where I was responsible for creating the whole 3D world model. Players can view and interact with the 3D world in Gravity Sketch on Meta Quest 3, such as painting on the easel, grabbing the food, and diving into the underwater world.",
     },
@@ -95,7 +130,7 @@ export default function Portfolio() {
     {
       id: 5,
       title: "Baby Chat",
-      description: "AI-powered Parenting App made for the GenAI Hackathon for Social Good 2023 hosted by HKU",
+      description: "AI-powered Parenting App made for the GenAI Hackathon for Social Good 2023",
       technologies: ["OpenAI API", "Embeddings", "RAG", "Sketch", "GitHub"],
       videoUrl: "https://the-bithub.com/BabyChatDemoVid",
       details:
@@ -125,8 +160,8 @@ export default function Portfolio() {
             className="text-center z-10 px-4"
           >
             <motion.h1
-              className="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 relative"
-              style={{ fontFamily: "Inter, sans-serif" }}
+              className="text-5xl md:text-7xl lg:text-8xl font-bold mb-8 relative leading-tight md:leading-[1.1] lg:leading-[1.08] px-2 md:px-8"
+              style={{ fontFamily: "Inter, sans-serif", wordBreak: "keep-all", whiteSpace: "pre-line" }}
             >
               Hey👋, I'm{" "}
               <span className="relative inline-block">
@@ -192,7 +227,7 @@ export default function Portfolio() {
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6 }}
-            className="text-3xl md:text-4xl font-bold text-center mb-16"
+            className="text-4xl md:text-5xl font-bold text-center mb-16"
           >
             About Me
           </motion.h2>
@@ -258,7 +293,7 @@ export default function Portfolio() {
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6 }}
-            className="text-3xl md:text-4xl font-bold text-center mb-16"
+            className="text-4xl md:text-5xl font-bold text-center mb-16"
           >
             Experience
           </motion.h2>
@@ -272,7 +307,7 @@ export default function Portfolio() {
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6 }}
-            className="text-3xl md:text-4xl font-bold text-center mb-16"
+            className="text-4xl md:text-5xl font-bold text-center mb-16"
           >
             Featured Projects
           </motion.h2>
@@ -292,9 +327,9 @@ export default function Portfolio() {
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6 }}
-            className="text-3xl md:text-4xl font-bold text-center mb-16"
+            className="text-4xl md:text-5xl font-bold text-center mb-16"
           >
-            Let's Connect
+            Let's Get in Touch
           </motion.h2>
 
           <ContactCard />
@@ -307,10 +342,13 @@ export default function Portfolio() {
               initial={{ opacity: 0, scale: 0.8 }}
               animate={{ opacity: 1, scale: 1 }}
               exit={{ opacity: 0, scale: 0.8 }}
+              whileHover={{ scale: 1.15, boxShadow: "0 6px 24px 0 rgba(0,0,0,0.18)" }}
+              whileTap={{ scale: 0.92, rotate: -12 }}
               onClick={scrollToTop}
               className={`fixed z-[60] p-3 bg-primary text-primary-foreground rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-110
                 ${isMobile ? 'bottom-24 right-4' : 'bottom-20 right-8'}`}
               style={isMobile ? { marginBottom: '0', marginRight: '0' } : {}}
+              aria-label="Back to Top"
             >
               <ChevronUp className="w-5 h-5" />
             </motion.button>

components/contact-card.tsx

@@ -53,12 +53,12 @@ export function ContactCard() {
         <CardContent className="p-12 relative">
           <div className="text-center mb-12">
             <motion.h2
-              className="text-4xl md:text-5xl font-bold mb-4"
+              className="text-3xl md:text-4xl font-bold mb-4"
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: 0.2 }}
             >
-              Let's get in touch
+              Contact Info
             </motion.h2>
 
             <motion.p

components/floating-nav.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useRef } from "react"
 import { motion } from "framer-motion"
 import { Button } from "@/components/ui/button"
+import { useIsMobile } from "@/components/ui/use-mobile"
 
 const navItems = [
 	{ name: "Home", href: "#home" },
@@ -13,6 +14,7 @@ const navItems = [
 ]
 
 export function FloatingNav({ mobileOffset = false }: { mobileOffset?: boolean } = {}) {
+	const isMobile = useIsMobile();
 	const [isAtBottom, setIsAtBottom] = useState(false)
 	const [activeSection, setActiveSection] = useState("home")
 	const [isFloating, setIsFloating] = useState(true)
@@ -83,29 +85,35 @@ export function FloatingNav({ mobileOffset = false }: { mobileOffset?: boolean }
 									variant="ghost"
 									size="sm"
 									onClick={() => scrollToSection(item.href)}
-									className={`relative transition-all duration-300 touch-manipulation active:bg-accent/80 hover:bg-accent/80 text-xs md:text-sm px-2 md:px-3 ${
+									className={`relative transition-all duration-300 touch-manipulation text-xs md:text-sm px-2 md:px-3 ${
 										activeSection === item.href.slice(1)
 											? "text-primary"
-											: "text-muted-foreground hover:text-foreground"
+											: "text-muted-foreground"
+									}${
+									!isMobile ? " hover:bg-accent/80 hover:text-foreground active:bg-accent/80" : ""
 									}`}
 									tabIndex={0}
 									// Remove hover/active styles on touch devices
 									onTouchStart={e => {
 										e.currentTarget.classList.remove("hover:bg-accent", "active:bg-accent/80")
 									}}
 								>
-									<motion.span whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+									<motion.span whileHover={!isMobile ? { scale: 1.05 } : {}} whileTap={{ scale: 0.95 }}>
 										{item.name}
 									</motion.span>
 
 									{activeSection === item.href.slice(1) && (
-										<motion.div
-											className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-full"
-											initial={false}
-											transition={{ ease: "easeInOut", duration: 0.35 }}
-											style={{ y: 0, x: 0 }}
-											{...(isFloating ? { layoutId: item.name } : {})}
-										/>
+										isFloating ? (
+											<motion.div
+												className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-full"
+												initial={false}
+												transition={{ ease: "easeInOut", duration: 0.35 }}
+												style={{ y: 0, x: 0 }}
+												layoutId={item.name}
+											/>
+										) : (
+											<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-full" />
+										)
 									)}
 								</Button>
 							</motion.div>

components/grid-background.tsx

@@ -5,6 +5,7 @@ import { motion } from "framer-motion"
 
 export function GridBackground() {
   const [isDark, setIsDark] = useState(false)
+  const [dotPositions, setDotPositions] = useState<Array<{ left: number; top: number; duration: number; delay: number }>>([])
 
   useEffect(() => {
     // Detect dark mode using matchMedia
@@ -15,6 +16,15 @@ export function GridBackground() {
     // Also listen for class changes (theme toggle)
     const observer = new MutationObserver(update)
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    // Generate random dot positions only on client
+    setDotPositions(
+      Array.from({ length: 20 }).map(() => ({
+        left: Math.random() * 100,
+        top: Math.random() * 100,
+        duration: 3 + Math.random() * 2,
+        delay: Math.random() * 2,
+      }))
+    )
     return () => {
       match.removeEventListener('change', update)
       observer.disconnect()
@@ -66,29 +76,29 @@ export function GridBackground() {
         }}
       />
 
-      {/* Subtle animated dots */}
+      {/* Subtle animated dots - only render on client after mount */}
       <motion.div
         className="absolute inset-0"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 2 }}
       >
-        {Array.from({ length: 20 }).map((_, i) => (
+        {dotPositions.map((dot, i) => (
           <motion.div
             key={i}
             className="absolute w-1 h-1 bg-primary/20 rounded-full"
             style={{
-              left: `${Math.random() * 100}%`,
-              top: `${Math.random() * 100}%`,
+              left: `${dot.left}%`,
+              top: `${dot.top}%`,
             }}
             animate={{
               opacity: [0.2, 0.8, 0.2],
               scale: [1, 1.5, 1],
             }}
             transition={{
-              duration: 3 + Math.random() * 2,
+              duration: dot.duration,
               repeat: Number.POSITIVE_INFINITY,
-              delay: Math.random() * 2,
+              delay: dot.delay,
             }}
           />
         ))}

components/project-card.tsx

@@ -5,7 +5,7 @@ import { motion, AnimatePresence } from "framer-motion"
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
-import { ExternalLink, Github, X, Video, PenTool, FileText } from "lucide-react"
+import { ExternalLink, Github, X, CirclePlay, Box, Presentation } from "lucide-react"
 import Image from "next/image"
 
 interface Project {
@@ -16,10 +16,10 @@ interface Project {
   technologies?: string[]
   liveUrl?: string
   githubUrl?: string
-  details: string
   videoUrl?: string
   prototypeUrl?: string
   pitchDeckUrl?: string
+  details: string
 }
 
 interface ProjectCardProps {
@@ -106,7 +106,7 @@ export function ProjectCard({ project, index }: ProjectCardProps) {
                   }}
                   className="flex-1"
                 >
-                  <Video className="w-3 h-3 mr-1" />
+                  <CirclePlay className="w-3 h-3 mr-1" />
                   Video
                 </Button>
               )}
@@ -120,7 +120,7 @@ export function ProjectCard({ project, index }: ProjectCardProps) {
                   }}
                   className="flex-1"
                 >
-                  <PenTool className="w-3 h-3 mr-1" />
+                  <Box className="w-3 h-3 mr-1" />
                   Prototype
                 </Button>
               )}
@@ -134,7 +134,7 @@ export function ProjectCard({ project, index }: ProjectCardProps) {
                   }}
                   className="flex-1"
                 >
-                  <FileText className="w-3 h-3 mr-1" />
+                  <Presentation className="w-3 h-3 mr-1" />
                   Pitch Deck
                 </Button>
               )}
@@ -183,15 +183,14 @@ export function ProjectCard({ project, index }: ProjectCardProps) {
 
               <div className="p-6">
                 <h2 className="text-2xl font-bold mb-4">{project.title}</h2>
-
+                <p className="text-muted-foreground mb-4">{project.description}</p>
                 <div className="flex flex-wrap gap-2 mb-4">
                   {project.technologies && project.technologies.length > 0 && project.technologies.map((tech) => (
                     <Badge key={tech} variant="secondary">
                       {tech}
                     </Badge>
                   ))}
                 </div>
-
                 <p className="text-muted-foreground mb-6 leading-relaxed">{project.details}</p>
 
                 <div className="flex gap-4">
@@ -209,19 +208,19 @@ export function ProjectCard({ project, index }: ProjectCardProps) {
                   )}
                   {project.videoUrl && project.videoUrl !== "" && (
                     <Button variant="outline" onClick={() => window.open(project.videoUrl, "_blank")} className="flex-1">
-                      <Video className="w-4 h-4 mr-2" />
+                      <CirclePlay className="w-4 h-4 mr-2" />
                       Video
                     </Button>
                   )}
                   {project.prototypeUrl && project.prototypeUrl !== "" && (
                     <Button variant="outline" onClick={() => window.open(project.prototypeUrl, "_blank")} className="flex-1">
-                      <PenTool className="w-4 h-4 mr-2" />
+                      <Box className="w-4 h-4 mr-2" />
                       Prototype
                     </Button>
                   )}
                   {project.pitchDeckUrl && project.pitchDeckUrl !== "" && (
                     <Button variant="outline" onClick={() => window.open(project.pitchDeckUrl, "_blank")} className="flex-1">
-                      <FileText className="w-4 h-4 mr-2" />
+                      <Presentation className="w-4 h-4 mr-2" />
                       Pitch Deck
                     </Button>
                   )}