add gif project

components/intro.tsx

@@ -58,7 +58,7 @@ export default function Intro() {
       </div>
 
       <motion.h1
-        className="mb-10 mt-4 px-4 text-2xl font-medium !leading-[1.5] sm:text-4xl"
+        className="mb-8 mt-4 px-4 text-2xl font-medium !leading-[1.5] sm:text-4xl"
         initial={{ opacity: 0, y: 100 }}
         animate={{ opacity: 1, y: 0 }}
       >
@@ -69,17 +69,15 @@ export default function Intro() {
         <span className="underline">frontend development</span>.
       </motion.h1>
 
-      <motion.div className="mb-3"
+      <motion.div className="mb-8"
         initial={{ opacity: 0, y: 100 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{
           delay: 0.1,
         }}>
-        <div className="mb-4 text-sm">
+        <div className="text-sm">
           This site was built with <span className="italic">React & Next.js</span>
         </div>
-        <div>Checkout <span className="font-bold">more projects</span> below
-        </div>
       </motion.div>
 
       <motion.div
@@ -98,7 +96,7 @@ export default function Intro() {
             setTimeOfLastClick(Date.now());
           }}
         >
-          More projects{" "}
+          My projects{" "}
           <BsArrow90DegRight style={{ transform: 'rotate(90deg)' }} className="opacity-70 group-hover:translate-x-1 transition" />
         </Link>
       </motion.div>

lib/data.ts

@@ -7,6 +7,7 @@ import floWrestlingImg from "@/public/flowrestling.png";
 import inspiratoImg from "@/public/inspirato.png";
 import flightTrackerImg from "@/public/flight-tracker.png";
 import builtInAtxImg from "@/public/builtinatx.png";
+import giphySearchImg from "@/public/giphy-search.png";
 
 export const links = [
   {
@@ -103,11 +104,10 @@ export const projectsData = [
     imageUrl: floHockeyImg,
   },
   {
-    title: "Flight Tracker",
-    description:
-      "Developed Flight Tracker, the most feature and data rich application for globally tracking and managing private jets.",
-    tags: ["Geological Mapping", "MapBox", "Leaflet.js", "Angular", "Typescript", "SaaS"],
-    imageUrl: flightTrackerImg,
+    title: "GIF Search",
+    description: "A fun project building a search engine using the Giphy API. Includes mosaic layout, infinite scroll, error and load states + unit tests.",
+    tags: ["React", "Jest", "TailwindCSS", "SSR", "State Hooks"],
+    imageUrl: giphySearchImg
   },
   {
     title: "Athlete Profiles",
@@ -116,11 +116,18 @@ export const projectsData = [
     tags: ["Fullstack", "TypeScript", "SEO", "Node.js", "Firestore", "NoSQL", "Storybook", "SSR", "Redis", "CDN", "A/B Test", "Jest"],
     imageUrl: floWrestlingImg,
   },
+  {
+    title: "Flight Tracker",
+    description:
+      "Developed Flight Tracker, the most feature and data rich application for globally tracking and managing private jets.",
+    tags: ["Geological Mapping", "MapBox", "Leaflet.js", "Angular", "Typescript", "SaaS"],
+    imageUrl: flightTrackerImg,
+  },
   {
     title: "Payment Processing",
     description:
       "I worked on an agile team to deliver a more flexible payment processing platform to a luxury travel company.",
-    tags: ["Angular", "ASP.NET Web Api", "Agile Scrum", "Git"],
+    tags: ["JavaScript", "ASP.NET Web Api", "Agile Scrum", "Git"],
     imageUrl: inspiratoImg,
   }
 ] as const;