diff --git a/src/App.css b/src/App.css index 3168f75..f56d455 100644 --- a/src/App.css +++ b/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 +} diff --git a/src/components/Career/About.tsx b/src/components/Career/About.tsx index 09f46df..629b707 100644 --- a/src/components/Career/About.tsx +++ b/src/components/Career/About.tsx @@ -6,7 +6,7 @@ type Props = {}; const About: React.FC = () => { const styles: CSSinJS = { - "letsConnect": { + letsConnect: { marginTop: "1rem", fontWeight: "600", }, @@ -29,14 +29,7 @@ const About: React.FC = () => {
-

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

+

Aside from programming, my passions include powerlifting, running, hiking, watching MMA, and eating the best burrito @@ -60,7 +53,7 @@ const About: React.FC = () => { target="_blank" rel="noreferrer" > - +

@@ -72,7 +65,7 @@ const About: React.FC = () => { target="_blank" rel="noreferrer" > - +

diff --git a/src/components/Career/Hero.css b/src/components/Career/Hero.css index 97a5915..8f80fce 100644 --- a/src/components/Career/Hero.css +++ b/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; } -} \ No newline at end of file +} diff --git a/src/components/Career/Hero.tsx b/src/components/Career/Hero.tsx index 0d6f8f7..8dc1894 100644 --- a/src/components/Career/Hero.tsx +++ b/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 ( -
-
+
+
-
-

Hi, I'm

-

Tom Vo,

-

- a Software Engineer in Climate Science. - | -

-
-
-
-
-

- - - -

-
-
-

- - - -

+
+
+
+ me +
+
+ +
+

Hey There!

+

I'm Tom Vo,

+

+ a Software Engineer in Climate Science. I’m currently working on + open-source scientific software for climate science modeling and + data analysis! +

+

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

+
diff --git a/src/components/Coach/About.tsx b/src/components/Coach/About.tsx deleted file mode 100644 index 9bc8f2b..0000000 --- a/src/components/Coach/About.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import selfPortrait from "assets/me.jpg"; -import { CSSinJS } from "common/types"; -import React from "react"; - -const About: React.FC = () => { - const styles: CSSinJS = { selfie: { justifyContent: "center" } }; - - return ( -
-
-
-
- me -
-
-
-
-
-

- When I was fourteen my brother introduced me to exercise as - summertime hobby. I admit, logging off of Maplestory took some - convincing. I went from slaying monsters to slaying weights. - - {" "} - For over a decade, physical training has been an integral part - of my life. - -
-
- - Throughtout the years I dedicated hundreds of hours - researching exercise science, kinesiology, and program - development.{" "} - - I coached friends and family members in their own exercise - journeys, which ranged from general health and fitness to - powerlifting. I find immense joy in helping people develop - tangible goals and achieving them one step at a time.
-
- - As a NASM Certified Personal Trainer, I practice a - compassionate, science-based approach to guide my clients in - their pursuit of self-development.{" "} - - I am driven to learn, ask questions, and share my knowledge with - others. Whether you're new to exercise or have prior experience, - I would love to learn about your aspirations in exercise. Enough - said, let's make some gains together! 💪🙌 -

-
-
-
-
-
- ); -}; - -export default About; diff --git a/src/components/Coach/ContactForm.tsx b/src/components/Coach/ContactForm.tsx index b56791e..c74a256 100644 --- a/src/components/Coach/ContactForm.tsx +++ b/src/components/Coach/ContactForm.tsx @@ -14,14 +14,14 @@ const ContactForm: React.FC = () => { return (
-
+

Let's Connect

-

+

I would love to learn about your exercise aspirations. Shoot me a message and I'll get back to you soon!

@@ -39,7 +39,7 @@ const ContactForm: React.FC = () => {
diff --git a/src/components/Coach/CoreValues.css b/src/components/Coach/CoreValues.css index 586ecc4..90c7791 100644 --- a/src/components/Coach/CoreValues.css +++ b/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%; -} \ No newline at end of file + font-style: italic; +} diff --git a/src/components/Coach/CoreValues.tsx b/src/components/Coach/CoreValues.tsx index 6d294f5..1601e19 100644 --- a/src/components/Coach/CoreValues.tsx +++ b/src/components/Coach/CoreValues.tsx @@ -7,12 +7,12 @@ const CoreValues: React.FC = () => { return (
-
+
-
+
database
{/* Source: Person icons created by Freepik - Flaticon */} @@ -20,37 +20,37 @@ const CoreValues: React.FC = () => { Client first, period.

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

-
+
yoga
{/* Source: Computer icons created by vectorsmarket15 - Flaticon */} -

- A simple, science-based approach. -

-

- Bro-science is a thing of the past! +

A simple, science-based approach

+

+ Bro-science is a thing of the past! Let's talk about that real + juicy science instead.

-
+
bar-chart

- Individualized and flexible programming. + Individualized services

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

diff --git a/src/components/Coach/Facts.tsx b/src/components/Coach/Facts.tsx index c053ea0..318d093 100644 --- a/src/components/Coach/Facts.tsx +++ b/src/components/Coach/Facts.tsx @@ -1,41 +1,22 @@ const Facts: React.FC = () => { - const credentials = [ - "NASM Certified Personal Trainer since September 2021", - "Powerlifting coach since 2017", - "Coached powerlifting athletes who placed top-3 in USPA meets", - "Specialization in strength, hypertrophy, and powerlifting meet preparation", - "An advocate for prehabilitation, rehabilitation, and recovery work", - ]; - const facts = [ + "I enjoy cooking, food photography, hiking, martial arts, and PC gaming!", + "Coached USPA/USAPL powerlifting athletes placing top-3 ", "Won 1st and 2nd place in the 165lbs division of two USPA meets", "All-time gym PRs: 375 lb Squat, 230 lb bench, and 470 lb deadlift", - "I enjoy cooking, food photography, hiking, martial arts, and PC gaming", ]; return (
-
-
+
+
-
-

Credentials

-
    - {credentials.map((credential) => ( -
  • • {credential}
    • - ))} -
-
-

Facts

-
    - {facts.map((fact) => ( -
  • • {fact}
    • - ))} -
+
+ I enjoy cooking, food photography, hiking, martial arts, and PC + gaming! I have coached numerous USPA and USAPL athletes who placed + top-3 (and a few best male lifters). I also competed in a few + meets and will be making a return to the platform soon. My + all-time gym PRs are 375/230/470.
diff --git a/src/components/Coach/Hero.tsx b/src/components/Coach/Hero.tsx index b33c575..909ba57 100644 --- a/src/components/Coach/Hero.tsx +++ b/src/components/Coach/Hero.tsx @@ -1,33 +1,54 @@ import { faInstagram } 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 (
-
+
-
-

Hi, I'm

-

Tom Vo,

-

- a NASM Certified Personal Trainer and Powerlifting Coach. - | -

-
-
-
-
-

- - - -

+
+
+
+ me +
+
+ +
+

Hey There!

+

I'm Tom Vo,

+

+ a NASM Certified Personal Trainer and Powerlifting Coach. I + pride myself on deeply understanding each of my clients' goals + and aspirations. I provide truly individualized services using a + feedback-driven training and nutritional coaching system. +

+

+ I am driven to grow my knowledge and share my passion in + exercise with my clients. Enough said, let's link up and make + some gains together! 💪🙌 +

+
diff --git a/src/components/Coach/Services/Service.tsx b/src/components/Coach/Services/Service.tsx index 9e287e8..84fbdf8 100644 --- a/src/components/Coach/Services/Service.tsx +++ b/src/components/Coach/Services/Service.tsx @@ -1,6 +1,12 @@ +import { CSSinJS } from "common/types"; + type Props = { iconSrc: string; name: string; bullets: Array }; const Service = ({ iconSrc, name, bullets }: Props) => { + const styles: CSSinJS = { + title: { fontSize: "18px", fontWeight: 600 }, + bullet: { fontSize: "16px" }, + }; return (
{
-

{name}

-
    +

    + {name} +

    +
      {bullets.map((bullet) => (
    • • {bullet}
      • ))} diff --git a/src/components/Coach/Services/Services.tsx b/src/components/Coach/Services/Services.tsx index 6d21c85..1f57553 100644 --- a/src/components/Coach/Services/Services.tsx +++ b/src/components/Coach/Services/Services.tsx @@ -17,9 +17,9 @@ const Services: React.FC = () => { iconSrc: route, name: "End-to-End Programming System", bullets: [ - "Includes goal identification, initial assessment, program development, and post-program reflection", - "Progressive overload with recovery management to make effective gains and avoid burn out", - "Feedback driven and flexible to dynamic goals or life circumstances", + "Goal identification, initial assessment, program development, and week-to-week adjustments", + "Progressive overload and recovery management for effective gains", + "Feedback-driven with flexibility to accomodate changing goals or life circumstances", ], }, { @@ -29,8 +29,7 @@ const Services: React.FC = () => { bullets: [ "Focus on strategies to improve nutrition through education, accountability, and behavior changes", "Develop habits and behaviors for long-term benefits to your health and wellbeing", - "Integrate sustainable meal timing practices and well-balanced diets (no strict meal planning!)" - + "Integrate sustainable meal timing practices and well-balanced diets (no strict meal planning!)", ], }, { @@ -46,7 +45,7 @@ const Services: React.FC = () => { ]; return ( -
      +
      {services.map((service) => (
      { const services = [ - "Custom-tailored training programs", - "Habit-based nutritonal coaching", - "Progress review over email/text", - "Virtual check-in", + "Powerlifting meet prep", + "Individualized training programs", + "Habit-based nutritional coaching", + "Active check-ins and video calls", "24-hr access for questions, form-checks, etc.", ]; @@ -23,25 +27,10 @@ const ServicesList: React.FC = () => {
      -
      -

      - My services are centered around building a unique online coaching experience - based on your goals and experience level. I offer{" "} - month-to-month and fixed-length rates (for example, a 6 - week for powerlifting competition prep). Whatever you need, I gotchu - fam! -

      -
      -

      - Choose your services below. Mix and match to your desire. -

        {services.map((service: string) => (
      • { > -

        {service}

        +

        {service}

        • ))}
      diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css index 07a2c2a..1982d3d 100644 --- a/src/components/NavBar/NavBar.css +++ b/src/components/NavBar/NavBar.css @@ -1,3 +1,3 @@ -#nav-bar { - margin-top: 25px; +.navbar{ + background-color: #F2F3F4 } \ No newline at end of file diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx index 94746f8..9585d1d 100644 --- a/src/components/NavBar/NavBar.tsx +++ b/src/components/NavBar/NavBar.tsx @@ -27,51 +27,33 @@ function NavBar() { scrollTo: "about", }, ], - "/coach": [ - { - title: "About", - scrollTo: "about", - }, - { - title: "Values", - scrollTo: "values", - }, - { - title: "Services", - scrollTo: "services", - }, - { - title: "Contact", - scrollTo: "contact", - }, - ], }; // The default route "/" redirects to another route, so avoid rendering // nav bar items on the default route (which breaks). let curNavBarItems = null; - if (location.pathname !== "/") { + if (location.pathname == "/career") { curNavBarItems = navBarItems[location.pathname as string]; } return ( ); } diff --git a/src/components/NavBar/NavBarItem.css b/src/components/NavBar/NavBarItem.css index 88db1af..585cd3e 100644 --- a/src/components/NavBar/NavBarItem.css +++ b/src/components/NavBar/NavBarItem.css @@ -6,6 +6,7 @@ color: #0077b5; } .nav-heading { + color: #1C1F1B; display: block; - letter-spacing: 1px; + font-weight:600; } diff --git a/src/views/Career.css b/src/views/Career.css index ff5e969..68870d3 100644 --- a/src/views/Career.css +++ b/src/views/Career.css @@ -21,7 +21,7 @@ .section-title { font-size: 150%; - font-weight: 500; + font-weight: 600; color: black; - margin-bottom: 3%; + margin-bottom: 2%; } diff --git a/src/views/Coach.tsx b/src/views/Coach.tsx index c88610e..cc17fa9 100644 --- a/src/views/Coach.tsx +++ b/src/views/Coach.tsx @@ -1,4 +1,4 @@ -import About from "components/Coach/About"; +import { CSSinJS } from "common/types"; import ContactForm from "components/Coach/ContactForm"; import CoreValues from "components/Coach/CoreValues"; import Facts from "components/Coach/Facts"; @@ -7,47 +7,62 @@ import Services from "components/Coach/Services/Services"; import ServicesList from "components/Coach/Services/ServicesList"; const Coach: React.FC = () => { + const styles: CSSinJS = { + coachingSystem: { backgroundColor: "#253D5B", color: "#fff" }, + sectionTitle: { + fontSize: "18px", + fontWeight: 600, + color: "black", + marginBottom: "2%", + }, + whiteSectionTitle: { + fontSize: "18px", + fontWeight: 600, + color: "white", + marginBottom: "2%", + }, + }; + return (
      -
      -
      -

      - — Why Did I Become CPT? — -

      - -
      -
      -

      — My Credentials and Facts—

      - +

      — My Core Values —

      +
      -
      +
      -

      — My Core Values —

      - +

      — Services I Offer —

      +
      -
      +
      -

      — Build Your Coaching Experience —

      - +

      — My Coaching System —

      +
      -
      +
      -

      — A Deep Dive Into My Services —

      - +

      — Get to Know Me —

      +
      -
      +