mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

website: initialize website

This commit is contained in:
Yangshun Tay 2020-04-13 04:12:07 +08:00
parent 8790e506c0
commit dff1a28850
13 changed files with 10526 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
utilities/debounce.js
View File

@ -1,8 +0,0 @@
const debounce = (fn, time) => {
let timerId;
return function(...args) {
const functionCall = () => fn.apply(this, args);
clearTimeout(timerId);
timerId = setTimeout(functionCall, time);
};
};

20
website/.gitignore vendored Executable file
View File

@ -0,0 +1,20 @@
# dependencies
/node_modules
# production
/build
# generated files
.docusaurus
.cache-loader
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

33
website/README.md Executable file
View File

@ -0,0 +1,33 @@
# Website
This website is built using Docusaurus 2, a modern static website generator.
### Installation
```
$ yarn
```
### Local Development
```
$ yarn start
```
This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
### Build
```
$ yarn build
```
This command generates static content into the `build` directory and can be served using any static contents hosting service.
### Deployment
```
$ GIT_USER=<Your GitHub username> USE_SSH=1 yarn deploy
```
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

78
website/docusaurus.config.js Executable file
View File

@ -0,0 +1,78 @@
module.exports = {
title: 'Front End Interview Handbook',
tagline:
'Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore',
url: 'https://yangshun.github.io',
baseUrl: '/front-end-interview-handbook/',
favicon: 'img/favicon.png',
organizationName: 'yangshun',
projectName: 'front-end-interview-handbook',
themeConfig: {
navbar: {
title: 'Front End Interview Handbook',
logo: {
alt: 'Front End Interview Handbook Logo',
src: 'img/logo.svg',
},
links: [
{
label: 'Contents',
to: '', // "fake" link
position: 'left',
activeBasePath: 'docs',
items: [
{
label: 'English',
to: 'en/questions/html-questions',
},
{
label: '简体中文',
to: 'zh/questions/html-questions',
},
],
},
{
to: 'introduction',
label: 'Getting Started',
position: 'right',
},
{
href: 'https://github.com/yangshun/front-end-interview-handbook',
label: 'GitHub',
position: 'right',
},
],
},
footer: {
style: 'dark',
copyright: `Copyright © ${new Date().getFullYear()} Yangshun Tay. Built with Docusaurus.`,
},
gtag: {
// trackingID: "UA-44622716-2",
},
algolia: {
// TODO
// apiKey: "bd359779d1c4c71ade6062e8f13f5a83",
// indexName: "yangshun-tech-interview",
},
},
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
path: '../contents',
routeBasePath: '',
sidebarPath: require.resolve('./sidebars.js'),
editUrl:
'https://github.com/yangshun/front-end-interview-handbook/edit/master/contents/',
showLastUpdateAuthor: true,
showLastUpdateTime: true,
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
};

31
website/package.json Executable file
View File

