diff --git a/src/components/index/Testimonials.tsx b/src/components/index/Testimonials.tsx index 9fa728afd..8ec60b581 100644 --- a/src/components/index/Testimonials.tsx +++ b/src/components/index/Testimonials.tsx @@ -63,8 +63,7 @@ const StyledTestimonials = styled.div` border-radius: 50%; transition: all .2s; - &:hover, - &:focus { + &:hover { background: ${colors.lightGrey}; } @@ -75,33 +74,45 @@ const StyledTestimonials = styled.div` ` const Testimonials: React.SFC<{}> = () => { - const [currentCycle, setCurrentCycle] = useState(0) const tweetsRef = useRef(null) const tweetsContainerRef = useRef(null) const cycles = Math.ceil(testimonials.length / 3) + const setDotsColor = (cycle) => { + const dots = document.querySelectorAll('.dot') + + dots.forEach((d, i) => { + if (cycle === i) { + d.style.background = colors.lightGrey + } else { + d.style.background = colors.offWhite + } + }) + } + useEffect(() => { const tweetsContainer = tweetsContainerRef.current - const dots = document.querySelectorAll('.dot') - const cycleWidth = tweetsContainer?.scrollWidth / cycles + const tweets = tweetsRef.current + const firstTweet = tweets?.firstChild + const spacing = getComputedStyle(firstTweet)['margin-right'] + const scrollBy = firstTweet.offsetWidth * 3 + parseFloat(spacing.substring(0, spacing.length - 2)) * 2.8 + setDotsColor(0) tweetsContainer.addEventListener('scroll', (e) => { const currentScrollPosition = tweetsContainer?.scrollLeft - setCurrentCycle(cycles - Math.floor((tweetsContainer?.scrollWidth - currentScrollPosition) / cycleWidth)) + const cycle = cycles - Math.ceil((tweetsContainer?.scrollWidth - currentScrollPosition) / scrollBy) + setDotsColor(cycle) }) }) const switchTweets = (to: number) => { const tweetsContainer = tweetsContainerRef.current - const cycleWidth = tweetsContainer?.scrollWidth / cycles - tweetsContainer.scroll({ left: parseFloat(cycleWidth * to), behavior: 'smooth' }) - - // Older method which regards the actuals tweets and the space between them and not the width of .tweets + const tweets = tweetsRef.current + const firstTweet = tweets?.firstChild + const spacing = getComputedStyle(firstTweet)['margin-right'] + const scrollBy = firstTweet.offsetWidth * 3 + parseFloat(spacing.substring(0, spacing.length - 2)) * 2.8 - // const tweets = tweetsRef.current - // const firstTweet = tweets?.firstChild - // const spacing = getComputedStyle(firstTweet)['margin-right'] - // const transform = firstTweet.offsetWidth * 3 + parseFloat(spacing.substring(0, spacing.length - 2)) * 2.8 + tweetsContainer.scroll({ left: parseFloat(scrollBy * to), behavior: 'smooth' }) } return ( @@ -125,10 +136,8 @@ const Testimonials: React.SFC<{}> = () => { className="dot" key={d} onClick={() => { - setCurrentCycle(d) switchTweets(d) }} - style={currentCycle === d ? { background: colors.lightGrey } : {}} title={`Switch to ${d + 1}th set of tweets.`} >   diff --git a/src/contents/index.tsx b/src/contents/index.tsx index 51181e42e..de313f751 100644 --- a/src/contents/index.tsx +++ b/src/contents/index.tsx @@ -22,6 +22,7 @@ import Yo from '../resources/yo.jpg' import K33g from '../resources/k33g.jpg' import Michael from '../resources/michael.jpg' import Roku from '../resources/roku.jpg' +import Julius from '../resources/julius.jpg' import { TestimonialProps } from '../components/index/Testimonial' import { Link } from 'gatsby' @@ -156,6 +157,21 @@ export const testimonials: TestimonialProps[] = [ twitterHandle: 'dnsmichi', tweetId: '1311560585717460992' }, + { + name: 'Julius Volz', + avatar: Julius, + org: @PrometheusIO, + role: 'Creator', + text: ( + <> +

+ Look at any PR (pull request) in a full coding environment where you can edit, build, and test the PR code, by just prepending "gitpod.io#" to the PR URL. Super useful for reviewing/testing stuff without having to check it out locally! +

+ + ), + twitterHandle: 'juliusvolz', + tweetId: '1298972181708275717' + }, { name: 'David Ressler', avatar: DavidRessler, diff --git a/src/resources/julius.jpg b/src/resources/julius.jpg new file mode 100644 index 000000000..d30836bad Binary files /dev/null and b/src/resources/julius.jpg differ