website: homepage improvements

README.md

@@ -17,13 +17,13 @@
   </h3>
 </div>
 
-<hr/>
+---
 
 <div align="center">
   <h3>Get paid more. Moonchaser has negotiated hundreds of tech offers. Get 1-1 guidance from their experienced team of ex-FAANG PMs, SWEs, and Recruiters. <a href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=github" target="_blank">Find out more</a></h3>
 </div>
 
-<hr/>
+---
 
 ## What is this?
 
@@ -33,12 +33,12 @@ Besides the usual algorithm questions, other **awesome** stuff includes:
 
 - [How to prepare](https://techinterviewhandbook.org/coding-round-overview) for coding interviews
 - [Interview Cheatsheet](https://techinterviewhandbook.org/cheatsheet) - Straight-to-the-point Do's and Don'ts
-- [Algorithm tips and the best practice questions](https://techinterviewhandbook.org/algorithms/algorithms-introduction) categorized by topic
-- ["Front-end Job Interview Questions" answers](https://github.com/yangshun/front-end-interview-handbook)
+- [Algorithm tips and the best practice questions](https://techinterviewhandbook.org/algorithms/introduction) categorized by topic
 - [Interview formats](https://techinterviewhandbook.org/interview-formats) of the top tech companies
 - [Behavioral questions](https://techinterviewhandbook.org/behavioral-questions) asked by the top tech companies
 - [Good questions to ask your interviewers](https://techinterviewhandbook.org/questions-to-ask) at the end of the interviews
 - [Helpful resume tips](https://techinterviewhandbook.org/resume) to get your resume noticed and the Do's and Don'ts
+- [Front-End Interview preparation](https://frontendinterviewhandbook.com)
 
 Help from you in contributing content would be very much appreciated!
 
@@ -53,7 +53,7 @@ Anybody who wants to land a job at a tech company but is new to technical interv
 ---
 
 <div align="center">
-  <strong>💡 Looking for high quality interview courses? <a href="https://www.educative.io/explore?search_string=interview&aff=x23W">Educative</a> offers a ton of great courses to improve your interview game 💡</strong>
+  <h3>💡 Looking for high quality interview courses? <a href="https://www.educative.io/explore?search_string=interview&aff=x23W">Educative</a> offers a ton of great courses to improve your interview game 💡</h3>
 </div>
 
 ---
@@ -66,11 +66,11 @@ Also, existing resources focus mainly on algorithm questions and lack coverage f
 
 ## Looking for Front End content?
 
-Front end-related content have been extracted out into a separate repository - [Front End Interview Handbook](https://github.com/yangshun/front-end-interview-handbook).
+Front end-related content have been moved to a separate website - [Front End Interview Handbook](https://frontendinterviewhandbook.com).
 
 ## Looking for System Design content?
 
-We're still working on System Design content. In the meanwhile, check out [Educative's Grokking the System Design Interview course](https://www.educative.io/courses/grokking-the-system-design-interview?aff=x23W), which in our opinion is one of the most useful resources for getting started on system design interviews preparation.
+We're still working on System Design content. In the meanwhile, check out Educative's [Grokking the System Design Interview course](https://www.educative.io/courses/grokking-the-system-design-interview?aff=x23W), which in our opinion is one of the most useful resources for getting started on system design interviews preparation.
 
 ## Contents
 
@@ -121,4 +121,4 @@ Support this project by becoming a sponsor. Your logo/profile picture will show
 
 ## Disclaimer
 
-I am providing code in the repository to you under an open source license. Because this is my personal repository, the license you receive to my code is from me and not my employer (Facebook)
+I am providing code in the repository to you under an open source license. Because this is my personal repository, the license you receive to my code is from me and not my employer (Facebook).

algorithms/README.md

@@ -1,5 +1,5 @@
 # Algorithms
 
-The contents have been moved to the [website](https://techinterviewhandbook.org/algorithms/algorithms-introduction).
+The contents have been moved to the [website](https://techinterviewhandbook.org/algorithms/introduction).
 
 <!-- TODO: Remove in future -->

contents/algorithms/introduction.md

@@ -1,6 +1,7 @@
 ---
 id: algorithms-introduction
 title: Introduction
+slug: introduction
 ---
 
 This section dives deep into practical tips for specific topics of algorithms and data structures which appear frequently in coding questions. Many algorithm questions involve techniques that can be applied to questions of similar nature. The more techniques you have in your arsenal, the higher the chances of passing the interview. They may lead you to discover corner cases you might have missed out or even lead you towards the optimal approach!

contents/behavioral-round-overview.md

@@ -23,4 +23,4 @@ _Source: [Preparing for your Onsite Interview at Facebook](https://www.facebook.
 
 ## Courses
 
-I really don't think one needs to attend a course on behavioral interviews, but your mileage may vary. I've seen candidates get rejected for failing the behavioral round even though they did super well on the coding and system design interviews. If you want to take a course on behavioral interviews, you can check out Educative's [Grokking the Behavioral Interview](https://www.educative.io/courses/grokking-the-behavioral-interview?aff=x23W).
+I really don't think one needs to attend a course on behavioral interviews, but your mileage may vary. I've seen candidates get rejected for failing the behavioral round even though they did super well on the coding and system design interviews. If you want to take a course on behavioral interviews, you can check out Educative's [Grokking the Behavioral Interview](https://www.educative.io/courses/grokking-the-behavioral-interview?aff=x23W) course.

website/sidebars.js

@@ -1,13 +1,19 @@
 module.exports = {
-  docs: {
-    Preface: ['introduction', 'landscape'],
-    'Job Application': [
-      'resume',
-      'resume-case-study',
-      'resume-sample',
-      'cover-letter',
-    ],
-    'Interview Process': [
+  docs: [
+    {
+      type: 'category',
+      label: 'Preface',
+      items: ['introduction', 'landscape'],
+    },
+    {
+      type: 'category',
+      label: 'Job Application',
+      items: ['resume', 'resume-case-study', 'resume-sample', 'cover-letter'],
+    },
+    {
+      type: 'category',
+      label: 'Interview Process',
+      items: [
         'interview-formats',
         'self-introduction',
         {
@@ -37,14 +43,22 @@ module.exports = {
           ],
         },
         'questions-to-ask',
-    ],
-    'Post Interview': [
+        {
+          type: 'category',
+          label: 'Post Interview',
+          items: [
             'understanding-compensation',
             'negotiation',
             'engineering-levels',
             'team-selection',
           ],
-    Algorithms: [
+        },
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Algorithms',
+      items: [
         'algorithms/algorithms-introduction',
         'algorithms/array',
         'algorithms/binary',
@@ -68,4 +82,5 @@ module.exports = {
         'algorithms/trie',
       ],
     },
+  ],
 };

website/src/data/successStories.js

@@ -11,7 +11,7 @@ export default [
         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"
+          href="https://frontendinterviewhandbook.com"
           target="_blank"
           rel="noreferrer noopener">
           Front End Interview Handbook

website/src/pages/index.js

@@ -137,16 +137,29 @@ function Home() {
                   )}>
                   Why Tech Interview Handbook?
                 </h2>
-                <div className="row margin-vert--lg">
-                  <div className="col">
-                    <h3>From Zero to Hero</h3>
+                <div className={classnames('row', styles.featuresRow)}>
+                  <div
+                    className={classnames(
+                      'col',
+                      'col--4',
+                      styles.featuresRowItem,
+                    )}>
+                    <h3>💯 Go From Zero to Hero</h3>
                     <p>
                       Go from zero to tech interview hero with this handbook. No
                       prior interview experience needed.
                     </p>
+                    <a href={useBaseUrl('introduction')}>
+                      <strong>Learn more</strong>
+                    </a>
                   </div>
-                  <div className="col">
-                    <h3>Curated Practice Questions</h3>
+                  <div
+                    className={classnames(
+                      'col',
+                      'col--4',
+                      styles.featuresRowItem,
+                    )}>
+                    <h3>📝 Curated Practice Questions</h3>
                     <p>
                       No one has time to practice a few hundred LeetCode
                       questions. We tell you which are the best questions to
@@ -156,35 +169,65 @@ function Home() {
                       </a>
                       .
                     </p>
+                    <a href={useBaseUrl('best-practice-questions')}>
+                      <strong>Learn more</strong>
+                    </a>
                   </div>
-                  <div className="col">
-                    <h3>Interview Cheatsheet</h3>
+                  <div
+                    className={classnames(
+                      'col',
+                      'col--4',
+                      styles.featuresRowItem,
+                    )}>
+                    <h3>✅ Interview Cheatsheet</h3>
                     <p>
                       Straight-to-the-point Do's and Don'ts during an interview.
                       Knowing these, the battle is already half won.
                     </p>
+                    <a href={useBaseUrl('cheatsheet')}>
+                      <strong>Learn more</strong>
+                    </a>
                   </div>
-                </div>
-                <div className="row margin-vert--lg">
-                  <div className="col">
-                    <h3>Practical Algorithm Tips</h3>
+                  <div
+                    className={classnames(
+                      'col',
+                      'col--4',
+                      styles.featuresRowItem,
+                    )}>
+                    <h3>💁‍♀️ Practical Algorithm Tips</h3>
                     <p>
                       Practical tips for every algorithm topic - common
                       techniques and corner cases to look out for.
                     </p>
+                    <a href={useBaseUrl('algorithms/introduction')}>
+                      <strong>Learn more</strong>
+                    </a>
                   </div>
-                  <div className="col">
-                    <h3>Behavioral Questions</h3>
+                  <div
+                    className={classnames(
+                      'col',
+                      'col--4',
+                      styles.featuresRowItem,
+                    )}>
+                    <h3>💬 Behavioral Questions</h3>
                     <p>
                       Check out what behavioral questions companies commonly ask
                       and you can prepare your answers ahead of time.
                     </p>
+                    <a href={useBaseUrl('behavioral-questions')}>
+                      <strong>Learn more</strong>
+                    </a>
                   </div>
-                  <div className="col">
-                    <h3>Tested and Proven</h3>
+                  <div
+                    className={classnames(
+                      'col',
+                      'col--4',
+                      styles.featuresRowItem,
+                    )}>
+                    <h3>🧪 Tested and Proven</h3>
                     <p>
-                      Countless engineers have gotten their dream jobs with its
-                      help.
+                      Countless engineers have gotten their dream jobs with the
+                      help of Tech Interview Handbook.
                     </p>
                   </div>
                 </div>
@@ -193,11 +236,7 @@ function Home() {
           </div>
         </div>
         <div
-          className={classnames(
-            'margin-bottom--lg',
-            'padding-vert--lg',
-            styles.sectionSponsorAlt,
-          )}>
+          className={classnames('padding-vert--lg', styles.sectionSponsorAlt)}>
           <div className="container">
             <div className="row">
               <div className="col col--8 col--offset-2">
@@ -228,12 +267,7 @@ function Home() {
             </div>
           </div>
         </div>
-        <div
-          className={classnames(
-            'margin-vert--lg',
-            'padding-vert--lg',
-            styles.sectionAlt,
-          )}>
+        <div className={classnames('padding-vert--lg', styles.sectionAlt)}>
           <div className="container">
             <div className="row">
               <div className="col col--6 col--offset-3">
@@ -276,12 +310,7 @@ function Home() {
             </div>
           </div>
         </div>
-        <div
-          className={classnames(
-            'margin-vert--lg',
-            'padding-vert--lg',
-            'text--center',
-          )}>
+        <div className={classnames('padding-vert--lg', 'text--center')}>
           <div className="container">
             <div className="row">
               <div className="col col--8 col--offset-2">

website/src/pages/styles.module.css

@@ -53,3 +53,11 @@
 .quote {
   font-size: 1.1rem;
 }
+
+.featuresRow {
+  margin-top: -2rem;
+}
+
+.featuresRow .featuresRowItem {
+  padding-top: 2rem;
+}