Merge pull request #12 from mldangelo/about

About

Author: Michael

README.md

@@ -4,17 +4,19 @@ My personal website. Built using Node.js, React, Express, React-Router, Hot Modu
 ### Tests:
 [![Code Climate](https://codeclimate.com/github/mldangelo/mldangelo/badges/gpa.svg)](https://codeclimate.com/github/mldangelo/mldangelo)
 [![Build Status](https://travis-ci.org/mldangelo/mldangelo.svg?branch=master)](https://travis-ci.org/mldangelo/mldangelo)
+[![Dependency Tracking](https://david-dm.org/mldangelo/mldangelo.svg)](https://david-dm.org/)
 
-### Requirements:
-* node >= v6.0
+### Dependencies:
+* node >= v6.0.0
+* yarn >= v0.18.
 
 ### Installation:
 
 1. Run the following commands:
   ```bash
   git clone git://github.com/mldangelo/mldangelo.git
   cd mldangelo
-  npm install
+  yarn 
   ```
 
 2. Optionally configure nginx. Run:
@@ -23,7 +25,8 @@ My personal website. Built using Node.js, React, Express, React-Router, Hot Modu
   sudo ln [root directory]/nginx/mldangelo.conf [nginx directory]/sites-enabled/mldangelo.conf
   sudo service nginx restart
   ```
-  Note: HTTPS block should be removed if step 2 (below is not followed)
+  Note: HTTPS block should be removed if step 3 (below) is not followed.
+
 3. Optionally configure a SSL certificate using Certbot. See [here](https://certbot.eff.org/#ubuntutrusty-nginx)
 for installation and setup instructions. A cronjob such as:
 
@@ -38,17 +41,15 @@ for installation and setup instructions. A cronjob such as:
 
 1. ``` cp sample.env .env ``` and set values as appropriate.
 
-2. cd into [root directory] and run:
+2. Run `npm run forever-start` and navigate to `<ip>:<port> (default=7999)`.
 
-  ```bash
-  npm run build
-  npm start
-  ```
-  If running in background, use nohup or screen.
-3. Navigate to `<ip>:<port> (default=7999)` and enjoy.
+###  Developing:
+1. Set `NODE_ENV=development` in `.env`.
+2. Run `npm run dev`
 
 ### Contributors
 - [@mldangelo](https://github.com/mldangelo)
+- [@typpo](https://github/typpo)
 
 ### Acknowlegements
 - Special thanks to [@typpo](https://github.com/typpo) for tirelessly answering all of my node.js and react questions.

app/components/Resume.js

@@ -19,16 +19,15 @@ const getRows = () => courses.sort((a, b) => {
 ));
 
 const Courses = () => (
-  <article>
-    <div className="courses">
-      <div className="title">
-        <h3>Selected Courses</h3>
-      </div>
-      <ul className="course-list">
-        {getRows()}
-      </ul>
+  <div className="courses">
+    <div className="link-to" id="courses" />
+    <div className="title">
+      <h3>Selected Courses</h3>
     </div>
-  </article>
+    <ul className="course-list">
+      {getRows()}
+    </ul>
+  </div>
 );
 
 export default Courses;

app/components/Resume/Courses.js

@@ -12,6 +12,7 @@ const getRows = () => degrees.map(degree => (
 
 const Education = () => (
   <div className="education">
+    <div className="link-to" id="education" />
     <div className="title">
       <h3>Education</h3>
     </div>

app/components/Resume/Education.js

@@ -12,6 +12,7 @@ const getRows = () => positions.map(job => (
 
 const Experience = () => (
   <div className="experience">
+    <div className="link-to" id="experience" />
     <div className="title">
       <h3>Experience</h3>
     </div>

app/components/Resume/Experience.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+const References = () => (
+  <div className="references">
+    <div className="link-to" id="references" />
+    <div className="title">
+      <Link to="/contact">
+        <h3>References are available upon request</h3>
+      </Link>
+    </div>
+  </div>
+);
+
+export default References;

app/components/Resume/References.js

@@ -69,6 +69,7 @@ class Skills extends Component {
   render() {
     return (
       <div className="skills">
+        <div className="link-to" id="skills" />
         <div className="title">
           <h3>Skills</h3>
           <p>Note: I think these sections are silly, but everyone seems to have one.</p>

app/components/Resume/Skills.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+
+import Table from './Table';
+import data from '../../data/stats';
+
+class PersonalStats extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { data };
+  }
+
+  componentDidMount() {
+    this.timer = setInterval(() => this.tick(), 100);
+  }
+
+  tick() {
+    const divisor = 1000 * 60 * 60 * 24 * 365.2421897; // ms in an average year
+    const birthTime = new Date('1990-02-05T09:24:00');
+    this.state.data.age.value = ((Date.now() - birthTime) / divisor).toFixed(9);
+    this.setState({
+      data: this.state.data,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>Some stats about me</h3>
+        <Table
+          data={Object.values(this.state.data)}
+        />
+      </div>
+    );
+  }
+}
+
+export default PersonalStats;

app/components/Stats/Personal.js

@@ -1,18 +1,15 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router';
 
 import axios from 'axios';
 
-import Table from './Stats/Table';
-import data from '../data/github';
+import Table from './Table';
+import data from '../../data/github';
 
 class Stats extends Component {
 
   constructor(props) {
     super(props);
-    this.state = {
-      data,
-    };
+    this.state = { data };
   }
 
   componentDidMount() {
@@ -32,17 +29,12 @@ class Stats extends Component {
 
   render() {
     return (
-      <article className="post" id="stats">
-        <header>
-          <div className="title">
-            <h2><Link to="/stats">Some stats about this site</Link></h2>
-            <p>Click <a href="https://github.com/mldangelo/mldangelo/tree/master/scripts">here</a> to see how these are generated.</p>
-          </div>
-        </header>
+      <div>
+        <h3>Some stats about this site</h3>
         <Table
           data={data}
         />
-      </article>
+      </div>
     );
   }
 }

app/components/Stats.js app/components/Stats/Site.js

@@ -17,7 +17,7 @@ class Table extends Component {
 
   render() {
     return (
-      <table style={{ width: '100%' }}>
+      <table>
         <tbody>
           {this.getRows()}
         </tbody>

app/components/Stats/Table.js

@@ -11,7 +11,7 @@ class TableRow extends Component {
   render() {
     return (
       <tr>
-        <td>{this.props.label}</td>
+        <td width="70%">{this.props.label}</td>
         <td>{this.getValue()}</td>
       </tr>
     );

app/components/Stats/TableRow.js

@@ -3,7 +3,7 @@ import { Link, IndexLink } from 'react-router';
 
 import Menus from 'react-burger-menu';
 
-import links from '../../../data/links';
+import links from '../../data/links';
 
 const Menu = Menus.slide;
 

app/components/Template/Header/Hamburger.js app/components/Template/Hamburger.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link, IndexLink } from 'react-router';
 
-import Hamburger from './Header/Hamburger';
+import Hamburger from './Hamburger';
 import links from '../../data/links';
 
 const Header = () => (

app/components/Template/Header.js

@@ -0,0 +1,78 @@
+<div></div>
+#### Intro
+I am the CTO of [Arthena](https://arthena.com) where I work on building the most accurate models for pricing and valuating fine art. My primary job functions are as a data scientist and software engineer.
+<br>
+I am available to consult on interesting projects. I am particularly interested in social impact, education, inclusively, space, and in applying machine learning to large data sets. I may even be available for pro-bono work depending on the time commitment and the project. If you'd like to meet, I am based in Palo Alto but travel to New York frequently. 
+<br><br>
+#### currently
+At Arthena I have learned how to build teams and manage people, build relationships with customers, sell enterprise products, and build on-line predictive models for production environments. I've also learned how to build and maintain large web applications (see [arthena.com](https://arthena.com)). 
+<br><br>
+#### Some History (Early Life): 
+
+- I was born on February 5th, 1990.
+
+- My parents put a computer in my bedroom when I was 3. It was an old Tandy that ran MS-DOS and could barely handle Wolfenstein 3D.
+
+- We subscribed to AOL in 1995. I still remember installing it from a floppy disk onto our brand new Packard Bell.
+
+- At 8, my parents bought me a Sony Mavica MVC-FD71 digital camera after I stole their SLR one too many times. It could fit 10 images to a floppy disk at a 0.3MP resolution. I still have it and it still works. I've been taking photographs ever since, now with a Nikon D750, D800, and occasionally with a Mamiya 6II. 
+
+- At 10, I built my first website with Microsoft FrontPage. It was terrible.
+
+- I was 11 when I built my first [Tesla Coil](https://en.wikipedia.org/wiki/Tesla_coil) (without the permission of my parents). Over the next few years, I built several more including one of the first audio modulated coils and one of the first DRSSTCs. 
+
+- When I was 12, I set the all-time high record at my local laser tag facility by reverse engineering the charging station and weapon protocols with a photo-resistor, micro-cassette recorder, and a lot of patience. I was unstoppable.
+
+- At 13, I went to space camp and fell in love. I went back two more times and promised myself that I'd work in space. I've since worked on three generations of satellites.
+
+- At 14, I was almost expelled for finding a backdoor into my high school's file server and telling everyone but the faculty members about it. Later that year, I figured out how to turn off the internet firewall by editing system registry keys and later anonymously shared my work. 
+
+- At 16, I participated in a foreign exchange program in Dortmund, Germany. Since then, I've gone back almost every year.
+
+- 14 - 17, I played a lot of video games. My favorites included Counter Strike Source, Command and Conquer 3, Halo 2, and Age of Empires 3.
+
+- At 18, In the summer before college, my friends and I started playing <a href="https://en.wikipedia.org/wiki/Quidditch_(sport)">Muggle Quidditch</a>. We went on to start over 8 teams in the [International Quidditch Association](https://en.wikipedia.org/wiki/International_Quidditch_Association) including the [Buffalo Quidditch Society](https://www.facebook.com/buffaloquidditch/). At our height, we were ranked third in the IQA. Although I don't play anymore, you can still see pictures of me holding a broom while wearing a chess camp t-shirt on facebook. 
+
+- At 19, I took my first graduate course and published my first paper.
+
+- At 20, I coauthored a grant to build a satellite and managed a 60+ person team through the end of undergrad. You can read more about that [here](https://ubnl.space/glados/).
+
+You can ask me in person for stories that I'm afraid to share with the internet. 
+<br><br>
+#### I like 
+- Skiing
+- The sea
+- Space 
+- Summer 
+- [Books](https://www.goodreads.com/mdangelo)
+- Colored pencils 
+- NPR podcasts
+- Obscure indie music
+- Good design 
+- Photography 
+
+#### Travel / Geography
+
+- I am from originally from Buffalo, New York. I have since lived in 
+Palo Alto, Mountain View, San Francisco, Seattle, and New York.
+
+- I've been to ~ 50 countries, some of which I have forgotten, and many of which I would like to revisit. 
+
+- In 2016, I visited: Canada, Ethiopia, Austria, Germany, Belgium, Ireland, Northern Ireland, Italy, Romania, Sweden, Norway, Svalbard, Panama, Costa Rica, Uganda, Japan, and the UAE, mostly in that order. 
+
+- In 2017, I plan to visit: Canada, Japan, China, Nepal, Indonesia, Germany, Denmark, Norway, Sweden, Russia, and Uganda.
+
+- I am an Oregon Trail II enthusiast.
+
+#### Fun Facts
+
+- I have a list of thousands of ideas, like creating matching bow ties for cats and humans. 
+- I almost always have a sketchbook with me. 
+- I can't locate every country on a map.
+- I added this page because so many people complained that my site was just a resume.
+
+#### I dream of
+- always finding inspiration.
+- enabling a brighter future.
+- doing better.
+- no one checking my commit history for early drafts of this branch. 

app/data/about.md

@@ -33,7 +33,7 @@ const data = [
   }, {
     label: 'Number of linter warnings',
     // `npm run lint | grep problems | tail -1 | awk '{print $2}'`
-    value: '6', // TODO Update from travis / circle
+    value: '0', // TODO Update from travis / circle
   }, {
     label: 'Open github issues',
     key: 'open_issues_count',
@@ -45,14 +45,15 @@ const data = [
     value: moment().format('MMMM Do YYYY'),
     link: 'https://github.com/mldangelo/mldangelo/commits',
   },
+  { /* find . | grep ".js" | grep -vE ".min.js|node_modules|.git|.json" |
+    xargs -I file cat file | wc -l */
+    label: 'Lines of Javascript powering this website',
+    value: '1811',
+    link: 'https://github.com/mldangelo/mldangelo/graphs/contributors',
+  },
 ];
 
 /* // TODO Add these fields later
-{
- label: 'number of lines of code powering this website',
- value: '9762',
- link: 'https://github.com/mldangelo/mldangelo/graphs/contributors',
-},
 {
  label: 'languages used',
  value: '6',

app/data/github.js

@@ -4,6 +4,10 @@ const data = [
     label: 'Michael D\'Angelo',
     index: true,
   },
+  {
+    link: '/about',
+    label: 'About',
+  },
   {
     link: '/resume',
     label: 'Resume',