Minor UI improvements (#64)

Author: tomvothecoder

.gitattributes

@@ -0,0 +1 @@
+*.mp4 filter=lfs diff=lfs merge=lfs -text

package.json

@@ -23,7 +23,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.3.0",
-    "react-scripts": "5.0.1",
+    "react-player": "2.16.0",
+    "react-scripts": "^5.0.1",
     "react-scroll": "1.8.7",
     "typescript": "4.8.3",
     "web-vitals": "2.1.4"
@@ -34,7 +35,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-
   "browserslist": {
     "production": [
       ">0.2%",
@@ -69,5 +69,6 @@
     "src/**/*.+(js|jsx|ts|tsx|css|sass|less|json)": [
       "prettier --write"
     ]
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

public/videos/IMG_3290.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:13b1043a59764e613bb60283ffe3ca16e53a86cdcd5e64f4d052561234d1981c
+size 60170098

src/components/Career/About.tsx

@@ -29,12 +29,11 @@ const About: React.FC<Props> = () => {
                   </figure>
                 </div>
                 <div className="column is-three-quarters">
-                  <p className="job-desc"></p>
                   <p className="job-desc">
                     Aside from programming, my passions include powerlifting,
-                    running, hiking, watching MMA, and eating the best burrito
-                    that a town has to offer. Catch me around the California bay
-                    area!
+                    cooking, hiking, martial arts, and eating the best burrito
+                    that a town has to offer. Catch me around the California Bay
+                    Area!
                   </p>
 
                   <div className="container has-text-centered">

src/components/Coach/ContactForm.tsx

@@ -1,12 +1,16 @@
 import { faInstagram } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import selfPortrait from "assets/me.jpg";
 import { CSSinJS } from "common/types";
 
 import kwesforms from "kwesforms";
 import { useEffect } from "react";
 
 const ContactForm: React.FC = () => {
-  const styles: CSSinJS = { socialMedia: { marginTop: "10px" } };
+  const styles: CSSinJS = {
+    socialMedia: { marginTop: "10px" },
+    selfie: { justifyContent: "center", width: "55%" },
+  };
 
   useEffect(() => {
     kwesforms.init();
@@ -16,14 +20,19 @@ const ContactForm: React.FC = () => {
     <div className="has-text-centered">
       <div className="columns is-8 is-centered">
         <div
-          className="column is-4 has-text-centered is-vcentered"
+          className="column is-4 is-vcentered"
           data-aos="fade-in"
           data-aos-delay="100"
         >
+          <figure style={styles["selfie"]} className="image is-inline-block">
+            <img src={selfPortrait} alt="me" />
+          </figure>
           <h1 className="title is-1">Let's Connect</h1>
+
           <p className="is-size-5 ">
-            I would love to learn about your exercise aspirations. Shoot me a
-            message and I'll get back to you soon!
+            I would love to learn about your exercise aspirations. Message me on
+            Instagram or fill out the message form here and I'll get back to you
+            soon!
           </p>
           <div style={styles["socialMedia"]}>
             <p className="bd-notification is-primary">

src/components/Coach/CoreValues.tsx

@@ -7,7 +7,7 @@ const CoreValues: React.FC = () => {
   const styles: CSSinJS = {
     figure: { marginLeft: "auto", marginRight: "auto" },
     valueCaption: { fontSize: "18px", fontWeight: 600, marginTop: "5%" },
-    valueSubCaption: { fontSize: "16px", marginTop: "1%", fontStyle: "italic" },
+    valueSubCaption: { fontSize: "16px", marginTop: "1%" },
   };
   return (
     <section id="core-values">

src/components/Coach/Hero.tsx

@@ -1,8 +1,8 @@
 import { faInstagram } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import selfPortrait from "assets/me.jpg";
 import { CSSinJS } from "common/types";
 import "components/Career/Hero.css";
+import ReactPlayer from "react-player";
 
 function Hero() {
   const styles: CSSinJS = { selfie: { justifyContent: "center" } };
@@ -18,7 +18,17 @@ function Hero() {
               data-aos-delay="100"
             >
               <figure style={styles["selfie"]} className="image">
-                <img src={selfPortrait} alt="me" />
+                <div className="player-wrapper">
+                  <ReactPlayer
+                    className="react-player fixed-bottom"
+                    url="videos/IMG_3290.mp4"
+                    width="100%"
+                    height="100%"
+                    playing={true}
+                    loop={true}
+                    muted={true}
+                  />
+                </div>
               </figure>
             </div>
 
@@ -34,17 +44,21 @@ function Hero() {
                   a NASM Certified Personal Trainer and Powerlifting Coach with
                   over a decade of lifting experience.
                 </strong>{" "}
-                I have coached numerous powerlifting athletes who placed in the
-                top 3 of their division, with some winning best overall lifter.
-                I have also helped clients reached their weight-loss goals
-                through habit-based nutrition and exercise programs.
+                I've coached numerous powerlifting athletes over the years,
+                including those who placed top three in their division, with
+                some winning best overall lifter. I've also helped clients
+                reached their weight-loss goals through habit-based nutrition
+                and exercise programs.
               </p>
               <p id="hero-description">
-                My coaching philosophy focuses on deeply understanding each of
-                my client's goals and life circumstances to provide
-                individualized services. As a continuous learner, I love to
-                share my passion in exercise with everyone. Enough said, let's
-                link up and make some gains together! 💪🙌
+                <strong>
+                  My coaching philosophy focuses on deeply understanding
+                  each of my client's goals and life circumstances to provide
+                  individualized services.
+                </strong>{" "}
+                I'm a life-long continuous learner who loves to share my passion
+                in health and fitness with everyone. Enough said, let's link up
+                and make some gains together! 💪🙌
               </p>
               <div className="hero-icon">
                 <a

src/components/Coach/Services/System.tsx

@@ -18,7 +18,7 @@ const System: React.FC = () => {
       iconSrc: barbell,
       name: "Powerlifting Training and Meet Prep",
       bullets: [
-        "Off-season programming based on ideal volume, frequency, and periodization scheme for each athlete",
+        "Off-season programming based on athlete-specific volume, frequency, and periodization scheme",
         "Meet prep includes a 4-6 week peaking program, weekly calls, and attempt strategizing",
       ],
     },

yarn.lock

@@ -3635,6 +3635,11 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deepmerge@^4.0.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -6183,6 +6188,11 @@ listr2@^4.0.5:
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
@@ -6338,6 +6348,11 @@ memfs@^3.1.2, memfs@^3.4.3:
   dependencies:
     fs-monkey "^1.0.3"
 
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 [email protected]:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -7649,6 +7664,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-fast-compare@^3.0.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -7664,6 +7684,17 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+[email protected]:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.16.0.tgz#89070700b03f5a5ded9f0b3165d4717390796481"
+  integrity sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==
+  dependencies:
+    deepmerge "^4.0.0"
+    load-script "^1.0.0"
+    memoize-one "^5.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.0.1"
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -7684,7 +7715,7 @@ [email protected]:
   dependencies:
     history "^5.2.0"
 
-[email protected]:
+react-scripts@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"
   integrity sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==