<commit_before>---
published: false
layout: project
title: SoFLo Music School
short-title: SoFLo
date: 2015-04-22
categories: projects
image: /images/kamrankrackers.png
---

This project was more of a portfolio building excercise. I built it from scratch during my spare time over a few days. It's for the place where I learned to play bass.

###Technologies
This website was built, templated, and compiled using [HarpJS](https://harpjs.com/). I think Harp is a pretty rad platform and helps you push out fast and solid static sites pretty quickly. I wanted to try something new so I decided to use a templating HTML preprocessor called [Jade](http://jade-lang.com/). It seemed like a good idea (even though I've never liked indentation syntax) and the project went pretty smoothly. While a little easier and sometimes faster, that indentation syntax can get really ugly really fast. Next time I'll probably use [EJS](http://www.embeddedjs.com/) since it's more like regular HTML.

For styling I used SCSS, like I normally do. Harp makes that really easy since its dev server automatically compiles it for you. For a boilerplate to get things rolling quickly, I used [Bootstrap](http://getbootstrap.com/). It seems like everyone uses it so I might as well learn how to use it too. I called it using a CDN because I didn't really feel like installing it. I've been told that it's not always great to do that, but hey, [Google says it's faster](https://developers.google.com/speed/libraries/) so whatever.

###<commit_msg>Updated 2015-04-22-soflo.md<commit_after>---
published: false
layout: project
title: SoFLo Music School
"short-title": SoFLo
date: {}
categories: projects
image: /images/kamrankrackers.png
---

This project was more of a portfolio building excercise. I built it from scratch during my spare time over a few days. It's for the place where I learned to play bass.

###Technologies
This website was built, templated, and compiled using [HarpJS](https://harpjs.com/). I think Harp is a pretty rad platform and helps you push out fast and solid static sites pretty quickly. I wanted to try something new so I decided to use a templating HTML preprocessor called [Jade](http://jade-lang.com/). It seemed like a good idea (even though I've never liked indentation syntax) and the project went pretty smoothly. While a little easier and sometimes faster, that indentation syntax can get really ugly really fast. Next time I'll probably use [EJS](http://www.embeddedjs.com/) since it's more like regular HTML.

For styling I used SCSS, like I normally do. Harp makes that really easy since its dev server automatically compiles it for you. For a boilerplate to get things rolling quickly, I used [Bootstrap](http://getbootstrap.com/). It seems like everyone uses it so I might as well learn how to use it too. I called it using a CDN because I didn't really feel like installing it. I've been told that it's not always great to do that, but hey, [Google says it's faster](https://developers.google.com/speed/libraries/) so whatever.

###Design
The original website has lots of photography. Good, non-stock photography is always good for websites, especially if they're implemented into the design well. I figured it was important, so I tried to add a lot in what I thought was the right ways. A lot of the images might seem a little low resolution, but I worked with what was available to me. 

This site is a little more flat than my portfolio website. I'm not sure why. I guesss I just thought flat was better suited for this project? Whatever the reason, it's flat with some raised accents, like images and buttons. I thought it looked nice at least. 

###Colors
As for color, I thought a simple slightly off white would do nicely for the background. To add a splash of color I tried to got with a light blue theme. The variation of light blue is from the [Material Design Spec](http://www.google.com/design/spec/style/color.html). 

<table class="kracker-colors">
  <thead>
    <tr>
      <th class="title">Primary Color</th>
      <!--<th class="title">Darker</th>-->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="lb-medium">#03A9F4</td>
      <td class="lb-darker">#0288D1</td>
    </tr>
  </tbody>
</table>
<style>
	.lb-medium { background-color: #03A9F4; }
    .lb-darker { background-color: #0288D1; }
</style>
{'fraction_non_alphanumeric': 0.08269983874683252, 'fraction_numerical': 0.00783229670582815, 'mean_word_length': 4.0488372093023255, 'pattern_counts': {'":': 1, '<': 24, '<?xml version=': 0, '>': 24, 'https://': 4, 'lorem ipsum': 0, 'www.': 3, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6169691', 'n_tokens_mistral': 1219, 'n_tokens_neox': 1165, 'n_words': 636}