diff --git a/src/assets/services/barbell.svg b/src/assets/services/barbell.svg new file mode 100644 index 0000000..1517721 --- /dev/null +++ b/src/assets/services/barbell.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Career/Hero.css b/src/components/Career/Hero.css index 8f80fce..638c9ae 100644 --- a/src/components/Career/Hero.css +++ b/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; diff --git a/src/components/Coach/Banner.tsx b/src/components/Coach/Banner.tsx new file mode 100644 index 0000000..db75771 --- /dev/null +++ b/src/components/Coach/Banner.tsx @@ -0,0 +1,21 @@ +import "components/Career/Hero.css"; +import React from "react"; + +const Banner: React.FC = () => { + 1; + return ( +
+
+
+

"Science-based, performance driven training"

+
+
+
+ ); +}; + +export default Banner; diff --git a/src/components/Coach/ContactForm.tsx b/src/components/Coach/ContactForm.tsx index c844dfb..0994ebb 100644 --- a/src/components/Coach/ContactForm.tsx +++ b/src/components/Coach/ContactForm.tsx @@ -1,6 +1,7 @@ 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"; @@ -8,8 +9,10 @@ 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(() => { @@ -17,35 +20,37 @@ const ContactForm: React.FC = () => { }, []); return ( -
+
-
- me -
-

Let's Connect

- -

- 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! +

Let's Connect

+

+ I want to learn about your exercise aspirations. Message me here or + on Instagram and I'll get back to you soon.

-
-

- - - -

