gifs

pages/about.jsx

@@ -19,7 +19,7 @@ function About() {
       return (
         <>
           <Image src='/images/me.png' className="mb-2" width={300} height={195} onMouseEnter={onHover} />
-          📍 Home
+          📍 San Francisco, CA
         </>
       )
     }
@@ -34,11 +34,13 @@ function About() {
         <br /><br />
         Hi! I'm Tiffany!
         <br /><br />
-        Hailing from the cornfields of Cleveland, I have now found a new home for myself within the parks and matcha cafes of San Francisco.
+        Hailing from the cornfields of Ohio, I now roam the parks and matcha cafes of San Francisco.
         <br /><br />
-        Professionally, I've spent summers and gap semesters at <Url href="https://watershed.com/">Watershed</Url> on carbon accounting & infrastructure; <Url href="https://about.meta.com/realitylabs/">Facebook Reality Labs</Url> on VR headset onboarding; <Url href="https://ramp.com/">Ramp</Url> on corporate card spend management.
+        Professionally, I'm a software engineer at <Url href="https://watershed.com/">Watershed</Url> on data infrastructure. In the past, I've interned at <Url href="https://watershed.com/">Watershed</Url> on carbon accounting & infrastructure, <Url href="https://about.meta.com/realitylabs/">Facebook Reality Labs</Url> on VR headset onboarding, and <Url href="https://ramp.com/">Ramp</Url> on corporate card spend management.
         <br /><br />
-        On the side, I make experimental web and mobile games. I've <Url href="https://www.scriptype.com/2020/05/19/self-taught-digital-artist-and-video-game-designer-receives-national-recognition/">exhibited for interactive media</Url> in Cleveland & New York City and achieved 1.2 million plays online via <Url href="https://cnnmon.itch.io/">itch.io</Url>. I also draw, write, animate, 3D model, etc. For my art, check out <Url href="https://twitter.com/cnnmonie">@cnnmonie</Url>.
+        I've researched <Url href="https://tensortrust.ai/paper/">human-compatible AI</Url> with Prof. Stuart Russell at <Url href="https://humancompatible.ai/">CHAI</Url>/<Url href="https://bair.berkeley.edu/">BAIR</Url>.
+        <br /><br />
+        I make experimental games. I've <Url href="https://www.scriptype.com/2020/05/19/self-taught-digital-artist-and-video-game-designer-receives-national-recognition/">exhibited</Url> in Cleveland & New York City, worked with the Cleveland Clinic, and achieved 1.2 million plays online on <Url href="https://cnnmon.itch.io/">itch.io</Url>. I draw, write, animate, 3D model, etc. Updates here: <Url href="https://twitter.com/cnnmonie">@cnnmonie</Url>.
         <br /><br />
         I love dabbling in as many disciplines as possible, learning by experimenting, and building colorful experiences. I'm also happy to chat or collaborate! Don't hesitate to reach out ˙ᵕ˙
         <br />
@@ -49,9 +51,7 @@ function About() {
       </p>
       <ul className="list-disc list-inside">
         <li>Graduated Berkeley! yay</li>
-        <li>Researched <Url href="https://tensortrust.ai/paper/">human-compatible AI</Url> at <Url href="https://humancompatible.ai/">CHAI</Url>/<Url href="https://bair.berkeley.edu/">BAIR</Url>
-        </li>
-        <li>Illustrated for <Url href="https://www.tiktok.com/@gag.magazine/">student-run art magazines</Url></li>
+        <li>Illustrated for <Url href="https://www.kernelmag.io/">Kernel</Url> and <Url href="https://www.tiktok.com/@gag.magazine/">student-run art magazines</Url></li>
         <li>Taught CS:
           <ul className="list-none ml-12">
             <li> <Url href="https://cs162.org/">Operating Systems</Url> with our favorite bean pintOS</li>

pages/art.jsx

@@ -16,19 +16,21 @@ function Section({ section }) {
     <>
       <p>•───────• {title} •───────•</p>
       {list.map((art, index) => (
-        <div key={index} className="flex flex-col w-full md:w-[80%] mb-10">
-          <p>[<span dangerouslySetInnerHTML={{ __html: autolink(art.title) }} />]</p>
-          <div className="flex w-full justify-between gap-2">
-            {art.images.map((image, imgIndex) => (
+        <div key={index} className="flex flex-col mb-10 w-[100%]">
+          <div className="flex flex-col w-full justify-between gap-2 md:flex-row overflow-x-scroll">
+            {art.images.map((image, imgIndex) => 
               <Image
                 key={imgIndex}
                 src={image}
                 alt={art.title}
-                width={art.width}
-                height={art.height}
+                height={0}
+                width={0}
+                sizes="100vw"
+                style={{ width: '100%', height: 'auto' }}
               />
-            ))}
+            )}
           </div>
+          <p className="font-bold">[<span dangerouslySetInnerHTML={{ __html: autolink(art.title) }} />]</p>
         </div>
       ))}
     </>

pages/index.jsx

@@ -52,11 +52,11 @@ function Home() {
       </h1>
       <br />
       <p>
-        <b>Welcome to my corner of the galaxy ⋆✩˚.⋆.</b> Go ahead, grab yourself something to drink. Conveniently, I already have a cooler full of{' '}
+        <b>Welcome to my corner of the galaxy ⋆✩˚.⋆.!</b> Go ahead, grab yourself something to drink. I have a cooler there full of{' '}
         <PlayLink type="drinks" />
         {' '}{drinksEmoji[wordsState['drinks']]}.
         <br /><br />
-        I'm a programmer, researcher, artist, and toy-maker. I care about socially impactful tech, experimental games and interfaces, and <PlayLink type="hobbies" />.
+        I'm a programmer, researcher, artist, and toy-maker. I care about socially impactful tech, experimental game-making, and <PlayLink type="hobbies" />.
         <br /><br />
         Reach out anytime at <b>tiffanywang at berkeley dot edu</b>.
         <br /><br />

pages/projects.jsx

@@ -17,12 +17,12 @@ function Section({ section }) {
           };
 
           return (
-            <div key={index} className="flex flex-col w-[300px] md:w-[47%] mb-10">
+            <div key={index} className="flex flex-col w-full mb-10">
               {/* Conditionally render the href attribute or onClick event based on the presence of link */}
               <a href={link || undefined} onClick={!link ? handleNoLinkClick : undefined} target="_blank" className="font-bold">
                 <Image src={image} alt={name} width={500} height={362} className="w-full card mb-5" />
               </a>
-              <a href={link || undefined} onClick={!link ? handleNoLinkClick : undefined} target="_blank" className="font-bold">{name}</a>
+              <a href={link || undefined} onClick={!link ? handleNoLinkClick : undefined} target="_blank" className="font-bold">[{name}]</a>
               <p>{type} / {date}</p>
               <p>{description}</p>
             </div>

styles/globals.css

@@ -14,7 +14,7 @@
 
 /* hide scroll bar */
 ::-webkit-scrollbar {
-  display: none;
+  display: default;
 }
 
 body {

utils/art.json

@@ -4,71 +4,66 @@
     "list": [
       {
         "title": "me on a bike",
-        "images": ["/images/bike.png"],
-        "width": 400,
-        "height": 400
+        "images": ["/images/bike.png"]
+      },
+      {
+        "title": "roadtrip",
+        "images": ["/images/roadtrip.png"]
       },
       {
         "title": "illustrations for https://www.kernelmag.io/",
         "images": [
           "/images/irena.png",
           "/images/zora.png"
-        ],
-        "width": 400,
-        "height": 100
+        ]
       },
       {
         "title": "summer",
-        "images": ["/images/summer.png"],
-        "width": 600,
-        "height": 400
+        "images": ["/images/summer.png"]
       },
       {
         "title": "meditation study",
-        "images": ["/images/meditation.png"],
-        "width": 500,
-        "height": 400
+        "images": ["/images/meditation.png"]
       },
       {
         "title": "me but online",
-        "images": ["/images/online.png"],
-        "width": 500,
-        "height": 400
+        "images": ["/images/online.png"]
+      },
+      {
+        "title": "ap art portfolio",
+        "images": [
+          "/images/reflection.jpg",
+          "/images/why.jpg"
+        ]
+      },
+      {
+        "title": "twirl",
+        "images": ["/images/twirl.gif"]
       }
     ]
   },
   {
     "title": "3d art (blender)",
     "list": [
       {
-        "title": "fred",
-        "images": ["/images/fred.gif"],
-        "width": 300,
-        "height": 400
+        "title": "yakult",
+        "images": ["/images/yakult.gif"]
       },
       {
         "title": "my ass!!!",
-        "images": ["/images/cat.gif"],
-        "width": 500,
-        "height": 400
+        "images": ["/images/cat.gif"]
       },
       {
         "title": "digital upload",
-        "images": ["/images/digitalupload.gif"],
-        "width": 500,
-        "height": 400
+        "images": ["/images/digitalupload.gif"]
       },
       {
         "title": "cat cafe",
-        "images": ["/images/catcafe.gif"],
-        "width": 500,
-        "height": 400
+        "images": ["/images/catcafe.gif"]
       },
       {
         "title": "peppermint",
-        "images": ["/images/peppermint.gif"],
-        "width": 500,
-        "height": 400
+        "images": ["/images/peppermint.gif"]
       }
     ]
   }

utils/projects.json

@@ -7,7 +7,7 @@
         "type": "web game",
         "description": "4 bots, 1 human. blend in to survive.",
         "date": "aug 2024",
-        "image": "/images/botsbotsbots.png",
+        "image": "/images/botsbotsbots.gif",
         "link": "https://botsbotsbots.vercel.app/"
       }
     ]
@@ -20,47 +20,47 @@
         "type": "app, research",
         "description": "AI pair programmer powered by a living design doc",
         "date": "apr 2024",
-        "image": "/images/dango.png",
+        "image": "/images/dango.gif",
         "link": "https://github.com/cnnmon/dango"
       },
       {
         "name": "tensor trust",
         "type": "web, research",
         "description": "hack a bank by sweet-talking its AI",
         "date": "nov 2023",
-        "image": "/images/tensortrust.png",
+        "image": "/images/tensortrust.gif",
         "link": "https://tensortrust.ai/"
       },
       {
         "name": "univers(ity)",
         "type": "game",
         "description": "you're a university student in space",
         "date": "dec 2023",
-        "image": "/images/university.png",
+        "image": "/images/university.gif",
         "link": "https://university-game.vercel.app/"
       },
       {
         "name": "my singing friends",
         "type": "toy",
         "description": "an interpersonal music maker  🎵🕺🏻",
         "date": "oct 2023",
-        "image": "/images/mysingingfriends.png",
+        "image": "/images/mysingingfriends.gif",
         "link": "https://singing-friends.vercel.app/"
       },
       {
         "name": "drip or drown",
         "type": "web",
         "description": "your personal AI-powered stylist",
         "date": "feb 2023",
-        "image": "/images/dripordrown.png",
+        "image": "/images/dripordrown.gif",
         "link": "https://www.youtube.com/watch?v=g8LlEDijwe8&t=36s&ab_channel=AKS"
       },
       {
         "name": "ezcv",
         "type": "web",
         "description": "plaintext-to-resume generator",
         "date": "sep 2022",
-        "image": "/images/ezcv.png",
+        "image": "/images/ezcv.gif",
         "link": "https://www.ezcv.pro/"
       }
     ]
