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"