-
+ +
+
+ +
+
{ className="kwes-form" action="https://kwesforms.com/api/foreign/forms/aSVFVwmIio7ugCj6l1gO" > +
+

+ + + @coachtomvo + +

+
@@ -34,10 +34,10 @@ const CoreValues: React.FC = () => { science {/* Source: Computer icons created by vectorsmarket15 - Flaticon */} -

Simple and science-based

+

Science-based

- 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.

@@ -48,10 +48,10 @@ const CoreValues: React.FC = () => {
bar-chart
-

Individualized services

+

Individualized

- Everything is tailored to your specific goals, experience level, - and life circumstances. + Services are tailored to your goals, experience, and life + circumstances.

diff --git a/src/components/Coach/Facts.tsx b/src/components/Coach/Facts.tsx index d156823..2bf0941 100644 --- a/src/components/Coach/Facts.tsx +++ b/src/components/Coach/Facts.tsx @@ -14,17 +14,16 @@ const Facts: React.FC = () => { return (
-
+

I'm a Climate Research Software Engineer at a national laboratory on the weekdays (check out my{" "} - career website). 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. + career website). 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.

diff --git a/src/components/Coach/Hero.tsx b/src/components/Coach/Hero.tsx index 82bc95f..bad9aea 100644 --- a/src/components/Coach/Hero.tsx +++ b/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 (
@@ -17,20 +22,11 @@ function Hero() { data-aos="fade-in" data-aos-delay="100" > -
-
- -
+
+ me
@@ -46,31 +42,37 @@ function Hero() { a NASM Certified Personal Trainer and Powerlifting Coach with over a decade of lifting experience. {" "} - 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.

- 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. {" "} - 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! 💪🙌

- - - +
+

+ + + @coachtomvo + +

+
diff --git a/src/components/Coach/Services/ServicesList.tsx b/src/components/Coach/Services/ServicesList.tsx index b02fed3..9e14582 100644 --- a/src/components/Coach/Services/ServicesList.tsx +++ b/src/components/Coach/Services/ServicesList.tsx @@ -41,7 +41,7 @@ const ServicesList: React.FC = () => { > -

{service}

+

{service}

))} diff --git a/src/components/Coach/Services/System.tsx b/src/components/Coach/Services/System.tsx index 1623a96..5994dcf 100644 --- a/src/components/Coach/Services/System.tsx +++ b/src/components/Coach/Services/System.tsx @@ -1,5 +1,5 @@ import apple from "assets/services/apple.png"; -import barbell from "assets/services/gold-medal.png"; +import barbell from "assets/services/barbell.svg"; import route from "assets/services/route.png"; import webcam from "assets/services/webcam.png"; import { CSSinJS } from "common/types"; @@ -18,8 +18,9 @@ const System: React.FC = () => { iconSrc: barbell, name: "Powerlifting Training and Meet Prep", bullets: [ - "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", + "Meet prep includes peaking program, weekly calls, and attempt strategizing", + "Off-season programs with athlete-specific volume, frequency, and periodization", + "RPE and percentage-based approach", ], }, { @@ -28,7 +29,7 @@ const System: React.FC = () => { name: "End-to-End Programming System", bullets: [ "Goal identification, initial assessment, program development, and week-to-week adjustments", - "Progressive overload and recovery management for effective gains", + "Progressive overload and recovery management for optimal gains", "Feedback-driven with flexibility to accomodate changing goals or life circumstances", ], }, @@ -49,7 +50,7 @@ const System: React.FC = () => { bullets: [ "Gather feedback to make micro/macro adjustments to your program if needed", "Assess how you are doing, answer your questions, and make sure you're having fun!", - "Perform form-checks to ensure safe and optimal technique", + "Form-checks to ensure safe and optimal technique", ], }, ]; diff --git a/src/components/Coach/Services/SystemComponent.tsx b/src/components/Coach/Services/SystemComponent.tsx index f22bd3f..cc50d36 100644 --- a/src/components/Coach/Services/SystemComponent.tsx +++ b/src/components/Coach/Services/SystemComponent.tsx @@ -5,7 +5,7 @@ type Props = { iconSrc: string; name: string; bullets: Array }; const SystemComponent = ({ iconSrc, name, bullets }: Props) => { const styles: CSSinJS = { icon: { marginLeft: "auto", marginRight: "auto" }, - title: { fontSize: "18px", fontWeight: 600 }, + title: { fontSize: "18px", fontWeight: 500 }, bullet: { fontSize: "16px" }, }; return ( diff --git a/src/views/Coach.css b/src/views/Coach.css new file mode 100644 index 0000000..18937ae --- /dev/null +++ b/src/views/Coach.css @@ -0,0 +1,33 @@ +@import url("https://fonts.googleapis.com/css?family=Fugaz+One&display=swap"); +@import url("https://fonts.googleapis.com/css?family=Slabo&display=swap"); + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Fugaz One", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +p { + font-family: "Slabo", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +li { + font-family: "Slabo", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.default-font { + font-size: 18px; +} + +.secondary-font { + font-size: 16px; +} diff --git a/src/views/Coach.tsx b/src/views/Coach.tsx index ddab560..682171c 100644 --- a/src/views/Coach.tsx +++ b/src/views/Coach.tsx @@ -1,23 +1,25 @@ import { CSSinJS } from "common/types"; +import Banner from "components/Coach/Banner"; import ContactForm from "components/Coach/ContactForm"; import CoreValues from "components/Coach/CoreValues"; import Facts from "components/Coach/Facts"; import Hero from "components/Coach/Hero"; import ServicesList from "components/Coach/Services/ServicesList"; import System from "components/Coach/Services/System"; +import "views/Coach.css"; const Coach: React.FC = () => { const styles: CSSinJS = { coachingSystem: { backgroundColor: "#253D5B", color: "#fff" }, sectionTitle: { fontSize: "24px", - fontWeight: 600, + fontWeight: 500, color: "black", marginBottom: "2%", }, whiteSectionTitle: { fontSize: "24px", - fontWeight: 600, + fontWeight: 500, color: "white", marginBottom: "2%", }, @@ -26,6 +28,7 @@ const Coach: React.FC = () => { return (
+
@@ -59,10 +62,7 @@ const Coach: React.FC = () => {
-
+