@@ -72,39 +72,39 @@
         "type": "mobile game",
         "description": "themed mobile puzzle game",
         "date": "aug 2020",
-        "image": "/images/boba.png",
+        "image": "/images/boba.gif",
         "link": "https://cnnmon.itch.io/boba"
       },
       {
         "name": "coffeelings",
         "type": "chrome extension",
         "description": "mood tracker & journal (200k+ users)",
         "date": "mar 2020",
-        "image": "/images/coffeelings.png",
+        "image": "/images/coffeelings.gif",
         "link": "https://chrome.google.com/webstore/detail/coffeelings/hcbddpppkcnfjifbcfnhmelpemdoepkk/"
       },
       {
         "name": "ashes to ash",
         "type": "game",
         "description": "collect emotions",
         "date": "oct 2019",
-        "image": "/images/ashestoash.png",
+        "image": "/images/ashestoash.gif",
         "link": "https://ldjam.com/events/ludum-dare/45/ashes-to-ash/"
       },
       {
         "name": "slice of scythe",
         "type": "game",
         "description": "do chores as a grim reaper",
         "date": "apr 2019",
-        "image": "/images/sliceofscythe.png",
+        "image": "/images/sliceofscythe.gif",
         "link": "https://ldjam.com/events/ludum-dare/44/slice-of-scythe/"
       },
       {
         "name": "good morning!",
         "type": "game",
         "description": "morning routine simulator (500k+ views)",
         "date": "jan 2019",
-        "image": "/images/goodmorning.png",
+        "image": "/images/goodmorning.gif",
         "link": "https://cnnmon.itch.io/goodmorning"
       },
       {
@@ -120,7 +120,7 @@
         "type": "game",
         "description": "endless-runner typing game",
         "date": "sep 2018",
-        "image": "/images/spacebar.png",
+        "image": "/images/spacebar.gif",
         "link": "https://cnnmon.itch.io/spacebar"
       }
     ]