diff --git a/README.md b/README.md
index 990c3f027f..4c351bf7e6 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ Yes, you can fork this repo. Please give me proper credit by linking back to [br
nvm install
```
-3. Install dependencies
+3. Install dependencies. Use `yarn`, don't use `npm`
```sh
yarn
diff --git a/package.json b/package.json
index 0612ef0bbf..c1a1206048 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-transition-group": "^4.3.0",
+ "react-twitter-embed": "^4.0.4",
"scrollreveal": "^4.0.5",
"styled-components": "^5.3.0"
},
diff --git a/src/components/index.js b/src/components/index.js
index 353ce439dc..a85f32d26b 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -13,3 +13,4 @@ export { default as Jobs } from './sections/jobs';
export { default as Featured } from './sections/featured';
export { default as Projects } from './sections/projects';
export { default as Contact } from './sections/contact';
+export { default as TwitterTweets } from './sections/tweet';
diff --git a/src/components/sections/tweet.js b/src/components/sections/tweet.js
new file mode 100644
index 0000000000..a9c35c19ce
--- /dev/null
+++ b/src/components/sections/tweet.js
@@ -0,0 +1,34 @@
+/*
+
+To embed tweets, the react-twitter-embed package is used. In the below code, simply add the TwitterTweetEmbed element and tweets will be displayed.
+
+The tweets are shown left-to-right top-to-bottom in 3 columns on desktop and 1 column on mobile.
+
+*/
+
+import React from 'react';
+import { TwitterTweetEmbed } from 'react-twitter-embed';
+
+export default function TwitterTweets() {
+ return (
+
+ );
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index f722802b81..1b197a05b0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
-import { Layout, Hero, About, Jobs, Featured, Projects, Contact } from '@components';
+import { Layout, Hero, About, Jobs, Featured, Projects, Contact, TwitterTweets } from '@components';
const StyledMainContainer = styled.main`
counter-reset: section;
@@ -15,6 +15,7 @@ const IndexPage = ({ location }) => (
+
diff --git a/yarn.lock b/yarn.lock
index dbf83dd530..d88b1f4b5d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11333,6 +11333,13 @@ react-transition-group@^4.3.0:
loose-envify "^1.4.0"
prop-types "^15.6.2"
+react-twitter-embed@^4.0.4:
+ version "4.0.4"
+ resolved "https://registry.yarnpkg.com/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz#4a6b8354acc266876ff1110b9f648518ea20db6d"
+ integrity sha512-2JIL7qF+U62zRzpsh6SZDXNI3hRNVYf5vOZ1WRcMvwKouw+xC00PuFaD0aEp2wlyGaZ+f4x2VvX+uDadFQ3HVA==
+ dependencies:
+ scriptjs "^2.5.9"
+
react@^17.0.2:
version "17.0.2"
resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -11975,6 +11982,11 @@ schema-utils@^3.0, schema-utils@^3.0.0:
ajv "^6.12.5"
ajv-keywords "^3.5.2"
+scriptjs@^2.5.9:
+ version "2.5.9"
+ resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
+ integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
+
scrollreveal@^4.0.5:
version "4.0.9"
resolved "https://registry.npmjs.org/scrollreveal/-/scrollreveal-4.0.9.tgz#47866e1967ff604e64bac28818fe0dcea44f2c8b"