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.jsapp/components/Stats.js renamed to app/components/Stats/Site.js

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