Skip to content

Commit 18dbb7a

Browse files
tomvothecodertomvothecoder
authored
Enhancements to the coaching website UX (#70)
1 parent c86c67c commit 18dbb7a

File tree

12 files changed

+216
-90
lines changed

12 files changed

+216
-90
lines changed

‎src/assets/services/barbell.svg

Lines changed: 37 additions & 0 deletions
Loading

‎src/components/Career/Hero.css

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,28 @@
1111
font-size: 36px;
1212
color: #fff;
1313
background-color: #24232c !important;
14-
box-shadow: -10px -12px 0px #24232c, 10px -12px 0px #24232c,
15-
-10px 0px 0px #24232c, 10px 0px 0px #24232c;
14+
box-shadow:
15+
-10px -12px 0px #24232c,
16+
10px -12px 0px #24232c,
17+
-10px 0px 0px #24232c,
18+
10px 0px 0px #24232c;
1619
font-weight: normal;
1720
display: inline;
1821
line-height: 0;
1922
}
2023

24+
#banner {
25+
font-size: 32px;
26+
color: #fff;
27+
background-color: #24232c !important;
28+
box-shadow:
29+
-10px -12px 0px #24232c,
30+
10px -12px 0px #24232c,
31+
-10px 0px 0px #24232c,
32+
10px 0px 0px #24232c;
33+
font-weight: normal;
34+
}
35+
2136
#hero-description {
2237
color: #24232c;
2338
font-size: 16px;

‎src/components/Coach/Banner.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import "components/Career/Hero.css";
2+
import React from "react";
3+
4+
const Banner: React.FC = () => {
5+
1;
6+
return (
7+
<section className="container">
8+
<div className="columns is-9 is-centered is-vcentered">
9+
<div
10+
className="columns has-text-centered"
11+
data-aos="fade-in"
12+
data-aos-delay="100"
13+
>
14+
<h1 id="banner">"Science-based, performance driven training"</h1>
15+
</div>
16+
</div>
17+
</section>
18+
);
19+
};
20+
21+
export default Banner;

‎src/components/Coach/ContactForm.tsx

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,56 @@
11
import { faInstagram } from "@fortawesome/free-brands-svg-icons";
22
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3-
import selfPortrait from "assets/me.jpg";
3+
import ReactPlayer from "react-player";
4+
45
import { CSSinJS } from "common/types";
56

67
import kwesforms from "kwesforms";
78
import { useEffect } from "react";
89

