Add company list

package.json

@@ -18,6 +18,8 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
     "dotenv": "^8.2.0",
     "prettier": "^3.1.0",

src/pages/Home/Companies.tsx

@@ -0,0 +1,76 @@
+function CompanyList({
+  companies,
+  reverse,
+}: {
+  companies: string[];
+  reverse?: boolean;
+}) {
+  return (
+    <div className="horizontal-scrolling-items">
+      <div
+        className={`horizontal-scrolling-items__item${
+          reverse ? "--reverse" : ""
+        }`}
+      >
+        {companies.map((company) => (
+          <span className="mx-10 text-gray-400 text-lg" key={company}>
+            {company}
+          </span>
+        ))}
+      </div>
+      <div
+        className={`horizontal-scrolling-items__item${
+          reverse ? "--reverse" : ""
+        }`}
+      >
+        {companies.map((company) => (
+          <span className="mx-10 text-gray-400 text-lg" key={company}>
+            {company}
+          </span>
+        ))}
+      </div>
+      <div
+        className={`horizontal-scrolling-items__item${
+          reverse ? "--reverse" : ""
+        }`}
+      >
+        {companies.map((company) => (
+          <span className="mx-10 text-gray-400 text-lg" key={company}>
+            {company}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function Companies() {
+  const companiesA = [
+    "IBM Research",
+    "Pepsi",
+    "Sephora",
+    "Neutrogena",
+    "McDonalds",
+    "Sunglass Hut",
+    "Maui Jim",
+    "Petco",
+  ];
+
+  const companiesB = [
+    "Neiman Marcus",
+    "Coravin",
+    "Perch Interactive",
+    "Leif Technologies",
+    "VotER",
+    "Bubble & Bubble",
+    "Bayer",
+    "Jo Malone",
+  ];
+
+  return (
+    <div className="space-y-12">
+      <CompanyList companies={companiesA} />
+      <CompanyList companies={companiesB} reverse={true} />
+    </div>
+  );
+}

src/pages/Home/HomePage.jsx

@@ -6,6 +6,7 @@ import portfolioData from "../../data/portfolioData";
 import "./home-page.css";
 import { CSSTransition } from "react-transition-group";
 import Skills from "./Skills";
+import Companies from "./Companies";
 
 function HomePage({
   isLoaded,
@@ -18,9 +19,12 @@ function HomePage({
     <div className="home-page">
       {loadBackground ? <Background /> : null}
       <Header />
-      <div className="mt-24 mb-24">
+      <div className="mt-40 mb-40">
         <Skills />
       </div>
+      <div className="mt-40 mb-40">
+        <Companies />
+      </div>
       {loadPortfolio ? null : <div className="home-page__header__spacer" />}
       <CSSTransition
         mountOnEnter

src/pages/Home/Skills.tsx

@@ -25,10 +25,10 @@ export default function Skills() {
       label: "Vue.js",
       year: 2020,
     },
-    {
-      label: "Angular",
-      year: 2016,
-    },
+    // {
+    //   label: "Angular",
+    //   year: 2016,
+    // },
     {
       label: "AWS",
       year: 2014,
@@ -56,6 +56,7 @@ export default function Skills() {
       <div className="text-center px-12 sm:px-6">
         {skills.map((skill) => (
           <motion.div
+            key={skill.label}
             className="inline-block px-6 py-2"
             variants={{
               hidden: {

src/pages/Home/components/Header/Header.css

@@ -15,7 +15,7 @@
   margin-right: auto;
   line-height: 1.45em;
   font-size: calc(18px + 1vmin);
-  font-family: "Merriweather", "Helvetica Neue", Helvetica, sans-serif;
+  font-family: "Merriweather", "Times New Roman", Helvetica, sans-serif;
 }
 
 .home__header__profile {

src/pages/Home/home-page.css

@@ -8,4 +8,52 @@
 
 .home-page__header__spacer {
   height: 20vh;
-}
+}
+
+.company-list__item {
+  font-family: "Merriweather", "Times New Roman", Helvetica, sans-serif;
+}
+
+@keyframes infiniteScroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes infiniteScrollReverse {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.horizontal-scrolling-items {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+
+  max-width: 100vw;
+  @media only screen and (min-width: 800px) {
+    mask-image: linear-gradient(
+      var(--mask-direction, to right),
+      hsl(0 0% 0% / 0),
+      hsl(0 0% 0% / 1) 20%,
+      hsl(0 0% 0% / 1) 80%,
+      hsl(0 0% 0% / 0)
+    );
+  }
+}
+.horizontal-scrolling-items__item {
+  animation: infiniteScroll 90s infinite linear;
+  display: inline-block;
+}
+
+.horizontal-scrolling-items__item--reverse {
+  animation: infiniteScrollReverse 90s infinite linear;
+  display: inline-block;
+}

yarn.lock

@@ -555,6 +555,32 @@
   resolved "https://registry.yarnpkg.com/@types/p5/-/p5-0.9.1.tgz#920c6cd6ee30b5d9e5cc04cb9b11bb762c333bc5"
   integrity sha512-4glOKdqdBiRWDFZwi/MjHudPV2U4t2L4fTTSacGapfFxyNXzZcAshAjqmrJkCIZcFlhRBEAL7AM95xRDMfrIwg==
 
+"@types/prop-types@*":
+  version "15.7.11"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
+  integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
+
+"@types/react-dom@^18.2.18":
+  version "18.2.18"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.18.tgz#16946e6cd43971256d874bc3d0a72074bb8571dd"
+  integrity sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^18.2.45":
+  version "18.2.45"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.45.tgz#253f4fac288e7e751ab3dc542000fb687422c15c"
+  integrity sha512-TtAxCNrlrBp8GoeEp1npd5g+d/OejJHFxS3OWmrPBMFaVQMSN0OFySozJio5BHxTuTeug00AVXVAjfDSfk+lUg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.8"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
+  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
+
 "@vitejs/plugin-react@^4.2.1":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz#744d8e4fcb120fc3dbaa471dadd3483f5a304bb9"
@@ -846,6 +872,11 @@ csstype@^2.6.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
   integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==
 
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 debug@^4.1.0, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"