@ -0,0 +1,31 @@
{
"name": "website",
"version": "0.0.0",
"private": true,
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy"
},
"dependencies": {
"@docusaurus/core": "^2.0.0-alpha.50",
"@docusaurus/preset-classic": "^2.0.0-alpha.50",
"classnames": "^2.2.6",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

16
website/sidebars.js Executable file
View File

@ -0,0 +1,16 @@
module.exports = {
en: {
Questions: [
'en/questions/html-questions',
'en/questions/css-questions',
'en/questions/javascript-questions',
],
},
zh: {
问题: [
'zh/questions/html-questions',
'zh/questions/css-questions',
'zh/questions/javascript-questions',
],
},
};

12
website/src/css/custom.css Executable file
View File

@ -0,0 +1,12 @@
:root {
--ifm-color-primary: #ffb322;
--ifm-color-primary-dark: #ffa905;
--ifm-color-primary-darker: #f6a100;
--ifm-color-primary-darkest: #ca8500;
--ifm-color-primary-light: #ffbd3f;
--ifm-color-primary-lighter: #ffc24d;
--ifm-color-primary-lightest: #ffd179;
--ifm-font-size-base: 16px;
--ifm-code-font-size: 0.8rem;
}

72
website/src/data/successStories.js Normal file
View File

@ -0,0 +1,72 @@
import React from 'react';
export default [
{
name: 'Erin Teo',
title: 'Front End Engineer, Facebook',
thumbnail: 'https://avatars1.githubusercontent.com/u/5081708?s=460&v=4',
quote: (
<>
Preparing for my first rounds of tech interviews was really daunting - I
wasn't sure what to expect and where to start. This handbook together
with the{' '}
<a
href="https://github.com/yangshun/front-end-interview-handbook"
target="_blank"
rel="noreferrer noopener">
Front End Interview Handbook
</a>{' '}
was a great starting point for me. It clearly describes each part of the
process and has tons of awesome tips and resources. With this handbook
and lots of practice, I managed to get offers from Facebook, Dropbox and
Amazon!
</>
),
},
{
name: 'Siddhesh Karekar',
title: 'Software Engineer, Google',
thumbnail: 'https://avatars1.githubusercontent.com/u/18223888?s=460&v=4',
quote: (
<>
Most of us are familiar with having the prospect of having to grind tons
of LeetCode problems before the interview, but I really wanted a sense
of direction, an outline of sorts to prepare efficiently; I wanted to
pick questions that covered all the important concepts one can be tested
on. The Tech Interview Handbook provides just that; the Algorithms
section was an absolutely invaluable resource and a great overall
reference to brush up my fundamentals with the helpful hints and tips
provided, and also solve some of the most popular questions categorized
by type. I certainly have Yangshun to thank for helping me land my dream
job at Google!
</>
),
},
{
name: 'Kevin Huang',
title: 'Software Engineer, Uber',
thumbnail: 'https://avatars1.githubusercontent.com/u/25380336?s=460&v=4',
quote: (
<>
The Tech Interview Handbook played a crucial role in the success of my
previous job search. The contents are carefully curated and well
organized. It served as an excellent roadmap for my interview prep.
<br />
<br />
In addition to the thorough Data Structures and Algorithms section, the
handbook also provides a lot of resources on other aspects of the
application process that helped me see the tech interviews in a more
holistic way. My favorite non-technical part was "Questions To Ask"! I
used quite a few insightful questions from there to challenge and
impress my interviewers. The results were great!
<br />
<br />
With the help of Tech Interview Handbook, I was able to land offers from
Google, Amazon, Uber and several other great companies. Really
appreciate Yangshun and other contributors for putting out such quality
content for the community. I'd wholeheartedly recommend this handbook to
anyone!
</>
),
},
];

258
website/src/pages/index.js Executable file
View File

@ -0,0 +1,258 @@
import React from 'react';
import classnames from 'classnames';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';
import successStories from '@site/src/data/successStories';
function Home() {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
return (
<Layout title={siteConfig.title} description={siteConfig.tagline}>
<header className={classnames('hero', styles.heroBanner)}>
<div className="container">
<img
className={classnames(styles.heroBannerLogo, 'margin-vert--md')}
src={useBaseUrl('img/logo.svg')}
/>
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
className={classnames(
'button button--primary button--lg',
styles.getStarted,
)}
to={useBaseUrl('en/questions/html-questions')}>
Get Started&nbsp;&nbsp;→
</Link>
</div>
<div className="margin-top--lg">
<iframe
src="https://ghbtns.com/github-btn.html?user=yangshun&amp;repo=front-end-interview-handbook&amp;type=star&amp;count=true&amp;size=large"
frameBorder={0}
scrolling={0}
width={160}
height={30}
title="GitHub Stars"
/>
</div>
</div>
</header>
<div>
<div
className={classnames(
'margin-bottom--lg',
'padding-vert--lg',
styles.sectionPrimary,
)}>
<div className="container">
<div className="row">
<div className="col col--8 col--offset-2">
<div className="margin-vert--lg text--center">
<h2 className={styles.sectionPrimaryTitle}>
Job hunting? Sign up with Triplebyte to efficiently
interview with top tech companies and land your dream job!
💰
</h2>
<div className="margin-vert--lg">
<a
className="button button--secondary button--lg"
href="https://triplebyte.com/a/PJaJNpO/tihw"
rel="noreferrer noopener"
target="_blank">
Sign up for free!
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div className={classnames('margin-vert--lg', 'padding-vert--lg')}>
<div className="container">
<div className="row">
<div className="col col--10 col--offset-1">
<h2
className={classnames(
'text--center',
'margin-bottom--xl',
styles.sectionTitle,
)}>
Why Front End Interview Handbook?
</h2>
<div className="row margin-vert--lg">
<div className="col">
<h3>From Zero to Hero</h3>
<p>
Go from zero to tech interview hero with this handbook. No
prior interview experience needed.
</p>
</div>
<div className="col">
<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.
</p>
</div>
<div className="col">
<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>
</div>
</div>
<div className="row margin-vert--lg">
<div className="col">
<h3>Practical Algorithm Tips</h3>
<p>
Practical tips for every algorithm topic - common
techniques and corner cases to look out for.
</p>
</div>
<div className="col">
<h3>Behavioral Questions</h3>
<p>
Check out what behavioral questions companies commonly ask
and you can prepare your answers ahead of time.
</p>
</div>
<div className="col">
<h3>Tested and Proven</h3>
<p>
Countless engineers have gotten their dream jobs with its
help.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className={classnames(
'margin-vert--lg',
'padding-vert--lg',
styles.sectionAlt,
)}>
<div className="container">
<div className="row">
<div className="col col--6 col--offset-3">
<h2
className={classnames(
'margin-vert--lg',
'text--center',
styles.sectionTitle,
)}>
Success Stories
</h2>
{successStories.map((user) => (
<div className="card margin-vert--lg" key={user.name}>
<div className="card__body">
<p className={styles.quote}>"{user.quote}"</p>
</div>
<div className="card__header">
<div className="avatar">
<img className="avatar__photo" src={user.thumbnail} />
<div className="avatar__intro">
<h4 className="avatar__name">{user.name}</h4>
<small className="avatar__subtitle">
{user.title}
</small>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
<div
className={classnames(
'margin-vert--lg',
'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,
)}>
Enjoying Front End Interview Handbook so far?
</h2>
<p className={classnames(styles.sectionTagline)}>
Support this project by becoming a sponsor! Your logo/profile
picture will show up here with a link to your website.
</p>
<div>
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/0/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/0/avatar.svg" />
</a>
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/3/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/3/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/4/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/4/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/5/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/5/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/6/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/6/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/7/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/7/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/8/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/8/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/9/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/9/avatar.svg" />
</a>
</div>
<div className="margin-vert--lg">
<a
className="button button--primary button--lg"
href="https://opencollective.com/tech-interview-handbook"
rel="noreferrer noopener"
target="_blank">
Become a sponsor!
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</Layout>
);
}
export default Home;

46
website/src/pages/styles.module.css Executable file
View File

@ -0,0 +1,46 @@
.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.heroBannerLogo {
max-width: 300px;
}
@media screen and (max-width: 966px) {
.heroBanner {
padding: 2rem;
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
}
.sectionTitle {
font-size: 2rem;
}
.sectionTagline {
font-size: 1.25rem;
}
.sectionAlt {
background-color: var(--ifm-color-emphasis-100);
}
.sectionPrimary {
background-color: var(--ifm-color-primary);
}
.sectionPrimaryTitle {
color: var(--ifm-color-white);
}
.quote {
font-size: 1.1rem;
}

BIN
website/static/img/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

1
website/static/img/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

9959
website/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff