From a7ec08196e1778f3b0d2ea794583a5f58d21cef3 Mon Sep 17 00:00:00 2001
From: Mark Moser <mark.moser@perficient.com>
Date: Mon, 21 Aug 2017 15:53:00 -0500
Subject: [PATCH] more chart info

---
 site/pages/index.hbs | 68 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 53 insertions(+), 15 deletions(-)

diff --git a/site/pages/index.hbs b/site/pages/index.hbs
index 78428fa..ac9a182 100644
--- a/site/pages/index.hbs
+++ b/site/pages/index.hbs
@@ -25,6 +25,8 @@
   </p>
 </section>
 
+
+
 <section class="fifty">
   <div>
     <h2>General Proficiency's</h2>
@@ -52,19 +54,55 @@
   </div>
 </section>
 
-<section>
-  <h2>Back-end Proficiency's</h2>
-  <ul>
-    <li>5/5 HTML Prototyping</li>
-    <li>5/5 Ruby on Rails</li>
-    <li>4/5 Linux Server Administration</li>
-    <li>4/5 Front-End Dev Tool chains</li>
-    <li>4/5 PHP Development</li>
-    <li>4/5 Information Architecture</li>
-    <li>3/5 UX Consulting</li>
-    <li>5/5 CSS (and SCSS)</li>
-    <li>4/5 JavaScript</li>
-    <li>5/5 SQL</li>
-    <li>5/5 Ruby</li>
-  </ul>
+
+
+
+<section class="fifty">
+  <div>
+    <h2>Back-End Proficiency's</h2>
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  </div>
+  <div class="pie">
+    <ul>
+      <li class="start-0 value-90 red"></li>
+      <li class="start-90 value-90 orange"></li>
+      <li class="start-180 value-36 blue"></li>
+      <li class="start-216 value-36 dark-grey"></li>
+      <li class="start-252 value-36 yellow"></li>
+      <li class="start-288 value-72 dark-blue"></li>
+    </ul>
+    <div class="key">
+      <div class="red"><span>25%</span><span>Ruby</span></div>
+      <div class="orange"><span>25%</span><span>Ruby on Rails</span></div>
+      <div class="blue"><span>10%</span><span>Linux Server Administration</span></div>
+      <div class="dark-grey"><span>10%</span><span>SQL</span></div>
+      <div class="yellow"><span>10%</span><span>PHP Development</span></div>
+      <div class="dark-blue"><span>20%</span><span>Architecture</span></div>
+    </div>
+  </div>
+</section>
+
+
+
+<section class="fifty">
+  <div>
+    <h2>Front-End Proficiency's</h2>
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  </div>
+  <div class="pie">
+    <ul>
+      <li class="start-0 value-54 blue"></li>
+      <li class="start-54 value-18 orange"></li>
+      <li class="start-72 value-126 red"></li>
+      <li class="start-198 value-72 dark-blue"></li>
+      <li class="start-270 value-90 yellow"></li>
+    </ul>
+    <div class="key">
+      <div class="blue"><span>15%</span><span>Front-End Dev Tool chains</span></div>
+      <div class="orange"><span>5%</span><span>UX Consulting</span></div>
+      <div class="red"><span>35%</span><span>CSS (and SCSS)</span></div>
+      <div class="dark-blue"><span>20%</span><span>JavaScript</span></div>
+      <div class="yellow"><span>25%</span><span>HTML Prototyping</span></div>
+    </div>
+  </div>
 </section>