Skip to content

Commit 480e80e

Browse files
tomvothecodertomvothecoder
authored
Major improvements to the UX/UI design of the coaching website (#56)
1 parent 5157f13 commit 480e80e

File tree

18 files changed

+249
-270
lines changed

18 files changed

+249
-270
lines changed

‎src/App.css

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
1+
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
22
@import url("https://fonts.googleapis.com/css?family=DM+Sans&display=swap");
33

44
h1,
@@ -7,7 +7,7 @@ h3,
77
h4,
88
h5,
99
h6 {
10-
font-family: "Raleway", sans-serif;
10+
font-family: "Montserrat", sans-serif;
1111
-webkit-font-smoothing: antialiased;
1212
-moz-osx-font-smoothing: grayscale;
1313
}
@@ -42,3 +42,7 @@ li {
4242
.fade-leave-active {
4343
opacity: 0;
4444
}
45+
46+
.App{
47+
background-color: #F2F3F4
48+
}

‎src/components/Career/About.tsx

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ type Props = {};
66

77
const About: React.FC<Props> = () => {
88
const styles: CSSinJS = {
9-
"letsConnect": {
9+
letsConnect: {
1010
marginTop: "1rem",
1111
fontWeight: "600",
1212
},
@@ -29,14 +29,7 @@ const About: React.FC<Props> = () => {
2929
</figure>
3030
</div>
3131
<div className="column is-three-quarters">
32-
<p className="job-desc">
33-
As a software engineer, I enjoy the thought process involved
34-
in the entire lifecycle of ideas. From prototyping to the
35-
implementation phase, I strive to follow a pragmatic
36-
approach and use effective methodologies to build robust
37-
tools. A wise programmer once said, "don't forget to test
38-
your code!"
39-
</p>
32+
<p className="job-desc"></p>
4033
<p className="job-desc">
4134
Aside from programming, my passions include powerlifting,
4235
running, hiking, watching MMA, and eating the best burrito
@@ -60,7 +53,7 @@ const About: React.FC<Props> = () => {
6053
target="_blank"
6154
rel="noreferrer"
6255
>
63-
<FontAwesomeIcon icon={faLinkedin} size="5x"/>
56+
<FontAwesomeIcon icon={faLinkedin} size="5x" />
6457
</a>
6558
</p>
6659
</div>
@@ -72,7 +65,7 @@ const About: React.FC<Props> = () => {
7265
target="_blank"
7366
rel="noreferrer"
7467
>
75-
<FontAwesomeIcon icon={faGithub} size="5x"/>
68+
<FontAwesomeIcon icon={faGithub} size="5x" />
7669
</a>
7770
</p>
7871
</div>

‎src/components/Career/Hero.css

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,41 @@
11
#hero-welcome {
2-
color: #363636;
2+
color: #a44a3f;
33
font-size: 24px;
4-
line-height: 1.125;
4+
margin-bottom: 0;
5+
line-height: 100px;
6+
font-weight: 600;
57
}
68

79
#hero-title {
8-
color: #363636;
9-
font-size: 48px;
10-
font-weight: 500;
11-
line-height: 1.125;
10+
margin-left: -10%;
11+
font-size: 36px;
12+
color: #fff;
13+
background-color: #24232c !important;
14+
box-shadow: -10px -12px 0px #24232c, 10px -12px 0px #24232c,
15+
-10px 0px 0px #24232c, 10px 0px 0px #24232c;
16+
font-weight: normal;
17+
display: inline;
18+
line-height: 0;
1219
}
1320

1421
#hero-description {
15-
color: #4a4a4a;
16-
font-size: 24px;
22+
color: #24232c;
23+
font-size: 16px;
24+
font-weight: 400;
1725
margin: 25px;
1826
}
1927

28+
.hero-icon {
29+
margin: 20px;
30+
}
31+
32+
#linkedin-icon {
33+
margin: 10px;
34+
}
35+
2036
.blinking-cursor {
2137
font-weight: 100;
22-
font-size: 24px;
38+
font-size: 16px;
2339
color: #2e3d48;
2440
-webkit-animation: 1s blink step-end infinite;
2541
-moz-animation: 1s blink step-end infinite;
@@ -76,4 +92,4 @@
7692
50% {
7793
color: black;
7894
}
79-
}
95+
}

‎src/components/Career/Hero.tsx

Lines changed: 55 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,65 @@
11
import { faGithub, faLinkedin } from "@fortawesome/free-brands-svg-icons";
22
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3+
import selfPortrait from "assets/me.jpg";
4+
import { CSSinJS } from "common/types";
5+
36
import "components/Career/Hero.css";
47

58
function Hero() {
9+
const styles: CSSinJS = { selfie: { justifyContent: "center" } };
10+
611
return (
7-
<section className="section" id="the-hero">
8-
<div className="hero is-medium is-center">
12+
<section className="section container" id="the-hero">
13+
<div className="hero is-small">
914
<div className="hero-body">
10-
<div className="container has-text-centered">
11-
<h1 id="hero-welcome">Hi, I'm</h1>
12-
<h1 id="hero-title">Tom Vo,</h1>
13-
<h2 id="hero-description">
14-
a Software Engineer in Climate Science.
15-
<span className="blinking-cursor">|</span>
16-
</h2>
17-
</div>
18-
<div className="container has-text-centered">
19-
<div className="columns is-mobile is-multiline is-centered">
20-
<div className="column is-narrow">
21-
<p className="bd-notification is-primary">
22-
<a
23-
href="https://www.linkedin.com/in/votom/"
24-
id="linkedin-icon"
25-
target="_blank"
26-
rel="noreferrer"
27-
>
28-
<FontAwesomeIcon icon={faLinkedin} size="3x"/>
29-
</a>
30-
</p>
31-
</div>
32-
<div className="column is-narrow">
33-
<p className="bd-notification is-primary">
34-
<a
35-
href="https://github.com/tomvothecoder"
36-
id="github-icon"
37-
target="_blank"
38-
rel="noreferrer"
39-
>
40-
<FontAwesomeIcon icon={faGithub} size="3x"/>
41-
</a>
42-
</p>
15+
<div className="columns is-9 is-centered is-vcentered">
16+
<div
17+
className="column is-4"
18+
data-aos="fade-in"
19+
data-aos-delay="100"
20+
>
21+
<figure style={styles["selfie"]} className="image">
22+
<img src={selfPortrait} alt="me" />
23+
</figure>
24+
</div>
25+
26+
<div
27+
className="column is-5 has-text-left"
28+
data-aos="fade-in"
29+
data-aos-delay="100"
30+
>
31+
<h3 id="hero-welcome">Hey There!</h3>
32+
<h1 id="hero-title">I'm Tom Vo,</h1>
33+
<p id="hero-description">
34+
a Software Engineer in Climate Science. I’m currently working on
35+
open-source scientific software for climate science modeling and
36+
data analysis!
37+
</p>
38+
<p id="hero-description">
39+
As a software engineer, I enjoy the process involved in the
40+
entire lifecycle of ideas. From prototyping to the
41+
implementation phase, I strive to follow a pragmatic approach by
42+
using effective methodologies to build robust tools. A wise
43+
programmer once said, "don't forget to test your code!"
44+
<span className="blinking-cursor">|</span>
45+
</p>
46+
<div className="hero-icon">
47+
<a
48+
href="https://github.com/tomvothecoder"
49+
id="github-icon"
50+
target="_blank"
51+
rel="noreferrer"
52+
>
53+
<FontAwesomeIcon icon={faGithub} size="3x" />
54+
</a>
55+
<a
56+
href="https://www.linkedin.com/in/votom/"
57+
id="linkedin-icon"
58+
target="_blank"
59+
rel="noreferrer"
60+
>
61+
<FontAwesomeIcon icon={faLinkedin} size="3x" />
62+
</a>
4363
</div>
4464
</div>
4565
</div>

‎src/components/Coach/About.tsx

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

‎src/components/Coach/ContactForm.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@ const ContactForm: React.FC = () => {
1414

1515
return (
1616
<div className="has-text-centered">
17-
<div className="columns is-10 is-centered ">
17+
<div className="columns is-8 is-centered">
1818
<div
19-
className="column is-4 has-text-left"
19+
className="column is-4 has-text-centered is-vcentered"
2020
data-aos="fade-in"
2121
data-aos-delay="100"
2222
>
2323
<h1 className="title is-1">Let's Connect</h1>
24-
<p className="is-size-4 ">
24+
<p className="is-size-5 ">
2525
I would love to learn about your exercise aspirations. Shoot me a
2626
message and I'll get back to you soon!
2727
</p>
@@ -39,7 +39,7 @@ const ContactForm: React.FC = () => {
3939
</div>
4040
</div>
4141
<div
42-
className="column is-6 has-text-left"
42+
className="column card is-4 has-text-left"
4343
data-aos="fade-in"
4444
data-aos-delay="100"
4545
>

‎src/components/Coach/CoreValues.css

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,18 @@
33
margin-right: auto;
44
}
55

6+
.value-card {
7+
margin: 0.5%;
8+
}
9+
610
.value-caption {
11+
font-size: 16px;
12+
font-weight: 600;
713
margin-top: 5%;
814
}
915

1016
.value-subcaption {
17+
font-size: 14px;
1118
margin-top: 1%;
12-
}
19+
font-style: italic;
20+
}

‎src/components/Coach/CoreValues.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,50 +7,50 @@ const CoreValues: React.FC = () => {
77
return (
88
<section id="core-values">
99
<div className="container">
10-
<div className="columns is-centered">
10+
<div className="columns is-9 is-centered">
1111
<div
12-
className="column is-one-third has-text-centered"
12+
className="column card is-3 has-text-centered value-card"
1313
data-aos="zoom-in"
1414
>
15-
<figure className="image is-128x128 is-horizontal-center">
15+
<figure className="image is-96x96 is-horizontal-center">
1616
<img src={teamWork} alt="database" />
1717
</figure>
1818
{/* Source: <a href="https://www.flaticon.com/free-icons/person" title="person icons">Person icons created by Freepik - Flaticon</a> */}
1919
<h2 className="default-font value-caption">
2020
Client first, period.
2121
</h2>
2222
<p className="secondary-font value-subcaption">
23-
I will always demonstrate my integrity as a CPT and never cut
24-
corners just to make a dime.
23+
I will always uphold my integrity as a CPT and never cut corners
24+
just to make a dime.
2525
</p>
2626
</div>
2727
<div
28-
className="column is-one-third has-text-centered"
28+
className="column card is-3 has-text-centered value-card"
2929
data-aos="zoom-in"
3030
>
31-
<figure className="image is-128x128 is-horizontal-center">
31+
<figure className="image is-96x96 is-horizontal-center">
3232
<img src={science} alt="yoga" />
3333
</figure>
3434
{/* Source: <a href="https://www.flaticon.com/free-icons/computer" title="computer icons">Computer icons created by vectorsmarket15 - Flaticon</a> */}
35-
<h2 className="default-font value-caption">
36-
A simple, science-based approach.
37-
</h2>
38-
<p className="secondary-font value-subcaption">
39-
Bro-science is a thing of the past!
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.
4039
</p>
4140
</div>
4241
<div
43-
className="column is-one-third has-text-centered"
42+
className="column card is-3 has-text-centered value-card"
4443
data-aos="zoom-in"
4544
>
46-
<figure className="image is-128x128 is-horizontal-center">
45+
<figure className="image is-96x96 is-horizontal-center">
4746
<img src={barChart} alt="bar-chart" />
4847
</figure>
4948
<h2 className="default-font value-caption">
50-
Individualized and flexible programming.
49+
Individualized services
5150
</h2>
5251
<p className="secondary-font value-subcaption">
53-
Programs are tailored to your specific goals, experience level, and life circumstances.
52+
Everything is tailored to your specific goals, experience level,
53+
and life circumstances.
5454
</p>
5555
</div>
5656
</div>

0 commit comments

Comments
 (0)