improve home section style

orsi · Feb 26, 2019 · b1516c6 · b1516c6
1 parent af2e795
commit b1516c6
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 14 deletions.
diff --git a/src/views/home/home.component.css b/src/views/home/home.component.css
@@ -5,27 +5,44 @@
     width: 100%;
     height: 100%;
 }
-.home__header h1 {
+.home h1 {
     margin: 0;
+    color: hsla(220, 20%, 10%, 1);
+    line-height: 1;
     text-align: center;
     text-transform: uppercase;
 }
-.home__header h1 .jonathon {
+.home h1 .jonathon {
     font-weight: 300;
 }
-.home__header h1 .orsi {
+.home h1 .orsi {
     font-weight: 900;
 }
-.home__header h2 {
+.home h2 {
     margin: 0 0 16px 0;
+    color: hsla(220, 20%, 20%, 1);
     font-size: 1.2em;
+    text-transform: uppercase;
 }
 
-.home__links-item a {
-    display: block;
+.link,
+.link:link,
+.link:visited {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
     padding: 8px;
-    text-decoration: none;
     color: inherit;
+    text-decoration: none;
+}
+.link-icon {
+    display: inline-block;
+    padding-top: 3px;
+    margin-right: 8px;
+    line-height: 1;
+    white-space: nowrap;
+}
+.link-text {
 }
 
 @media (min-width: 768px) {
@@ -35,4 +52,12 @@
     .home__links-item {
         margin: 0 8px;
     }
+    .link-text {
+        overflow: hidden;
+        width: 0px;
+        transition: width .2s ease;
+    }
+    .link:hover .link-text {
+        width: 60px;
+    }
 }
diff --git a/src/views/home/home.component.js b/src/views/home/home.component.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import './home.component.css';
-
 import { Link } from 'react-router-dom';
+import { MdHelp, MdWork, MdCode, MdDescription } from 'react-icons/md';
 
 class HomeViewComponent extends Component {
   componentDidMount() {
@@ -14,14 +14,34 @@ class HomeViewComponent extends Component {
           <span className="orsi">Orsi</span>
         </h1>
         <h2 className="text-center">
-            Full-stack Developer
+            Web Developer
         </h2>
-        <nav className="home__nav w-100 text-center">
+        <nav className="home__nav">
           <ul className="home__links-list list-unstyled">
-              <li className="home__links-item"><Link to="/about">About</Link></li>
-              <li className="home__links-item"><Link to="/work">Work</Link></li>
-              <li className="home__links-item"><Link to="/projects">Projects</Link></li>
-              <li className="home__links-item"><Link to="/resume">Resume</Link></li>
+              <li className="home__links-item">
+                <Link className="link" to="/about">
+                  <span className="link-icon"><MdHelp /></span>
+                  <span className="link-text">About</span>
+                </Link>
+              </li>
+              <li className="home__links-item">
+                <Link className="link" to="/work">
+                  <span className="link-icon"><MdWork /></span>
+                  <span className="link-text">Work</span>
+                </Link>
+              </li>
+              <li className="home__links-item">
+                <Link className="link" to="/projects">
+                  <span className="link-icon"><MdCode /></span>
+                  <span className="link-text">Projects</span>
+                </Link>
+              </li>
+              <li className="home__links-item">
+                <Link className="link" to="/resume">
+                  <span className="link-icon"><MdDescription /></span>
+                  <span className="link-text">Resume</span>
+                </Link>
+              </li>
           </ul>
         </nav>
       </div>