algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-28 12:43:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

misc: revamp partner components

Browse Source
This commit is contained in:
Yangshun
2022-02-21 10:00:05 +08:00
parent ef71bf13e5
commit 72055a6d67
3 changed files with 97 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
website/src/components/SidebarAd/index.js
View File

@ -7,31 +7,58 @@ import clsx from 'clsx';
import styles from './styles.module.css';
const BACKGROUNDS = [
styles.backgroundBlue,
styles.backgroundOrange,
styles.backgroundPurple,
styles.backgroundRed,
styles.backgroundPurplin,
styles.backgroundFirewatch,
styles.backgroundLush,
styles.backgroundSweetMorning,
styles.backgroundViceCity,
styles.backgroundRadar,
styles.backgroundCosmicFusion,
styles.backgroundAzurePop,
styles.backgroundTranquil,
];
function TopResume({className, position}) {
return (
<a
className={clsx(styles.container, className)}
href="https://tidd.ly/3oezgOo"
target="_blank"
rel="noopener"
onClick={() => {
window.gtag('event', `topresume.${position}.click`);
}}>
<p className={styles.tagline}>
<strong>Best resume service for FAANG</strong>
<br />
If you are running low on time, I recommend TopResume's{' '}
<u>free resume review</u> services, which has helped countless software
engineers get interviews at FAANG.
</p>
</a>
);
function FAANGTechLeads({className, position}) {
switch (position) {
case 'docs_bottom':
return (
<a
className={clsx(styles.container, className)}
href={`https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2`}
target="_blank"
rel="noopener"
onClick={() => {
window.gtag('event', `faangtechleads.${position}.click`);
}}>
<p className={styles.tagline}>
<strong>Best resume service for FAANG</strong>
<br />
FAANG Tech Leads' <u>resume review service</u> helped me get
shortlisted at top Bay Area companies. Their resume templates are
only <u>$28 now (70% off)</u> and tailored to your experience level.
</p>
</a>
);
default:
return (
<a
className={clsx(styles.container, className)}
href={`https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2`}
target="_blank"
rel="noopener"
onClick={() => {
window.gtag('event', `faangtechleads.${position}.click`);
}}>
<p className={styles.tagline}>
<strong>Get shortlisted at FAANG</strong>
<br />
FAANG Tech Leads' <u>resume review service</u> helped me get
shortlisted at top Bay Area companies. Their resume templates are
only <u>$28 now (70% off)</u> and tailored to your experience level.
</p>
</a>
);
}
}
function AlgoMonster({className, position}) {
@ -58,7 +85,7 @@ function Moonchaser({className, position}) {
return (
<a
className={clsx(styles.container, className)}
href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_docs_sidebar"
href={`https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}`}
key={Math.random()}
target="_blank"
rel="noopener"
@ -78,7 +105,7 @@ function Educative({className, position}) {
return (
<a
className={clsx(styles.container, className)}
href="https://educative.io/tech-interview-handbook"
href={`https://educative.io/tech-interview-handbook?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=x23W`}
key={Math.random()}
target="_blank"
rel="noopener"
@ -99,7 +126,7 @@ function EducativeCoding({className, position}) {
return (
<a
className={clsx(styles.container, className)}
href="https://www.educative.io/courses/grokking-the-coding-interview?aff=x23W"
href={`https://www.educative.io/courses/grokking-the-coding-interview?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=x23W`}
key={Math.random()}
target="_blank"
rel="noopener"
@ -121,7 +148,7 @@ function EducativeSystemDesign({className, position}) {
return (
<a
className={clsx(styles.container, className)}
href="https://www.educative.io/courses/grokking-the-system-design-interview?aff=x23W"
href={`https://www.educative.io/courses/grokking-the-system-design-interview?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=x23W`}
key={Math.random()}
target="_blank"
rel="noopener"
@ -151,6 +178,16 @@ export default React.memo(function SidebarAd({position}) {
const path = window.location.pathname;
// Ugly hack to show conditional sidebar content.
if (path.includes('resume')) {
return (
<FAANGTechLeads
className={backgroundClass}
key={Math.random()}
position={position}
/>
);
}
if (path.includes('negotiation') || path.includes('compensation')) {
return (
<Moonchaser
@ -162,7 +199,6 @@ export default React.memo(function SidebarAd({position}) {
}
if (
path.includes('resume') ||
path.includes('coding') ||
path.includes('best-practice-questions') ||
path.includes('cheatsheet') ||

40
website/src/components/SidebarAd/styles.module.css
View File

@ -10,20 +10,44 @@
var(--ifm-transition-timing-default);
}
.backgroundPurple {
background-image: linear-gradient(138deg, rgb(69, 104, 220), rgb(176, 106, 179));
.backgroundPurplin {
background-image: linear-gradient(
138deg,
rgb(69, 104, 220),
rgb(176, 106, 179)
);
}
.backgroundRed {
background-image: linear-gradient(39deg, rgb(188, 78, 156), rgb(248, 7, 89));
.backgroundFirewatch {
background-image: linear-gradient(139deg, #cb2d3e, #ef473a);
}
.backgroundOrange {
background-image: linear-gradient(39deg, rgb(255, 81, 47), rgb(240, 152, 25));
.backgroundLush {
background-image: linear-gradient(139deg, #56ab2f, #a8e063);
}
.backgroundBlue {
background-image: linear-gradient(153deg, rgb(116, 116, 191), rgb(52, 138, 199));
.backgroundSweetMorning {
background-image: linear-gradient(139deg, #ff5f6d, #ffc371);
}
.backgroundViceCity {
background-image: linear-gradient(139deg, #3494e6, #ec6ead);
}
.backgroundRadar {
background-image: linear-gradient(139deg, #a770ef, #cf8bf3, #fdb99b);
}
.backgroundCosmicFusion {
background-image: linear-gradient(139deg, #333399, #ff00cc);
}
.backgroundAzurePop {
background-image: linear-gradient(138deg, #ef32d9, #89fffd);
}
.backgroundTranquil {
background-image: linear-gradient(138deg, #ef629f, #eecda3);
}
.container:hover {

2
website/src/theme/TOC/index.js
View File

@ -22,7 +22,7 @@ function TOC({className, ...props}) {
<div className="margin--md">
<div className={clsx('padding--md', styles.socialLinksContainer)}>
<div className={styles.socialLinks}>
Follow us
Follow
<a
href="https://t.me/techinterviewhandbook"
target="_blank"