Enhancements to the coaching website UX

src/components/Career/Hero.css

@@ -11,13 +11,28 @@
   font-size: 36px;
   color: #fff;
   background-color: #24232c !important;
-  box-shadow: -10px -12px 0px #24232c, 10px -12px 0px #24232c,
-    -10px 0px 0px #24232c, 10px 0px 0px #24232c;
+  box-shadow:
+    -10px -12px 0px #24232c,
+    10px -12px 0px #24232c,
+    -10px 0px 0px #24232c,
+    10px 0px 0px #24232c;
   font-weight: normal;
   display: inline;
   line-height: 0;
 }
 
+#banner {
+  font-size: 32px;
+  color: #fff;
+  background-color: #24232c !important;
+  box-shadow:
+    -10px -12px 0px #24232c,
+    10px -12px 0px #24232c,
+    -10px 0px 0px #24232c,
+    10px 0px 0px #24232c;
+  font-weight: normal;
+}
+
 #hero-description {
   color: #24232c;
   font-size: 16px;

src/components/Coach/Banner.tsx

@@ -0,0 +1,21 @@
+import "components/Career/Hero.css";
+import React from "react";
+
+const Banner: React.FC = () => {
+  1;
+  return (
+    <section className="container">
+      <div className="columns is-9 is-centered is-vcentered">
+        <div
+          className="columns has-text-centered"
+          data-aos="fade-in"
+          data-aos-delay="100"
+        >
+          <h1 id="banner">"Science-based, performance driven training"</h1>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Banner;

src/components/Coach/ContactForm.tsx

@@ -1,51 +1,56 @@
 import { faInstagram } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import selfPortrait from "assets/me.jpg";
+import ReactPlayer from "react-player";
+
 import { CSSinJS } from "common/types";
 
 import kwesforms from "kwesforms";
 import { useEffect } from "react";
 
 const ContactForm: React.FC = () => {
   const styles: CSSinJS = {
+    caption: { marginBottom: "10px" },
     socialMedia: { marginTop: "10px" },
-    selfie: { justifyContent: "center", width: "55%" },
+    selfie: { justifyContent: "center" },
+    igHandle: { fontSize: "24px", marginLeft: "5px" },
   };
 
   useEffect(() => {
     kwesforms.init();
   }, []);
 
   return (
-    <div className="has-text-centered">
+    <div className="has-text-center">
       <div className="columns is-8 is-centered">
         <div
           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 has-text-dark-grey">
-            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!
+          <h1 className="title is-1 is-underlined">Let's Connect</h1>
+          <p className="is-size-5 has-text-dark-grey" style={styles["caption"]}>
+            I want to learn about your exercise aspirations. Message me here or
+            on Instagram and I'll get back to you soon.
           </p>
-          <div style={styles["socialMedia"]}>
-            <p className="bd-notification is-primary">
-              <a
-                href="https://www.instagram.com/coachtomvo/"
-                id="instagram-icon"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <FontAwesomeIcon icon={faInstagram} size="3x" />
-              </a>
-            </p>
-          </div>
+
+          <figure
+            style={styles["selfie"]}
+            className="image is-inline-block is-hidden-mobile"
+          >
+            <div className="player-wrapper">
+              <ReactPlayer
+                className="react-player fixed-bottom"
+                url="https://github.com/tomvothecoder/tomvo.me/raw/main/public/videos/IMG_3290.mp4"
+                width="60%"
+                height="60%"
+                playing={true}
+                loop={true}
+                muted={true}
+                playsinline={true}
+                webkit-playsinline={true}
+              />
+            </div>
+          </figure>
         </div>
         <div
           className="column card is-4 has-text-left"
@@ -56,6 +61,19 @@ const ContactForm: React.FC = () => {
             className="kwes-form"
             action="https://kwesforms.com/api/foreign/forms/aSVFVwmIio7ugCj6l1gO"
           >
+            <div style={styles["socialMedia"]}>
+              <p className="bd-notification is-primary">
+                <a
+                  href="https://www.instagram.com/coachtomvo/"
+                  id="instagram-icon"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <FontAwesomeIcon icon={faInstagram} size="3x" />
+                  <span style={styles["igHandle"]}>@coachtomvo</span>
+                </a>
+              </p>
+            </div>
             <div className="field">
               <label className="label" htmlFor="name">
                 Name

src/components/Coach/CoreValues.tsx

@@ -6,7 +6,7 @@ import { CSSinJS } from "common/types";
 const CoreValues: React.FC = () => {
   const styles: CSSinJS = {
     figure: { marginLeft: "auto", marginRight: "auto" },
-    valueCaption: { fontSize: "18px", fontWeight: 600, marginTop: "5%" },
+    valueCaption: { fontSize: "18px", fontWeight: 500, marginTop: "5%" },
     valueSubCaption: { fontSize: "16px", marginTop: "1%" },
   };
   return (
@@ -19,10 +19,10 @@ const CoreValues: React.FC = () => {
                 <img src={client} alt="client" />
               </figure>
               {/* <a href="https://www.flaticon.com/free-icons/client" title="client icons">Client icons created by Freepik - Flaticon</a> */}
-              <h2 style={styles["valueCaption"]}>Client first, period.</h2>
+              <h2 style={styles["valueCaption"]}>Client first</h2>
               <p style={styles["valueSubCaption"]}>
                 I will always uphold my integrity as a coach and never cut
-                corners just to make a dime.
+                corners.
               </p>
             </div>
           </div>
@@ -34,10 +34,10 @@ const CoreValues: React.FC = () => {
                 <img src={science} alt="science" />
               </figure>
               {/* Source: <a href="https://www.flaticon.com/free-icons/computer" title="computer icons">Computer icons created by vectorsmarket15 - Flaticon</a> */}
-              <h2 style={styles["valueCaption"]}>Simple and science-based</h2>
+              <h2 style={styles["valueCaption"]}>Science-based</h2>
               <p style={styles["valueSubCaption"]}>
-                Bro-science is a thing of the past! Let's talk about that real
-                juicy science instead.
+                I geek out on exercise science, which is the foundation of my
+                coaching system.
               </p>
             </div>
           </div>
@@ -48,10 +48,10 @@ const CoreValues: React.FC = () => {
               <figure className="image is-96x96" style={styles["figure"]}>
                 <img src={barChart} alt="bar-chart" />
               </figure>
-              <h2 style={styles["valueCaption"]}>Individualized services</h2>
+              <h2 style={styles["valueCaption"]}>Individualized</h2>
               <p style={styles["valueSubCaption"]}>
-                Everything is tailored to your specific goals, experience level,
-                and life circumstances.
+                Services are tailored to your goals, experience, and life
+                circumstances.
               </p>
             </div>
           </div>

src/components/Coach/Facts.tsx

@@ -14,17 +14,16 @@ const Facts: React.FC = () => {
   return (
     <section id="cpt" className="container">
       <div className="columns is-centered">
-        <div className="column is-6" data-aos="fade-up" data-aos-delay="100">
+        <div className="column is-7" data-aos="fade-up" data-aos-delay="100">
           <div className="card">
             <div className="card-content has-text-left" style={styles["text"]}>
               <p>
                 I'm a Climate Research Software Engineer at a national
                 laboratory on the weekdays (check out my{" "}
-                <a href="https://tomvo.me/career"> career website</a>). I enjoy
-                powerlifting, cooking, food photography, hiking, martial arts,
-                reading, and PC gaming! I have competed in a few powerlifting
-                meets and my all-time gym PRs are 375 squat, 230 bench, and 470
-                deadlift.
+                <a href="https://tomvo.me/career"> career website</a>). Besides
+                coaching and powerlifting, I enjoy cooking, reading, and nature!
+                I've competed in a few powerlifting meets. My all-time gym PRs
+                are 375 lb squat, 230 lb bench, and 500 lb deadlift.
               </p>
             </div>
           </div>

src/components/Coach/Hero.tsx

@@ -1,11 +1,16 @@
+import selfPortrait from "assets/me.jpg";
 import { faInstagram } from "@fortawesome/free-brands-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { CSSinJS } from "common/types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import "components/Career/Hero.css";
-import ReactPlayer from "react-player";
 
 function Hero() {
-  const styles: CSSinJS = { selfie: { justifyContent: "center" } };
+  const styles: CSSinJS = {
+    selfie: { justifyContent: "center" },
+    igHandle: { fontSize: "24px", marginLeft: "5px" },
+  };
 
   return (
     <section className="section container" id="the-hero">
@@ -17,20 +22,11 @@ function Hero() {
               data-aos="fade-in"
               data-aos-delay="100"
             >
-              <figure style={styles["selfie"]} className="image">
-                <div className="player-wrapper">
-                  <ReactPlayer
-                    className="react-player fixed-bottom"
-                    url="https://github.com/tomvothecoder/tomvo.me/raw/main/public/videos/IMG_3290.mp4"
-                    width="100%"
-                    height="100%"
-                    playing={true}
-                    loop={true}
-                    muted={true}
-                    playsinline={true}
-                    webkit-playsinline={true}
-                  />
-                </div>
+              <figure
+                style={styles["selfie"]}
+                className="image is-inline-block"
+              >
+                <img src={selfPortrait} alt="me" />
               </figure>
             </div>
 
@@ -46,31 +42,37 @@ function Hero() {
                   a NASM Certified Personal Trainer and Powerlifting Coach with
                   over a decade of lifting experience.
                 </span>{" "}
-                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.
+                I specialize in powerlifting, strength and conditioning,
+                hypertrophy, and weight-loss. I have coached numerous
+                powerlifting athletes, including those who placed top three in
+                their division and others 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">
                 <span className="has-text-weight-bold">
-                  My coaching philosophy focuses on deeply understanding
-                  each of my client's goals and life circumstances to provide
-                  individualized services.
+                  My coaching philosophy focuses on applying science-based
+                  practices with a deep understanding of each client's unique
+                  goals and life circumstances.
                 </span>{" "}
-                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! 💪🙌
+                I'm a continuous learner and I love sharing my passion in health
+                and fitness with everyone. Enough about me, let's link up and
+                train together! 💪🙌
               </p>
               <div className="hero-icon">
-                <a
-                  href="https://www.instagram.com/coachtomvo/"
-                  id="instagram-icon"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <FontAwesomeIcon icon={faInstagram} size="3x" />
-                </a>
+                <div style={styles["socialMedia"]}>
+                  <p className="bd-notification is-primary">
+                    <a
+                      href="https://www.instagram.com/coachtomvo/"
+                      id="instagram-icon"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <FontAwesomeIcon icon={faInstagram} size="3x" />
+                      <span style={styles["igHandle"]}>@coachtomvo</span>
+                    </a>
+                  </p>
+                </div>
               </div>
             </div>
           </div>

src/components/Coach/Services/ServicesList.tsx

@@ -41,7 +41,7 @@ const ServicesList: React.FC = () => {
                       >
                         <path d="M1412 734q0-28-18-46l-91-90q-19-19-45-19t-45 19l-408 407-226-226q-19-19-45-19t-45 19l-91 90q-18 18-18 46 0 27 18 45l362 362q19 19 45 19 27 0 46-19l543-543q18-18 18-45zm252 162q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"></path>
                       </svg>
-                      <h2 style={styles["service"]}>{service}</h2>
+                      <p style={styles["service"]}>{service}</p>
                     </li>
                   ))}
                 </ul>