Merge pull request #3 from benburwell/update-projects

Update the Projects page to have a cleaner look

4 files changed, 82 insertions, 62 deletions

diff --git a/_data/projects.yml b/_data/projects.yml
index 8ac84fd..5c0398c 100644
--- a/_data/projects.yml
+++ b/_data/projects.yml
@@ -1,54 +1,54 @@
-- name: BergEMS.org
-  description: An EMS agency management web application for tracking member records, scheduling shifts, and more.
-  tech: Node.js, Express, MongoDB, Heroku, jQuery
-  github: benburwell/MCEMS-Site
-  live: https://www.bergems.org/
-
-- name: actiondoc
-  description: A documentation generator for the Actionhero.js API framework.
-  tech: Angular
-  github: benburwell/actiondoc
-  live: http://actiondoc.benburwell.com/
-
-- name: Simple Weather App
-  description: A simple demo web app showcasing the HTML5 geolocation API
-  tech: HTML5 Geolocation API, JavaScript, OpenWeatherMap API
-  github: benburwell/weather
-  live: http://weather.benburwell.com/
-
-- name: Forest Printer Management System API
-  description: In Software Engineering class, my team created a printer monitoring platform called Forest to gather and display statistics about network printers.
-  tech: Node.js, Actionhero.js, Heroku
-  github: printerSystemCSI210/api-server
-  live: /posts/forest-printer-management/
-
-- name: Article Management Interface
-  description: A web application I created for my high school newspaper to help manage the publishing workflow.
-  tech: HTML, PHP, JavaScript, CSS, MySQL
-  github: benburwell/ami
-
-- name: MPX
-  description: A small operating system developed for class. After booting into DOS, running this program overwrote the system interrupt vector table to transfer control to the program. I/O happened.
-  tech: C, DOS, dumb terminals, line printers, and more!
-  github: benburwell/mpx
-
-- name: Music Analysis Project
-  description: For an independent study project, we created an npm package, API server, and browser extensions to analyze the difficulty of music posted to Musescore.org.
-  tech: Node.js, Heroku, Actionhero.js, Google Chrome extensions, Firefox extensions, Safari extensions, npm
-  github: csi970
-
-- name: Helvetica
-  description: A browser extension for Google Chrome and Safari that transforms all text to Helvetica.
-  tech: Google Chrome extension framework, Safari extension framework
-  github: benburwell/Helvetica
-
-- name: Resume
-  description: My resume, created in LaTeX.
-  tech: LaTeX
-  github: benburwell/resume
-  live: /assets/pdf/Ben_Burwell_Resume.pdf
-
-- name: MDEngine
-  description: A stupidly simple Markdown to HTML framework for Apache
-  tech: Apache web server, PHP, HTML, CSS
-  github: benburwell/MDEngine
+- name: "BergEMS.org"
+  description: "An EMS agency management web application for tracking member records, scheduling shifts, and more."
+  tech: "Node.js, Express, MongoDB, Heroku, jQuery"
+  github: "benburwell/MCEMS-Site"
+  live: "https://www.bergems.org/"
+
+- name: "actiondoc"
+  description: "Actionhero is a great API framework for Node.js that lets you automatically document your API in JSON. Actiondoc takes that one step further and provides a beautiful interface for your API's documentation."
+  tech: "Angular"
+  github: "benburwell/actiondoc"
+  live: "http://actiondoc.benburwell.com/"
+
+- name: "Weather web app"
+  description: "A simple web app showcasing the HTML5 geolocation API. Pulls current weather conditions for your location from OpenWeatherMap."
+  tech: "HTML5 Geolocation API"
+  github: "benburwell/weather"
+  live: "http://weather.benburwell.com/"
+
+- name: "Printer Management System"
+  description: "In Software Engineering class, my team created a printer monitoring platform called Forest to gather and display statistics about network printers. See my blog post about it for more details!"
+  tech: "Ruby, PHP, Node.js, MongoDB"
+  github: "printerSystemCSI210"
+  live: "/posts/forest-printer-management/"
+
+- name: "Article Management Interface"
+  description: "A web application I created for my high school newspaper to help manage the publishing workflow. Routes articles through the editorial cycle and tracks them from first upload by author through publication."
+  tech: "PHP, JavaScript, CSS, MySQL"
+  github: "benburwell/ami"
+
+- name: "MPX"
+  description: "A small operating system developed for class. After booting into DOS, running this program overwrote the system interrupt vector table to transfer control to the program. I/O happened. For more details, check out the technical manual in the GitHub repo."
+  tech: "C, DOS, dumb terminals, line printers, and more!"
+  github: "benburwell/mpx"
+
+- name: "Music Analysis Project"
+  description: "For an independent study project, we created an npm package, API server using Actionhero.js, and Chrome, Firefox, and Safari browser extensions to analyze the difficulty of music posted to Musescore.org."
+  tech: "Node.js, Heroku, browser extensions"
+  github: "csi970"
+
+- name: "Helvetica"
+  description: "My first forray into browser extensions was this simple one for Google Chrome and Safari. It transforms all text to Helvetica. Hasn't been touched in a while."
+  tech: "browser extension APIs"
+  github: "benburwell/Helvetica"
+
+- name: "Resume"
+  description: "Yup, that's right: I made my reume in LaTeX."
+  tech: "LaTeX"
+  github: "benburwell/resume"
+  live: "/assets/pdf/Ben_Burwell_Resume.pdf"
+
+- name: "MDEngine"
+  description: "A stupidly simple Markdown to HTML framework for Apache. You can even choose a theme!"
+  tech: "Apache web server, PHP, HTML, CSS"
+  github: "benburwell/MDEngine"
diff --git a/_sass/_typography.scss b/_sass/_typography.scss
index 873b9c9..aa0e6b2 100644
--- a/_sass/_typography.scss
+++ b/_sass/_typography.scss
@@ -21,6 +21,11 @@ h2 {
   margin-bottom: 0.5rem;
 }
 
