dec 5 update

pages/about.jsx

@@ -32,15 +32,9 @@ function About() {
       <p>
         <b>About me</b>
         <br /><br />
-        Hi! I'm Tiffany!
+        Hi, I'm Tiffany! Hailing from the cornfields of Ohio, I now roam the cafes of San Francisco.
         <br /><br />
-        Hailing from the cornfields of Ohio, I now roam the parks and matcha cafes of San Francisco.
-        <br /><br />
-        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 />
-        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>.
+        I'm a software engineer building data infrastructure for enterprise sustainability teams @ <Url href="https://watershed.com/">Watershed</Url>. I'm also an artist who makes <Url href="https://cnnmon.itch.io/">silly indie games (1.3m+ plays!)</Url> and experiments with human-AI interaction, creativity, safety (see: <Url href="projects">/projects</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 />
@@ -51,15 +45,17 @@ function About() {
       </p>
       <ul className="list-disc list-inside">
         <li>Graduated Berkeley! yay</li>
+        <li>Co-authored a paper on <Url href="https://tensortrust.ai/paper/">the art of jailbreaking LLMs</Url> at <Url href="https://humancompatible.ai/">CHAI</Url></li>
+        <li>'nterned at <Url href="https://about.meta.com/realitylabs/">Facebook Reality Labs</Url> & <Url href="https://ramp.com/">Ramp</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:
+        <li>Taught:
           <ul className="list-none ml-12">
-            <li> <Url href="https://cs162.org/">Operating Systems</Url> with our favorite bean pintOS</li>
-            <li><Url href="https://cs61a.org/">CS 61A</Url>, Berkeley's intro to CS</li>
+            <li> <Url href="https://cs162.org/">CS 162 Operating Systems</Url> with our favorite bean pintOS</li>
+            <li><Url href="https://cs61a.org/">CS 61A Intro to CS</Url>, Berkeley's starter course</li>
             <li><Url href="https://webdesigndecal.github.io/">Web Design Decal</Url>, a course on design & web-making</li>
           </ul>
         </li>
-        <li>Led tech at 2 lovely Berkeley student orgs:
+        <li>Led tech at 2 lovely student orgs:
           <ul className="list-none ml-12">
             <li><Url href="https://www.calblueprint.org/">Blueprint</Url>, pro-bono tech for non-profits</li>
             <li><Url href="https://www.calhacks.io/">Cal Hacks</Url>, the world's largest collegiate hackathon</li>
@@ -72,6 +68,7 @@ function About() {
             <li><Url href="https://neo.com/">Neo Scholars</Url></li>
           </ul>
         </li>
+        <li>Made educational games with the Cleveland Clinic</li>
       </ul>
       <p>
         <br />

pages/art.jsx

@@ -1,8 +1,9 @@
 import artSections from '../utils/art.json'
 import Image from 'next/image'
+import { useState } from 'react'
 
 function Section({ section }) {
-  const { title, list } = section;
+  const { list } = section;
 
   function autolink(text) {
     const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
@@ -14,33 +15,56 @@ function Section({ section }) {
 
   return (
     <>
-      <p>•───────• {title} •───────•</p>
       {list.map((art, index) => (
         <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 mb-5 overflow-x-auto">
-            {art.images.map((image, imgIndex) => 
+          <div className="flex w-full justify-between gap-2 flex-col mb-4">
+            {art.images.map((image, imgIndex) => (
               <Image
                 key={imgIndex}
                 src={image}
                 alt={art.title}
-                height={0}
-                width={0}
-                sizes="100vw"
+                height={500}
+                width={500}
                 className="w-full h-auto"
               />
-            )}
+            ))}
           </div>
-          <p>[<span dangerouslySetInnerHTML={{ __html: autolink(art.title) }} />]</p>
+          <p><b>[<span dangerouslySetInnerHTML={{ __html: autolink(art.title) }} />]</b></p>
+          <p>{art.description}</p>
         </div>
       ))}
     </>
   );
 }
 
 function Art() {
+  const allTypes = artSections.map(section => section.title)
+  const [selectedType, setSelectedType] = useState(allTypes[0])
+
   return (
     <div className="flex flex-col gap-2">
-      {artSections.map((section, index) => <Section key={index} section={section} />)}
+      <p>I dabble in all digital art — 2d, 3d, static, moving. I use Procreate, Blender, After Effects.</p>
+      <div className="flex flex-row gap-2 mt-2 mb-4">
+        {allTypes.map(type => (
+          <button
+            key={type}
+            onClick={() => setSelectedType(type)}
+            className={`${
+              selectedType === type 
+                ? 'bg-black text-white' 
+                : 'bg-orange-200 hover:bg-gray-300'
+            }`}
+          >
+            [{type}]
+          </button>
+        ))}
+      </div>
+      {artSections.map((section, index) => {
+        if (selectedType === 'all' || selectedType === section.title) {
+          return <Section key={index} section={section} />
+        }
+        return null
+      })}
     </div>
   )
 }

pages/index.jsx

@@ -1,13 +1,11 @@
 import { useEffect, useState } from 'react'
-import { SiLinkedin, SiGooglescholar, SiGithub, SiTwitter } from 'react-icons/si'
-import { FaItchIo } from 'react-icons/fa'
 import Url from '../components/Url'
 
 const words = {
-  drinks: ['yakult', 'chrysanthemum tea', 'Yerba Mate', 'La Croix', 'Cholula hot sauce'],
-  hobbies: ['hosting board game nights', 'singing my heart out at karaoke', 'brewing the spiciest soups known to man', 'talking about the idea of going to the gym']
+  drinks: ['yakult', 'grape soda', 'oat matcha lattes', 'La Croix', 'Cholula hot sauce'],
+  hobbies: ['hosting social deduction board game nights', 'singing my heart out at karaoke', 'brewing the spiciest soups known to man', 'talking about the idea of going to the gym']
 }
-const drinksEmoji = ['🍓', '🧃', '🌿', '🍊', '🌶️']
+const drinksEmoji = ['🍓', '🍇', '🍵', '🍊', '🌶️']
 const greeting = 'hi, i\'m tiffany!'
 
 function Home() {
@@ -52,24 +50,24 @@ function Home() {
       </h1>
       <br />
       <p>
-        <b>Welcome to my corner of the galaxy ⋆✩˚.⋆.!</b> Go ahead, grab yourself something to drink. I have a cooler there full of{' '}
+        ⋆✩˚.⋆. <br /><br />
+        <b>Welcome to my web-home!</b> Go ahead, grab yourself something to drink. I have a cooler 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 game-making, and <PlayLink type="hobbies" />.
+        I'm a programmer, researcher, artist, and game-maker. I care about socially impactful tech, experimental new media, creative tools, and <PlayLink type="hobbies" />.
         <br /><br />
         Reach out anytime at <b>tiffanywang at berkeley dot edu</b>.
         <br /><br />
-        <span className="flex items-center">
+        <span className="flex flex-col sm:flex-row sm:items-center">
           Else, find me at:
-          <span className="flex items-center ml-2 gap-2">
-            <Url href="https://www.linkedin.com/in/wtiffany/"><SiLinkedin /></Url>
-            <Url href="https://github.com/cnnmon"><SiGithub /></Url>
-            <Url href="https://cnnmon.itch.io/"><FaItchIo /></Url>
-            <Url href="https://twitter.com/cnnmonie"><SiTwitter /></Url>
-            <Url href="https://scholar.google.com/citations?hl=en&user=p8hhfi4AAAAJ"><SiGooglescholar /></Url>
+          <span className="flex flex-wrap items-center sm:ml-2 gap-2">
+            <Url href="https://www.linkedin.com/in/wtiffany/">linkedin</Url>
+            <Url href="https://github.com/cnnmon">github</Url>
+            <Url href="https://cnnmon.itch.io/">itch.io</Url>
+            <Url href="https://twitter.com/cnnmonie">twitter</Url>
+            <Url href="https://scholar.google.com/citations?hl=en&user=p8hhfi4AAAAJ">gscholar</Url>
           </span>
-          .
         </span>
         <br />
       </p>

pages/projects.jsx

@@ -1,44 +1,78 @@
 import projectSections from '../utils/projects.json'
 import Image from 'next/image'
+import { useState } from 'react'
 
-function Section({ section }) {
+function Project({ item, index }) {
+  const { name, type, description, date, link, image } = item;
+
+  const handleNoLinkClick = () => {
+    if (!link) {
+      alert('this is a work in progress — email me if you want a preview!');
+      return "";
+    }
+  };
+
+  return (
+    <div key={index} className="flex flex-col w-full mb-10">
+      <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>
+      <p>{type} / {date}</p>
+      <p>{description}</p>
+    </div>
+  )
+}
+
+function Section({ section, selectedType }) {
   const { title, list } = section
+  const filteredList = selectedType === 'all' ? list : list.filter(item => item.type === selectedType)
+
+  // Don't render section if filtered list is empty
+  if (filteredList.length === 0) return null
+
   return (
     <>
       <p><b>{title}</b></p>
       <div className="flex flex-row gap-2 flex-wrap justify-between">
-        {list.map((item, index) => {
-          const { name, type, description, date, link, image } = item;
-          const handleNoLinkClick = () => {
-            if (!link) {
-              alert('this is a work in progress — email me for more information!');
-              return "";
-            }
-          };
-
-          return (
-            <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>
-              <p>{type} / {date}</p>
-              <p>{description}</p>
-            </div>
-          )
-        })}
+        {filteredList.map((item, index) => (
+          <Project key={index} item={item} />
+        ))}
       </div>
     </>
   )
 }
 
 function Projects() {
+  const [selectedType, setSelectedType] = useState('all')
+
+  // Get unique types from all sections
+  const allTypes = ['all', ...new Set(projectSections.flatMap(section => 
+    section.list.map(item => item.type)
+  ))]
+
   return (
     <>
-      <p>My gallery of things. Take a look around!</p>
-      <div className="flex flex-col gap-4 mt-4">
-        {projectSections.map((section, index) => <Section key={index} section={section} />)}
+      <p>My gallery of toys, tools, experiments. Take a look around! I often use Typescript, Python, Next.js, Unity.</p>
+      <div className="flex flex-row gap-2 mt-4 mb-4">
+        {allTypes.map(type => (
+          <button
+            key={type}
+            onClick={() => setSelectedType(type)}
+            className={`${
+              selectedType === type 
+                ? 'bg-black text-white' 
+                : 'bg-orange-200 hover:bg-gray-300'
+            }`}
+          >
+            [{type}]
+          </button>
+        ))}
+      </div>
+      <div className="flex flex-col gap-4">
+        {projectSections.map((section, index) => (
+          <Section key={index} section={section} selectedType={selectedType} />
+        ))}
       </div>
     </>
   )

utils/art.json

@@ -1,69 +1,87 @@
 [
   {
-    "title": "2d art (procreate)",
+    "title": "2d",
     "list": [
       {
         "title": "me on a bike",
-        "images": ["/images/bike.png"]
+        "images": ["/images/bike.png"],
+        "description": "i like baywheels"
       },
       {
         "title": "roadtrip",
-        "images": ["/images/roadtrip.png"]
+        "images": ["/images/roadtrip.png"],
+        "description": "stick season blasting as we drive through vermont"
+      },
+      {
+        "title": "memory",
+        "images": ["/images/lookback.png"],
+        "description": "look back (2024) is a great movie"
       },
       {
         "title": "illustrations for https://www.kernelmag.io/",
         "images": [
           "/images/irena.png",
           "/images/zora.png"
-        ]
+        ],
+        "description": "accompanied very cool writers"
+      },
+      {
+        "title": "twirl",
+        "images": ["/images/twirl.gif"],
+        "description": "learning frame by frame animation"
       },
       {
         "title": "summer",
-        "images": ["/images/summer.png"]
+        "images": ["/images/summer.png"],
+        "description": ":p"
       },
       {
         "title": "meditation study",
-        "images": ["/images/meditation.png"]
+        "images": ["/images/meditation.png"],
+        "description": "20 min figure drawing!"
       },
       {
         "title": "me but online",
-        "images": ["/images/online.png"]
+        "images": ["/images/online.png"],
+        "description": "concept art for my 3d piece virtual upload"
       },
       {
         "title": "ap art portfolio",
         "images": [
           "/images/reflection.jpg",
           "/images/why.jpg"
-        ]
-      },
-      {
-        "title": "twirl",
-        "images": ["/images/twirl.gif"]
+        ],
+        "description": "my theme was introspection"
       }
     ]
   },
   {
-    "title": "3d art (blender)",
+    "title": "3d",
     "list": [
       {
         "title": "yakult",
-        "images": ["/images/yakult.gif"]
+        "images": ["/images/yakult.gif"],
+        "description": "hand-drawn in blender"
       },
       {
-        "title": "my ass!!!",
-        "images": ["/images/cat.gif"]
+        "title": "cat cafe",
+        "images": ["/images/catcafe.gif"],
+        "description": "exercise in structural integrity"
       },
       {
         "title": "digital upload",
-        "images": ["/images/digitalupload.gif"]
+        "images": ["/images/digitalupload.gif"],
+        "description": "virtual persona 3d-ified"
       },
       {
-        "title": "cat cafe",
-        "images": ["/images/catcafe.gif"]
+        "title": "peppermint",
+        "images": ["/images/peppermint.gif"],
+        "description": "music video for jack stauber's peppermint"
       },
       {
-        "title": "peppermint",
-        "images": ["/images/peppermint.gif"]
+        "title": "my ass!!!",
+        "images": ["/images/cat.gif"],
+        "description": "inspired by a clip from bee and puppycat"
       }
     ]
   }