website: add Erin success story

website/src/data/successStories.js

@@ -1,6 +1,28 @@
 import React from 'react';
 
 export default [
+  {
+    name: 'Erin Teo',
+    title: 'Front End Engineer, Facebook',
+    thumbnail: 'https://avatars1.githubusercontent.com/u/5081708?s=460&v=4',
+    quote: (
+      <>
+        Preparing for my first rounds of tech interviews was really daunting - I
+        wasn't sure what to expect and where to start. This handbook together
+        with the{' '}
+        <a
+          href="https://github.com/yangshun/front-end-interview-handbook"
+          target="_blank"
+          rel="noreferrer noopener">
+          Front End Interview Handbook
+        </a>{' '}
+        was a great starting point for me. It clearly describes each part of the
+        process and has tons of awesome tips and resources. With this handbook
+        and lots of practice, I managed to get offers from Facebook, Dropbox and
+        Amazon!
+      </>
+    ),
+  },
   {
     name: 'Siddhesh Karekar',
     title: 'Software Engineer, Google',

website/src/pages/index.js

@@ -44,7 +44,8 @@ function Home() {
         </div>
       </header>
       <main>
-        <div className="container margin-vert--xl">
+        <div className="padding-vert--xl">
+          <div className="container">
             <div className="row">
               <div className="col col--10 col--offset-1">
                 <h2 className="text--center  margin-bottom--xl">
@@ -77,8 +78,8 @@ function Home() {
                   <div className="col">
                     <h3>Practical Algorithm Tips</h3>
                     <p>
-                    Practical tips for every algorithm topic - common techniques
-                    and corner cases to look out for.
+                      Practical tips for every algorithm topic - common
+                      techniques and corner cases to look out for.
                     </p>
                   </div>
                   <div className="col">
@@ -99,7 +100,9 @@ function Home() {
               </div>
             </div>
           </div>
-        <div className="container margin-vert--xl">
+        </div>
+        <div className={styles.sectionAlt}>
+          <div className="container padding-vert--xl">
             <div className="row">
               <div className="col col--6 col--offset-3">
                 <div className="margin-vert--lg text--center">
@@ -112,7 +115,9 @@ function Home() {
                         <img className="avatar__photo" src={user.thumbnail} />
                         <div className="avatar__intro">
                           <h4 className="avatar__name">{user.name}</h4>
-                        <small className="avatar__subtitle">{user.title}</small>
+                          <small className="avatar__subtitle">
+                            {user.title}
+                          </small>
                         </div>
                       </div>
                     </div>
@@ -124,6 +129,7 @@ function Home() {
               </div>
             </div>
           </div>
+        </div>
       </main>
     </Layout>
   );

website/src/pages/styles.module.css

@@ -20,3 +20,7 @@
   align-items: center;
   justify-content: center;
 }
+
+.sectionAlt {
+  background-color: var(--ifm-color-emphasis-alpha-05);
+}