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

website: update ads

Browse Source
pull/579/head
Yangshun 2 years ago
parent 745d81e0f8
commit c9ae0a2d40
3 changed files with 77 additions and 209 deletions
Show Stats Download Patch File Download Diff File

102
apps/website/src/components/SidebarAd/index.js
Unescape View File

@ -16,12 +16,13 @@ function FAANGTechLeads({ position }) {
rel="noopener" rel="noopener"
onClick={() => { onClick={() => {
window.gtag('event', `faangtechleads.${position}.click`); window.gtag('event', `faangtechleads.${position}.click`);
}}> }}
>
<p className={styles.tagline}> <p className={styles.tagline}>
<strong className={styles.title}> <strong className={styles.title}>
Craft the perfect resume for Google and Facebook Craft the perfect resume for FAANG
</strong> </strong>
Save time crafting your resume with FAANG Tech Leads'{' '} Save time crafting your resume with{' '}
<u>FAANG-quality resume templates and examples</u> which have helped <u>FAANG-quality resume templates and examples</u> which have helped
many Software Engineers get interviews at top Bay Area companies! many Software Engineers get interviews at top Bay Area companies!
</p> </p>
@ -38,7 +39,8 @@ function TIHResumeReview({ position }) {
rel="noopener" rel="noopener"
onClick={() => { onClick={() => {
window.gtag('event', `tih.resume_review.${position}.click`); window.gtag('event', `tih.resume_review.${position}.click`);
}}> }}
>
<p className={styles.tagline}> <p className={styles.tagline}>
<strong className={styles.title}> <strong className={styles.title}>
Get your resume reviewed for free Get your resume reviewed for free
@ -55,16 +57,17 @@ function GreatFrontEnd({ position }) {
return ( return (
<a <a
className={clsx(styles.container, styles.backgroundGreatFrontEnd)} className={clsx(styles.container, styles.backgroundGreatFrontEnd)}
href={`https://www.greatfrontend.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&fpr=techinterviewhandbook`} href={`https://www.greatfrontend.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}`}
target="_blank" target="_blank"
rel="noopener" rel="noopener"
onClick={() => { onClick={() => {
window.gtag('event', `greatfrontend.${position}.click`); window.gtag('event', `greatfrontend.${position}.click`);
}}> }}
>
<p className={styles.tagline}> <p className={styles.tagline}>
<strong className={styles.title}>LeetCode for Front End</strong> <strong className={styles.title}>LeetCode for Front End</strong>
Prepare with <u>Great Front End</u>'s large pool of high quality front Built by ex-FAANG Senior Engineers, <u>GreatFrontEnd</u> is the fastest
end interview questions and solutions! way to prepare for a Front End interview.
</p> </p>
</a> </a>
); );
@ -79,7 +82,8 @@ function AlgoMonster({ position }) {
rel="noopener" rel="noopener"
onClick={() => { onClick={() => {
window.gtag('event', `algomonster.${position}.click`); window.gtag('event', `algomonster.${position}.click`);
}}> }}
>
<p className={styles.tagline}> <p className={styles.tagline}>
<strong className={styles.title}> <strong className={styles.title}>
Stop grinding mindlessly. Study with a plan Stop grinding mindlessly. Study with a plan
@ -91,49 +95,6 @@ function AlgoMonster({ position }) {
); );
} }
function Rora({ position }) {
return (
<a
className={clsx(styles.container, styles.backgroundRora)}
href={`https://www.teamrora.com/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}`}
key={Math.random()}
target="_blank"
rel="noopener"
onClick={() => {
window.gtag('event', `rora.${position}.click`);
}}>
<p className={styles.tagline}>
<strong className={styles.title}>
Risk-free salary negotiation help
</strong>{' '}
Receive risk-free salary negotiation advice from <u>Rora</u>. You pay
nothing unless your offer is increased.{' '}
<u>Book your free consultation today!</u>
</p>
</a>
);
}
function DesignGurusCoding({ position }) {
return (
<a
className={clsx(styles.container, styles.backgroundGrokkingCoding)}
href="https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview"
key={Math.random()}
target="_blank"
rel="noopener"
onClick={() => {
window.gtag('event', `designgurus.coding.${position}.click`);
}}>
<p className={styles.tagline}>
<strong className={styles.title}>Stop memorizing solutions</strong>
<u>Grokking the Coding Interview</u> teaches you techniques and question
patterns to ace coding interviews. Grab your lifetime access today!
</p>
</a>
);
}
function DesignGurusSystemDesign({ position }) { function DesignGurusSystemDesign({ position }) {
return ( return (
<a <a
@ -144,7 +105,8 @@ function DesignGurusSystemDesign({ position }) {
rel="noopener" rel="noopener"
onClick={() => { onClick={() => {
window.gtag('event', `designgurus.system_design.${position}.click`); window.gtag('event', `designgurus.system_design.${position}.click`);
}}> }}
>
<p className={styles.tagline}> <p className={styles.tagline}>
<strong className={styles.title}>Get the job at FAANG</strong> <strong className={styles.title}>Get the job at FAANG</strong>
<u>Grokking the System Design Interview</u> is a highly recommended <u>Grokking the System Design Interview</u> is a highly recommended
@ -164,7 +126,8 @@ function ByteByteGoSystemDesign({ position }) {
rel="noopener" rel="noopener"
onClick={() => { onClick={() => {
window.gtag('event', `bytebytego.system_design.${position}.click`); window.gtag('event', `bytebytego.system_design.${position}.click`);
}}> }}
>
<p className={styles.tagline}> <p className={styles.tagline}>
<strong className={styles.title}> <strong className={styles.title}>
Ace Your Next System Design Interview Ace Your Next System Design Interview
@ -177,29 +140,6 @@ function ByteByteGoSystemDesign({ position }) {
); );
} }
function Interviewingio({ position }) {
return (
<a
className={clsx(styles.container, styles.backgroundInterviewingio)}
href="https://iio.sh/r/DMCa"
key={Math.random()}
target="_blank"
rel="noopener"
onClick={() => {
window.gtag('event', `interviewingio.${position}.click`);
}}>
<p className={styles.tagline}>
<strong className={styles.title}>
Practice interviewing with Google engineers
</strong>
<u>interviewing.io</u> provides anonymous technical mock interviews with
engineers from Google, Facebook, and other top companies.{' '}
<u>Give it a try!</u>
</p>
</a>
);
}
export default React.memo(function SidebarAd({ position }) { export default React.memo(function SidebarAd({ position }) {
const [counter, setCounter] = useState(0); const [counter, setCounter] = useState(0);
useEffect(() => { useEffect(() => {
@ -235,10 +175,6 @@ export default React.memo(function SidebarAd({ position }) {
); );
} }
if (path.includes('negotiation') || path.includes('compensation')) {
return <Rora key={Math.random()} position={position} />;
}
if (path.includes('system-design')) { if (path.includes('system-design')) {
return rand < 0.5 ? ( return rand < 0.5 ? (
<ByteByteGoSystemDesign key={Math.random()} position={position} /> <ByteByteGoSystemDesign key={Math.random()} position={position} />
@ -264,10 +200,8 @@ export default React.memo(function SidebarAd({ position }) {
return rand < 0.5 ? ( return rand < 0.5 ? (
<FAANGTechLeads key={Math.random()} position={position} /> <FAANGTechLeads key={Math.random()} position={position} />
) : rand < 0.75 ? (
<AlgoMonster key={Math.random()} position={position} />
) : ( ) : (
<DesignGurusCoding key={Math.random()} position={position} /> <GreatFrontEnd key={Math.random()} position={position} />
); );
}} }}
</BrowserOnly> </BrowserOnly>

2
apps/website/src/components/SidebarAd/styles.module.css
Unescape View File

@ -25,7 +25,7 @@
} }
.backgroundGreatFrontEnd { .backgroundGreatFrontEnd {
background-color: rgb(79, 70, 229); background-image: linear-gradient(270deg, #ec4899, #4f46e5);
} }
.backgroundGrokkingCoding { .backgroundGrokkingCoding {

182
apps/website/src/pages/index.js
Unescape View File

@ -108,7 +108,8 @@ function Home() {
return ( return (
<Layout <Layout
title="Technical Interview Guide for Busy Engineers" title="Technical Interview Guide for Busy Engineers"
description={siteConfig.tagline}> description={siteConfig.tagline}
>
<HeroSection /> <HeroSection />
<WhatIsThisSection /> <WhatIsThisSection />
<GreatFrontEndSection /> <GreatFrontEndSection />
@ -116,9 +117,7 @@ function Home() {
<HowToUseSection /> <HowToUseSection />
<FAANGTechLeadsSection /> <FAANGTechLeadsSection />
<FeaturesSection /> <FeaturesSection />
<AlgoMonsterSection />
<SuccessStoriesSection /> <SuccessStoriesSection />
<DesignGurusSection />
<SponsorshipSection /> <SponsorshipSection />
<PreFooterSection /> <PreFooterSection />
</Layout> </Layout>
@ -147,7 +146,8 @@ function HeroSection() {
<div className={styles.buttons}> <div className={styles.buttons}>
<Link <Link
className={clsx('button button--primary button--lg')} className={clsx('button button--primary button--lg')}
to="/software-engineering-interview-guide/"> to="/software-engineering-interview-guide/"
>
Start reading now&nbsp;&nbsp;→ Start reading now&nbsp;&nbsp;→
</Link> </Link>
</div> </div>
@ -186,7 +186,8 @@ function WhatIsThisSection() {
'text--center', 'text--center',
'margin-bottom--lg', 'margin-bottom--lg',
styles.sectionTitle, styles.sectionTitle,
)}> )}
>
Fastest way to prepare effectively for your software engineering Fastest way to prepare effectively for your software engineering
interviews, used by over 1,000,000 engineers interviews, used by over 1,000,000 engineers
</h3> </h3>
@ -249,7 +250,8 @@ function RoraSection() {
target="_blank" target="_blank"
onClick={() => { onClick={() => {
window.gtag('event', 'rora.homepage.click'); window.gtag('event', 'rora.homepage.click');
}}> }}
>
Get risk-free negotiation advice&nbsp;&nbsp;→ Get risk-free negotiation advice&nbsp;&nbsp;→
</a> </a>
</div> </div>
@ -303,7 +305,8 @@ function HowToUseSection() {
'text--center', 'text--center',
'margin-bottom--lg', 'margin-bottom--lg',
styles.sectionTitle, styles.sectionTitle,
)}> )}
>
Not sure where to start in your interview preparation? Not sure where to start in your interview preparation?
<br /> We've got you covered. <br /> We've got you covered.
</h3> </h3>
@ -312,7 +315,8 @@ function HowToUseSection() {
'text--center', 'text--center',
'margin-bottom--lg', 'margin-bottom--lg',
styles.sectionTagline, styles.sectionTagline,
)}> )}
>
This guide is structured in a{' '} This guide is structured in a{' '}
<strong>simple to follow, step-by-step</strong> style covering all <strong>simple to follow, step-by-step</strong> style covering all
aspects of your software engineering interview preparation -{' '} aspects of your software engineering interview preparation -{' '}
@ -322,7 +326,8 @@ function HowToUseSection() {
</div> </div>
<div className={clsx('row', styles.featuresRow)}> <div className={clsx('row', styles.featuresRow)}>
<div <div
className={clsx('col', 'col--3', styles.featuresRowItemContainer)}> className={clsx('col', 'col--3', styles.featuresRowItemContainer)}
>
<HowToUseStep <HowToUseStep
index={1} index={1}
title={<>Prepare a FAANG-ready resume</>} title={<>Prepare a FAANG-ready resume</>}
@ -335,7 +340,8 @@ function HowToUseSection() {
/> />
</div> </div>
<div <div
className={clsx('col', 'col--3', styles.featuresRowItemContainer)}> className={clsx('col', 'col--3', styles.featuresRowItemContainer)}
>
<HowToUseStep <HowToUseStep
index={2} index={2}
title={<>Ace the interviews</>} title={<>Ace the interviews</>}
@ -349,7 +355,8 @@ function HowToUseSection() {
/> />
</div> </div>
<div <div
className={clsx('col', 'col--3', styles.featuresRowItemContainer)}> className={clsx('col', 'col--3', styles.featuresRowItemContainer)}
>
<HowToUseStep <HowToUseStep
index={3} index={3}
title={<>Negotiate the best offer</>} title={<>Negotiate the best offer</>}
@ -361,7 +368,8 @@ function HowToUseSection() {
/> />
</div> </div>
<div <div
className={clsx('col', 'col--3', styles.featuresRowItemContainer)}> className={clsx('col', 'col--3', styles.featuresRowItemContainer)}
>
<HowToUseStep <HowToUseStep
index={4} index={4}
title={<>Prepare for the job</>} title={<>Prepare for the job</>}
@ -392,7 +400,8 @@ function FeaturesSection() {
'text--center', 'text--center',
'margin-vert--lg', 'margin-vert--lg',
styles.sectionTitle, styles.sectionTitle,
)}> )}
>
We have everything you need - all straight to the point We have everything you need - all straight to the point
</h3> </h3>
<div className={clsx('row', styles.featuresRow)}> <div className={clsx('row', styles.featuresRow)}>
@ -403,7 +412,8 @@ function FeaturesSection() {
'col', 'col',
'col--4', 'col--4',
styles.featuresRowItemContainer, styles.featuresRowItemContainer,
)}> )}
>
<div className={clsx('card', styles.featuresRowItem)}> <div className={clsx('card', styles.featuresRowItem)}>
<h3 className={styles.featuresRowItemTitle}>{title}</h3> <h3 className={styles.featuresRowItemTitle}>{title}</h3>
<p className={styles.featuresRowItemDescription}> <p className={styles.featuresRowItemDescription}>
@ -425,49 +435,12 @@ function FeaturesSection() {
); );
} }
function DesignGurusSection() {
return (
<div
className={clsx('padding-vert--lg')}
style={{ backgroundColor: '#6fc8cc' }}>
<div className="container">
<div className="row">
<div className="col col--8 col--offset-2">
<div className="margin-vert--lg text--center">
<div>
<h2 style={{ color: '#083436' }}>
<strong>
Tired of grinding mindlessly? Grokking the Coding Interview
is the recommended way to quickly learn coding question
patterns to help you ace the coding interviews.
</strong>
</h2>
<div className="margin-vert--lg">
<a
className="button button--secondary button--lg"
href="https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview"
rel="noopener"
target="_blank"
onClick={() => {
window.gtag('event', 'designgurus.homepage.click');
}}>
Learn efficiently&nbsp;&nbsp;→
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
function FAANGTechLeadsSection() { function FAANGTechLeadsSection() {
return ( return (
<div <div
className={clsx('padding-vert--lg')} className={clsx('padding-vert--lg')}
style={{ backgroundColor: 'rgb(244, 63, 94)' }}> style={{ backgroundColor: 'rgb(244, 63, 94)' }}
>
<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">
@ -487,7 +460,8 @@ function FAANGTechLeadsSection() {
target="_blank" target="_blank"
onClick={() => { onClick={() => {
window.gtag('event', 'faangtechleads.homepage.click'); window.gtag('event', 'faangtechleads.homepage.click');
}}> }}
>
Improve your resume now &nbsp;&nbsp;→ Improve your resume now &nbsp;&nbsp;→
</a> </a>
</div> </div>
@ -504,7 +478,8 @@ function GreatFrontEndSection() {
return ( return (
<div <div
className={clsx('padding-vert--lg')} className={clsx('padding-vert--lg')}
style={{ backgroundColor: 'rgb(79, 70, 229)' }}> style={{ backgroundColor: 'rgb(79, 70, 229)' }}
>
<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">
@ -517,82 +492,34 @@ function GreatFrontEndSection() {
</h2> </h2>
<h3 <h3
className={styles.sectionSponsorTitle} className={styles.sectionSponsorTitle}
style={{ fontSize: 'var(--ifm-h2-font-size)' }}> style={{ fontSize: 'var(--ifm-h2-font-size)' }}
>
<strong> <strong>
Spend less time but prepare better for your Front End Built by ex-FAANG Senior Engineers,{' '}
Interviews with{' '}
<a <a
href="https://www.greatfrontend.com/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=homepage&fpr=techinterviewhandbook" href="https://www.greatfrontend.com/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=homepage"
style={{ color: '#fff', textDecoration: 'underline' }}> style={{ color: '#fff', textDecoration: 'underline' }}
Great Front End's target="_blank"
>
GreatFrontEnd
</a>{' '} </a>{' '}
large pool of high quality practice questions and solutions. is the fastest way to prepare for a front end interview job.
</strong> </strong>
</h3> </h3>
<div className="margin-vert--lg"> <div className="margin-vert--lg">
<a <a
className="button button--secondary button--lg" className="button button--secondary button--lg"
href="https://www.greatfrontend.com/questions/javascript/flatten?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=homepage&fpr=techinterviewhandbook" href="https://www.greatfrontend.com/prepare"
rel="noopener" rel="noopener"
target="_blank" target="_blank"
onClick={() => { onClick={() => {
window.gtag( window.gtag(
'event', 'event',
'greatfrontend.homepage.question.click', 'greatfrontend.homepage.prepare.click',
); );
}}> }}
Try a question &nbsp;&nbsp;→ >
</a>{' '} Try it out &nbsp;&nbsp;→
<a
className="button button--secondary button--lg"
href="https://www.greatfrontend.com/get-started?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=homepage&fpr=techinterviewhandbook"
rel="noopener"
target="_blank"
onClick={() => {
window.gtag(
'event',
'greatfrontend.homepage.study_plan.click',
);
}}>
View study plans &nbsp;&nbsp;→
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
function AlgoMonsterSection() {
return (
<div
className={clsx('padding-vert--lg')}
style={{ backgroundImage: 'linear-gradient(270deg, #3e1792, #6a45b9)' }}>
<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>
Developed by Google engineers, AlgoMonster is the fastest
way to get a software engineering job. Join today for a 70%
discount!
</strong>
</h2>
<div className="margin-vert--lg">
<a
className="button button--secondary button--lg"
href="https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack="
rel="noopener"
target="_blank"
onClick={() => {
window.gtag('event', 'algomonster.homepage.click');
}}>
Study with a plan&nbsp;&nbsp;→
</a> </a>
</div> </div>
</div> </div>
@ -613,7 +540,8 @@ function TweetsSection() {
'margin-bottom--lg', 'margin-bottom--lg',
'text--center', 'text--center',
styles.sectionTitle, styles.sectionTitle,
)}> )}
>
Over 1,000,000 people have benefitted from this handbook! Over 1,000,000 people have benefitted from this handbook!
</h2> </h2>
<div className={clsx('row', styles.tweetsSection)}> <div className={clsx('row', styles.tweetsSection)}>
@ -815,7 +743,8 @@ function SuccessStoriesSection() {
'margin-vert--lg', 'margin-vert--lg',
'text--center', 'text--center',
styles.sectionTitle, styles.sectionTitle,
)}> )}
>
Countless engineers have gotten a job at FAANG with this free Countless engineers have gotten a job at FAANG with this free
handbook handbook
</h3> </h3>
@ -838,7 +767,8 @@ function SuccessStoriesSection() {
<a <a
href="https://github.com/yangshun/tech-interview-handbook/edit/master/website/src/data/successStories.js" href="https://github.com/yangshun/tech-interview-handbook/edit/master/website/src/data/successStories.js"
rel="noopener" rel="noopener"
target="_blank"> target="_blank"
>
Open a Pull Request here Open a Pull Request here
</a> </a>
! !
@ -862,7 +792,8 @@ function SponsorshipSection() {
'margin-vert--lg', 'margin-vert--lg',
'text--center', 'text--center',
styles.sectionTitle, styles.sectionTitle,
)}> )}
>
Interested in advertising on Tech Interview Handbook? Interested in advertising on Tech Interview Handbook?
</h3> </h3>
<p className={clsx(styles.sectionTagline, 'text--center')}> <p className={clsx(styles.sectionTagline, 'text--center')}>
@ -895,12 +826,14 @@ function SponsorshipSection() {
className="button button--primary button--lg margin-right--md" className="button button--primary button--lg margin-right--md"
href="mailto:contact@techinterviewhandbook.org" href="mailto:contact@techinterviewhandbook.org"
rel="noopener" rel="noopener"
target="_blank"> target="_blank"
>
Advertise with us! Advertise with us!
</a> </a>
<Link <Link
className="button button--secondary button--lg" className="button button--secondary button--lg"
to="/advertise"> to="/advertise"
>
Find out more Find out more
</Link> </Link>
</div> </div>
@ -926,7 +859,8 @@ function PreFooterSection() {
</p> </p>
<Link <Link
className={clsx('button button--primary button--lg')} className={clsx('button button--primary button--lg')}
to="/software-engineering-interview-guide/"> to="/software-engineering-interview-guide/"
>
Start reading now&nbsp;&nbsp;→ Start reading now&nbsp;&nbsp;→
</Link> </Link>
</div> </div>

Write Preview
Loading…
Cancel
Save