add julius volz tweet + fix the dots coloring.

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<number>(0)
     const tweetsRef = useRef<HTMLDivElement>(null)
     const tweetsContainerRef = useRef<HTMLDivElement>(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.`}
                                 >
                                     &nbsp;

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: <a href="https://twitter.com/PrometheusIO" target="_blank">@PrometheusIO</a>,
+        role: 'Creator',
+        text: (
+            <>
+                <p>
+                    Look at any PR (pull request) in a full coding environment where you can edit, build, and test the PR code, by just prepending "<a href="https://gitpod.io" target="_blank">gitpod.io#</a>" to the PR URL. Super useful for reviewing/testing stuff without having to check it out locally!
+                </p>
+            </>
+        ),
+        twitterHandle: 'juliusvolz',
+        tweetId: '1298972181708275717'
+    },
     {
         name: 'David Ressler',
         avatar: DavidRessler,