Title section

package.json

@@ -38,6 +38,7 @@
     "react-dom": "^15.6.1",
     "react-error-overlay": "^1.0.9",
     "react-hot-loader": "next",
+    "react-scroll-to-component": "^1.0.1",
     "style-loader": "^0.18.2",
     "sw-precache-webpack-plugin": "^0.11.3",
     "url-loader": "^0.5.9",

public/index.html

@@ -10,7 +10,9 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">
+
+    <link href="https://fonts.googleapis.com/css?family=Roboto|Kanit" rel="stylesheet">
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +26,8 @@
     <style>
 
 body {
-  background-color: #0a0;
+   background-color: #fff; 
+
 }
 
     </style>

src/App.css

@@ -1,31 +1,12 @@
-/*
-.App {
-  text-align: center;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-*/
-
 .App {
   font-size: 1.25em;
+  font-family: 'Roboto', sans-serif;
 }
 
+/* .App-layout {
+} */
+
 .App-logo {
-  /* animation: App-logo-spin infinite 20s linear; */
   width: 120px;
   height: 31px;
   background: #333;
@@ -39,7 +20,12 @@
 }
 
 .App-content {
-  padding: 0 50px;
-  padding-bottom: 20px;
+  margin: 0;
   background-color: white;
 }
+
+.App-title-divider {
+  background-color: #fdd475;
+  height: 12px;
+  margin: 0 auto;
+}

src/App.jsx

@@ -1,36 +1,47 @@
 import React from 'react'
-import { Layout, Menu } from 'antd'
+import { Layout, Menu, Affix } from 'antd'
+import scrollToComponent from 'react-scroll-to-component'
 
 import './App.css'
 import Introduction from './Introduction'
 import Projects from './Projects'
-import logo from './logo.svg'
 
 const { Header, Footer, Content } = Layout
 
 const App = () => (
-  <div className="App">
-    <Layout>
-      <Header>
-        <img src={logo} className="App-logo" alt="logo" />
-        <Menu
-          theme="dark"
-          mode="horizontal"
-          selectable={false}
-          // defaultSelectedKeys={['1']}
-          className="App-nav-menu"
-        >
-          <Menu.Item key="1">Top</Menu.Item>
-          <Menu.Item key="2">Portfolio</Menu.Item>
-          <Menu.Item key="3">Contact</Menu.Item>
-        </Menu>
-      </Header>
+  <div className="App" ref={(section) => { this.pagetop = section }}>
+    <Layout className="App-layout">
+      <Affix>
+        <Header>
+          { /* <img src={logo} className="App-logo" alt="logo" /> */ }
+          <Menu
+            theme="dark"
+            mode="horizontal"
+            selectable={false}
+            className="App-nav-menu"
+            onClick={(item) => {
+              switch (item.key) {
+                case '1':
+                  scrollToComponent(this.pagetop, { align: 'top' })
+                  break
+                case '2':
+                  scrollToComponent(this.portfolio, { align: 'top' })
+                  break
+                default:
+              }
+            }}
+          >
+            <Menu.Item key={1}>Top</Menu.Item>
+            <Menu.Item key={2}>Portfolio</Menu.Item>
+            <Menu.Item key={3}>Contact</Menu.Item>
+          </Menu>
+        </Header>
+      </Affix>
       <Content className="App-content">
-
+        <div className="App-title-divider" />
         <Introduction />
-
+        <div className="App-title-divider" ref={(section) => { this.portfolio = section }} />
         <Projects />
-
       </Content>
       <Footer>
         2017 Paul Hoskinson

src/Introduction.css

@@ -1,25 +1,60 @@
 .Introduction-outer-div {
-  text-align: center;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+}
+
+.Introduction-text-content {
   font-family: 'Kanit', sans-serif;
-  margin: 40px 0;
+  margin: 30px 20px;
   font-size: 1.2em;
-  /* background-color: #e2e8e4; */
-  background-color: #f9f9ff;
+   /* background-color: #e2e8e4;  */
+   /* background-color: #f9f9ff;  */
+   /* background-color: transparent;
+   background-position: right -100px;
+   background-image: url('/hill.jpg'); */
 }
 
 .Introduction-main-title {
+  text-align: center;
   font-size: 3em;
   line-height: 1.3em;
   color: #2d3033;
 }
 
 .Introduction-subtitle {
+  text-align: center;
   font-size: 1.75em;
   margin-bottom: 10px;
-  color: #537072;
+  color: #4d648d;
 }
 
 .Introduction-description {
+  text-align: center;
   font-size: 1.25em;
-  color: #c5beba;
+  /* color: #c5beba; */
+  color: #92aac7;
 }
+
+.Introduction-blurb {
+  font-family: 'Roboto', sans-serif;
+  color: #a57c65;
+  margin: 0 auto;
+  margin-top: 20px;
+  max-width: 470px;
+  text-align: center;
+  /* font-size: 1.4em; */
+   line-height: 1.7em; 
+}
+
+ .Introduction-side-image-div {
+   margin: 0;
+   padding: 0;
+   /* border: 1px solid grey; */
+   height: 340px;
+   width: 612px;
+   background-image: url('/trees.jpg');
+   background-position: center left;
+   flex-shrink: 45;
+ } 
+

src/Introduction.jsx

@@ -3,9 +3,23 @@ import './Introduction.css'
 
 const Introduction = () => (
   <div className="Introduction-outer-div">
-    <div className="Introduction-main-title">Paul Hoskinson</div>
-    <div className="Introduction-subtitle">Full-stack Web Developer</div>
-    <div className="Introduction-description">Javascript / React / HTML / CSS</div>
+    <div className="Introduction-text-content">
+      <div className="Introduction-main-title">
+        Paul Hoskinson
+      </div>
+      <div className="Introduction-subtitle">
+        Full-stack Web Developer
+      </div>
+      <div className="Introduction-description">
+        Javascript . React . Node.js . HTML . CSS
+      </div>
+      <div className="Introduction-blurb">
+        Hello, I&apos;m a web developer currently living in Victoria, BC.
+        I&apos;m interested in front- and back-end web programming
+        using the latest open-source technologies.
+      </div>
+    </div>
+    <div className="Introduction-side-image-div" />
   </div>
 )
 

src/Projects.css

@@ -1,16 +1,21 @@
+.Projects-outer-div {
+  margin: 20px 0;
+}
+
 .Projects-header {
-  font-size: 1.5em;
+  font-family: 'Kanit', sans-serif;
+  font-size: 2em;
   text-align: center;
 }
 
-.Projects-listDiv {
+.Projects-list-div {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
   align-items: flex-start;
 }
 
-.Projects-itemDiv {
+.Projects-item-div {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
@@ -23,4 +28,4 @@
 
 .Projects-thumbnail {
   max-width: 300px;
-}
+}

src/Projects.jsx

@@ -26,11 +26,11 @@ const projectList = [
 ]
 
 const Projects = () => (
-  <div>
+  <div className="Projects-outer-div">
     <div className="Projects-header">
-      Portfolio Projects
+      Portfolio
     </div>
-    <div className="Projects-listDiv">
+    <div className="Projects-list-div">
       { projectList.length > 0 && (
         projectList.map(project => (
           <div key={project.href} className="Projects-itemDiv">