initial pie chart

site/pages/index.hbs

@@ -3,6 +3,8 @@
     img: stock/lake.png
     copy: I build web things
     theme: blue
+
+  # VALUE * 360 / 100
 ---
 
 <section>
@@ -23,23 +25,29 @@
   </p>
 </section>
 
-<section>
-  <h2>General Proficiency's</h2>
-
-  <div class="fifty">
+<section class="fifty">
+  <div>
+    <h2>General Proficiency's</h2>
     <p>
       Well versed in many web development tool chains, my strengths
-      include Ruby, JavaScript, SCSS, SQL, and PHP.
+      include Ruby, CSS, HTML, JavaScript, and SQL.
     </p>
+  </div>
 
-    <div class="pie">
-      <ul>
-        <li>Ruby</li>
-        <li>JavaScript</li>
-        <li>CSS</li>
-        <li>SQL</li>
-        <li>PHP</li>
-      </ul>
+  <div class="pie">
+    <ul>
+      <li class="start-0 value-108 blue"></li>
+      <li class="start-108 value-90 orange"></li>
+      <li class="start-198 value-36 red"></li>
+      <li class="start-234 value-54 dark-blue"></li>
+      <li class="start-288 value-72 yellow"></li>
+    </ul>
+    <div class="key">
+      <div class="blue"><span>30%</span><span>Ruby</span></div>
+      <div class="orange"><span>25%</span><span>CSS</span></div>
+      <div class="red"><span>10%</span><span>HTML</span></div>
+      <div class="dark-blue"><span>15%</span><span>JavaScript</span></div>
+      <div class="yellow"><span>20%</span><span>SQL</span></div>
     </div>
   </div>
 </section>