910
const ContactForm: React.FC = () => {
1011
const styles: CSSinJS = {
12+
caption: { marginBottom: "10px" },
1113
socialMedia: { marginTop: "10px" },
12-
selfie: { justifyContent: "center", width: "55%" },
14+
selfie: { justifyContent: "center" },
15+
igHandle: { fontSize: "24px", marginLeft: "5px" },
1316
};
1417

1518
useEffect(() => {
1619
kwesforms.init();
1720
}, []);
1821

1922
return (
20-
<div className="has-text-centered">
23+
<div className="has-text-center">
2124
<div className="columns is-8 is-centered">
2225
<div
2326
className="column is-4 is-vcentered"
2427
data-aos="fade-in"
2528
data-aos-delay="100"
2629
>
27-
<figure style={styles["selfie"]} className="image is-inline-block">
28-
<img src={selfPortrait} alt="me" />
29-
</figure>
30-
<h1 className="title is-1">Let's Connect</h1>
31-
32-
<p className="is-size-5 has-text-dark-grey">
33-
I would love to learn about your exercise aspirations. Message me on
34-
Instagram or fill out the message form here and I'll get back to you
35-
soon!
30+
<h1 className="title is-1 is-underlined">Let's Connect</h1>
31+
<p className="is-size-5 has-text-dark-grey" style={styles["caption"]}>
32+
I want to learn about your exercise aspirations. Message me here or
33+
on Instagram and I'll get back to you soon.
3634
</p>
37-
<div style={styles["socialMedia"]}>
38-
<p className="bd-notification is-primary">
39-
<a
40-
href="https://www.instagram.com/coachtomvo/"
41-
id="instagram-icon"
42-
target="_blank"
43-
rel="noreferrer"
44-
>
45-
<FontAwesomeIcon icon={faInstagram} size="3x" />
46-
</a>
47-
</p>
48-
</div>
35+
36+
<figure
37+
style={styles["selfie"]}
38+
className="image is-inline-block is-hidden-mobile"
39+
>
40+
<div className="player-wrapper">
41+
<ReactPlayer
42+
className="react-player fixed-bottom"
43+
url="https://github.com/tomvothecoder/tomvo.me/raw/main/public/videos/IMG_3290.mp4"
44+
width="60%"
45+
height="60%"
46+
playing={true}
47+
loop={true}
48+
muted={true}
49+
playsinline={true}
50+
webkit-playsinline={true}
51+
/>
52+
</div>
53+
</figure>
4954
</div>
5055
<div
5156
className="column card is-4 has-text-left"
@@ -56,6 +61,19 @@ const ContactForm: React.FC = () => {
5661
className="kwes-form"
5762
action="https://kwesforms.com/api/foreign/forms/aSVFVwmIio7ugCj6l1gO"
5863
>
64+
<div style={styles["socialMedia"]}>
65+
<p className="bd-notification is-primary">
66+
<a
67+
href="https://www.instagram.com/coachtomvo/"
68+
id="instagram-icon"
69+
target="_blank"
70+
rel="noreferrer"
71+
>
72+
<FontAwesomeIcon icon={faInstagram} size="3x" />
73+
<span style={styles["igHandle"]}>@coachtomvo</span>
74+
</a>
75+
</p>
76+
</div>
5977
<div className="field">
6078
<label className="label" htmlFor="name">
6179
Name

‎src/components/Coach/CoreValues.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { CSSinJS } from "common/types";
66
const CoreValues: React.FC = () => {
77
const styles: CSSinJS = {
88
figure: { marginLeft: "auto", marginRight: "auto" },
9-
valueCaption: { fontSize: "18px", fontWeight: 600, marginTop: "5%" },
9+
valueCaption: { fontSize: "18px", fontWeight: 500, marginTop: "5%" },
1010
valueSubCaption: { fontSize: "16px", marginTop: "1%" },
1111
};
1212
return (
@@ -19,10 +19,10 @@ const CoreValues: React.FC = () => {
1919
<img src={client} alt="client" />
2020
</figure>
2121
{/* <a href="https://www.flaticon.com/free-icons/client" title="client icons">Client icons created by Freepik - Flaticon</a> */}
22-
<h2 style={styles["valueCaption"]}>Client first, period.</h2>
22+
<h2 style={styles["valueCaption"]}>Client first</h2>
2323
<p style={styles["valueSubCaption"]}>
2424
I will always uphold my integrity as a coach and never cut
25-
corners just to make a dime.
25+
corners.
2626
</p>
2727
</div>
2828
</div>
@@ -34,10 +34,10 @@ const CoreValues: React.FC = () => {
3434
<img src={science} alt="science" />
3535
</figure>
3636
{/* Source: <a href="https://www.flaticon.com/free-icons/computer" title="computer icons">Computer icons created by vectorsmarket15 - Flaticon</a> */}
37-
<h2 style={styles["valueCaption"]}>Simple and science-based</h2>
37+
<h2 style={styles["valueCaption"]}>Science-based</h2>
3838
<p style={styles["valueSubCaption"]}>
39-
Bro-science is a thing of the past! Let's talk about that real
40-
juicy science instead.
39+
I geek out on exercise science, which is the foundation of my
40+
coaching system.
4141
</p>
4242
</div>
4343
</div>
@@ -48,10 +48,10 @@ const CoreValues: React.FC = () => {
4848
<figure className="image is-96x96" style={styles["figure"]}>
4949
<img src={barChart} alt="bar-chart" />
5050
</figure>
51-
<h2 style={styles["valueCaption"]}>Individualized services</h2>
51+
<h2 style={styles["valueCaption"]}>Individualized</h2>
5252
<p style={styles["valueSubCaption"]}>
53-
Everything is tailored to your specific goals, experience level,
54-
and life circumstances.
53+
Services are tailored to your goals, experience, and life
54+
circumstances.
5555
</p>
5656
</div>
5757
</div>

‎src/components/Coach/Facts.tsx

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

‎src/components/Coach/Hero.tsx

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1+
import selfPortrait from "assets/me.jpg";
12
import { faInstagram } from "@fortawesome/free-brands-svg-icons";
2-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3+
34
import { CSSinJS } from "common/types";
5+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6+
47
import "components/Career/Hero.css";
5-
import ReactPlayer from "react-player";
68

79
function Hero() {
8-
const styles: CSSinJS = { selfie: { justifyContent: "center" } };
10+
const styles: CSSinJS = {
11+
selfie: { justifyContent: "center" },
12+
igHandle: { fontSize: "24px", marginLeft: "5px" },
13+
};
914

1015
return (
1116
<section className="section container" id="the-hero">
@@ -17,20 +22,11 @@ function Hero() {
1722
data-aos="fade-in"
1823
data-aos-delay="100"
1924
>
20-
<figure style={styles["selfie"]} className="image">
21-
<div className="player-wrapper">
22-
<ReactPlayer
23-
className="react-player fixed-bottom"
24-
url="https://github.com/tomvothecoder/tomvo.me/raw/main/public/videos/IMG_3290.mp4"
25-
width="100%"
26-
height="100%"
27-
playing={true}
28-
loop={true}
29-
muted={true}
30-
playsinline={true}
31-
webkit-playsinline={true}
32-
/>
33-
</div>
25+
<figure
26+
style={styles["selfie"]}
27+
className="image is-inline-block"
28+
>
29+
<img src={selfPortrait} alt="me" />
3430
</figure>
3531
</div>
3632

@@ -46,31 +42,37 @@ function Hero() {
4642
a NASM Certified Personal Trainer and Powerlifting Coach with
4743
over a decade of lifting experience.
4844
</span>{" "}
49-
I've coached numerous powerlifting athletes over the years,
50-
including those who placed top three in their division, with
51-
some winning best overall lifter. I've also helped clients
52-
reached their weight-loss goals through habit-based nutrition
53-
and exercise programs.
45+
I specialize in powerlifting, strength and conditioning,
46+
hypertrophy, and weight-loss. I have coached numerous
47+
powerlifting athletes, including those who placed top three in
48+
their division and others winning best overall lifter. I've also
49+
helped clients reached their weight-loss goals through
50+
habit-based nutrition and exercise programs.
5451
</p>
5552
<p id="hero-description">
5653
<span className="has-text-weight-bold">
57-
My coaching philosophy focuses on deeply understanding
58-
each of my client's goals and life circumstances to provide
59-
individualized services.
54+
My coaching philosophy focuses on applying science-based
55+
practices with a deep understanding of each client's unique
56+
goals and life circumstances.
6057
</span>{" "}
61-
I'm a life-long continuous learner who loves to share my passion
62-
in health and fitness with everyone. Enough said, let's link up
63-
and make some gains together! 💪🙌
58+
I'm a continuous learner and I love sharing my passion in health
59+
and fitness with everyone. Enough about me, let's link up and
60+
train together! 💪🙌
6461
</p>
6562
<div className="hero-icon">
66-
<a
67-
href="https://www.instagram.com/coachtomvo/"
68-
id="instagram-icon"
69-
target="_blank"
70-
rel="noreferrer"
71-
>
72-
<FontAwesomeIcon icon={faInstagram} size="3x" />
73-
</a>
63+
<div style={styles["socialMedia"]}>
64+
<p className="bd-notification is-primary">
65+
<a
66+
href="https://www.instagram.com/coachtomvo/"
67+
id="instagram-icon"
68+
target="_blank"
69+
rel="noreferrer"
70+
>
71+
<FontAwesomeIcon icon={faInstagram} size="3x" />
72+
<span style={styles["igHandle"]}>@coachtomvo</span>
73+
</a>
74+
</p>
75+
</div>
7476
</div>
7577
</div>
7678
</div>

‎src/components/Coach/Services/ServicesList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const ServicesList: React.FC = () => {
4141
>
4242
<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>
4343
</svg>
44-
<h2 style={styles["service"]}>{service}</h2>
44+
<p style={styles["service"]}>{service}</p>
4545
</li>
4646
))}
4747
</ul>

0 commit comments

Comments
 (0)