|
|
import React from 'react';
|
|
|
import clsx from 'clsx';
|
|
|
import Layout from '@theme/Layout';
|
|
|
import BrowserOnly from '@docusaurus/BrowserOnly';
|
|
|
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
|
|
import Link from '@docusaurus/Link';
|
|
|
import useBaseUrl from '@docusaurus/useBaseUrl';
|
|
|
import styles from './styles.module.css';
|
|
|
|
|
|
import successStories from '../data/successStories';
|
|
|
import userTweets from '../data/userTweets';
|
|
|
|
|
|
const BLIND_75_URL =
|
|
|
'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 = [
|
|
|
{
|
|
|
title: <>💯 Go From zero to hero</>,
|
|
|
description: (
|
|
|
<>
|
|
|
Go from zero to tech interview hero with this handbook. No prior
|
|
|
interview experience needed.
|
|
|
</>
|
|
|
),
|
|
|
link: '/software-engineering-interview-guide/',
|
|
|
},
|
|
|
{
|
|
|
title: <>📝 Curated practice questions</>,
|
|
|
description: (
|
|
|
<>
|
|
|
No one has time to practice a few hundred questions. We created the{' '}
|
|
|
<a href={BLIND_75_URL} target="_blank" rel="noopener">
|
|
|
Blind 75 List
|
|
|
</a>{' '}
|
|
|
to tell you which the best questions are.
|
|
|
</>
|
|
|
),
|
|
|
link: '/coding-interview-study-plan/',
|
|
|
},
|
|
|
{
|
|
|
title: <>📋 Interview best practices</>,
|
|
|
description: (
|
|
|
<>
|
|
|
Straight-to-the-point Do's and Don'ts during an interview. The battle is
|
|
|
already half won.
|
|
|
</>
|
|
|
),
|
|
|
link: '/coding-interview-cheatsheet/',
|
|
|
},
|
|
|
{
|
|
|
title: <>💁♀️ Practical algorithm tips</>,
|
|
|
description: (
|
|
|
<>
|
|
|
Practical tips for every algorithm topic - common techniques and corner
|
|
|
cases to look out for.
|
|
|
</>
|
|
|
),
|
|
|
link: '/algorithms/study-cheatsheet/',
|
|
|
},
|
|
|
{
|
|
|
title: <>💬 Behavioral questions</>,
|
|
|
description: (
|
|
|
<>
|
|
|
Check out what behavioral questions companies commonly ask and you can
|
|
|
prepare your answers ahead of time.
|
|
|
</>
|
|
|
),
|
|
|
link: '/behavioral-interview-questions/',
|
|
|
},
|
|
|
{
|
|
|
title: <>🧪 Tested and proven</>,
|
|
|
description: (
|
|
|
<>
|
|
|
Countless engineers have gotten their dream jobs with the help of Tech
|
|
|
Interview Handbook.
|
|
|
</>
|
|
|
),
|
|
|
},
|
|
|
];
|
|
|
|
|
|
function Tweet({ url, handle, name, content, avatar, date }) {
|
|
|
return (
|
|
|
<div className={clsx('card', styles.tweet)}>
|
|
|
<div className="card__header">
|
|
|
<div className="avatar">
|
|
|
<img alt={name} className="avatar__photo" src={avatar} />
|
|
|
<div className="avatar__intro">
|
|
|
<div className={styles.tweet}>
|
|
|
<strong>{name}</strong>{' '}
|
|
|
<span className={styles.tweetMeta}>
|
|
|
@{handle} ·{' '}
|
|
|
<a className={styles.tweetMeta} href={url} rel="noopener">
|
|
|
{date}
|
|
|
</a>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div>{content}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
function Home() {
|
|
|
const { siteConfig = {} } = useDocusaurusContext();
|
|
|
return (
|
|
|
<Layout
|
|
|
title="Technical Interview Guide for Busy Engineers"
|
|
|
description={siteConfig.tagline}>
|
|
|
<HeroSection />
|
|
|
<WhatIsThisSection />
|
|
|
<GreatFrontEndSection />
|
|
|
<TweetsSection />
|
|
|
<HowToUseSection />
|
|
|
<FAANGTechLeadsSection />
|
|
|
<FeaturesSection />
|
|
|
<SuccessStoriesSection />
|
|
|
<SponsorshipSection />
|
|
|
<PreFooterSection />
|
|
|
</Layout>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
function HeroSection() {
|
|
|
const { siteConfig = {} } = useDocusaurusContext();
|
|
|
|
|
|
return (
|
|
|
<header className={clsx('hero', styles.heroBanner)}>
|
|
|
<div className="container">
|
|
|
<img
|
|
|
alt={siteConfig.title}
|
|
|
className={clsx(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 the author of{' '}
|
|
|
<a href={BLIND_75_URL} rel="noopener" target="_blank">
|
|
|
Blind 75
|
|
|
</a>
|
|
|
</p>
|
|
|
<div className={styles.buttons}>
|
|
|
<Link
|
|
|
className={clsx('button button--primary button--lg')}
|
|
|
to="/software-engineering-interview-guide/">
|
|
|
Start reading now →
|
|
|
</Link>
|
|
|
</div>
|
|
|
<p className="margin-top--md" style={{ fontSize: 16, fontWeight: 600 }}>
|
|
|
Or check out our{' '}
|
|
|
<a href="https://www.frontendinterviewhandbook.com">
|
|
|
Front End Interview Handbook
|
|
|
</a>
|
|
|
</p>
|
|
|
<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={170}
|
|
|
height={30}
|
|
|
title="GitHub Stars"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
function WhatIsThisSection() {
|
|
|
return (
|
|
|
<div className={clsx('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 className="badge badge--primary">What is this</span>
|
|
|
</h2>
|
|
|
<h3
|
|
|
className={clsx(
|
|
|
'text--center',
|
|
|
'margin-bottom--lg',
|
|
|
styles.sectionTitle,
|
|
|
)}>
|
|
|
Fastest way to prepare effectively for your software engineering
|
|
|
interviews, used by over 1,000,000 engineers
|
|
|
</h3>
|
|
|
<p className={clsx('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 />
|
|
|
Having personally gone through the interviewing process, it was
|
|
|
frustrating to have to find resources from everywhere 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 9
|
|
|
offers out of 11 top Bay Area companies -{' '}
|
|
|
<strong>Google, Airbnb, Palantir, Dropbox, Lyft</strong>, and some
|
|
|
startups!
|
|
|
<br />
|
|
|
<br />A senior Netflix engineer used Tech Interview Handbook and
|
|
|
got{' '}
|
|
|
<a href="https://www.teamblind.com/post/7-onsites-7-offers-aAFTykAD">
|
|
|
7 offers from 7 companies
|
|
|
</a>{' '}
|
|
|
with the top offer being $800k USD 🤯!
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
function RoraSection() {
|
|
|
// Because the SSR and client output can differ and hydration doesn't patch attribute differences,
|
|
|
// we'll render this on the browser only.
|
|
|
return (
|
|
|
<BrowserOnly>
|
|
|
{() => (
|
|
|
<div className={clsx('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
|
|
|
advice from Rora. 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.teamrora.com/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_homepage"
|
|
|
rel="noopener"
|
|
|
target="_blank"
|
|
|
onClick={() => {
|
|
|
window.gtag('event', 'rora.homepage.click');
|
|
|
}}>
|
|
|
Get risk-free negotiation advice →
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
)}
|
|
|
</BrowserOnly>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
function HowToUseStep({ index, title, ctaLink, contents }) {
|
|
|
return (
|
|
|
<div className={clsx('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 className="card__footer">
|
|
|
<Link className="button button--primary button--block" to={ctaLink}>
|
|
|
Read now →
|
|
|
</Link>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
function HowToUseSection() {
|
|
|
return (
|
|
|
<div className={clsx('padding-vert--xl', styles.sectionAlt2)}>
|
|
|
<div className="container">
|
|
|
<div className="row">
|
|
|
<div className="col col--10 col--offset-1">
|
|
|
<h2 className="text--center margin-bottom--lg">
|
|
|
<span className="badge badge--primary">How to use</span>
|
|
|
</h2>
|
|
|
<h3
|
|
|
className={clsx(
|
|
|
'text--center',
|
|
|
'margin-bottom--lg',
|
|
|
styles.sectionTitle,
|
|
|
)}>
|
|
|
Not sure where to start in your interview preparation?
|
|
|
<br /> We've got you covered.
|
|
|
</h3>
|
|
|
<p
|
|
|
className={clsx(
|
|
|
'text--center',
|
|
|
'margin-bottom--lg',
|
|
|
styles.sectionTagline,
|
|
|
)}>
|
|
|
This guide is structured in a{' '}
|
|
|
<strong>simple to follow, step-by-step</strong> style covering all
|
|
|
aspects of your software engineering interview preparation -{' '}
|
|
|
<strong>no prior interview experience required</strong>.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={clsx('row', styles.featuresRow)}>
|
|
|
<div
|
|
|
className={clsx('col', 'col--3', styles.featuresRowItemContainer)}>
|
|
|
<HowToUseStep
|
|
|
index={1}
|
|
|
title={<>Prepare a FAANG-ready resume</>}
|
|
|
contents={[
|
|
|
<>Create an ATS-proof resume</>,
|
|
|
<>Software engineering specific resume content</>,
|
|
|
<>Optimizing and testing your resume</>,
|
|
|
]}
|
|
|
ctaLink="/resume/"
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
className={clsx('col', 'col--3', styles.featuresRowItemContainer)}>
|
|
|
<HowToUseStep
|
|
|
index={2}
|
|
|
title={<>Ace the interviews</>}
|
|
|
contents={[
|
|
|
<>Step-by-step coding interview preparation</>,
|
|
|
<>Algorithms deep dive</>,
|
|
|
<>System design interview preparation</>,
|
|
|
<>Behavioral interview preparation</>,
|
|
|
]}
|
|
|
ctaLink="/coding-interview-prep/"
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
className={clsx('col', 'col--3', styles.featuresRowItemContainer)}>
|
|
|
<HowToUseStep
|
|
|
index={3}
|
|
|
title={<>Negotiate the best offer</>}
|
|
|
contents={[
|
|
|
<>Negotiation strategies for software engineers</>,
|
|
|
<>Guide on how compensation works for software engineers</>,
|
|
|
]}
|
|
|
ctaLink="/understanding-compensation/"
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
className={clsx('col', 'col--3', styles.featuresRowItemContainer)}>
|
|
|
<HowToUseStep
|
|
|
index={4}
|
|
|
title={<>Prepare for the job</>}
|
|
|
contents={[
|
|
|
<>How to choose between companies</>,
|
|
|
<>Guide to engineering levels</>,
|
|
|
]}
|
|
|
ctaLink="/choosing-between-companies"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
function FeaturesSection() {
|
|
|
return (
|
|
|
<div className={clsx('padding-vert--xl', styles.sectionAlt)}>
|
|
|
<div className="container">
|
|
|
<div className="row">
|
|
|
<div className="col col--10 col--offset-1">
|
|
|
<h2 className="text--center margin-bottom--lg">
|
|
|
<span className="badge badge--primary">Why this guide</span>
|
|
|
</h2>
|
|
|
<h3
|
|
|
className={clsx(
|
|
|
'text--center',
|
|
|
'margin-vert--lg',
|
|
|
styles.sectionTitle,
|
|
|
)}>
|
|
|
We have everything you need - all straight to the point
|
|
|
</h3>
|
|
|
<div className={clsx('row', styles.featuresRow)}>
|
|
|
{FEATURES.map(({ title, description, link }, idx) => (
|
|
|
<div
|
|
|
key={idx}
|
|
|
className={clsx(
|
|
|
'col',
|
|
|
'col--4',
|
|
|
styles.featuresRowItemContainer,
|
|
|
)}>
|
|
|
<div className={clsx('card', styles.featuresRowItem)}>
|
|
|
<h3 className={styles.featuresRowItemTitle}>{title}</h3>
|
|
|
<p className={styles.featuresRowItemDescription}>
|
|
|
{description}
|
|
|
</p>
|
|
|
{link && (
|
|
|
<Link className={styles.featuresRowItemLink} to={link}>
|
|
|
<strong>Read now →</strong>
|
|
|
</Link>
|
|
|
)}
|
|
|
</div>
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
function FAANGTechLeadsSection() {
|
|
|
return (
|
|
|
<div
|
|
|
className={clsx('padding-vert--lg')}
|
|
|
style={{ backgroundColor: 'rgb(244, 63, 94)' }}>
|
|
|
<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>
|
|
|
Craft the perfect resume for FAANG with FAANG Tech Leads'
|
|
|
high quality Software Engineer resume templates and samples.
|
|
|
</strong>
|
|
|
</h2>
|
|
|
<div className="margin-vert--lg">
|
|
|
<a
|
|
|
className="button button--secondary button--lg"
|
|
|
href="https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2"
|
|
|
rel="noopener"
|
|
|
target="_blank"
|
|
|
onClick={() => {
|
|
|
window.gtag('event', 'faangtechleads.homepage.click');
|
|
|
}}>
|
|
|
Improve your resume now →
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
function GreatFrontEndSection() {
|
|
|
return (
|
|
|
<div
|
|
|
className={clsx('padding-vert--lg')}
|
|
|
style={{ backgroundColor: 'rgb(79, 70, 229)' }}>
|
|
|
<div className="container">
|
|
|
<div className="row">
|
|
|
<div className="col col--8 col--offset-2">
|
|
|
<div className="margin-vert--lg text--center">
|
|
|
<div>
|
|
|
<h2>
|
|
|
<span class="badge badge--secondary">
|
|
|
LeetCode for Front End Interviews
|
|
|
</span>
|
|
|
</h2>
|
|
|
<h3
|
|
|
className={styles.sectionSponsorTitle}
|
|
|
style={{ fontSize: 'var(--ifm-h2-font-size)' }}>
|
|
|
<strong>
|
|
|
Built by ex-FAANG Senior Engineers,{' '}
|
|
|
<a
|
|
|
href="https://www.greatfrontend.com/?fpr=yangshun&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=homepage"
|
|
|
style={{ color: '#fff', textDecoration: 'underline' }}
|
|
|
target="_blank">
|
|
|
GreatFrontEnd
|
|
|
</a>{' '}
|
|
|
is the fastest way to prepare for a front end interview job.
|
|
|
</strong>
|
|
|
</h3>
|
|
|
<div className="margin-vert--lg">
|
|
|
<a
|
|
|
className="button button--secondary button--lg"
|
|
|
href="https://www.greatfrontend.com/questions?fpr=yangshun&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=homepage"
|
|
|
rel="noopener"
|
|
|
target="_blank"
|
|
|
onClick={() => {
|
|
|
window.gtag(
|
|
|
'event',
|
|
|
'greatfrontend.homepage.prepare.click',
|
|
|
);
|
|
|
}}>
|
|
|
Try it out →
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
function TweetsSection() {
|
|
|
return (
|
|
|
<div className={clsx('padding-vert--xl', styles.sectionAlt)}>
|
|
|
<div className="container">
|
|
|
<h2
|
|
|
className={clsx(
|
|
|
'margin-bottom--lg',
|
|
|
'text--center',
|
|
|
styles.sectionTitle,
|
|
|
)}
|
|
|
>
|
|
|
Over 1,000,000 people have benefitted from this handbook!
|
|
|
</h2>
|
|
|
<div className={clsx('row', styles.tweetsSection)}>
|
|
|
{/* Render tweets in groups of three */}
|
|
|
<div className="col col--4">
|
|
|
{userTweets.slice(0, 4).map((tweet, index) => (
|
|
|
<Tweet
|
|
|
key={index}
|
|
|
url={tweet.url}
|
|
|
handle={tweet.handle}
|
|
|
name={tweet.name}
|
|
|
date={tweet.date}
|
|
|
avatar={tweet.avatar}
|
|
|
content={tweet.content}
|
|
|
/>
|
|
|
))}
|
|
|
</div>
|
|
|
<div className="col col--4">
|
|
|
{userTweets.slice(4, 7).map((tweet, index) => (
|
|
|
<Tweet
|
|
|
key={index}
|
|
|
url={tweet.url}
|
|
|
handle={tweet.handle}
|
|
|
name={tweet.name}
|
|
|
date={tweet.date}
|
|
|
avatar={tweet.avatar}
|
|
|
content={tweet.content}
|
|
|
/>
|
|
|
))}
|
|
|
</div>
|
|
|
<div className="col col--4">
|
|
|
{userTweets.slice(7, 10).map((tweet, index) => (
|
|
|
<Tweet
|
|
|
key={index}
|
|
|
url={tweet.url}
|
|
|
handle={tweet.handle}
|
|
|
name={tweet.name}
|
|
|
date={tweet.date}
|
|
|
avatar={tweet.avatar}
|
|
|
content={tweet.content}
|
|
|
/>
|
|
|
))}
|
|
|
</div>
|
|
|
</div>
|
|
|
<p className="margin-vert--lg text--center">
|
|
|
Would you like to share your experience?{' '}
|
|
|
<a
|
|
|
href="https://github.com/yangshun/tech-interview-handbook/edit/main/apps/website/src/data/userTweets.js"
|
|
|
rel="noopener"
|
|
|
target="_blank"
|
|
|
>
|
|
|
Open a Pull Request here
|
|
|
</a>
|
|
|
!
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
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() {
|
|
|
const storiesColumns = [[], []];
|
|
|
successStories.forEach((tweet, i) => storiesColumns[i % 2].push(tweet));
|
|
|
|
|
|
return (
|
|
|
<div className={clsx('padding-vert--xl', styles.sectionAlt)}>
|
|
|
<div className="container">
|
|
|
<div className="row">
|
|
|
<div className="col col--6 col--offset-3">
|
|
|
<h2 className="text--center margin-bottom--lg">
|
|
|
<span className="badge badge--primary">Success stories</span>
|
|
|
</h2>
|
|
|
<h3
|
|
|
className={clsx(
|
|
|
'margin-vert--lg',
|
|
|
'text--center',
|
|
|
styles.sectionTitle,
|
|
|
)}>
|
|
|
Countless engineers have gotten a job at FAANG with this free
|
|
|
handbook
|
|
|
</h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={clsx('row', styles.tweetsSection)}>
|
|
|
<div className="col col--offset-2 col--4">
|
|
|
{storiesColumns[0].map((user) => (
|
|
|
<SuccessStory key={user.name} {...user} />
|
|
|
))}
|
|
|
</div>
|
|
|
<div className="col col--4">
|
|
|
{storiesColumns[1].map((user) => (
|
|
|
<SuccessStory key={user.name} {...user} />
|
|
|
))}
|
|
|
</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/main/apps/website/src/data/successStories.js"
|
|
|
rel="noopener"
|
|
|
target="_blank">
|
|
|
Open a Pull Request here
|
|
|
</a>
|
|
|
!
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
function SponsorshipSection() {
|
|
|
return (
|
|
|
<div className={clsx('padding-vert--xl')}>
|
|
|
<div className="container">
|
|
|
<div className="row">
|
|
|
<div className="col col--8 col--offset-2">
|
|
|
<h2 className="text--center margin-bottom--lg">
|
|
|
<span className="badge badge--primary">Advertise with us</span>
|
|
|
</h2>
|
|
|
<h3
|
|
|
className={clsx(
|
|
|
'margin-vert--lg',
|
|
|
'text--center',
|
|
|
styles.sectionTitle,
|
|
|
)}>
|
|
|
Interested in advertising on Tech Interview Handbook?
|
|
|
</h3>
|
|
|
<p className={clsx(styles.sectionTagline, 'text--center')}>
|
|
|
Leverage on more than 200,000 monthly page views from 40,000 to
|
|
|
50,000 unique software engineers.
|
|
|
</p>
|
|
|
<p className={clsx(styles.sectionTagline, 'text--center')}>
|
|
|
Sponsors can choose any or all of the following positions to
|
|
|
advertise with us:
|
|
|
</p>
|
|
|
<div className={styles.sectionTagline}>
|
|
|
<div className="row">
|
|
|
<div className="col col--5 col--offset-1">
|
|
|
<ul className={styles.sponsorshipList}>
|
|
|
<li>✅ Top banner of every page</li>
|
|
|
<li>✅ Homepage</li>
|
|
|
<li>✅ Sidebar of every page</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div className="col col--5">
|
|
|
<ul className={styles.sponsorshipList}>
|
|
|
<li>✅ Navigation menu</li>
|
|
|
<li>✅ Bottom of every page</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="margin-top--lg text--center">
|
|
|
<a
|
|
|
className="button button--primary button--lg margin-right--md margin-bottom--sm"
|
|
|
href="mailto:contact@techinterviewhandbook.org"
|
|
|
rel="noopener"
|
|
|
target="_blank">
|
|
|
Advertise with us!
|
|
|
</a>
|
|
|
<Link
|
|
|
className="button button--secondary button--lg"
|
|
|
to="/advertise">
|
|
|
Find out more
|
|
|
</Link>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
function PreFooterSection() {
|
|
|
return (
|
|
|
<div className={clsx('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={clsx(styles.sectionTagline)}>
|
|
|
It's free! Start improving your interview game today and get the
|
|
|
job at the company of your dreams.
|
|
|
</p>
|
|
|
<Link
|
|
|
className={clsx('button button--primary button--lg')}
|
|
|
to="/software-engineering-interview-guide/">
|
|
|
Start reading now →
|
|
|
</Link>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
export default Home;
|
