website: add success stories

website/src/data/successStories.js

@@ -0,0 +1,64 @@
+import React from 'react';
+
+export default [
+  {
+    name: 'Siddhesh Karekar',
+    title: 'Software Engineer, Google',
+    thumbnail: 'https://avatars1.githubusercontent.com/u/18223888?s=460&v=4',
+    quote: (
+      <>
+        Most of us are familiar with having the prospect of having to grind tons
+        of Leetcode problems before the interview, but I really wanted a sense
+        of direction, an outline of sorts to prepare efficiently; I wanted to
+        pick questions that covered all the important concepts one can be tested
+        on. The Tech Interview Handbook provides just that; the Algorithms
+        section was an absolutely invaluable resource and a great overall
+        reference to brush up my fundamentals with the helpful hints and tips
+        provided, and also solve some of the most popular questions categorized
+        by type. I certainly have Yangshun to thank for helping me land my dream
+        job at Google!
+      </>
+    ),
+  },
+  {
+    name: 'Kevin Huang',
+    title: 'Software Engineer, Uber',
+    thumbnail: 'https://avatars1.githubusercontent.com/u/25380336?s=460&v=4',
+    quote: (
+      <>
+        The Tech Interview Handbook played a crucial role in the success of my
+        previous job search. The contents are carefully curated and well
+        organized. It served as an excellent roadmap for my interview prep.
+        <br />
+        <br />
+        In addition to the thorough Data Structures and Algorithms section, the
+        handbook also provides a lot of resources on other aspects of the
+        application process that helped me see the tech interviews in a more
+        holistic way. My favorite non-technical part was "Questions To Ask"! I
+        used quite a few insightful questions from there to challenge and
+        impress my interviewers. The results were great!
+        <br />
+        <br />
+        With the help of Tech Interview Handbook, I was able to land offers from
+        Google, Amazon, Uber and several other great companies. Really
+        appreciate Yangshun and other contributors for putting out such quality
+        content for the community. I'd wholeheartedly recommend this handbook to
+        anyone!
+      </>
+    ),
+  },
+  {
+    name: 'Yangshun Tay',
+    title: 'Front End Engineer, Facebook',
+    thumbnail: 'https://avatars1.githubusercontent.com/u/1315101?s=460&v=4',
+    quote: (
+      <>
+        I always thought that getting a job at Facebook was a dream beyond my
+        reach. However, with help from this handbook, determination and
+        preparation, my job hunt went beyond my expectations and was pretty
+        successful, landing me offers with Facebook, Google, Airbnb, Dropbox,
+        and Lyft. Huge thanks to the authors for sharing their knowledge!
+      </>
+    ),
+  },
+];

website/src/pages/index.js

@@ -6,6 +6,8 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import withBaseUrl from '@docusaurus/withBaseUrl';
 import styles from './styles.module.css';
 
+import successStories from '../data/successStories';
+
 function Home() {
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
@@ -101,31 +103,24 @@ function Home() {
           <div className="row">
             <div className="col col--6 col--offset-3">
               <div className="margin-vert--lg text--center">
-                <h2>Many Success Stories</h2>
+                <h2>Success Stories</h2>
               </div>
-              <div className="card margin-vert--lg">
+              {successStories.map(user => (
-                <div className="card__header">
+                <div className="card margin-vert--lg" key={user.name}>
-                  <div className="avatar">
+                  <div className="card__header">
-                    <img
+                    <div className="avatar">
-                      className="avatar__photo"
+                      <img className="avatar__photo" src={user.thumbnail} />
-                      src="https://avatars1.githubusercontent.com/u/1315101?s=460&v=4"
+                      <div className="avatar__intro">
-                    />
+                        <h4 className="avatar__name">{user.name}</h4>
-                    <div className="avatar__intro">
+                        <small className="avatar__subtitle">{user.title}</small>
-                      <h4 className="avatar__name">Yangshun Tay</h4>
+                      </div>
-                      <small className="avatar__subtitle">
-                        Front End Engineer, Facebook
-                      </small>
                     </div>
                   </div>
+                  <div className="card__body">
+                    <blockquote>"{user.quote}"</blockquote>
+                  </div>
                 </div>
-                <div className="card__body">
+              ))}
-                  <blockquote>
-                    "My job hunt was successful beyond my expectations thanks to
-                    this wonderful resource. Huge thanks to the author for
-                    sharing their knowledge!"
-                  </blockquote>
-                </div>
-              </div>
             </div>
           </div>
         </div>