Skip to content

Commit f03e001

Browse files
tomvothecodertomvothecoder
authored
Update content to make mobile-friendly (#57)
- Update services list to use card and fix spacing with section title - Update font sizes of section title to 24px - Move CSS styling from `CoreValues.css` to `CoreValues.tsx` - Rename `Services` and `Services` to `System` and `SystemComponent`
1 parent 480e80e commit f03e001

File tree

7 files changed

+87
-101
lines changed

7 files changed

+87
-101
lines changed

‎src/components/Coach/CoreValues.css

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/components/Coach/CoreValues.tsx

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,61 @@
11
import barChart from "assets/values/bar-chart.png";
22
import science from "assets/values/data-science.png";
33
import teamWork from "assets/values/teamwork.png";
4-
import "components/Coach/CoreValues.css";
4+
import { CSSinJS } from "common/types";
55

66
const CoreValues: React.FC = () => {
7+
const styles: CSSinJS = {
8+
figure: { marginLeft: "auto", marginRight: "auto" },
9+
valueCaption: { fontSize: "18px", fontWeight: 600, marginTop: "5%" },
10+
valueSubCaption: { fontSize: "16px", marginTop: "1%", fontStyle: "italic" },
11+
};
712
return (
813
<section id="core-values">
9-
<div className="container">
10-
<div className="columns is-9 is-centered">
11-
<div
12-
className="column card is-3 has-text-centered value-card"
13-
data-aos="zoom-in"
14-
>
15-
<figure className="image is-96x96 is-horizontal-center">
16-
<img src={teamWork} alt="database" />
17-
</figure>
18-
{/* Source: <a href="https://www.flaticon.com/free-icons/person" title="person icons">Person icons created by Freepik - Flaticon</a> */}
19-
<h2 className="default-font value-caption">
20-
Client first, period.
21-
</h2>
22-
<p className="secondary-font value-subcaption">
23-
I will always uphold my integrity as a CPT and never cut corners
24-
just to make a dime.
25-
</p>
14+
<div className="columns is-9 is-centered">
15+
<div className="column is-3 has-text-centered">
16+
<div className="card" data-aos="zoom-in">
17+
<div className="card-content">
18+
<figure className="image is-96x96" style={styles["figure"]}>
19+
<img src={teamWork} alt="database" />
20+
</figure>
21+
{/* Source: <a href="https://www.flaticon.com/free-icons/person" title="person icons">Person icons created by Freepik - Flaticon</a> */}
22+
<h2 style={styles["valueCaption"]}>Client first, period.</h2>
23+
<p style={styles["valueSubCaption"]}>
24+
I will always uphold my integrity as a coach and never cut corners
25+
just to make a dime.
26+
</p>
27+
</div>
2628
</div>
27-
<div
28-
className="column card is-3 has-text-centered value-card"
29-
data-aos="zoom-in"
30-
>
31-
<figure className="image is-96x96 is-horizontal-center">
32-
<img src={science} alt="yoga" />
33-
</figure>
34-
{/* Source: <a href="https://www.flaticon.com/free-icons/computer" title="computer icons">Computer icons created by vectorsmarket15 - Flaticon</a> */}
35-
<h2 className="value-caption">A simple, science-based approach</h2>
36-
<p className="value-subcaption">
37-
Bro-science is a thing of the past! Let's talk about that real
38-
juicy science instead.
39-
</p>
29+
</div>
30+
<div className="column is-3 has-text-centered">
31+
<div className="card" data-aos="zoom-in">
32+
<div className="card-content">
33+
<figure className="image is-96x96" style={styles["figure"]}>
34+
<img src={science} alt="yoga" />
35+
</figure>
36+
{/* 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"]}>
38+
Simple and science-based
39+
</h2>
40+
<p style={styles["valueSubCaption"]}>
41+
Bro-science is a thing of the past! Let's talk about that real
42+
juicy science instead.
43+
</p>
44+
</div>
4045
</div>
41-
<div
42-
className="column card is-3 has-text-centered value-card"
43-
data-aos="zoom-in"
44-
>
45-
<figure className="image is-96x96 is-horizontal-center">
46-
<img src={barChart} alt="bar-chart" />
47-
</figure>
48-
<h2 className="default-font value-caption">
49-
Individualized services
50-
</h2>
51-
<p className="secondary-font value-subcaption">
52-
Everything is tailored to your specific goals, experience level,
53-
and life circumstances.
54-
</p>
46+
</div>
47+
<div className="column is-3 has-text-centered">
48+
<div className="card" data-aos="zoom-in">
49+
<div className="card-content">
50+
<figure className="image is-96x96" style={styles["figure"]}>
51+
<img src={barChart} alt="bar-chart" />
52+
</figure>
53+
<h2 style={styles["valueCaption"]}>Individualized services</h2>
54+
<p style={styles["valueSubCaption"]}>
55+
Everything is tailored to your specific goals, experience level,
56+
and life circumstances.
57+
</p>
58+
</div>
5559
</div>
5660
</div>
5761
</div>

‎src/components/Coach/Facts.tsx

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1+
import { CSSinJS } from "common/types";
2+
13
const Facts: React.FC = () => {
4+
const styles: CSSinJS = {
5+
text: { fontWeight: 500 },
6+
};
27
const facts = [
38
"I enjoy cooking, food photography, hiking, martial arts, and PC gaming!",
49
"Coached USPA/USAPL powerlifting athletes placing top-3 ",
@@ -9,14 +14,17 @@ const Facts: React.FC = () => {
914
return (
1015
<section id="cpt" className="container">
1116
<div className="columns is-centered">
12-
<div className="column is-8" data-aos="fade-up" data-aos-delay="100">
17+
<div className="column is-6" data-aos="fade-up" data-aos-delay="100">
1318
<div className="card">
14-
<div className="card-content has-text-left">
15-
I enjoy cooking, food photography, hiking, martial arts, and PC
16-
gaming! I have coached numerous USPA and USAPL athletes who placed
17-
top-3 (and a few best male lifters). I also competed in a few
18-
meets and will be making a return to the platform soon. My
19-
all-time gym PRs are 375/230/470.
19+
<div className="card-content has-text-left" style={styles["text"]}>
20+
<p>
21+
I'm a climate research software engineer by day. I enjoy
22+
cooking, food photography, hiking, martial arts, and PC gaming!
23+
I have coached numerous USPA and USAPL athletes who placed
24+
top-3, with some winning best overall male lifter. I also
25+
competed in a few meets and will be making a return to the
26+
platform soon. My all-time gym PRs are 375/230/470.
27+
</p>
2028
</div>
2129
</div>
2230
</div>

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

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@ import { CSSinJS } from "common/types";
22
import React from "react";
33

44
const styles: CSSinJS = {
5-
card: {
6-
flexWrap: "wrap",
7-
alignItems: "stretch",
8-
},
95
service: {
106
fontSize: "18px",
117
fontWeight: 600,
@@ -16,29 +12,26 @@ const ServicesList: React.FC = () => {
1612
const services = [
1713
"Powerlifting meet prep",
1814
"Individualized training programs",
19-
"Habit-based nutritional coaching",
20-
"Active check-ins and video calls",
21-
"24-hr access for questions, form-checks, etc.",
15+
"Habit-based nutrition coaching",
16+
"Active check-ins and calls",
17+
"24-hour access for questions",
2218
];
2319

2420
return (
2521
<section>
2622
<div className="container">
2723
<div className="columns is-centered">
28-
<div className="column is-6" data-aos="zoom-in">
24+
<div className="column is-5" data-aos="zoom-in">
2925
<div>
30-
<div
31-
className="box has-background-white has-text-centered"
32-
style={styles["card"]}
33-
>
34-
<ul className="has-text-grey-dark is-size-6 mt-3 mb-5">
26+
<div className="box has-background-white">
27+
<ul className="has-text-left has-text-grey-dark">
3528
{services.map((service: string) => (
3629
<li
3730
key={service}
3831
className="mb-3 is-flex is-align-items-center"
3932
>
4033
<svg
41-
className="h-6 w-6 mr-2"
34+
className="mr-2"
4235
xmlns="http://www.w3.org/2000/svg"
4336
width="24px"
4437
height="24px"
@@ -48,7 +41,7 @@ const ServicesList: React.FC = () => {
4841
>
4942
<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>
5043
</svg>
51-
<p style={styles["service"]}>{service}</p>
44+
<h2 style={styles["service"]}>{service}</h2>
5245
</li>
5346
))}
5447
</ul>

‎src/components/Coach/Services/Services.tsx renamed to ‎src/components/Coach/Services/System.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ import apple from "assets/services/apple.png";
22
import route from "assets/services/route.png";
33
import webcam from "assets/services/webcam.png";
44
import { CSSinJS } from "common/types";
5-
import Service from "components/Coach/Services/Service";
5+
import SystemComponent from "components/Coach/Services/SystemComponent";
66

7-
const Services: React.FC = () => {
7+
const System: React.FC = () => {
88
const styles: CSSinJS = {
99
service: {
1010
marginTop: "15px",
1111
},
1212
};
1313

14-
const services = [
14+
const systemComponents = [
1515
{
1616
// <a href="https://www.flaticon.com/free-icons/end-to-end" title="end to end icons">End to end icons created by Muhammad_Usman - Flaticon</a>
1717
iconSrc: route,
@@ -45,10 +45,10 @@ const Services: React.FC = () => {
4545
];
4646

4747
return (
48-
<section >
49-
{services.map((service) => (
48+
<section>
49+
{systemComponents.map((service) => (
5050
<div key={service.name} style={styles["service"]}>
51-
<Service
51+
<SystemComponent
5252
key={service.name}
5353
iconSrc={service.iconSrc}
5454
name={service.name}
@@ -60,4 +60,4 @@ const Services: React.FC = () => {
6060
);
6161
};
6262

63-
export default Services;
63+
export default System;

‎src/components/Coach/Services/Service.tsx renamed to ‎src/components/Coach/Services/SystemComponent.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { CSSinJS } from "common/types";
22

33
type Props = { iconSrc: string; name: string; bullets: Array<string> };
44

5-
const Service = ({ iconSrc, name, bullets }: Props) => {
5+
const SystemComponent = ({ iconSrc, name, bullets }: Props) => {
66
const styles: CSSinJS = {
7+
icon: { marginLeft: "auto", marginRight: "auto" },
78
title: { fontSize: "18px", fontWeight: 600 },
89
bullet: { fontSize: "16px" },
910
};
@@ -15,7 +16,7 @@ const Service = ({ iconSrc, name, bullets }: Props) => {
1516
data-aos-delay="100"
1617
>
1718
<div className="column is-1">
18-
<figure className="image is-64x64 is-horizontal-center">
19+
<figure className="image is-64x64" style={styles["icon"]}>
1920
<img src={iconSrc} alt={name}></img>
2021
</figure>
2122
</div>
@@ -34,4 +35,4 @@ const Service = ({ iconSrc, name, bullets }: Props) => {
3435
);
3536
};
3637

37-
export default Service;
38+
export default SystemComponent;

‎src/views/Coach.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ import ContactForm from "components/Coach/ContactForm";
33
import CoreValues from "components/Coach/CoreValues";
44
import Facts from "components/Coach/Facts";
55
import Hero from "components/Coach/Hero";
6-
import Services from "components/Coach/Services/Services";
76
import ServicesList from "components/Coach/Services/ServicesList";
7+
import System from "components/Coach/Services/System";
88

99
const Coach: React.FC = () => {
1010
const styles: CSSinJS = {
1111
coachingSystem: { backgroundColor: "#253D5B", color: "#fff" },
1212
sectionTitle: {
13-
fontSize: "18px",
13+
fontSize: "24px",
1414
fontWeight: 600,
1515
color: "black",
1616
marginBottom: "2%",
1717
},
1818
whiteSectionTitle: {
19-
fontSize: "18px",
19+
fontSize: "24px",
2020
fontWeight: 600,
2121
color: "white",
2222
marginBottom: "2%",
@@ -48,7 +48,7 @@ const Coach: React.FC = () => {
4848
<section className="section" id="coaching-system">
4949
<div className="container has-text-centered">
5050
<h1 style={styles["sectionTitle"]}>— My Coaching System —</h1>
51-
<Services />
51+
<System />
5252
</div>
5353
</section>
5454

0 commit comments

Comments
 (0)