Add motion

package.json

@@ -8,6 +8,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.7",
+    "framer-motion": "^10.16.14",
     "p5": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/pages/Home/HomePage.jsx

@@ -16,15 +16,7 @@ function HomePage({
   return (
     <div className="home-page">
       {loadBackground ? <Background /> : null}
-      <CSSTransition
-        mountOnEnter
-        unmountOnExit
-        in={isLoaded}
-        timeout={2000}
-        classNames="fade-in-up"
-      >
         <Header />
-      </CSSTransition>
       {loadPortfolio ? null : <div className="home-page__header__spacer" />}
       <CSSTransition
         mountOnEnter

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

@@ -11,13 +11,12 @@
 }
 
 .home__header__text {
-  max-width: 600px;
+  max-width: 800px;
   width: 80%;
   margin-left: auto;
   margin-right: auto;
-  text-align: justify;
   line-height: 1.45em;
-  font-size: calc(10px + 2vmin);
+  font-size: calc(18px + 1vmin);
   font-family: "Merriweather", "Helvetica Neue", Helvetica, sans-serif;
 }
 

src/pages/Home/components/Header/Header.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import {motion} from 'framer-motion'
 import "./Header.css";
 
 class Header extends React.Component {
@@ -33,22 +34,22 @@ class Header extends React.Component {
     const yearsExperienceText = this.getYearsText(yearsExperience);
     return (
       <header className="home__header">
-        <div className="home__header__text">
-          <div className="home__header__profile">
+        <motion.div className="home__header__text" initial={{opacity: 0, y: 200}} whileInView={{opacity: 1, y: 0}}>
+          <motion.div className="home__header__profile" >
             <img
               src="./images/profile-photo.jpg"
               className="home__header__profile__photo"
               alt="Ryan Villanueva"
             />
-          </div>
+          </motion.div>
           <div>
             Ryan Villanueva is a full stack software engineer in New York City
             with over {yearsExperienceText} years of professional experience
             leading technical projects and teams. He graduated from Wharton and
             worked at IBM Research's innovation lab before moving on to
             venture-backed startups.
           </div>
-        </div>
+        </motion.div>
       </header>
     );
   }

src/pages/Home/components/Portfolio/PortfolioItem.jsx

@@ -1,17 +1,18 @@
 import React from 'react';
+import {motion} from 'framer-motion'
 
 function PortfolioItem({item, openProjectById}) {
   const thumbnailStyle = item.thumbnailUrl ? {
     backgroundImage: `url(${item.thumbnailUrl})`,
     backgroundPosition: item.thumbnailPosition || undefined
   } : null;
   return (
-    <div className="portfolio__item flex-cell" onClick={() => openProjectById(item._id)}>
+    <motion.div className="portfolio__item flex-cell" onClick={() => openProjectById(item._id)} initial={{opacity: 0, y: 200}} whileInView={{opacity: 1, y: 0}}>
       <div className="portfolio__item__thumbnail flex-item" style={thumbnailStyle}>
         <div className="portfolio__item__thumbnail__overlay"></div>
       </div>
       <div className="portfolio__item__text">{item.title}</div>
-    </div>
+    </motion.div>
   );
 }
 

src/pages/Home/components/Portfolio/portfolio.css

@@ -57,7 +57,5 @@
   position: absolute;
   bottom: 6px;
   color: rgb(96, 96, 96);
-  font-weight: 300;
   font-size: 0.85em;
-  text-transform: uppercase;
 }

yarn.lock

@@ -246,6 +246,18 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@esbuild/android-arm64@0.19.8":
   version "0.19.8"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.19.8.tgz#fb7130103835b6d43ea499c3f30cfb2b2ed58456"
@@ -858,6 +870,15 @@ execa@^8.0.1:
     signal-exit "^4.1.0"
     strip-final-newline "^3.0.0"
 
+framer-motion@^10.16.14:
+  version "10.16.14"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.14.tgz#77099f7e8d949dc68f9aea1497eda06f2454e6b2"
+  integrity sha512-poovsXtR7doXRfjqVjUai82Zl2z5yMUFKtYWHnQK+xsDVPhHVUJEU+Kr2kqEnUV4gry+LcRdrDzcMI7OdJlDMg==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -1383,6 +1404,11 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
+tslib@^2.4.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 type-detect@^4.0.0, type-detect@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"