+h1 small {
+  font-size: 1rem;
+  padding-left: 1rem;
+}
+
 pre, code, kbd {
   font-size: 0.9rem;
   color: $gray;
diff --git a/_sass/_utility.scss b/_sass/_utility.scss
index 67a55ad..6c0c796 100644
--- a/_sass/_utility.scss
+++ b/_sass/_utility.scss
@@ -18,6 +18,14 @@
   font-family: $sans;
 }
 
+.monospace {
+  font-family: $monospace;
+}
+
+.light-gray {
+  color: $light-gray;
+}
+
 .compressed-list li {
   margin: 0;
 }
diff --git a/projects/index.html b/projects/index.html
index 49365a9..a3d4f18 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -6,13 +6,20 @@ description: Projects I’ve done.
 
 {% for project in site.data.projects %}
 
-<h1>{{ project.name }} {% if project.live %}<a style="font-size:1rem;" title="{{ project.title }}" href="{{ project.live }}" target="_blank"><i class="fa fa-external-link"></i></a>{% endif %}</h1>
+  <h1>
+    {% if project.live %}
+      <a href="{{ project.live }}" target="_blank">{{ project.name }}</a>
+    {% else %}
+      {{ project.name }}
+    {% endif %}
+    <small class="light-gray monospace">{{ project.tech }}</small>
+  </h1>
+
+  <p>
+    {{ project.description }}
+    {% if project.github %}
+      <a style="display:inline-block;margin-left:1rem;" href="https://github.com/{{ project.github }}"><i class="fa fa-github"></i> Read the code</a>
+    {% endif %}
+  </p>
 
-<ul class="compressed-list">
-  <li>{{ project.description }}</li>
-  <li>{{ project.tech }}</li>
-  {% if project.github %}
-  <li><a href="https://github.com/{{ project.github }}"><i class="fa fa-github"></i> {{ project.github }}</a></li>
-  {% endif %}
-</ul>
 {% endfor %}