feat: Add index navigation and update colors.

.eslintrc

@@ -1,6 +1,13 @@
 {
   "extends": "airbnb",
   "rules": {
-    "react/jsx-filename-extension": "off"
+    "react/jsx-filename-extension": "off",
+    "max-len": ["error", 150, 2, {
+      "ignoreUrls": true,
+      "ignoreComments": false,
+      "ignoreRegExpLiterals": true,
+      "ignoreStrings": true,
+      "ignoreTemplateLiterals": true
+    }]
   }
 }

package.json

@@ -7,7 +7,8 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-scripts": "1.0.17",
-    "reset-css": "^2.2.1"
+    "reset-css": "^2.2.1",
+    "scroll-to-element": "^2.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,3 +1,5 @@
+/* https://coolors.co/306857-2e9769-d0cb3d-f19f41-f14f41 */
+
 body {
   font-family: "adobe-garamond-pro", serif;
   line-height: 1.25;
@@ -9,26 +11,7 @@ body {
   box-sizing: border-box;
 }
 
-.App-header {
-  background-color: #333;
-  padding: 20px;
-  color: white;
-  margin-bottom: 5px;
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.App-header div {
-  margin:10px;
-}
-
-.logos a {
-  padding: 5px;
-}
-
-h1, h2, h3 {
+h1, h2, h3, h4 {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
@@ -47,4 +30,38 @@ h3 {
   font-weight: bold;
   text-align: center;
   margin-bottom: 10px;
-}
+}
+
+h4 {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+a, a:visited {
+  text-decoration: none;
+  color: #2E9769;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: #306857;
+}
+
+.App-header {
+  background-color: #306857;
+  padding: 20px;
+  color: white;
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.App-header div {
+  margin:10px;
+}
+
+.logos a {
+  padding: 5px;
+}

src/portfolio/Portfolio.css

@@ -2,14 +2,35 @@
   font-size: 18px;
 }
 
+.Portfolio-navigation {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 60px;
+}
+
+.Portfolio-navigation > div {
+  margin-top: 20px;
+}
+
 .Portfolio-intro {
-  padding:10px 30px;
+  max-width: 500px;
+  padding: 0 20px;
+}
+
+.Portfolio-navigation h4 {
+  text-align: center;
+}
+
+.Portfolio-index {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 300;
 }
 
 .Portfolio-technology-filters {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   font-weight: 300;
-  padding:10px;
-  text-align: center;
+  max-width: 400px;
+  padding: 0 20px;
 }

src/portfolio/Portfolio.js

@@ -6,6 +6,7 @@ import PortfolioItem from './components/PortfolioItem';
 import PhoneFrame from './components/PhoneFrame';
 import SiteScreen from './components/SiteScreen';
 import FilterToggle from './components/FilterToggle';
+import IndexEntry from './components/IndexEntry';
 
 import messengerVideo from './assets/messenger.m4v';
 import messengerPoster from './assets/messenger-poster.jpg';
@@ -25,6 +26,7 @@ const messengerProps = {
           storage. In the demo video I'm showing a conversation with a very simple chat bot that
           I created in order to quickly test out functionality.`,
   key: 'messenger',
+  id: 'messenger',
 };
 
 const widgetsProps = {
@@ -35,6 +37,7 @@ const widgetsProps = {
           Feed embedded on ATPWorldTour.com (shown), Slipknot1.com
           Sweepstakes entry form embedded on mlb.com and liverpoolfc.com`,
   key: 'widgets',
+  id: 'widgets',
 };
 
 const tennisProps = {
@@ -43,6 +46,7 @@ const tennisProps = {
   technologies: ['React Web', 'Server-Sent Events', 'Local Storage'],
   description: 'Live tennis scores for multiple tournaments',
   key: 'tennis',
+  id: 'tennis',
 };
 
 const technologies = new Set();
@@ -95,16 +99,27 @@ class Portfolio extends PureComponent {
   render() {
     return (
       <div className="Portfolio">
-        <p className="Portfolio-intro">This is a portfolio of some recent full-stack
-          projects that I&apos;ve worked on both at the social networking company Vixlet, LLC (<a href="https://github.com/cpillzvix">contribution history</a>)
-          and as a freelance developer. On all of these projects I was the
-          lead architect, primary contributor, or the sole developer.
-          This portfolio (<a href="https://github.com/cpill0789/portfolio">view source on github</a>) was written in React.js and uses flex-box for layouts.
-          I bootstrapped the project with the create-react-app utility from Facebook.
-        </p>
-        <div className="Portfolio-technology-filters">
-          <span className="Portfolio-label">Filter by Technology:</span>
-          { this.getTechList() }
+        <div className="Portfolio-navigation">
+          <div className="Portfolio-intro">
+            <p>This is a portfolio of some recent full-stack
+              projects that I&apos;ve worked on both at the social networking company Vixlet, LLC
+              (<a href="https://github.com/cpillzvix">contribution history</a>) and as a freelance developer.
+              On all of these projects I was the lead architect, primary contributor, or the sole developer.
+              This portfolio (<a href="https://github.com/cpill0789/portfolio">source code</a>)
+              was written in React.js and uses CSS flexbox for layouts. I bootstrapped the project with the
+              create-react-app utility from Facebook.
+            </p>
+          </div>
+          <div className="Portfolio-index">
+            <h4>Projects</h4>
+            <IndexEntry config={messengerProps} selectedTechnologies={this.state.selectedTechnologies} />
+            <IndexEntry config={widgetsProps} selectedTechnologies={this.state.selectedTechnologies} />
+            <IndexEntry config={tennisProps} selectedTechnologies={this.state.selectedTechnologies} />
+          </div>
+          <div className="Portfolio-technology-filters">
+            <h4>Filter by Technology</h4>
+            { this.getTechList() }
+          </div>
         </div>
         <PortfolioItem {...messengerProps} selectedTechnologies={this.state.selectedTechnologies}>
           <PhoneFrame src={messengerVideo} poster={messengerPoster} />

src/portfolio/components/IndexEntry.css

@@ -0,0 +1,11 @@
+.IndexEntry {
+  cursor: pointer;
+  opacity: 1;
+  transition-property: opacity;
+  transition-duration: 0.25s;
+  padding: 5px;
+}
+
+.IndexEntry.hidden {
+  opacity: 0;
+}

src/portfolio/components/IndexEntry.js

@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import scrollToElement from 'scroll-to-element';
+
+import './IndexEntry.css';
+
+class IndexEntry extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    const selector = `.${this.props.config.id}-title`;
+
+    scrollToElement(selector, {
+      offset: -10,
+      duration: 750,
+    });
+  }
+
+  render() {
+    const {
+      config,
+      selectedTechnologies,
+    } = this.props;
+
+    let showItem = true;
+
+    if (selectedTechnologies.size > 0) {
+      showItem = false;
+      config.technologies.forEach((tech) => {
+        if (selectedTechnologies.has(tech)) {
+          showItem = true;
+        }
+      });
+    }
+
+    return (
+      <div onClick={this.handleClick} className={`IndexEntry${showItem ? '' : ' hidden'}`}>
+        {config.title}
+      </div>
+    );
+  }
+}
+
+IndexEntry.propTypes = {
+  config: PropTypes.object.isRequired,
+  selectedTechnologies: PropTypes.object.isRequired,
+};
+
+export default IndexEntry;

src/portfolio/components/PortfolioItem.css

@@ -20,7 +20,7 @@
 }
 
 .PortfolioItem-tech .selected {
-  background: #fff200;
+  background: #F19F41;
 }
 
 .Portfolio-item p {

src/portfolio/components/PortfolioItem.js

@@ -33,6 +33,7 @@ class PortfolioItem extends PureComponent {
       technologies,
       additional,
       children,
+      id,
     } = this.props;
 
     let showItem = true;
@@ -49,7 +50,7 @@ class PortfolioItem extends PureComponent {
     return (
       <div className={`Portfolio-item${showItem ? '' : ' hidden'}`}>
         <div className="Portfolio-item-left">
-          <h3>{title}</h3>
+          <h3 className={`${id}-title`}>{title}</h3>
           {this.getTechnologies()}
           <p><span className="Portfolio-label">ROLE:</span> {role}</p>
           <p><span className="Portfolio-label">DESCRIPTION:</span> {description}</p>
@@ -65,6 +66,7 @@ class PortfolioItem extends PureComponent {
 
 PortfolioItem.propTypes = {
   children: PropTypes.node.isRequired,
+  id: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   role: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,

yarn.lock

@@ -1427,6 +1427,37 @@ commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
 
+[email protected]:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/component-clone/-/component-clone-0.2.2.tgz#c7f5979822880fad8cfb0962ba29186d061ee04f"
+  dependencies:
+    component-type "*"
+
+[email protected]:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.0.tgz#ccd113a86388d06482d03de3fc7df98526ba8efe"
+
+[email protected]:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/component-raf/-/component-raf-1.2.0.tgz#b2bc72d43f1b014fde7a4b3c447c764bc73ccbaa"
+
+[email protected]:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/component-tween/-/component-tween-1.2.0.tgz#cc39ce5dbab05b52825f41d1947638a0b01b2b8a"
+  dependencies:
+    component-clone "0.2.2"
+    component-emitter "1.2.0"
+    component-type "1.1.0"
+    ease-component "1.0.0"
+
+component-type@*:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-type/-/component-type-1.2.1.tgz#8a47901700238e4fc32269771230226f24b415a9"
+
+[email protected]:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/component-type/-/component-type-1.1.0.tgz#95b666aad53e5c8d1f2be135c45b5d499197c0c5"
+
 compressible@~2.0.11:
   version "2.0.12"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.12.tgz#c59a5c99db76767e9876500e271ef63b3493bd66"
@@ -1962,6 +1993,10 @@ duplexer@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
 
+[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ease-component/-/ease-component-1.0.0.tgz#b375726db0b5b04595b77440396fec7daa5d77c9"
+
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
@@ -5640,6 +5675,19 @@ schema-utils@^0.3.0:
   dependencies:
     ajv "^5.0.0"
 
+scroll-to-element@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/scroll-to-element/-/scroll-to-element-2.0.0.tgz#3467330e3384743b7295ac64b30279990c5ac164"
+  dependencies:
+    scroll-to "0.0.2"
+
+[email protected]:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/scroll-to/-/scroll-to-0.0.2.tgz#936d398a9133660a2492145c2c0081dfcb0728f3"
+  dependencies:
+    component-raf "1.2.0"
+    component-tween "1.2.0"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"