|
|
import React from 'react';
|
|
|
import classnames from 'classnames';
|
|
|
import Layout from '@theme/Layout';
|
|
|
import Link from '@docusaurus/Link';
|
|
|
import BrowserOnly from '@docusaurus/BrowserOnly';
|
|
|
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
|
|
import useBaseUrl from '@docusaurus/useBaseUrl';
|
|
|
import styles from './styles.module.css';
|
|
|
|
|
|
import successStories from '../data/successStories';
|
|
|
|
|
|
const BLIND_75_URL =
|
|
|
'https://www.teamblind.com/post/New-Year-Gift---Curated-List-of-Top-75-LeetCode-Questions-to-Save-Your-Time-OaM1orEU';
|
|
|
|
|
|
function Home() {
|
|
|
const context = useDocusaurusContext();
|
|
|
const {siteConfig = {}} = context;
|
|
|
return (
|
|
|
<Layout
|
|
|
title="Technical Interview Guide for Busy Engineers"
|
|
|
description={siteConfig.tagline}>
|
|
|
<header className={classnames('hero', styles.heroBanner)}>
|
|
|
<div className="container">
|
|
|
<img
|
|
|
className={classnames(styles.heroBannerLogo, 'margin-vert--md')}
|
|
|
src={useBaseUrl('img/logo.svg')}
|
|
|
/>
|
|
|
<h1 className="hero__title">{siteConfig.title}</h1>
|
|
|
<p className="hero__subtitle">
|
|
|
{siteConfig.tagline} <br />
|
|
|
Brought to you by FAANG engineers and the author of the{' '}
|
|
|
<a href={BLIND_75_URL} target="_blank">
|
|
|
Blind 75 List
|
|
|
</a>
|
|
|
<br />
|
|
|
Over 500,000 people have benefitted from this handbook!
|
|
|
</p>
|
|
|
<div className={styles.buttons}>
|
|
|
<a
|
|
|
className={classnames('button button--primary button--lg')}
|
|
|
href={useBaseUrl('introduction')}>
|
|
|
Start Reading Now →
|
|
|
</a>
|
|
|
</div>
|
|
|
<div className="margin-top--lg">
|
|
|
<iframe
|
|
|
src="https://ghbtns.com/github-btn.html?user=yangshun&repo=tech-interview-handbook&type=star&count=true&size=large"
|
|
|
frameBorder={0}
|
|
|
scrolling={0}
|
|
|
width={160}
|
|
|
height={30}
|
|
|
title="GitHub Stars"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
<div>
|
|
|
{/* // Because the SSR and client output can differ and hydration doesn't patch attribute differences,
|
|
|
we'll render this on the browser only. */}
|
|
|
<BrowserOnly>
|
|
|
{() => (
|
|
|
<div
|
|
|
className={classnames('padding-vert--lg', styles.sectionSponsor)}>
|
|
|
<div className="container">
|
|
|
<div className="row">
|
|
|
<div className="col col--8 col--offset-2">
|
|
|
<div className="margin-vert--lg text--center">
|
|
|
<div>
|
|
|
<h2 className={styles.sectionSponsorTitle}>
|
|
|
<strong>
|
|
|
Get paid more. Receive risk-free salary negotiation
|
|
|
help from Moonchaser. You pay nothing unless your
|
|
|
offer is increased.
|
|
|
</strong>
|
|
|
</h2>
|
|
|
<div className="margin-vert--lg">
|
|
|
<a
|
|
|
className="button button--secondary button--lg"
|
|
|
href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_homepage"
|
|
|
rel="noreferrer noopener"
|
|
|
target="_blank"
|
|
|
onClick={() => {
|
|
|
window.gtag('event', 'moonchaser.homepage.click');
|
|
|
}}>
|
|
|
Get Risk-free Negotiation Help →
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
)}
|
|
|
</BrowserOnly>
|
|
|
<div className={classnames('padding-vert--xl', styles.sectionAlt)}>
|
|
|
<div className="container">
|
|
|
<div className="row">
|
|
|
<div className="col col--10 col--offset-1">
|
|
|
<h2
|
|
|
className={classnames(
|
|
|
'text--center',
|
|
|
'margin-bottom--xl',
|
|
|
styles.sectionTitle,
|
|
|
)}>
|
|
|
Complete guide to getting software engineering jobs at top
|
|
|
firms
|
|
|
</h2>
|
|
|
<div className={classnames('row', styles.featuresRow)}>
|
|
|
<div
|
|
|
className={classnames(
|
|
|
'col',
|
|
|
'col--4',
|
|
|
styles.featuresRowItem,
|
|
|
)}>
|
|
|
<h3>Not sure where to start? We got you covered</h3>
|
|
|
<ul>
|
|
|
<li>
|
|
|
<a href={useBaseUrl('resume')}>Resume Preparation</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href={useBaseUrl('resume-case-study')}>
|
|
|
Resume Samples
|
|
|
</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href={useBaseUrl('interview-formats')}>
|
|
|
Interview Formats
|
|
|
</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href={useBaseUrl('best-practice-questions')}>
|
|
|
Best Practice Questions
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div
|
|
|
className={classnames(
|
|
|
'col',
|
|
|
'col--4',
|
|
|
styles.featuresRowItem,
|
|
|
)}>
|
|
|
<h3>Efficiently prepare for all kinds of interviews</h3>
|
|
|
<ul>
|
|
|
<li>
|
|
|
<a href={useBaseUrl('algorithms/introduction')}>
|
|
|
Algorithms
|
|
|
</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href={useBaseUrl('system-design')}>System Design</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href={useBaseUrl('behavioral-round-overview')}>
|
|
|
Behavioral
|
|
|
</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="https://frontendinterviewhandbook.com">
|
|
|
Front End
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div
|
|
|
className={classnames(
|
|
|
'col',
|
|
|
'col--4',
|
|
|
styles.featuresRowItem,
|
|
|
)}>
|
|
|
<h3>Algorithms Deep-dive</h3>
|
|
|
<ul>
|
|
|
<li>
|
|
|
<a href={useBaseUrl('algorithms/array')}>Array</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href={useBaseUrl('algorithms/graph')}>Graph</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href={useBaseUrl('algorithms/linked-list')}>
|
|
|
Linked List
|
|
|
</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href={useBaseUrl('algorithms/introduction')}>
|
|
|
and more...
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={classnames('margin-vert--lg', 'padding-vert--lg')}>
|
|
|
<div className="container">
|
|
|
<div className="row">
|
|
|
<div className="col col--10 col--offset-1">
|
|
|
<h2
|
|
|
className={classnames(
|
|
|
'text--center',
|
|
|
'margin-bottom--xl',
|
|
|
styles.sectionTitle,
|
|
|
)}>
|
|
|
What is inside?
|
|
|
</h2>
|
|
|
<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={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
|
|
|
practice. We created the{' '}
|
|
|
<a href={BLIND_75_URL} target="_blank">
|
|
|
Blind 75 List
|
|
|
</a>
|
|
|
.
|
|
|
</p>
|
|
|
<a href={useBaseUrl('best-practice-questions')}>
|
|
|
<strong>Learn more</strong>
|
|
|
</a>
|
|
|
</div>
|
|
|
<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
|
|
|
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={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={classnames(
|
|
|
'col',
|
|
|
'col--4',
|
|
|
styles.featuresRowItem,
|
|
|
)}>
|
|
|
<h3>🧪 Tested and Proven</h3>
|
|
|
<p>
|
|
|
Countless engineers have gotten their dream jobs with the
|
|
|
help of Tech Interview Handbook.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
className={classnames('padding-vert--lg', styles.sectionSponsorAlt)}>
|
|
|
<div className="container">
|
|
|
<div className="row">
|
|
|
<div className="col col--8 col--offset-2">
|
|
|
<div className="margin-vert--lg text--center">
|
|
|
<div>
|
|
|
<h2 className={styles.sectionSponsorTitle}>
|
|
|
<strong>
|
|
|
Looking for high quality interview courses? Educative
|
|
|
offers a ton of great courses to improve your interview
|
|
|
game.
|
|
|
</strong>
|
|
|
</h2>
|
|
|
<div className="margin-vert--lg">
|
|
|
<a
|
|
|
className="button button--secondary button--lg"
|
|
|
href="https://www.educative.io/explore?search_string=interview&aff=x23W"
|
|
|
rel="noreferrer noopener"
|
|
|
target="_blank"
|
|
|
onClick={() => {
|
|
|
window.gtag('event', 'educative.homepage.click');
|
|
|
}}>
|
|
|
Get Started →
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={classnames('padding-vert--lg', styles.sectionAlt)}>
|
|
|
<div className="container">
|
|
|
<div className="row">
|
|
|
<div className="col col--6 col--offset-3">
|
|
|
<h2
|
|
|
className={classnames(
|
|
|
'margin-vert--lg',
|
|
|
'text--center',
|
|
|
styles.sectionTitle,
|
|
|
)}>
|
|
|
Success Stories
|
|
|
</h2>
|
|
|
{successStories.map((user) => (
|
|
|
<div className="card margin-vert--lg" key={user.name}>
|
|
|
<div className="card__body">
|
|
|
<p className={styles.quote}>"{user.quote}"</p>
|
|
|
</div>
|
|
|
<div className="card__header">
|
|
|
<div className="avatar">
|
|
|
<img className="avatar__photo" src={user.thumbnail} />
|
|
|
<div className="avatar__intro">
|
|
|
<div className="avatar__name">{user.name}</div>
|
|
|
<small className="avatar__subtitle">
|
|
|
{user.title}
|
|
|
</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
))}
|
|
|
<p className="margin-vert--lg text--center">
|
|
|
Would you like to contribute a success story?{' '}
|
|
|
<a
|
|
|
href="https://github.com/yangshun/tech-interview-handbook/edit/master/website/src/data/successStories.js"
|
|
|
target="_blank">
|
|
|
Open a Pull Request here
|
|
|
</a>
|
|
|
!
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={classnames('padding-vert--lg', 'text--center')}>
|
|
|
<div className="container">
|
|
|
<div className="row">
|
|
|
<div className="col col--8 col--offset-2">
|
|
|
<h2
|
|
|
className={classnames(
|
|
|
'margin-vert--lg',
|
|
|
styles.sectionTitle,
|
|
|
)}>
|
|
|
Enjoying Tech Interview Handbook so far?
|
|
|
</h2>
|
|
|
<p className={classnames(styles.sectionTagline)}>
|
|
|
Support this project by becoming a sponsor! Your logo/profile
|
|
|
picture will show up here with a link to your website.
|
|
|
</p>
|
|
|
<div>
|
|
|
<a
|
|
|
href="https://opencollective.com/tech-interview-handbook/sponsor/0/website"
|
|
|
target="_blank">
|
|
|
<img src="https://opencollective.com/tech-interview-handbook/sponsor/0/avatar.svg" />
|
|
|
</a>
|
|
|
<a
|
|
|
href="https://opencollective.com/tech-interview-handbook/sponsor/1/website"
|
|
|
target="_blank">
|
|
|
<img src="https://opencollective.com/tech-interview-handbook/sponsor/1/avatar.svg" />
|
|
|
</a>
|
|
|
</div>
|
|
|
<div className="margin-vert--lg">
|
|
|
<a
|
|
|
className="button button--secondary button--lg"
|
|
|
href="https://opencollective.com/tech-interview-handbook"
|
|
|
rel="noreferrer noopener"
|
|
|
target="_blank">
|
|
|
Become a sponsor!
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={classnames('padding-vert--xl', styles.sectionAlt)}>
|
|
|
<div className="container">
|
|
|
<div className="row">
|
|
|
<div className="col col--4">
|
|
|
<h2>Take the next step</h2>
|
|
|
</div>
|
|
|
<div className="col col--8">
|
|
|
<p className={classnames(styles.sectionTagline)}>
|
|
|
It's free! Start improving your interview game today and get
|
|
|
the job at the company of your dreams.
|
|
|
</p>
|
|
|
<a
|
|
|
className={classnames('button button--primary button--lg')}
|
|
|
href={useBaseUrl('introduction')}>
|
|
|
Start Reading Now →
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Layout>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
export default Home;
|
