feat(navigation): adding simplified navigation

reyrodrigez · Apr 27, 2017 · 4241d61 · 4241d61
1 parent 1280730
commit 4241d61
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 34 deletions.
diff --git a/assets/bundle.js b/assets/bundle.js
diff --git a/assets/styles.css b/assets/styles.css
diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -1,19 +1,23 @@
 import React from 'react';
+import Navigation from '../Navigation';
 import Portfolio from '../Portfolio';
 import '../../styles.scss';
 
 
 export default class App extends React.Component {
     render() {
         return (
-            <div className="container">
-                <main className="main">
-                    <section className="about">
-                        <h1><span className="emphasis">👋🏻 Hello,</span> my name is Laszlo Heves.</h1>
-                        <blockquote>I'm a Senior Frontend Developer with eight years of experience building medium and large sized websites and web applications with an emphasis on developing user interface related features from UX planning through site-build to deployment.</blockquote>
-                    </section>
-                    <Portfolio/>
-                </main>
+            <div>
+                <Navigation />
+                <div className="container">
+                    <main className="main">
+                        <section className="about">
+                            <h1><span className="emphasis">👋🏻 Hello,</span> my name is Laszlo Heves.</h1>
+                            <blockquote>I'm a Senior Frontend Developer with eight years of experience building medium and large sized websites and web applications with an emphasis on developing user interface related features from UX planning through site-build to deployment.</blockquote>
+                        </section>
+                        <Portfolio/>
+                    </main>
+                </div>
             </div>);
     }
 }
diff --git a/src/components/Navigation/index.js b/src/components/Navigation/index.js
diff --git a/src/styles.scss b/src/styles.scss
@@ -12,28 +12,6 @@ $mobile-up-bottom: 740px;
     letter-spacing: 0.5px;
 }
 
-@keyframes levitation {
-  0% {
-    -webkit-transform: translateY(-6px);
-    transform: translateY(-6px);
-  }
-  50% {
-    -webkit-transform: translateY(2px);
-    transform: translateY(2px);
-  }
-  100% {
-    -webkit-transform: translateY(-6px);
-    transform: translateY(-6px);
-  }
-}
-
-@keyframes hvr-bob-float {
-    100% {
-        -webkit-transform: translateY(-6px);
-        transform: translateY(-6px);
-    }
-}
-
 html,
 .root,
 .container,
@@ -56,6 +34,28 @@ body {
     flex-direction: column;
 }
 
+.navigation {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    height: 50px;
+    padding-top: 20px;
+    padding-right: 20px;
+    justify-content: flex-end;
+
+    @media (min-width: $mobile-up-bottom) {
+        position: fixed;
+    }
+
+    &__navitem {
+        fill: #fff;
+        width: 32px;
+        height: 32px;
+        margin-left: 20px;
+    }
+}
+
 .about {
     min-height: 100vh;
     display: flex;