Merge pull request #15 from jeremytraini/dev

Animations, Linting Pipeline and Refactoring
jeremytraini · Jan 12, 2024 · 433c488 · 433c488
2 parents 2b88d37 + 414ad98
commit 433c488
Show file tree

Hide file tree

Showing 20 changed files with 303 additions and 236 deletions.
diff --git a/.github/workflows/lint-tests.yml 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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}