diff --git a/.github/workflows/lint-tests.yml b/.github/workflows/lint-tests.yml
new file mode 100644
index 0000000..1a4cc81
--- /dev/null
+++ b/.github/workflows/lint-tests.yml
@@ -0,0 +1,19 @@
+name: Lint Test
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Install dependencies
+        run: |
+          npm install
+      
+      - name: Run Linting
+        run: |
+          npm run lint
diff --git a/app/page.js b/app/page.js
index c18f3ec..ececfd3 100644
--- a/app/page.js
+++ b/app/page.js
@@ -3,9 +3,7 @@ import projects from "../data/projects.yaml";
 import { Link } from "@nextui-org/link";
 import { fontGabarito } from "@/config/fonts";
 import clsx from "clsx";
-import { TypeAnimation } from 'react-type-animation';
 import Image from 'next/image';
-
 import { Navbar } from "@/components/Navbar";
 import ProjectCarousel from "@/components/ProjectCarousel";
 import Timeline from "@/components/Timeline";
@@ -16,6 +14,7 @@ import {
 	GithubIcon,
 	LinkedinIcon
 } from "@/components/Icons";
+import TypingEffect from "@/components/TypingEffect";
 
 export default function Home() {
   return (
@@ -32,20 +31,6 @@ export default function Home() {
       />
       <div className="flex flex-col justify-center items-center pt-2 md:pt-4 text-center min-h-min">
         <div>
-          {/* <TypeAnimation
-
-            sequence={[
-              siteConfig.name,
-            ]}
-            speed={30}
-            wrapper="div"
-            cursor={false}
-            className={clsx(
-              "text-white text-6xl sm:text-7xl lg:text-8xl",
-              fontGabarito.className
-            )}
-            style={{ paddingBottom: '3rem' }}
-          /> */}
           <div
             className={clsx(
               "text-white text-6xl sm:text-7xl lg:text-8xl pb-6",
@@ -58,9 +43,16 @@ export default function Home() {
         <div
           className="text-lg sm:text-xl px-16 sm:px-20 text-left text-white pb-8"
         >
-          <p className="pb-6 sm:text-xl md:text-2xl italic">Trust me, I&rsquo;m not a robot… but I speak their language.</p>
-          <p className="text-gray-200">Pursuing Software Engineering & Commerce at UNSW.</p>
-          <p className="text-gray-200">Always up for a challenge.</p>
+          <TypingEffect
+            className="sm:text-xl md:text-2xl italic h-12 leading-5 pb-8"
+            sequence={[
+              "Trust me, I’m not a robot...",
+              2000,
+              "Trust me, I’m not a robot... but I speak their language.",
+            ]}
+          />
+          <p className="text-gray-200 leading-5 pt-2">Pursuing Software Engineering & Commerce at UNSW.</p>
+          <p className="text-gray-200 leading-5 pt-2">Always up for a challenge.</p>
         </div>
         <div className="flex justify-center items-center gap-6 pb-10">
           <Link isExternal href={siteConfig.links.github} aria-label="Github">
diff --git a/components/BrandChip.js b/components/BrandChip.js
index 8c85440..b45d366 100644
--- a/components/BrandChip.js
+++ b/components/BrandChip.js
@@ -39,6 +39,7 @@ import {
   SiJest,
   SiPytest,
   SiGradle,
+  SiGooglecloud,
 } from "react-icons/si";
 import { FaJava } from "react-icons/fa";
 import {
@@ -195,6 +196,10 @@ const BrandChip = ({ brand, ...props }) => {
       color: "hover:bg-[#02303A]",
       icon: <SiGradle size={18} />,
     },
+    'Google Cloud': {
+      color: "hover:bg-[#4285F4]",
+      icon: <SiGooglecloud size={16} />,
+    },
   };
 
   let { color, icon } = brands[brand] || {
diff --git a/components/Carousel.js b/components/Carousel.js
index 4b61734..dee2b43 100644
--- a/components/Carousel.js
+++ b/components/Carousel.js
@@ -1,13 +1,27 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import Flickity from 'react-flickity-component';
 import BrandChip from "./BrandChip";
 import "flickity/css/flickity.css";
 
 const Carousel = ({ technologies }) => {
   const flickityRef = useRef(null);
-  let requestId;
+  const requestId = useRef(null);
+
+  const play = useCallback(() => {
+    const mainTicker = flickityRef.current && flickityRef.current.flkty;
+    if (mainTicker) {
+      mainTicker.x -= 0.1;
+      mainTicker.settle(mainTicker.x);
+      requestId.current = window.requestAnimationFrame(play);
+    }
+  }, []);
 
   useEffect(() => {
+    const pause = () => {
+      window.cancelAnimationFrame(requestId.current);
+      requestId.current = undefined;
+    };
+
     // Delay our logic to ensure Flickity has initialized
     setTimeout(() => {
       const mainTicker = flickityRef.current && flickityRef.current.flkty;
@@ -20,39 +34,11 @@ const Carousel = ({ technologies }) => {
     }, 200);
 
     return () => {
-      if (requestId) {
-        window.cancelAnimationFrame(requestId);
+      if (requestId.current) {
+        window.cancelAnimationFrame(requestId.current);
       }
     };
-  }, [flickityRef]);
-
-  useEffect(() => {
-    const mainTicker = flickityRef.current && flickityRef.current.flkty;
-    if (mainTicker) {
-      console.log(flickityRef.current.flkty);
-      // display the flickity container
-      // flickityRef.current.style.display = 'block';
-    } else {
-      // hide the flickity container
-      // flickityRef.current.style.display = 'none';
-    }
-  }, [flickityRef]);
-
-
-
-  function play() {
-    const mainTicker = flickityRef.current && flickityRef.current.flkty;
-    if (mainTicker) {
-      mainTicker.x -= 0.1;
-      mainTicker.settle(mainTicker.x);
-      requestId = window.requestAnimationFrame(play);
-    }
-  }
-
-  function pause() {
-    window.cancelAnimationFrame(requestId);
-    requestId = undefined;
-  }
+  }, [flickityRef, play]);
 
   function wrapAroundList(list) {
     const wrapLength = 20;
diff --git a/components/Footer.js b/components/Footer.js
index 675586e..6d060d6 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -18,7 +18,7 @@ export const Footer = () => {
 					</div>
 				</div>
 				<footer className="w-full flex items-center justify-left py-3">
-					<p className="text-default-500">© 2023 Jeremy Traini</p>
+					<p className="text-default-500">© 2024 Jeremy Traini</p>
 				</footer>
 			</div>
 		</section>
diff --git a/components/ProfileCard.js b/components/ProfileCard.js
index 4c85cc8..c9b0261 100644
--- a/components/ProfileCard.js
+++ b/components/ProfileCard.js
@@ -25,7 +25,7 @@ const ProfileCard = () => {
             </div>
             <p className="mt-1 text-md">Software Engineering Student at UNSW</p>
             <p className="mt-2 text-sm text-gray-500">Sydney, New South Wales, Australia</p>
-            <p className="mt-2 text-sm text-gray-500"><span className="font-bold">323</span> connections</p>
+            <p className="mt-2 text-sm text-gray-500"><span className="font-bold">338</span> connections</p>
           </div>
         </div>
         <div className="hidden sm:flex w-[232px] items-center gap-2">
diff --git a/components/ProjectButton.js b/components/ProjectButton.js
new file mode 100644
index 0000000..d75eb61
--- /dev/null
+++ b/components/ProjectButton.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Tooltip, Button } from "@nextui-org/react";
+
+const ProjectButton = ({ tooltip, className, onPress, shortText, longText, endIcon, ...props }) => {
+  return (
+    <Tooltip className="ml-1" showArrow={true} content={tooltip}>
+      <Button
+        className={className}
+        size="small"
+        onPress={onPress}
+        endContent={endIcon}
+        {...props}
+      >
+        <div className="hidden md:inline-block">{longText}</div>
+        <div className="inline-block md:hidden">{shortText}</div>
+      </Button>
+    </Tooltip>
+  )
+}
+
+export default ProjectButton
\ No newline at end of file
diff --git a/components/ProjectCard.js b/components/ProjectCard.js
index ce6bc05..8471e68 100644
--- a/components/ProjectCard.js
+++ b/components/ProjectCard.js
@@ -1,12 +1,35 @@
-import React from "react";
+"use client";
+import React, { useEffect, useRef } from 'react';
 import ProjectDetails from "./ProjectDetails";
 import ProjectImage from "./ProjectImage";
+import { motion, useInView, useAnimation } from "framer-motion";
 
 const ProjectCard = ({ project, index, openModal }) => {
   const isOdd = index % 2 == 0;
 
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: false });
+
+  const mainControls = useAnimation();
+
+  useEffect(() => {
+    if (isInView) {
+      mainControls.start("visible");
+    }
+  }, [isInView, mainControls]);
+
   return (
-    <div id={project.id} >
+    <motion.div
+      ref={ref}
+      id={project.id}
+      variants={{
+        hidden: { opacity: 0, y: 50 },
+        visible: { opacity: 1, y: 0 },
+      }}
+      initial="hidden"
+      animate={mainControls}
+      transition={{ duration: 0.5, delay: 0, ease: "easeOut" }}
+    >
       <div className="flex flex-col md:hidden mb-10 items-center shadow-md rounded-xl">
         <ProjectImage
           title={project.title}
@@ -39,7 +62,7 @@ const ProjectCard = ({ project, index, openModal }) => {
           </>
         )}
       </div>
-    </div>
+    </motion.div>
     
   );
 }
diff --git a/components/ProjectDetails.js b/components/ProjectDetails.js
index c0fc1dc..4b7be33 100644
--- a/components/ProjectDetails.js
+++ b/components/ProjectDetails.js
@@ -4,10 +4,10 @@ import {
   TbBrandGithub,
   TbBrandFigma,
   TbLockCode,
-  TbExternalLink
+  TbExternalLink,
 } from "react-icons/tb";
-import { Tooltip, Button } from "@nextui-org/react";
-
+import { FaApple } from "react-icons/fa";
+import ProjectButton from "./ProjectButton";
 
 const ProjectDetails = ({ project, openModal }) => {
   return (
@@ -21,58 +21,57 @@ const ProjectDetails = ({ project, openModal }) => {
           <Carousel technologies={project.technologies} />
         </div>
       </div>
-      <div className="flex flex-row justify-end">
+      <div className="flex flex-wrap gap-2 justify-end">
         {project.githubRepo && 
           (!project.isPrivate ? (
-            <Tooltip showArrow={true} content="View this project on Github.com">
-              <Button
-                className="ml-2 bg-black border-black hover:bg-gray-800 text-white"
-                size="small"
-                onPress={() => window.open("https://github.com/jeremytraini/" + project.githubRepo)}
-                endContent={<TbBrandGithub size={22} />}
-              >
-                <div className="hidden md:inline-block">View on Github</div>
-                <div className="inline-block md:hidden">Github</div>
-              </Button>
-            </Tooltip>
+            <ProjectButton
+              tooltip="View this project on github.com"
+              className="bg-black border-black hover:bg-gray-800 text-white"
+              onPress={() => window.open("https://github.com/jeremytraini/" + project.githubRepo)}
+              shortText="GitHub"
+              longText="View on GitHub"
+              endIcon={<TbBrandGithub size={22} />}
+            />
           ) : (
-            <Tooltip showArrow={true} content="Request access to the source code of this project">
-              <Button
-                className="ml-2"
-                size="small"
-                variant="ghost"
-                onPress={() => openModal(project)}
-                endContent={<TbLockCode color="gray" size={22} />}
-              >
-                <div className="hidden md:inline-block">Request Access</div>
-                <div className="inline-block md:hidden">Github</div>
-              </Button>
-            </Tooltip>
+            <ProjectButton
+              tooltip="Request access to the source code of this project"
+              onPress={() => openModal(project)}
+              shortText="GitHub"
+              longText="Request Access"
+              endIcon={<TbLockCode color="gray" size={22} />}
+              variant="ghost"
+            />
           ))
         }
         {project.figmaLink && 
-          <Button
-            className="ml-2 border-[#9747ff] bg-[#9747ff] text-white"
-            size="small"
+          <ProjectButton
+            tooltip="View the prototype on figma.com"
+            className="border-[#9747ff] bg-[#9747ff] text-white"
             onPress={() => window.open(project.figmaLink)}
-            endContent={<TbBrandFigma size={22} />}
-          >
-            <div className="hidden md:inline-block">View on Figma</div>
-            <div className="inline-block md:hidden">Figma</div>
-          </Button>
+            shortText="Figma"
+            longText="View on Figma"
+            endIcon={<TbBrandFigma size={22} />}
+          />
+        }
+        {project.appStoreUrl && 
+          <ProjectButton
+            tooltip={`View ${project.title} on the App Store`}
+            className="bg-black border-black hover:bg-gray-800 text-white"
+            onPress={() => window.open(project.appStoreUrl)}
+            shortText="App Store"
+            longText="View on the App Store"
+            endIcon={<FaApple size={22} />}
+          />
         }
         {project.liveLink && 
-          <Tooltip showArrow={true} content={`Go to ${project.liveLink}`}>
-            <Button
-              className="ml-2"
-              size="small"
-              color="primary"
-              onPress={() => window.open(project.liveLink)}
-              endContent={<TbExternalLink size={22} />}
-            >
-              Live
-            </Button>
-          </Tooltip>
+          <ProjectButton
+            tooltip={`Go to ${project.liveLink}`}
+            onPress={() => window.open(project.liveLink)}
+            shortText="Live"
+            longText="View Live"
+            endIcon={<TbExternalLink size={22} />}
+            color="primary"
+          />
         }
       </div>
     </div>
diff --git a/components/ProjectDisplayCard.js b/components/ProjectDisplayCard.js
index 8b966ec..afba24c 100644
--- a/components/ProjectDisplayCard.js
+++ b/components/ProjectDisplayCard.js
@@ -1,9 +1,7 @@
 "use client";
-
 import React, { useEffect } from "react";
 import NextImage from "next/image";
 
-
 const ProjectCard = ({ project, ...props }) => {
   useEffect(() => {
     document.addEventListener("DOMContentLoaded", function () {
diff --git a/components/ProjectImage.js b/components/ProjectImage.js
index e072939..50ba9e6 100644
--- a/components/ProjectImage.js
+++ b/components/ProjectImage.js
@@ -1,12 +1,10 @@
 import React from "react";
 import NextImage from "next/image";
 
-const ProjectImage = ({ title, src, height, width }) => {
+const ProjectImage = ({ title, src }) => {
   return (
     <div className="w-full md:w-[50%] lg:w-[60%] h-[250px] md:h-[280px] lg:h-[450px] rounded-xl overflow-hidden relative">
-      <div
-        className="relative w-full h-full"
-      >
+      <div className="relative w-full h-full" >
         <NextImage
           src={src || "/images/thumbnails/placeholder.png"}
           alt={"Project thumbnail for " + title}
diff --git a/components/Projects.js b/components/Projects.js
index ae7c77a..1148a69 100644
--- a/components/Projects.js
+++ b/components/Projects.js
@@ -1,42 +1,9 @@
 "use client";
-
 import React, { useState } from "react";
-
 import AccessModal from './AccessModal';
 import { useDisclosure } from "@nextui-org/react";
 import ProjectCard from "./ProjectCard";
 
-const fadeIn = (direction, type, delay, duration) => ({
-  hidden: {
-    x: direction === 'left' ? 100 : direction === 'right' ? -100 : 0,
-    y: direction === 'up' ? 100 : direction === 'down' ? -100 : 0,
-    opacity: 0,
-  },
-  show: {
-    x: 0,
-    y: 0,
-    opacity: 1,
-    transition: {
-      type,
-      delay,
-      duration,
-      ease: 'easeOut',
-    },
-  },
-});
-
-const staggeredContainer = (staggerChildren, delayChildren) => ({
-  hidden: {},
-  show: {
-    transition: {
-      staggerChildren,
-      delayChildren,
-    },
-  },
-});
-
-
-
 const Projects = ({ projects }) => {
   const {isOpen, onOpen, onOpenChange} = useDisclosure();
   const [currentProject, setCurrentProject] = useState(null);
@@ -48,19 +15,11 @@ const Projects = ({ projects }) => {
 
   return (
     <div className="py-4">
-      <div
-        // variants={staggeredContainer(0.1, 0.1)}
-        // initial="hidden"
-        // whileInView="show"
-        // viewport={{ once: false, amount: 0.25 }}
-      >
+      <div>
         {projects
           .filter((project) => !project.hidden)
           .map((project, index) => (
-            <div
-              key={index}
-              // variants={fadeIn('left', 'tween', 0.2, 1)}
-            >
+            <div key={index} >
               <ProjectCard project={project} index={index} openModal={openModal} />
             </div>
           ))}
diff --git a/components/Timeline.js b/components/Timeline.js
index 60f5576..e1a58f4 100644
--- a/components/Timeline.js
+++ b/components/Timeline.js
@@ -1,83 +1,43 @@
-import React from 'react';
-import Image from 'next/image';
-import { HiRocketLaunch } from "react-icons/hi2";
-import BarkerLogo from '../public/images/timeline/barker_logo.png';
-import UnswLogo from '../public/images/timeline/unsw_logo.png';
-import InfotrackLogo from '../public/images/timeline/infotrack_logo.png';
+"use client";
+import React, { useEffect, useRef } from 'react';
+import TimelineItem from './TimelineItem';
+import { motion, useInView, useAnimation } from "framer-motion";
+import experiences from "../data/experiences.yaml";
 
-const experiences = [
-  {
-    type: 'High School',
-    name: 'Barker College',
-    duration: '2013 - 2020',
-    image: BarkerLogo,
-    backgroundColor: '#e02725',
-    scale: 0.8
-  },
-  {
-    type: 'University',
-    name: 'UNSW Sydney',
-    duration: '2021 - Present',
-    image: UnswLogo,
-    backgroundColor: '#fee600',
-    scale: 0.7
-  },
-  {
-    type: 'Internship',
-    name: 'InfoTrack',
-    duration: '2022 - 2023',
-    image: InfotrackLogo,
-    backgroundColor: '#ffffff',
-    scale: 0.8
-  },
-  {
-    type: 'Next',
-    name: 'Your Company?',
-    duration: '2023',
-    icon: <HiRocketLaunch color="white" className="w-12 h-12" />,
-    backgroundColor: '#ffa500',
-    scale: 0.8
-  }
-];
+function Timeline() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: false });
 
-function TimelineItem({ data }) {
-  return (
-    <div className="timeline-item flex space-x-4 my-8">
-      <div className="-ml-2 mt-8 w-4 h-4 bg-default-600 rounded shadow-xl" />
-      <div
-        className="w-20 h-20 rounded-xl relative shadow-xl flex justify-center items-center"
-        style={{ backgroundColor: data.backgroundColor }}
-      >
-        {data.image && (
-          <Image
-            src={data.image}
-            style={{ objectFit: "contain", transform: `scale(${data.scale})` }}
-            fill={true}
-            alt={"Logo for " + data.name}
-            sizes="160px"
-          />
-        )}
-        {data.icon}
-      </div>
-      <div className="flex-1">
-        <div>
-          <h3 className="text-xl mb-2">{data.type}</h3>
-          <h3 className="text-xl font-bold mb-2">{data.name}</h3>
-          <p className="text-gray-500">{data.duration}</p>
-          <p className="mt-2 text-gray-700">{data.description}</p>
-        </div>
-      </div>
-    </div>
-  );
-}
+  const itemControls = useAnimation();
+
+  useEffect(() => {
+    if (isInView) {
+      itemControls.start("visible");
+    }
+  }, [isInView, itemControls]);
 
-function Timeline() {
   return (
-    <div className="px-6 pb-8 flex flex-col md:flex-row justify-center">
+    <motion.div
+      ref={ref}
+      className="px-6 pb-8 flex flex-col md:flex-row justify-center"
+    >
       <div className="border-l-3 md:border-b-3 border-default-400 md:rounded-bl-lg flex-1">
-        {experiences.slice(0,2).map((experience, index) => (
-          <TimelineItem key={index} data={experience} />
-        ))}
+        <motion.div>
+          {experiences.slice(0,2).map((experience, index) => (
+            <motion.div
+              key={index}
+              animate={itemControls}
+              variants={{
+                hidden: { opacity: 0, y: 20 },
+                visible: { opacity: 1, y: 0 },
+              }}
+              transition={{ duration: 0.5, delay: 0.2 * index }}
+              initial="hidden"
+            >
+              <TimelineItem key={index} data={experience} />
+            </motion.div>
+          ))}
+        </motion.div>
       </div>
       <div className="hidden w-20 md:flex md:flex-row md:align-self mr-[-3px]">
         <div className="hidden md:block border-b-3 border-r-3 border-default-400 rounded-br-lg h-1/2 w-1/2 self-end mr-[-3px]" />
@@ -85,11 +45,24 @@ function Timeline() {
       </div>
       <div className="hidden md:block border-t-3 border-r-3 border-default-400 rounded-tr-lg w-10" />
       <div className="flex-1 border-l-3 border-default-400 md:border-none">
-        {experiences.slice(2).map((experience, index) => (
-          <TimelineItem key={index} data={experience} />
-        ))}
+        <div>
+          {experiences.slice(2).map((experience, index) => (
+            <motion.div
+              key={index}
+              animate={itemControls}
+              variants={{
+                hidden: { opacity: 0, y: 20 },
+                visible: { opacity: 1, y: 0 },
+              }}
+              transition={{ duration: 0.5, delay: 0.2 * (index + 2) }}
+              initial="hidden"
+            >
+              <TimelineItem key={index} data={experience} />
+            </motion.div>
+          ))}
+        </div>
       </div>
-    </div>
+    </motion.div>
   );
 }
 
diff --git a/components/TimelineItem.js b/components/TimelineItem.js
new file mode 100644
index 0000000..52aadd6
--- /dev/null
+++ b/components/TimelineItem.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { HiRocketLaunch } from "react-icons/hi2";
+import BarkerLogo from '../public/images/timeline/barker_logo.png';
+import UnswLogo from '../public/images/timeline/unsw_logo.png';
+import InfotrackLogo from '../public/images/timeline/infotrack_logo.png';
+import TimelineLogo from './TimelineLogo';
+
+const icons = {
+  "barker": <TimelineLogo src={BarkerLogo} organisation="Barker College" scale={0.8} />,
+  "unsw": <TimelineLogo src={UnswLogo} organisation="UNSW" scale={0.7} />,
+  "infotrack": <TimelineLogo src={InfotrackLogo} organisation="InfoTrack" scale={0.8} />,
+  "rocket": <HiRocketLaunch color="white" className="w-12 h-12" />
+};
+
+const TimelineItem = ({ data }) => {
+  return (
+    <div className="timeline-item flex space-x-4 my-8">
+      <div className="-ml-2 mt-8 w-4 h-4 bg-default-600 rounded shadow-xl" />
+      <div
+        className="w-20 h-20 rounded-xl relative shadow-xl flex justify-center items-center"
+        style={{ backgroundColor: data.backgroundColor }}
+      >
+        {icons[data.icon]}
+      </div>
+      <div className="flex-1">
+        <div>
+          <h2 className="text-xl mb-2">{data.type}</h2>
+          <h3 className="text-l font-bold mb-2" style={{ whiteSpace: "nowrap" }}>{data.name}</h3>
+          <p className="text-gray-500">{data.duration}</p>
+          <p className="mt-2 text-gray-700">{data.description}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TimelineItem
\ No newline at end of file
diff --git a/components/TimelineLogo.js b/components/TimelineLogo.js
new file mode 100644
index 0000000..7dfebda
--- /dev/null
+++ b/components/TimelineLogo.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import Image from 'next/image';
+
+const TimelineLogo = ({ src, organisation, scale }) => {
+  return (
+    <Image
+      src={src}
+      style={{ objectFit: "contain", transform: `scale(${scale})` }}
+      alt={organisation + " logo"}
+      fill={true}
+      sizes="160px"
+    />
+  )
+}
+
+export default TimelineLogo
\ No newline at end of file
diff --git a/components/TypingEffect.js b/components/TypingEffect.js
new file mode 100644
index 0000000..8a9443c
--- /dev/null
+++ b/components/TypingEffect.js
@@ -0,0 +1,16 @@
+"use client";
+import React from 'react';
+import { TypeAnimation } from 'react-type-animation';
+
+const TypingEffect = ({ className, sequence }) => {
+  return (
+    <TypeAnimation
+      sequence={sequence}
+      speed={60}
+      wrapper="div"
+      className={className}
+    />
+  )
+}
+
+export default TypingEffect
\ No newline at end of file
diff --git a/data/experiences.yaml b/data/experiences.yaml
new file mode 100644
index 0000000..30eca69
--- /dev/null
+++ b/data/experiences.yaml
@@ -0,0 +1,23 @@
+- type: High School
+  name: Barker College
+  duration: 2013 - 2020
+  backgroundColor: "#e02725"
+  icon: barker
+
+- type: University
+  name: UNSW Sydney
+  duration: 2021 - Present
+  backgroundColor: "#fee600"
+  icon: unsw
+
+- type: Internship
+  name: InfoTrack
+  duration: 2022 - 2023
+  backgroundColor: "#ffffff"
+  icon: infotrack
+
+- type: Next
+  name: Your Company?
+  duration: '2024'
+  backgroundColor: "#ffa500"
+  icon: rocket
diff --git a/data/projects.yaml b/data/projects.yaml
index a26fad6..b9d48f7 100644
--- a/data/projects.yaml
+++ b/data/projects.yaml
@@ -14,7 +14,9 @@
     - React Native
     - Express.js
     - Firebase
+    - Google Cloud
     - Axios
+    - Jest
   imageUrl: /images/thumbnails/tekkerz.png
   imageHeight: 1920
   imageWidth: 3840
diff --git a/package.json b/package.json
index b9d1303..7b5d5e3 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "@nextui-org/react": "^2.1.13",
     "axios": "^1.5.1",
     "flickity": "2.3.0",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^10.17.9",
     "js-yaml": "^4.1.0",
     "next": "latest",
     "next-themes": "^0.2.1",
diff --git a/yarn.lock b/yarn.lock
index 87aaa01..3b80a52 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3137,10 +3137,10 @@ fraction.js@^4.3.6:
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz"
   integrity sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==
 
-framer-motion@^10.16.4:
-  version "10.16.4"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.4.tgz#30279ef5499b8d85db3a298ee25c83429933e9f8"
-  integrity sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==
+framer-motion@^10.17.9:
+  version "10.17.9"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.17.9.tgz#d3bb15039e8bd6ba5d044a3fa181332a09cd2692"
+  integrity sha512-z2NpP8r+XuALoPA7ZVZHm/OoTnwkQNJFBu91sC86o/FYvJ4x7ar3eQnixgwYWFK7kEqOtQ6whtNM37tn1KrOOA==
   dependencies:
     tslib "^2.4.0"
   optionalDependencies: