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

website: reskin homepage features section

Browse Source
This commit is contained in:
Yangshun
2022-01-18 07:32:56 +08:00
parent f4cb0dc639
commit 5610e553ac
2 changed files with 114 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
website/src/pages/index.js
View File

@ -12,6 +12,71 @@ 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 FEATURES = [
{
title: <>💯 Go From Zero to Hero</>,
description: (
<>
Go from zero to tech interview hero with this handbook. No prior
interview experience needed.
</>
),
link: '/introduction',
},
{
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">
Blind 75 List
</a>{' '}
to tell you which the best questions are.
</>
),
link: '/best-practice-questions',
},
{
title: <>📋 Interview Cheatsheet</>,
description: (
<>
Straight-to-the-point Do's and Don'ts during an interview. The battle is
already half won.
</>
),
link: '/cheatsheet',
},
{
title: <>💁‍♀️ Practical Algorithm Tips</>,
description: (
<>
Practical tips for every algorithm topic - common techniques and corner
cases to look out for.
</>
),
link: '/algorithms/introduction',
},
{
title: <>💬 Behavioral Questions</>,
description: (
<>
Check out what behavioral questions companies commonly ask and you can
prepare your answers ahead of time.
</>
),
link: '/behavioral-questions',
},
{
title: <>🧪 Tested and Proven</>,
description: (
<>
Countless engineers have gotten their dream jobs with the help of Tech
Interview Handbook.
</>
),
},
];
function Home() { function Home() {
const context = useDocusaurusContext(); const context = useDocusaurusContext();
const {siteConfig = {}} = context; const {siteConfig = {}} = context;
@ -111,7 +176,7 @@ function Home() {
className={classnames( className={classnames(
'col', 'col',
'col--4', 'col--4',
styles.featuresRowItem, styles.featuresRowItemContainer,
)}> )}>
<h3>Not sure where to start? We got you covered</h3> <h3>Not sure where to start? We got you covered</h3>
<ul> <ul>
@ -139,7 +204,7 @@ function Home() {
className={classnames( className={classnames(
'col', 'col',
'col--4', 'col--4',
styles.featuresRowItem, styles.featuresRowItemContainer,
)}> )}>
<h3>Efficiently prepare for all kinds of interviews</h3> <h3>Efficiently prepare for all kinds of interviews</h3>
<ul> <ul>
@ -167,7 +232,7 @@ function Home() {
className={classnames( className={classnames(
'col', 'col',
'col--4', 'col--4',
styles.featuresRowItem, styles.featuresRowItemContainer,
)}> )}>
<h3>Algorithms Deep-dive</h3> <h3>Algorithms Deep-dive</h3>
<ul> <ul>
@ -207,98 +272,28 @@ function Home() {
What is inside? What is inside?
</h2> </h2>
<div className={classnames('row', styles.featuresRow)}> <div className={classnames('row', styles.featuresRow)}>
<div {FEATURES.map(({title, description, link}) => (
className={classnames( <div
'col', className={classnames(
'col--4', 'col',
styles.featuresRowItem, 'col--4',
)}> styles.featuresRowItemContainer,
<h3>💯 Go From Zero to Hero</h3> )}>
<p> <div className={styles.featuresRowItem}>
Go from zero to tech interview hero with this handbook. No <h3 className={styles.featuresRowItemTitle}>{title}</h3>
prior interview experience needed. <p className={styles.featuresRowItemDescription}>
</p> {description}
<a href={useBaseUrl('introduction')}> </p>
<strong>Learn more</strong> {link && (
</a> <a
</div> className={styles.featuresRowItemLink}
<div href={useBaseUrl(link)}>
className={classnames( <strong>Learn more</strong>
'col', </a>
'col--4', )}
styles.featuresRowItem, </div>
)}> </div>
<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>

25
website/src/pages/styles.module.css
View File

@ -58,6 +58,29 @@
margin-top: -2rem; margin-top: -2rem;
} }
.featuresRow .featuresRowItem { .featuresRow .featuresRowItemContainer {
padding-top: 2rem; padding-top: 2rem;
} }
.featuresRow .featuresRowItem {
border-color: var(--ifm-color-emphasis-300);
border-radius: var(--ifm-card-border-radius);
border-style: solid;
border-width: 1px;
display: flex;
flex-direction: column;
height: 100%;
padding: 1.5rem;
}
.featuresRow .featuresRowItemTitle {
font-size: 1rem;
}
.featuresRow .featuresRowItemDescription {
font-size: 0.9rem;
}
.featuresRow .featuresRowItemLink {
font-size: 0.9rem;
}