diff --git a/package.json b/package.json index 03ef9c6..d59f690 100644 --- a/package.json +++ b/package.json @@ -3,20 +3,21 @@ "version": "0.1.0", "private": true, "dependencies": { - "node-sass-chokidar": "^1.1.0", + "node-sass-chokidar": "^1.2.0", "npm-run-all": "^4.1.2", "react": "^16.2.0", "react-dom": "^16.2.0", "react-router-dom": "^4.2.2", - "react-scripts": "1.1.1" + "react-scripts": "1.1.1", + "react-transition-group": "^2.2.1" }, "devDependencies": { "babel-eslint": "^8.2.2", "eslint": "^4.19.0", "eslint-plugin-react": "^7.7.0", - "jest-cli": "^22.1.4", - "stylelint": "^9.0.0", - "stylelint-config-standard": "^18.1.0" + "jest-cli": "^22.4.3", + "stylelint": "^9.1.3", + "stylelint-config-standard": "^18.2.0" }, "scripts": { "lint:js": "eslint ./{src,public}/**/*.js", diff --git a/src/App.js b/src/App.js index c7eaa30..718e103 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,15 @@ import React from 'react' import Header from './components/molecules/Header.js' +import FadeIn from './components/atoms/FadeIn' import Routes from './Routes' const App = () => ( -
-
- -
+ +
+
+ +
+
) export default App diff --git a/src/components/atoms/FadeIn.js b/src/components/atoms/FadeIn.js new file mode 100644 index 0000000..4eb003b --- /dev/null +++ b/src/components/atoms/FadeIn.js @@ -0,0 +1,14 @@ +import React from 'react' +import { CSSTransition } from 'react-transition-group' +import './FadeIn.css' + +const FadeIn = (props) => ( + +) + +export default FadeIn diff --git a/src/components/atoms/FadeIn.scss b/src/components/atoms/FadeIn.scss new file mode 100644 index 0000000..6f90a92 --- /dev/null +++ b/src/components/atoms/FadeIn.scss @@ -0,0 +1,8 @@ +.fadein-appear { + opacity: .01; + + &.fadein-appear-active { + opacity: 1; + transition: opacity 400ms ease-in; + } +} diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js index 95b08e8..d610ee6 100644 --- a/src/components/pages/Home.js +++ b/src/components/pages/Home.js @@ -2,7 +2,10 @@ import React from 'react' const Home = () => (
- + Blog + GitHub + Dribbble + Twitter
)