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

website: add Tweets

Browse Source
pull/258/head
Yangshun 3 years ago
parent 5610e553ac
commit d3145ae7d1
2 changed files with 203 additions and 8 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import BrowserOnly from '@docusaurus/BrowserOnly'; import BrowserOnly from '@docusaurus/BrowserOnly';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
@ -77,6 +76,30 @@ const FEATURES = [
}, },
]; ];
function Tweet({url, handle, name, content, avatar, date}) {
return (
<div className={classnames('card', styles.tweet)}>
<div className="card__header">
<div className="avatar">
<img className="avatar__photo" src={avatar} />
<div className="avatar__intro">
<div className={styles.tweet}>
<strong>{name}</strong>{' '}
<span className={styles.tweetMeta}>
@{handle} &middot;{' '}
<a className={styles.tweetMeta} href={url}>
{date}
</a>
</span>
</div>
<div>{content}</div>
</div>
</div>
</div>
</div>
);
}
function Home() { function Home() {
const context = useDocusaurusContext(); const context = useDocusaurusContext();
const {siteConfig = {}} = context; const {siteConfig = {}} = context;
@ -158,7 +181,7 @@ function Home() {
</div> </div>
)} )}
</BrowserOnly> </BrowserOnly>
<div className={classnames('padding-vert--xl', styles.sectionAlt)}> <div className={classnames('padding-vert--xl')}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col col--10 col--offset-1"> <div className="col col--10 col--offset-1">
@ -259,7 +282,7 @@ function Home() {
</div> </div>
</div> </div>
</div> </div>
<div className={classnames('margin-vert--lg', 'padding-vert--lg')}> <div className={classnames('padding-vert--xl', styles.sectionAlt)}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col col--10 col--offset-1"> <div className="col col--10 col--offset-1">
@ -279,7 +302,7 @@ function Home() {
'col--4', 'col--4',
styles.featuresRowItemContainer, styles.featuresRowItemContainer,
)}> )}>
<div className={styles.featuresRowItem}> <div className={'card ' + styles.featuresRowItem}>
<h3 className={styles.featuresRowItemTitle}>{title}</h3> <h3 className={styles.featuresRowItemTitle}>{title}</h3>
<p className={styles.featuresRowItemDescription}> <p className={styles.featuresRowItemDescription}>
{description} {description}
@ -331,6 +354,160 @@ function Home() {
</div> </div>
</div> </div>
</div> </div>
<div className={classnames('padding-vert--lg', styles.sectionAlt)}>
<div className="container">
<h2
className={classnames(
'margin-vert--lg',
'text--center',
styles.sectionTitle,
)}>
Loved by many engineers
</h2>
<div className={classnames('row', styles.tweetsSection)}>
<div className="col col--4">
<Tweet
url="https://twitter.com/Insharamin/status/1412978510788915205"
handle="Insharamin"
name="Insha"
date="Jul 8, 2021"
avatar="https://pbs.twimg.com/profile_images/1468474545891774464/jENKPsRG_400x400.jpg"
content={
<>
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. 📎
</>
}
/>
<Tweet
url="https://twitter.com/Justyna_Adam/status/1186166253830004736"
handle="Justyna_Adam"
name="Justyna_Adamczyk"
date="Oct 21, 2019"
avatar="https://pbs.twimg.com/profile_images/1328613502571978753/bTkdJhPt_400x400.jpg"
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
</>
}
/>
<Tweet
url="https://twitter.com/umaar/status/913425809108606976"
handle="umaar"
name="Umar Hansa"
date="Sep 28, 2017"
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
✅
</>
}
/>
</div>
<div className="col col--4">
<Tweet
url="https://twitter.com/palashv2/status/1452981345899085833"
handle="palashv2"
name="Palash"
date="Oct 26, 2021"
avatar="https://pbs.twimg.com/profile_images/1435103134842454016/DfF093MF_400x400.jpg"
content={
<>
5. Tech Interview Handbook
<br />
<br />
Here's free and curated technical interview preparation
materials for busy engineers. Besides the usual algorithm
questions, other awesome stuff includes How to prepare for
coding interviews, Interview Cheatsheet, and more.
</>
}
/>
<Tweet
url="https://twitter.com/ravinwashere/status/1328381097277681665"
handle="ravinwashere"
name="Ravin"
date="Nov 17, 2020"
avatar="https://pbs.twimg.com/profile_images/1314872679195799552/80_xRIEF_400x400.jpg"
content={
<>
Preparing for a job interview?
<br />
<br />
The tech interview handbook contains carefully curated to
help you ace your next technical interview.
<br />
<br />
And it's free.
</>
}
/>
<Tweet
url="https://twitter.com/rwenderlich/status/1166336060533727232"
handle="rwenderlich"
name="raywenderlich.com"
date="Aug 27, 2019"
avatar="https://pbs.twimg.com/profile_images/1445056225478021122/2jTrV6Fi_400x400.jpg"
content={<>Nice open source tech interview handbook</>}
/>
</div>
<div className="col col--4">
<Tweet
url="https://twitter.com/khalalw/status/1469496702365159431"
handle="khalalw"
name="Khalal Walker"
date="Dec 11, 2021"
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.
</>
}
/>
<Tweet
url="https://twitter.com/Vinaystwt/status/1437062973554507777"
handle="Vinaystwt"
name="Vinay Sharma"
date="Sep 12, 2021"
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
</>
}
/>
<Tweet
url="https://twitter.com/sitepointdotcom/status/1164121717243023360"
handle="sitepointdotcom"
name="SitePoint"
date="Aug 21, 2019"
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.
</>
}
/>
</div>
</div>
</div>
</div>
<div className={classnames('padding-vert--lg', styles.sectionAlt)}> <div className={classnames('padding-vert--lg', styles.sectionAlt)}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">

26
website/src/pages/styles.module.css
Unescape View File

@ -63,10 +63,6 @@
} }
.featuresRow .featuresRowItem { .featuresRow .featuresRowItem {
border-color: var(--ifm-color-emphasis-300);
border-radius: var(--ifm-card-border-radius);
border-style: solid;
border-width: 1px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
@ -84,3 +80,25 @@
.featuresRow .featuresRowItemLink { .featuresRow .featuresRowItemLink {
font-size: 0.9rem; font-size: 0.9rem;
} }
.tweet {
font-size: 15px;
}
.tweetsSection {
margin-top: -2rem;
}
.tweetsSection > :global(.col) {
padding-top: 2rem;
margin-top: -2rem;
}
.tweetsSection > :global(.col) > * {
margin-top: 2rem;
}
.tweetMeta,
.tweetMeta:hover {
color: var(--ifm-color-emphasis-700);
}

Write Preview
Loading…
Cancel
Save