content fadein

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",
+    "jest-cli": "^22.4.3",
-    "stylelint": "^9.0.0",
+    "stylelint": "^9.1.3",
-    "stylelint-config-standard": "^18.1.0"
+    "stylelint-config-standard": "^18.2.0"
   },
   "scripts": {
     "lint:js": "eslint ./{src,public}/**/*.js",

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 = () => (
-  <div className="app">
+  <FadeIn>
-    <Header />
+    <div className="app">
-    <Routes />
+      <Header />
-  </div>
+      <Routes />
+    </div>
+  </FadeIn>
 )
 
 export default App

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) => (
+  <CSSTransition
+    {...props}
+    classNames="fadein"
+    appear={true}
+    in={true}
+    timeout={400} />
+)
+
+export default FadeIn

src/components/atoms/FadeIn.scss

@@ -0,0 +1,8 @@
+.fadein-appear {
+    opacity: .01;
+
+    &.fadein-appear-active {
+        opacity: 1;
+        transition: opacity 400ms ease-in;
+    }
+}

src/components/pages/Home.js

@@ -2,7 +2,10 @@ import React from 'react'
 
 const Home = () => (
   <main className="screen screen--home">
-
+    <a href="https://kremalicious.com">Blog</a>
+    <a href="https://github.com/kremalicious">GitHub</a>
+    <a href="https://dribbble.com/kremalicious">Dribbble</a>
+    <a href="https://twitter.com/kremalicious">Twitter</a>
   </main>
 )