From 56d55d440e112867870172664ff07c2bee9596e7 Mon Sep 17 00:00:00 2001 From: Josh Morton Date: Tue, 23 May 2023 09:57:25 -0600 Subject: [PATCH 1/9] refactor: abstract testimonial data to utilities --- src/pages/testimonials.js | 133 +++++++--------------------------- src/utilities/testimonials.js | 71 ++++++++++++++++++ 2 files changed, 96 insertions(+), 108 deletions(-) create mode 100644 src/utilities/testimonials.js diff --git a/src/pages/testimonials.js b/src/pages/testimonials.js index 79e407fb5..30b9478c0 100644 --- a/src/pages/testimonials.js +++ b/src/pages/testimonials.js @@ -1,12 +1,11 @@ import Image from 'next/image' import { NextSeo } from 'next-seo' import PageHeader from '../components/PageHeader' +import { getTestimonials } from '@/utilities/testimonials' -import schusterProfile from '../images/schuster.jpg' -import johnProfile from '../images/profile.png' -import carlaProfile from '../images/carla-kroll.jpg' -import ozzieProfile from '../images/ozzie.png' -import jeffProfile from '../images/jeff-martin.jpg' +const imageLoader = ({ src, width }) => { + return `${src}?w=${width}` +} function Testimonial() { return ( @@ -27,109 +26,27 @@ function Testimonial() {
-
- Schuster Braun -
-

- "#VetsWhoCode on paper is a web development boot camp. In my opinion it - is the best transition assistance program out there. I am so grateful for the - access to a new life the boot camp gave me." -
- Schuster Braun, US Navy | Front End Engineer, Amazon Web Services -

-
-
-
- John Garcia -
-

- "VWC helped me gain the technical knowledge I needed in order to get the - attention of employers. The guidance, support and experience I had going - through the program continues to help me in my role as a full time web - developer." -
- John Garcia, US Air Force | Front End Engineer, ForUsAll -

-
-
-
- Carla Kroll -
-

- "The course was great! I laughed, I learned, I got mad, I got - excited...then mad again. But in the end, I've developed skills that have - helped me become a successful frontend developer in Chicago and have found a - group of people in VWC that understand me, and we really work and grow - together better than anything I could have imagined." -
- Carla Kroll, US Air Force | Frontend Developer, J. Walter Thompson - Worldwide -

-
-
-
- Osvaldo Vargas -
-

- "During my transition, I have signed up for and utilized services from - over 14 different Non-Profits, Corporate, and State resources. I attended all - three US Army military transition tracks (Business, Education, Career), been a - part of a variety of technology training programs and transition programs. Of - all of these programs, only three have made a significant contribution to my - transition, and of these three organizations, only one has truly changed my - life for the better. Vets Who Code delivered more value to me than 12 of the - non-profits combined." -
-Osvaldo "Ozzie" Vargas, US Army | Fullstack Developer, - Application Lead, Novetta -

-
-
-
- Jeff Martin -
-

- "#VetsWhoCode's tenacious focus on language and computer science - fundamentals over frameworks was invaluable in my career transition from being - a Radiology Technician in the US Army to building cloud scale infrastructure - at Microsoft. The coaching from the #VetsWhoCode’s talented and passionate - mentor network proved to be a priceless asset even after graduating. Come - ready to learn and you will succeed here." -
- Jeff Martin, US Army | DevOps Engineer, Microsoft/Github -

-
-
+ {getTestimonials().map((testimonial, i) => { + return ( +
+ {testimonial.name} +
+

+ "{testimonial.text}" +
- {testimonial.signature} +

+
+
+ ) + })}
diff --git a/src/utilities/testimonials.js b/src/utilities/testimonials.js new file mode 100644 index 000000000..679141ab2 --- /dev/null +++ b/src/utilities/testimonials.js @@ -0,0 +1,71 @@ +const testimonialData = [ + { + id: 'schuster-braun', + name: 'Schuster Braun', + image: 'schuster.jpg', + text: `#VetsWhoCode on paper is a web development boot camp. In my opinion it + is the best transition assistance program out there. I am so grateful for the + access to a new life the boot camp gave me.`, + signature: 'Schuster Braun, US Navy | Front End Engineer, Amazon Web Services', + }, + { + id: 'john-garcia', + name: 'John Garcia', + image: 'john-garcia.png', + text: `VWC helped me gain the technical knowledge I needed in order to get the + attention of employers. The guidance, support and experience I had going + through the program continues to help me in my role as a full time web + developer.`, + signature: 'John Garcia, US Air Force | Front End Engineer, ForUsAll', + }, + { + id: 'carla-kroll', + name: 'Carla Kroll', + image: 'carla-kroll.jpg', + text: `The course was great! I laughed, I learned, I got mad, I got + excited...then mad again. But in the end, I've developed skills that have + helped me become a successful frontend developer in Chicago and have found a + group of people in VWC that understand me, and we really work and grow + together better than anything I could have imagined.`, + signature: 'Carla Kroll, US Air Force | Frontend Developer, J. Walter Thompson Worldwide', + }, + { + id: 'osvaldo-vargas', + name: 'Osvaldo Vargas', + image: 'ozzie.png', + text: `During my transition, I have signed up for and utilized services from + over 14 different Non-Profits, Corporate, and State resources. I attended all + three US Army military transition tracks (Business, Education, Career), been a + part of a variety of technology training programs and transition programs. Of + all of these programs, only three have made a significant contribution to my + transition, and of these three organizations, only one has truly changed my + life for the better. Vets Who Code delivered more value to me than 12 of the + non-profits combined.`, + signature: + 'Osvaldo "Ozzie" Vargas, US Army | Fullstack Developer, Application Lead, Novetta', + }, + { + id: 'jeff-martin', + name: 'Jeff Martin', + image: 'jeff-martin.jpg', + text: `#VetsWhoCode's tenacious focus on language and computer science + fundamentals over frameworks was invaluable in my career transition from being + a Radiology Technician in the US Army to building cloud scale infrastructure + at Microsoft. The coaching from the #VetsWhoCode’s talented and passionate + mentor network proved to be a priceless asset even after graduating. Come + ready to learn and you will succeed here.`, + signature: 'Jeff Martin, US Army | DevOps Engineer, Microsoft/Github', + }, +] + +export function getTestimonials() { + return testimonialData +} + +export function getTestimonialById(id) { + return testimonialData.find(testimonial.id === id) +} + +export function getTestimonialByName(name) { + return testimonialData.find(testimonial.name === name) +} From f93026e47fd7c76a23693ef31283866148435a1e Mon Sep 17 00:00:00 2001 From: Josh Morton Date: Tue, 23 May 2023 10:16:11 -0600 Subject: [PATCH 2/9] refactor: add testimonial card component --- src/components/Testimonal/TestimonialCard.js | 42 ++++++++++++++++++++ src/components/Testimonal/index.js | 1 + src/pages/testimonials.js | 32 ++------------- 3 files changed, 47 insertions(+), 28 deletions(-) create mode 100644 src/components/Testimonal/TestimonialCard.js create mode 100644 src/components/Testimonal/index.js diff --git a/src/components/Testimonal/TestimonialCard.js b/src/components/Testimonal/TestimonialCard.js new file mode 100644 index 000000000..bdaa11f62 --- /dev/null +++ b/src/components/Testimonal/TestimonialCard.js @@ -0,0 +1,42 @@ +import PropTypes from 'prop-types' +import Image from 'next/image' + +const imageLoader = ({ src, width }) => { + return `${src}?w=${width}` +} + +function TestimonialCard({ testimonial }) { + return ( + <> +
+
+ {testimonial.name} +
+

+ "{testimonial.text}" +
- {testimonial.signature} +

+
+
+
+ + ) +} + +TestimonialCard.propTypes = PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + image: PropTypes.string, + text: PropTypes.string, + signature: PropTypes.string, +}) + +export default TestimonialCard diff --git a/src/components/Testimonal/index.js b/src/components/Testimonal/index.js new file mode 100644 index 000000000..ad27e8a93 --- /dev/null +++ b/src/components/Testimonal/index.js @@ -0,0 +1 @@ +export { default } from './TestimonialCard' diff --git a/src/pages/testimonials.js b/src/pages/testimonials.js index 30b9478c0..90c4da7bf 100644 --- a/src/pages/testimonials.js +++ b/src/pages/testimonials.js @@ -1,11 +1,7 @@ -import Image from 'next/image' import { NextSeo } from 'next-seo' import PageHeader from '../components/PageHeader' import { getTestimonials } from '@/utilities/testimonials' - -const imageLoader = ({ src, width }) => { - return `${src}?w=${width}` -} +import TestimonialCard from '@/components/Testimonal/TestimonialCard' function Testimonial() { return ( @@ -25,29 +21,9 @@ function Testimonial() {

-
- {getTestimonials().map((testimonial, i) => { - return ( -
- {testimonial.name} -
-

- "{testimonial.text}" -
- {testimonial.signature} -

-
-
- ) - })} -
+ {getTestimonials().map(testimonial => { + return + })}
From 1a3fcf31c5036fd4f812e74f9ca2b0c07cbd7bc4 Mon Sep 17 00:00:00 2001 From: Josh Morton Date: Tue, 23 May 2023 10:16:34 -0600 Subject: [PATCH 3/9] refactor: testimonal card on donate page --- src/pages/donate.js | 25 +++---------------------- src/utilities/testimonials.js | 4 ++-- 2 files changed, 5 insertions(+), 24 deletions(-) diff --git a/src/pages/donate.js b/src/pages/donate.js index c1b92a3e4..fbc1795f0 100644 --- a/src/pages/donate.js +++ b/src/pages/donate.js @@ -1,6 +1,8 @@ import { NextSeo } from 'next-seo' import Image from 'next/image' import PageHeader from '@/components/PageHeader' +import { getTestimonialByName } from '@/utilities/testimonials' +import TestimonialCard from '@/components/Testimonal/TestimonialCard' function Donate() { return ( @@ -107,28 +109,7 @@ function Donate() {
-
-
- John Garcia -
-

- "VWC helped me gain the technical knowledge I needed in order to get the - attention of employers. The guidance, support and experience I had going - through the program continues to help me in my role as a full time web - developer." -
- John Garcia, USAF | Web Developer, Hearst Media -

-
-
-
+
diff --git a/src/utilities/testimonials.js b/src/utilities/testimonials.js index 679141ab2..34bfddda6 100644 --- a/src/utilities/testimonials.js +++ b/src/utilities/testimonials.js @@ -63,9 +63,9 @@ export function getTestimonials() { } export function getTestimonialById(id) { - return testimonialData.find(testimonial.id === id) + return testimonialData.find(testimonial => testimonial.id === id) } export function getTestimonialByName(name) { - return testimonialData.find(testimonial.name === name) + return testimonialData.find(testimonial => testimonial.name === name) } From 54b75101b96cc5b2e8cab6db30f558b4712ad510 Mon Sep 17 00:00:00 2001 From: Josh Morton Date: Tue, 23 May 2023 14:11:54 -0600 Subject: [PATCH 4/9] feat: Testimonial Carousel on homepage --- src/assets/css/custom.css | 5 +++ src/components/Testimonal/TestimonialCard.js | 34 +++++++------- .../Testimonal/TestimonialCarousel.js | 44 +++++++++++++++++++ src/pages/index.js | 4 ++ src/utilities/testimonials.js | 3 +- 5 files changed, 70 insertions(+), 20 deletions(-) create mode 100644 src/components/Testimonal/TestimonialCarousel.js diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 3e2cce2b4..fae5771c9 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -100,6 +100,11 @@ margin: 85px 10px; } +.slider-slide > .testimonial-row { + margin: 10px; + padding: 30px; +} + @media only screen and (max-width: 767px) { .testimonial-row { flex-direction: column; diff --git a/src/components/Testimonal/TestimonialCard.js b/src/components/Testimonal/TestimonialCard.js index bdaa11f62..09284d798 100644 --- a/src/components/Testimonal/TestimonialCard.js +++ b/src/components/Testimonal/TestimonialCard.js @@ -8,24 +8,22 @@ const imageLoader = ({ src, width }) => { function TestimonialCard({ testimonial }) { return ( <> -
-
- {testimonial.name} -
-

- "{testimonial.text}" -
- {testimonial.signature} -

-
-
+
+ {testimonial.name} +
+

+ "{testimonial.text}" +
- {testimonial.signature} +

+
) diff --git a/src/components/Testimonal/TestimonialCarousel.js b/src/components/Testimonal/TestimonialCarousel.js new file mode 100644 index 000000000..c8301f566 --- /dev/null +++ b/src/components/Testimonal/TestimonialCarousel.js @@ -0,0 +1,44 @@ +import { getTestimonials } from '@/utilities/testimonials' +import TestimonialCard from './TestimonialCard' +import Carousel from 'nuka-carousel' +import { BsArrowLeft, BsArrowRight } from 'react-icons/bs' + +const baseSettings = { + autoplay: true, + autoplayInterval: 10000, + pauseOnHover: true, + speed: 500, + wrapAround: true, + adaptiveHeight: true, + height: '100%', +} + +const previousSlide = ({ previousSlide }) => ( + +) + +const nextSlide = ({ nextSlide }) => ( + +) + +function TestimonialCarousel() { + return ( + <> + + {getTestimonials().map(testimonial => { + return + })} + + + ) +} + +export default TestimonialCarousel diff --git a/src/pages/index.js b/src/pages/index.js index f64a9a69b..3ec0a3379 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -6,6 +6,7 @@ import Header from '@/components/Header' import SponsorSlider from '@/components/SponsorSlider' import { SubscribeForm } from '@/components/Forms' import { setupContentfulClient } from '@/utilities/conentful' +import TestimonialCarousel from '@/components/Testimonal/TestimonialCarousel' function IndexPage({ nextCohortStartDate }) { return ( @@ -104,6 +105,9 @@ function IndexPage({ nextCohortStartDate }) {

+
+ +
diff --git a/src/utilities/testimonials.js b/src/utilities/testimonials.js index 34bfddda6..e1920b239 100644 --- a/src/utilities/testimonials.js +++ b/src/utilities/testimonials.js @@ -41,8 +41,7 @@ const testimonialData = [ transition, and of these three organizations, only one has truly changed my life for the better. Vets Who Code delivered more value to me than 12 of the non-profits combined.`, - signature: - 'Osvaldo "Ozzie" Vargas, US Army | Fullstack Developer, Application Lead, Novetta', + signature: "Osvaldo 'Ozzie' Vargas, US Army | Fullstack Developer, Application Lead, Novetta", }, { id: 'jeff-martin', From bd0965dc08bebdbfa07819efacb0aa901026acfe Mon Sep 17 00:00:00 2001 From: Josh Morton Date: Tue, 23 May 2023 14:30:45 -0600 Subject: [PATCH 5/9] feat: carousel paging dark mode --- .../Testimonal/TestimonialCarousel.js | 31 ++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/src/components/Testimonal/TestimonialCarousel.js b/src/components/Testimonal/TestimonialCarousel.js index c8301f566..05a73b393 100644 --- a/src/components/Testimonal/TestimonialCarousel.js +++ b/src/components/Testimonal/TestimonialCarousel.js @@ -2,6 +2,8 @@ import { getTestimonials } from '@/utilities/testimonials' import TestimonialCard from './TestimonialCard' import Carousel from 'nuka-carousel' import { BsArrowLeft, BsArrowRight } from 'react-icons/bs' +import { useContext } from 'react' +import { ThemeContext } from '@/store/ThemeProvider' const baseSettings = { autoplay: true, @@ -13,25 +15,32 @@ const baseSettings = { height: '100%', } -const previousSlide = ({ previousSlide }) => ( - -) +function TestimonialCarousel() { + const { colorMode } = useContext(ThemeContext) -const nextSlide = ({ nextSlide }) => ( - -) + const previousSlide = ({ previousSlide }) => ( + + ) + + const nextSlide = ({ nextSlide }) => ( + + ) -function TestimonialCarousel() { return ( <> {getTestimonials().map(testimonial => { return From bfaecad783b92c73d00e017206d6e04262d2f207 Mon Sep 17 00:00:00 2001 From: Josh Morton Date: Tue, 23 May 2023 14:37:37 -0600 Subject: [PATCH 6/9] fix: adapt height to current slide --- src/components/Testimonal/TestimonialCarousel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Testimonal/TestimonialCarousel.js b/src/components/Testimonal/TestimonialCarousel.js index 05a73b393..95cda3d40 100644 --- a/src/components/Testimonal/TestimonialCarousel.js +++ b/src/components/Testimonal/TestimonialCarousel.js @@ -11,7 +11,7 @@ const baseSettings = { pauseOnHover: true, speed: 500, wrapAround: true, - adaptiveHeight: true, + heightMode: 'current', height: '100%', } From 0450280fdd42b7c886675d3d62c63b5b8376bffd Mon Sep 17 00:00:00 2001 From: Josh Morton Date: Tue, 23 May 2023 15:10:31 -0600 Subject: [PATCH 7/9] fix: set isRequired & handle undefined --- src/components/Testimonal/TestimonialCard.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Testimonal/TestimonialCard.js b/src/components/Testimonal/TestimonialCard.js index 09284d798..c43720bd3 100644 --- a/src/components/Testimonal/TestimonialCard.js +++ b/src/components/Testimonal/TestimonialCard.js @@ -6,7 +6,7 @@ const imageLoader = ({ src, width }) => { } function TestimonialCard({ testimonial }) { - return ( + return testimonial ? ( <>
+ ) : ( + <> ) } @@ -35,6 +37,6 @@ TestimonialCard.propTypes = PropTypes.shape({ image: PropTypes.string, text: PropTypes.string, signature: PropTypes.string, -}) +}).isRequired export default TestimonialCard From dbe0bb130a5af77b52f1ce510d3d6445ffdc5037 Mon Sep 17 00:00:00 2001 From: Josh Morton Date: Tue, 23 May 2023 15:10:45 -0600 Subject: [PATCH 8/9] test: include utilities directory --- jest.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/jest.config.js b/jest.config.js index 541c25baf..9a8777d78 100644 --- a/jest.config.js +++ b/jest.config.js @@ -16,6 +16,7 @@ const customJestConfig = { '^@/components/(.*)$': '/src/components/$1', '^@/api/(.*)$': '/src/pages/api/$1', '^@/mocks/(.*)$': '/mocks/$1', + '^@/utilities/(.*)$': '/src/utilities/$1', }, setupFilesAfterEnv: ['/tests/setup-test-env.js'], testPathIgnorePatterns: ['/.cache'], From fa50f49c1c50ded2fb6c58a05d31f9ed1638e297 Mon Sep 17 00:00:00 2001 From: Josh Morton Date: Tue, 23 May 2023 15:25:01 -0600 Subject: [PATCH 9/9] fix: remove ' codes from testimonal text --- src/utilities/testimonials.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utilities/testimonials.js b/src/utilities/testimonials.js index e1920b239..84fa1f592 100644 --- a/src/utilities/testimonials.js +++ b/src/utilities/testimonials.js @@ -23,7 +23,7 @@ const testimonialData = [ name: 'Carla Kroll', image: 'carla-kroll.jpg', text: `The course was great! I laughed, I learned, I got mad, I got - excited...then mad again. But in the end, I've developed skills that have + excited...then mad again. But in the end, I've developed skills that have helped me become a successful frontend developer in Chicago and have found a group of people in VWC that understand me, and we really work and grow together better than anything I could have imagined.`, @@ -47,7 +47,7 @@ const testimonialData = [ id: 'jeff-martin', name: 'Jeff Martin', image: 'jeff-martin.jpg', - text: `#VetsWhoCode's tenacious focus on language and computer science + text: `#VetsWhoCode's tenacious focus on language and computer science fundamentals over frameworks was invaluable in my career transition from being a Radiology Technician in the US Army to building cloud scale infrastructure at Microsoft. The coaching from the #VetsWhoCode’s talented and passionate