msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

website: revamp homepage

Browse Source
pull/261/head
Yangshun 3 years ago
parent 752c423c84
commit 7b881d3538
3 changed files with 256 additions and 140 deletions

8
website/sidebars.js
Unescape View File

@ -4,7 +4,7 @@ module.exports = {
Preface: ['introduction', 'landscape'], Preface: ['introduction', 'landscape'],
}, },
{ {
'Step 1: Preparing your resume': [ 'Step 1: Prepare a FAANG-ready resume': [
'resume/guide', 'resume/guide',
'resume/ats-proof-template', 'resume/ats-proof-template',
'resume/write-effective-content', 'resume/write-effective-content',
@ -15,7 +15,7 @@ module.exports = {
}, },
{ {
type: 'category', type: 'category',
label: 'Step 2: Acing the interview', label: 'Step 2: Ace the interview',
collapsed: false, collapsed: false,
items: [ items: [
{ {
@ -76,13 +76,13 @@ module.exports = {
], ],
}, },
{ {
'Step 3: Negotiating the best offer': [ 'Step 3: Negotiate the best offer': [
'understanding-compensation', 'understanding-compensation',
'negotiation', 'negotiation',
], ],
}, },
{ {
'Step 4: Getting ready for your job': [ 'Step 4: Prepare for the job': [
'choosing-between-companies', 'choosing-between-companies',
'engineering-levels', 'engineering-levels',
// 'team-selection', // 'team-selection',

374
website/src/pages/index.js
Unescape View File

@ -10,6 +10,8 @@ import successStories from '../data/successStories';
const BLIND_75_URL = const BLIND_75_URL =
'https://www.teamblind.com/post/New-Year-Gift---Curated-List-of-Top-75-LeetCode-Questions-to-Save-Your-Time-OaM1orEU'; 'https://www.teamblind.com/post/New-Year-Gift---Curated-List-of-Top-75-LeetCode-Questions-to-Save-Your-Time-OaM1orEU';
const BLIND_OFFER_NUMBERS_URL =
'https://www.teamblind.com/post/Sharing-my-offer-numbers-from-big-companies-for-your-reference-yNgqUPQR';
const FEATURES = [ const FEATURES = [
{ {
@ -107,11 +109,12 @@ function Home() {
title="Technical Interview Guide for Busy Engineers" title="Technical Interview Guide for Busy Engineers"
description={siteConfig.tagline}> description={siteConfig.tagline}>
<HeroSection /> <HeroSection />
<WhatIsThisSection />
<TweetsSection />
<HowToUseSection />
<EducativeSection /> <EducativeSection />
<ProductContentsSection />
<FeaturesSection /> <FeaturesSection />
<MoonchaserSection /> <MoonchaserSection />
<TweetsSection />
<SuccessStoriesSection /> <SuccessStoriesSection />
<SponsorshipSection /> <SponsorshipSection />
<PreFooterSection /> <PreFooterSection />
@ -160,6 +163,57 @@ function HeroSection() {
); );
} }
function WhatIsThisSection() {
return (
<div className={classnames('padding-vert--xl', styles.sectionAlt)}>
<div className="container">
<div className="row">
<div className="col col--8 col--offset-2">
<h2 className="text--center margin-bottom--lg">
<span class="badge badge--primary">What is this</span>
</h2>
<h3
className={classnames(
'text--center',
'margin-bottom--lg',
styles.sectionTitle,
)}>
The fastest way to prepare effectively for your software
engineering interviews, used by >500,000 engineers
</h3>
<p
className={classnames(
'margin-bottom--lg',
styles.sectionTagline,
)}>
Tech Interview Handbook goes{' '}
<strong>straight to the point</strong> and tells you the{' '}
<strong>minimum</strong> you need to know to excel in your
technical interviews.
<br />
<br />
As a Senior Software Engineer and Tech Lead at Meta/Facebook, I
have personally gone through the frustrating process of browsing
through many unorganized resources to prepare for my technical
interviews.
<br />
<br />
This handbook contains the essence of technical interviewing I
gathered over my last job hunt, which allowed me to clinch{' '}
<a href={BLIND_OFFER_NUMBERS_URL}>
9 offers out of 11 top Bay Area companies
</a>{' '}
-{' '}
<strong>Facebook, Google, Airbnb, Palantir, Dropbox, Lyft</strong>
, and some startups!
</p>
</div>
</div>
</div>
</div>
);
}
function MoonchaserSection() { function MoonchaserSection() {
// Because the SSR and client output can differ and hydration doesn't patch attribute differences, // Because the SSR and client output can differ and hydration doesn't patch attribute differences,
// we'll render this on the browser only. // we'll render this on the browser only.
@ -202,104 +256,131 @@ function MoonchaserSection() {
); );
} }
function ProductContentsSection() { function HowToUseStep({index, title, ctaLink, contents}) {
return (
<div className={classnames('card', styles.howToUseStep)}>
<div className="card__header">
<div className="margin-bottom--sm">
<small className={styles.howToUseStepLabel}>STEP {index}</small>
</div>
<h3>{title}</h3>
</div>
<div className="card__body">
<ul>
{contents.map((content, i) => (
<li key={i}>{content}</li>
))}
</ul>
</div>
<div class="card__footer">
<a
class="button button--secondary button--block"
href={useBaseUrl(ctaLink)}>
Read now →
</a>
</div>
</div>
);
}
function HowToUseSection() {
return ( return (
<div className={classnames('padding-vert--xl')}> <div className={classnames('padding-vert--xl', styles.sectionAlt)}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col col--10 col--offset-1"> <div className="col col--10 col--offset-1">
<h2 <h2 className="text--center margin-bottom--lg">
<span class="badge badge--primary">How to use</span>
</h2>
<h3
className={classnames( className={classnames(
'text--center', 'text--center',
'margin-bottom--xl', 'margin-bottom--lg',
styles.sectionTitle, styles.sectionTitle,
)}> )}>
Complete guide to getting software engineering jobs at top firms Not sure where to start in your interview preparation?
</h2> <br /> We've got you covered.
<div className={classnames('row', styles.featuresRow)}> </h3>
<div <p
className={classnames( className={classnames(
'col', 'text--center',
'col--4', 'margin-bottom--lg',
styles.featuresRowItemContainer, styles.sectionTagline,
)}> )}>
<h3>Not sure where to start? We got you covered</h3> This guide is structured in a{' '}
<ul> <strong>simple to follow, step-by-step</strong> style covering all
<li> aspects of your software engineering interview preparation -{' '}
<a href={useBaseUrl('resume/guide')}> <strong>no prior interview experience required</strong>.
Step-by-step resume preparation </p>
</a> </div>
</li> </div>
<li> <div className={classnames('row', styles.featuresRow)}>
<a href={useBaseUrl('interview-formats')}> <div
Interview formats className={classnames(
</a> 'col',
</li> 'col--3',
<li> styles.featuresRowItemContainer,
<a href={useBaseUrl('best-practice-questions')}> )}>
Best practice questions <HowToUseStep
</a> index={1}
</li> title={<>Prepare a FAANG-ready resume</>}
</ul> contents={[
</div> <>Create an ATS-proof resume</>,
<div <>Software engineering specific resume content</>,
className={classnames( <>Optimizing and and testing your resume</>,
'col', ]}
'col--4', ctaLink="/resume/guide"
styles.featuresRowItemContainer, />
)}> </div>
<h3>Efficiently prepare for all kinds of interviews</h3> <div
<ul> className={classnames(
<li> 'col',
<a href={useBaseUrl('coding-interview')}>Coding</a> 'col--3',
</li> styles.featuresRowItemContainer,
<li> )}>
<a href={useBaseUrl('algorithms/introduction')}> <HowToUseStep
Algorithms index={2}
</a> title={<>Ace the interviews</>}
</li> contents={[
<li> <>Step-by-step coding interview preparation</>,
<a href={useBaseUrl('system-design')}>System design</a> <>Algorithms deep dive</>,
</li> <>System design interview preparation</>,
<li> <>Behavioral interview preparation</>,
<a href={useBaseUrl('behavioral-interview')}>Behavioral</a> ]}
</li> ctaLink="/interview-formats"
<li> />
<a </div>
href="https://frontendinterviewhandbook.com" <div
rel="noopener"> className={classnames(
Front end 'col',
</a> 'col--3',
</li> styles.featuresRowItemContainer,
</ul> )}>
</div> <HowToUseStep
<div index={3}
className={classnames( title={<>Negotiate the best offer</>}
'col', contents={[
'col--4', <>Negotiation strategies for software engineers</>,
styles.featuresRowItemContainer, <>Guide on how compensation works for software engineers</>,
)}> ]}
<h3>Algorithms deep-dive</h3> ctaLink="/understanding-compensation"
<ul> />
<li> </div>
<a href={useBaseUrl('algorithms/array')}>Array</a> <div
</li> className={classnames(
<li> 'col',
<a href={useBaseUrl('algorithms/graph')}>Graph</a> 'col--3',
</li> styles.featuresRowItemContainer,
<li> )}>
<a href={useBaseUrl('algorithms/linked-list')}> <HowToUseStep
Linked list index={4}
</a> title={<>Prepare for the job</>}
</li> contents={[
<li> <>How to choose between companies</>,
<a href={useBaseUrl('algorithms/introduction')}> <>Guide to engineering levels</>,
and more... ]}
</a> ctaLink="/choosing-between-companies"
</li> />
</ul>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -313,14 +394,17 @@ function FeaturesSection() {
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col col--10 col--offset-1"> <div className="col col--10 col--offset-1">
<h2 <h2 className="text--center margin-bottom--lg">
<span class="badge badge--primary">Why this guide</span>
</h2>
<h3
className={classnames( className={classnames(
'text--center', 'text--center',
'margin-bottom--xl', 'margin-vert--lg',
styles.sectionTitle, styles.sectionTitle,
)}> )}>
There's everything you need We have everything you need - all straight to the point
</h2> </h3>
<div className={classnames('row', styles.featuresRow)}> <div className={classnames('row', styles.featuresRow)}>
{FEATURES.map(({title, description, link}) => ( {FEATURES.map(({title, description, link}) => (
<div <div
@ -329,7 +413,7 @@ function FeaturesSection() {
'col--4', 'col--4',
styles.featuresRowItemContainer, styles.featuresRowItemContainer,
)}> )}>
<div className={'card ' + styles.featuresRowItem}> <div className={classnames('card', styles.featuresRowItem)}>
<h3 className={styles.featuresRowItemTitle}>{title}</h3> <h3 className={styles.featuresRowItemTitle}>{title}</h3>
<p className={styles.featuresRowItemDescription}> <p className={styles.featuresRowItemDescription}>
{description} {description}
@ -338,7 +422,7 @@ function FeaturesSection() {
<a <a
className={styles.featuresRowItemLink} className={styles.featuresRowItemLink}
href={useBaseUrl(link)}> href={useBaseUrl(link)}>
<strong>Start reading →</strong> <strong>Read now →</strong>
</a> </a>
)} )}
</div> </div>
@ -390,11 +474,11 @@ function EducativeSection() {
function TweetsSection() { function TweetsSection() {
return ( return (
<div className={classnames('padding-vert--lg', styles.sectionAlt)}> <div className={classnames('padding-vert--xl', styles.sectionAlt2)}>
<div className="container"> <div className="container">
<h2 <h2
className={classnames( className={classnames(
'margin-vert--lg', 'margin-bottom--lg',
'text--center', 'text--center',
styles.sectionTitle, styles.sectionTitle,
)}> )}>
@ -544,52 +628,70 @@ function TweetsSection() {
); );
} }
function SuccessStory({name, quote, thumbnail, title}) {
return (
<div className="card margin-vert--lg">
<div className="card__body">
<p className={styles.quote}>"{quote}"</p>
</div>
<div className="card__header">
<div className="avatar">
<img alt={name} className="avatar__photo" src={thumbnail} />
<div className="avatar__intro">
<div className="avatar__name">{name}</div>
<small className="avatar__subtitle">{title}</small>
</div>
</div>
</div>
</div>
);
}
function SuccessStoriesSection() { function SuccessStoriesSection() {
const storiesColumns = [[], []];
successStories.forEach((tweet, i) => storiesColumns[i % 2].push(tweet));
return ( return (
<div className={classnames('padding-vert--lg', styles.sectionAlt)}> <div className={classnames('padding-vert--xl', styles.sectionAlt)}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col col--6 col--offset-3"> <div className="col col--6 col--offset-3">
<h2 <h2 className="text--center margin-bottom--lg">
<span class="badge badge--primary">Success stories</span>
</h2>
<h3
className={classnames( className={classnames(
'margin-vert--lg', 'margin-vert--lg',
'text--center', 'text--center',
styles.sectionTitle, styles.sectionTitle,
)}> )}>
Success stories Countless engineers have gotten a job at FAANG with this free
</h2> handbook
{successStories.map((user) => ( </h3>
<div className="card margin-vert--lg" key={user.name}> </div>
<div className="card__body"> </div>
<p className={styles.quote}>"{user.quote}"</p> <div className={classnames('row', styles.tweetsSection)}>
</div> <div className="col col--offset-2 col--4">
<div className="card__header"> {storiesColumns[0].map((user) => (
<div className="avatar"> <SuccessStory key={user.name} {...user} />
<img ))}
alt={user.name} </div>
className="avatar__photo" <div className="col col--4">
src={user.thumbnail} {storiesColumns[1].map((user) => (
/> <SuccessStory key={user.name} {...user} />
<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"
rel="noopener"
target="_blank">
Open a Pull Request here
</a>
!
</p>
</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"
rel="noopener"
target="_blank">
Open a Pull Request here
</a>
!
</p>
</div> </div>
</div> </div>
); );
@ -597,7 +699,7 @@ function SuccessStoriesSection() {
function SponsorshipSection() { function SponsorshipSection() {
return ( return (
<div className={classnames('padding-vert--lg', 'text--center')}> <div className={classnames('padding-vert--xl', 'text--center')}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col col--8 col--offset-2"> <div className="col col--8 col--offset-2">
@ -628,7 +730,7 @@ function SponsorshipSection() {
/> />
</a> </a>
</div> </div>
<div className="margin-vert--lg"> <div className="margin-top--lg">
<a <a
className="button button--secondary button--lg" className="button button--secondary button--lg"
href="https://opencollective.com/tech-interview-handbook" href="https://opencollective.com/tech-interview-handbook"
@ -646,7 +748,7 @@ function SponsorshipSection() {
function PreFooterSection() { function PreFooterSection() {
return ( return (
<div className={classnames('padding-vert--xl', styles.sectionAlt)}> <div className={classnames('padding-vert--xl', styles.sectionAlt2)}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col col--4"> <div className="col col--4">

14
website/src/pages/styles.module.css
Unescape View File

@ -33,6 +33,10 @@
background-color: var(--ifm-color-emphasis-100); background-color: var(--ifm-color-emphasis-100);
} }
html[data-theme='light'] .sectionAlt2 {
background-color: var(--ifm-color-emphasis-200);
}
.sectionSponsor { .sectionSponsor {
background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59); background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
} }
@ -54,6 +58,16 @@
font-size: 1.1rem; font-size: 1.1rem;
} }
.howToUseStep {
height: 100%;
}
.howToUseStepLabel {
color: var(--ifm-color-primary);
font-size: 0.9rem;
font-weight: bold;
}
.featuresRow { .featuresRow {
margin-top: -2rem; margin-top: -2rem;
} }

Write Preview
Loading…
Cancel
Save