new screenshot

package.json

@@ -38,7 +38,7 @@
     "react-dev-utils": "^3.1.1",
     "react-dom": "^15.6.1",
     "react-error-overlay": "^1.0.10",
-    "react-hot-loader": "next",
+    "react-hot-loader": "^4.0.0",
     "react-image": "^1.0.1",
     "react-scroll-to-component": "^1.0.1",
     "style-loader": "^0.18.2",

src/App.jsx

@@ -5,6 +5,7 @@ import scrollToComponent from 'react-scroll-to-component'
 import './App.css'
 import SectionHeader from './SectionHeader'
 import Introduction from './Introduction'
+import WBI from './WBI'
 import Projects from './Projects'
 import Contact from './Contact'
 
@@ -27,9 +28,12 @@ const App = () => (
                 scrollToComponent(this.pagetop, scrollOptions)
                 break
               case '2':
-                scrollToComponent(this.portfolio, scrollOptions)
+                scrollToComponent(this.wbi, scrollOptions)
                 break
               case '3':
+                scrollToComponent(this.portfolio, scrollOptions)
+                break
+              case '4':
                 scrollToComponent(this.contact, scrollOptions)
                 break
               default:
@@ -42,14 +46,22 @@ const App = () => (
               <span className="App-home App-home2">h</span>
             </a>
           </Menu.Item>
-          <Menu.Item key={2}>Portfolio</Menu.Item>
-          <Menu.Item key={3}>Contact</Menu.Item>
+          <Menu.Item key={2}>Showcase Project</Menu.Item>
+          <Menu.Item key={3}>Portfolio</Menu.Item>
+          <Menu.Item key={4}>Contact</Menu.Item>
         </Menu>
       </Header>
 
       <Content className="App-content">
         <div className="App-title-divider" />
         <Introduction />
+        <div className="App-title-divider" ref={(section) => { this.wbi = section }} />
+        <SectionHeader
+          text="Showcase Project"
+          color="#b2dbd5"
+          handleClickTop={() => scrollToComponent(this.pagetop, scrollOptions)}
+        />
+        <WBI />
         <div className="App-title-divider" ref={(section) => { this.portfolio = section }} />
         <SectionHeader
           text="Portfolio"

src/Projects.jsx

@@ -114,7 +114,7 @@ const projectList = [
 const Projects = () => (
   <div className="Projects-outer-div">
     <div className="Projects-blurb">
-      Check out some of my demo projects below.
+      Check out some of my other demo projects below.
       They range from simple Javascript demos to full-stack
       React + Redux applications with a Node.js backend and MongoDB database.
     </div>

src/WBI.css

@@ -0,0 +1,57 @@
+.WBI-outer-div {
+  margin: 10px 0;
+}
+
+.WBI-flex-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.WBI-flex {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+}
+
+.WBI-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.1em;
+  /* margin: 0 auto; */
+  max-width: 600px;
+  padding: 5px;
+
+}
+
+.WBI-text ul {
+  display: block;
+  list-style-type: disc;
+  margin-top: 1em;
+  margin-bottom: 1 em;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 40px;
+}
+
+.WBI-image-div {
+  display: flex;
+  flex-flow: column nowrap;
+   align-items: center; 
+  max-width: 534px;
+  margin: 10px 10px;
+  padding: 10px;
+  transition: all 0.2s ease;
+  border-radius: 10px;
+}
+
+.WBI-thumbnail {
+  width: 100%;
+  /* width: 512px; */
+  /* height: 336px; */
+  border: 1px solid #ccc;
+}
+
+.WBI-image-div:hover {
+  background-color: #F7D994;
+}

src/WBI.jsx

@@ -0,0 +1,94 @@
+/* eslint-disable max-len */
+import React from 'react'
+import Img from 'react-image'
+import { Spin } from 'antd'
+
+import './WBI.css'
+
+
+const WBI = () => (
+  <div className="WBI-outer-div">
+    <div className="WBI-flex-container">
+
+      <div className="WBI-flex">
+        <div className="WBI-image-div">
+          <a href="screenshots/wbi_front.png" target="_blank">
+            <Img
+              className="WBI-thumbnail"
+              src="screenshots/wbi_front.png"
+              alt="WBI front page"
+              loader={
+                <div className="Projects-thumbnail-spinner">
+                  <Spin size="large" />
+                </div>
+              }
+            />
+          </a>
+        </div>
+        <div className="WBI-text">
+          <div>
+            A project I completed for a bookstore chain in Edmonton, AB, this internal web app
+            provides several key functions, such as forum-based employee communications,
+            customer info management, and product request tracking and reporting.
+            <br /><br />
+            The app consists of a front-end single-page-app written using React and Redux with Ant Design UI components,
+            and a Node.js back-end interfacing with MySQL and MongoDB databases.
+            This setup offers several benefits including real-time event-based updates, notifications
+            and secure authentication.
+          </div>
+        </div>
+      </div>
+
+      <div className="WBI-flex">
+        <div className="WBI-text">
+          <div>
+            Employees can quickly find books using a point-and-click search interface.
+            Common actions are easily accessible and information is displayed clearly.
+          </div>
+        </div>
+        <div className="WBI-image-div">
+          <a href="screenshots/wbi_item_search.png" target="_blank">
+            <Img
+              className="WBI-thumbnail"
+              src="screenshots/wbi_item_search.png"
+              alt="WBI front page"
+              loader={
+                <div className="Projects-thumbnail-spinner">
+                  <Spin size="large" />
+                </div>
+              }
+            />
+          </a>
+        </div>
+      </div>
+
+      <div className="WBI-flex">
+        <div className="WBI-image-div">
+          <a href="screenshots/wbi_request_details.png" target="_blank">
+            <Img
+              className="WBI-thumbnail"
+              src="screenshots/wbi_request_details.png"
+              alt="WBI front page"
+              loader={
+                <div className="Projects-thumbnail-spinner">
+                  <Spin size="large" />
+                </div>
+              }
+            />
+          </a>
+        </div>
+        <div className="WBI-text">
+          <div>
+            The development environment is set up with time-saving features such as linting,
+            hot-reloading and Babel ES6+ transpilation.
+            <br /><br />
+            The app is built with Webpack and deployed to a cloud server using Dokku, an open-source Docker-based Heroku clone.
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+)
+
+export default WBI