mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-07-29 05:02:52 +08:00
website: refactor homepage
This commit is contained in:
Yangshun
@ -101,12 +101,28 @@ function Tweet({url, handle, name, content, avatar, date}) {
|
||||
}
|
||||
|
||||
function Home() {
|
||||
const context = useDocusaurusContext();
|
||||
const {siteConfig = {}} = context;
|
||||
const {siteConfig = {}} = useDocusaurusContext();
|
||||
return (
|
||||
<Layout
|
||||
title="Technical Interview Guide for Busy Engineers"
|
||||
description={siteConfig.tagline}>
|
||||
<HeroSection />
|
||||
<MoonchaserSection />
|
||||
<ProductContentsSection />
|
||||
<FeaturesSection />
|
||||
<EducativeSection />
|
||||
<TweetsSection />
|
||||
<SuccessStoriesSection />
|
||||
<SponsorshipSection />
|
||||
<PreFooterSection />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
const {siteConfig = {}} = useDocusaurusContext();
|
||||
|
||||
return (
|
||||
<header className={classnames('hero', styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<img
|
||||
@ -142,13 +158,16 @@ function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div>
|
||||
{/* // Because the SSR and client output can differ and hydration doesn't patch attribute differences,
|
||||
we'll render this on the browser only. */}
|
||||
);
|
||||
}
|
||||
|
||||
function MoonchaserSection() {
|
||||
// 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={classnames('padding-vert--lg', styles.sectionSponsor)}>
|
||||
<div className={classnames('padding-vert--lg', styles.sectionSponsor)}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col col--8 col--offset-2">
|
||||
@ -181,6 +200,11 @@ function Home() {
|
||||
</div>
|
||||
)}
|
||||
</BrowserOnly>
|
||||
);
|
||||
}
|
||||
|
||||
function ProductContentsSection() {
|
||||
return (
|
||||
<div className={classnames('padding-vert--xl')}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
@ -191,8 +215,7 @@ function Home() {
|
||||
'margin-bottom--xl',
|
||||
styles.sectionTitle,
|
||||
)}>
|
||||
Complete guide to getting software engineering jobs at top
|
||||
firms
|
||||
Complete guide to getting software engineering jobs at top firms
|
||||
</h2>
|
||||
<div className={classnames('row', styles.featuresRow)}>
|
||||
<div
|
||||
@ -207,9 +230,7 @@ function Home() {
|
||||
<a href={useBaseUrl('resume')}>Resume Preparation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={useBaseUrl('resume-case-study')}>
|
||||
Resume Samples
|
||||
</a>
|
||||
<a href={useBaseUrl('resume-case-study')}>Resume Samples</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={useBaseUrl('interview-formats')}>
|
||||
@ -282,6 +303,11 @@ function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeaturesSection() {
|
||||
return (
|
||||
<div className={classnames('padding-vert--xl', styles.sectionAlt)}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
@ -322,8 +348,12 @@ function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={classnames('padding-vert--lg', styles.sectionSponsorAlt)}>
|
||||
);
|
||||
}
|
||||
|
||||
function EducativeSection() {
|
||||
return (
|
||||
<div className={classnames('padding-vert--lg', styles.sectionSponsorAlt)}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col col--8 col--offset-2">
|
||||
@ -331,9 +361,8 @@ function Home() {
|
||||
<div>
|
||||
<h2 className={styles.sectionSponsorTitle}>
|
||||
<strong>
|
||||
Looking for high quality interview courses? Educative
|
||||
offers a ton of great courses to improve your interview
|
||||
game.
|
||||
Looking for high quality interview courses? Educative offers
|
||||
a ton of great courses to improve your interview game.
|
||||
</strong>
|
||||
</h2>
|
||||
<div className="margin-vert--lg">
|
||||
@ -354,6 +383,11 @@ function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TweetsSection() {
|
||||
return (
|
||||
<div className={classnames('padding-vert--lg', styles.sectionAlt)}>
|
||||
<div className="container">
|
||||
<h2
|
||||
@ -377,9 +411,9 @@ function Home() {
|
||||
1️⃣ Tech Interview Handbook
|
||||
<br />
|
||||
<br />
|
||||
This repository has practical content that covers all
|
||||
phases of a technical interview, from applying for a job
|
||||
to passing the interviews to offer negotiation. 📎
|
||||
This repository has practical content that covers all phases
|
||||
of a technical interview, from applying for a job to passing
|
||||
the interviews to offer negotiation. 📎
|
||||
</>
|
||||
}
|
||||
/>
|
||||
@ -392,9 +426,8 @@ function Home() {
|
||||
content={
|
||||
<>
|
||||
Another excellent tech interview handbook! If you need to
|
||||
prepare yourself for a tech interview or you're an
|
||||
interviewer and need additional inspiration. Happy Monday!
|
||||
#techinterviews
|
||||
prepare yourself for a tech interview or you're an interviewer
|
||||
and need additional inspiration. Happy Monday! #techinterviews
|
||||
</>
|
||||
}
|
||||
/>
|
||||
@ -406,9 +439,8 @@ function Home() {
|
||||
avatar="https://pbs.twimg.com/profile_images/1305935669705965568/vS_bpIuu_400x400.jpg"
|
||||
content={
|
||||
<>
|
||||
Tech Interview Handbook 💻 - Content to help you ace your
|
||||
next technical interview. Lots of front-end content here
|
||||
✅
|
||||
Tech Interview Handbook 💻 - Content to help you ace your next
|
||||
technical interview. Lots of front-end content here ✅
|
||||
</>
|
||||
}
|
||||
/>
|
||||
@ -443,8 +475,8 @@ function Home() {
|
||||
Preparing for a job interview?
|
||||
<br />
|
||||
<br />
|
||||
The tech interview handbook contains carefully curated to
|
||||
help you ace your next technical interview.
|
||||
The tech interview handbook contains carefully curated to help
|
||||
you ace your next technical interview.
|
||||
<br />
|
||||
<br />
|
||||
And it's free.
|
||||
@ -469,10 +501,10 @@ function Home() {
|
||||
avatar="https://pbs.twimg.com/profile_images/1479884864543285255/pcE_Nl12_400x400.jpg"
|
||||
content={
|
||||
<>
|
||||
Lastly, the Tech Interview Handbook. This is a pretty
|
||||
solid comprehensive resource from your initial
|
||||
introduction, to resumes, system design, coding, etc.
|
||||
Points to other solid resources that can be a great help.
|
||||
Lastly, the Tech Interview Handbook. This is a pretty solid
|
||||
comprehensive resource from your initial introduction, to
|
||||
resumes, system design, coding, etc. Points to other solid
|
||||
resources that can be a great help.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
@ -484,10 +516,9 @@ function Home() {
|
||||
avatar="https://pbs.twimg.com/profile_images/1413766958281990145/--os1eLq_400x400.jpg"
|
||||
content={
|
||||
<>
|
||||
🔹Tech Interview Handbook: Another useful resource that
|
||||
covers information about technical interviews. It covers
|
||||
the job applications, the interview process and the
|
||||
post-interview
|
||||
🔹Tech Interview Handbook: Another useful resource that covers
|
||||
information about technical interviews. It covers the job
|
||||
applications, the interview process and the post-interview
|
||||
</>
|
||||
}
|
||||
/>
|
||||
@ -499,8 +530,8 @@ function Home() {
|
||||
avatar="https://pbs.twimg.com/profile_images/1425900902783668228/eJF_2-Ds_400x400.jpg"
|
||||
content={
|
||||
<>
|
||||
The Tech Interview Handbook provides carefully curated
|
||||
content to help you ace your next technical interview.
|
||||
The Tech Interview Handbook provides carefully curated content
|
||||
to help you ace your next technical interview.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
@ -508,6 +539,11 @@ function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SuccessStoriesSection() {
|
||||
return (
|
||||
<div className={classnames('padding-vert--lg', styles.sectionAlt)}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
@ -530,9 +566,7 @@ function Home() {
|
||||
<img className="avatar__photo" src={user.thumbnail} />
|
||||
<div className="avatar__intro">
|
||||
<div className="avatar__name">{user.name}</div>
|
||||
<small className="avatar__subtitle">
|
||||
{user.title}
|
||||
</small>
|
||||
<small className="avatar__subtitle">{user.title}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -551,15 +585,16 @@ function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SponsorshipSection() {
|
||||
return (
|
||||
<div className={classnames('padding-vert--lg', 'text--center')}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col col--8 col--offset-2">
|
||||
<h2
|
||||
className={classnames(
|
||||
'margin-vert--lg',
|
||||
styles.sectionTitle,
|
||||
)}>
|
||||
<h2 className={classnames('margin-vert--lg', styles.sectionTitle)}>
|
||||
Enjoying Tech Interview Handbook so far?
|
||||
</h2>
|
||||
<p className={classnames(styles.sectionTagline)}>
|
||||
@ -591,6 +626,11 @@ function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PreFooterSection() {
|
||||
return (
|
||||
<div className={classnames('padding-vert--xl', styles.sectionAlt)}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
@ -599,8 +639,8 @@ function Home() {
|
||||
</div>
|
||||
<div className="col col--8">
|
||||
<p className={classnames(styles.sectionTagline)}>
|
||||
It's free! Start improving your interview game today and get
|
||||
the job at the company of your dreams.
|
||||
It's free! Start improving your interview game today and get the
|
||||
job at the company of your dreams.
|
||||
</p>
|
||||
<a
|
||||
className={classnames('button button--primary button--lg')}
|
||||
@ -611,8 +651,6 @@ function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user