Major improvements to the UX/UI design of the coaching website

src/App.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
 @import url("https://fonts.googleapis.com/css?family=DM+Sans&display=swap");
 
 h1,
@@ -7,7 +7,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Raleway", sans-serif;
+  font-family: "Montserrat", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -42,3 +42,7 @@ li {
 .fade-leave-active {
   opacity: 0;
 }
+
+.App{
+  background-color: #F2F3F4
+}

src/components/Career/About.tsx

@@ -6,7 +6,7 @@ type Props = {};
 
 const About: React.FC<Props> = () => {
   const styles: CSSinJS = {
-    "letsConnect": {
+    letsConnect: {
       marginTop: "1rem",
       fontWeight: "600",
     },
@@ -29,14 +29,7 @@ const About: React.FC<Props> = () => {
                   </figure>
                 </div>
                 <div className="column is-three-quarters">
-                  <p className="job-desc">
-                    As a software engineer, I enjoy the thought process involved
-                    in the entire lifecycle of ideas. From prototyping to the
-                    implementation phase, I strive to follow a pragmatic
-                    approach and use effective methodologies to build robust
-                    tools. A wise programmer once said, "don't forget to test
-                    your code!"
-                  </p>
+                  <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
@@ -60,7 +53,7 @@ const About: React.FC<Props> = () => {
                             target="_blank"
                             rel="noreferrer"
                           >
-                            <FontAwesomeIcon icon={faLinkedin} size="5x"/>
+                            <FontAwesomeIcon icon={faLinkedin} size="5x" />
                           </a>
                         </p>
                       </div>
@@ -72,7 +65,7 @@ const About: React.FC<Props> = () => {
                             target="_blank"
                             rel="noreferrer"
                           >
-                            <FontAwesomeIcon icon={faGithub} size="5x"/>
+                            <FontAwesomeIcon icon={faGithub} size="5x" />
                           </a>
                         </p>
                       </div>

src/components/Career/Hero.css

@@ -1,25 +1,41 @@
 #hero-welcome {
-  color: #363636;
+  color: #a44a3f;
   font-size: 24px;
-  line-height: 1.125;
+  margin-bottom: 0;
+  line-height: 100px;
+  font-weight: 600;
 }
 
 #hero-title {
-  color: #363636;
-  font-size: 48px;
-  font-weight: 500;
-  line-height: 1.125;
+  margin-left: -10%;
+  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;
+  font-weight: normal;
+  display: inline;
+  line-height: 0;
 }
 
 #hero-description {
-  color: #4a4a4a;
-  font-size: 24px;
+  color: #24232c;
+  font-size: 16px;
+  font-weight: 400;
   margin: 25px;
 }
 
+.hero-icon {
+  margin: 20px;
+}
+
+#linkedin-icon {
+  margin: 10px;
+}
+
 .blinking-cursor {
   font-weight: 100;
-  font-size: 24px;
+  font-size: 16px;
   color: #2e3d48;
   -webkit-animation: 1s blink step-end infinite;
   -moz-animation: 1s blink step-end infinite;
@@ -76,4 +92,4 @@
   50% {
     color: black;
   }
-}
+}

src/components/Career/Hero.tsx

@@ -1,45 +1,65 @@
 import { faGithub, faLinkedin } 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";
 
 function Hero() {
+  const styles: CSSinJS = { selfie: { justifyContent: "center" } };
+
   return (
-    <section className="section" id="the-hero">
-      <div className="hero is-medium is-center">
+    <section className="section container" id="the-hero">
+      <div className="hero is-small">
         <div className="hero-body">
-          <div className="container has-text-centered">
-            <h1 id="hero-welcome">Hi, I'm</h1>
-            <h1 id="hero-title">Tom Vo,</h1>
-            <h2 id="hero-description">
-              a Software Engineer in Climate Science.
-              <span className="blinking-cursor">|</span>
-            </h2>
-          </div>
-          <div className="container has-text-centered">
-            <div className="columns is-mobile is-multiline is-centered">
-              <div className="column is-narrow">
-                <p className="bd-notification is-primary">
-                  <a
-                    href="https://www.linkedin.com/in/votom/"
-                    id="linkedin-icon"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                  <FontAwesomeIcon icon={faLinkedin} size="3x"/>
-                  </a>
-                </p>
-              </div>
-              <div className="column is-narrow">
-                <p className="bd-notification is-primary">
-                  <a
-                    href="https://github.com/tomvothecoder"
-                    id="github-icon"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <FontAwesomeIcon icon={faGithub} size="3x"/>
-                  </a>
-                </p>
+          <div className="columns is-9 is-centered is-vcentered">
+            <div
+              className="column is-4"
+              data-aos="fade-in"
+              data-aos-delay="100"
+            >
+              <figure style={styles["selfie"]} className="image">
+                <img src={selfPortrait} alt="me" />
+              </figure>
+            </div>
+
+            <div
+              className="column is-5 has-text-left"
+              data-aos="fade-in"
+              data-aos-delay="100"
+            >
+              <h3 id="hero-welcome">Hey There!</h3>
+              <h1 id="hero-title">I'm Tom Vo,</h1>
+              <p id="hero-description">
+                a Software Engineer in Climate Science. I’m currently working on
+                open-source scientific software for climate science modeling and
+                data analysis!
+              </p>
+              <p id="hero-description">
+                As a software engineer, I enjoy the process involved in the
+                entire lifecycle of ideas. From prototyping to the
+                implementation phase, I strive to follow a pragmatic approach by
+                using effective methodologies to build robust tools. A wise
+                programmer once said, "don't forget to test your code!"
+                <span className="blinking-cursor">|</span>
+              </p>
+              <div className="hero-icon">
+                <a
+                  href="https://github.com/tomvothecoder"
+                  id="github-icon"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <FontAwesomeIcon icon={faGithub} size="3x" />
+                </a>
+                <a
+                  href="https://www.linkedin.com/in/votom/"
+                  id="linkedin-icon"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <FontAwesomeIcon icon={faLinkedin} size="3x" />
+                </a>
               </div>
             </div>
           </div>

src/components/Coach/ContactForm.tsx

@@ -14,14 +14,14 @@ const ContactForm: React.FC = () => {
 
   return (
     <div className="has-text-centered">
-      <div className="columns is-10 is-centered ">
+      <div className="columns is-8 is-centered">
         <div
-          className="column is-4 has-text-left"
+          className="column is-4 has-text-centered is-vcentered"
           data-aos="fade-in"
           data-aos-delay="100"
         >
           <h1 className="title is-1">Let's Connect</h1>
-          <p className="is-size-4 ">
+          <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!
           </p>
@@ -39,7 +39,7 @@ const ContactForm: React.FC = () => {
           </div>
         </div>
         <div
-          className="column is-6 has-text-left"
+          className="column card is-4 has-text-left"
           data-aos="fade-in"
           data-aos-delay="100"
         >

src/components/Coach/CoreValues.css

@@ -3,10 +3,18 @@
   margin-right: auto;
 }
 
+.value-card {
+  margin: 0.5%;
+}
+
 .value-caption {
+  font-size: 16px;
+  font-weight: 600;
   margin-top: 5%;
 }
 
 .value-subcaption {
+  font-size: 14px;
   margin-top: 1%;
-}
+  font-style: italic;
+}

src/components/Coach/CoreValues.tsx

@@ -7,50 +7,50 @@ const CoreValues: React.FC = () => {
   return (
     <section id="core-values">
       <div className="container">
-        <div className="columns is-centered">
+        <div className="columns is-9 is-centered">
           <div
-            className="column is-one-third has-text-centered"
+            className="column card is-3 has-text-centered value-card"
             data-aos="zoom-in"
           >
-            <figure className="image is-128x128 is-horizontal-center">
+            <figure className="image is-96x96 is-horizontal-center">
               <img src={teamWork} alt="database" />
             </figure>
             {/* Source: <a href="https://www.flaticon.com/free-icons/person" title="person icons">Person icons created by Freepik - Flaticon</a> */}
             <h2 className="default-font value-caption">
               Client first, period.
             </h2>
             <p className="secondary-font value-subcaption">
-              I will always demonstrate my integrity as a CPT and never cut
-              corners just to make a dime.
+              I will always uphold my integrity as a CPT and never cut corners
+              just to make a dime.
             </p>
           </div>
           <div
-            className="column is-one-third has-text-centered"
+            className="column card is-3 has-text-centered value-card"
             data-aos="zoom-in"
           >
-            <figure className="image is-128x128 is-horizontal-center">
+            <figure className="image is-96x96 is-horizontal-center">
               <img src={science} alt="yoga" />
             </figure>
             {/* Source: <a href="https://www.flaticon.com/free-icons/computer" title="computer icons">Computer icons created by vectorsmarket15 - Flaticon</a> */}
-            <h2 className="default-font value-caption">
-              A simple, science-based approach.
-            </h2>
-            <p className="secondary-font value-subcaption">
-              Bro-science is a thing of the past!
+            <h2 className="value-caption">A simple, science-based approach</h2>
+            <p className="value-subcaption">
+              Bro-science is a thing of the past! Let's talk about that real
+              juicy science instead.
             </p>
           </div>
           <div
-            className="column is-one-third has-text-centered"
+            className="column card is-3 has-text-centered value-card"
             data-aos="zoom-in"
           >
-            <figure className="image is-128x128 is-horizontal-center">
+            <figure className="image is-96x96 is-horizontal-center">
               <img src={barChart} alt="bar-chart" />
             </figure>
             <h2 className="default-font value-caption">
-              Individualized and flexible programming.
+              Individualized services
             </h2>
             <p className="secondary-font value-subcaption">
-            Programs are tailored to your specific goals, experience level, and life circumstances.
+              Everything is tailored to your specific goals, experience level,
+              and life circumstances.
             </p>
           </div>
         </div>