Let's git-ify this!

.gitignore

@@ -0,0 +1,61 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+env/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib64/
+parts/
+sdist/
+var/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+coverage/
+.tox/
+.coverage
+.coverage.*
+.cache
+coverage.xml
+*,cover
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+collected-static/
+node_modules/
+static/build
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+private/

README.md

@@ -0,0 +1 @@
+# My Website

build

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+set -e
+
+pyvenv-3.4 env
+env/bin/pip install -r requirements.txt --upgrade
+
+npm install
+npm run build
+
+env/bin/python manage.py collectstatic --noinput

etc/environments/deployment/env

@@ -0,0 +1,2 @@
+DEBUG=true
+EMAIL_BACKEND=django.core.mail.backends.smtp.EmailBackend

etc/environments/deployment/procfile

@@ -0,0 +1 @@
+web: waitress-serve --port $PORT project.wsgi:application

etc/environments/development/env

@@ -0,0 +1,3 @@
+DEBUG=true
+DATABASE_URL=postgres://localhost/theorangeonenet
+EMAIL_BACKEND=django.core.mail.backends.console.EmailBackend

etc/environments/development/procfile

@@ -0,0 +1,2 @@
+web: manage.py runserver 0.0.0.0:$PORT
+watcher: npm run watch

manage.py

@@ -0,0 +1,10 @@
+#!/usr/bin/env python
+import os
+import sys
+
+if __name__ == "__main__":
+    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "project.settings")
+
+    from django.core.management import execute_from_command_line
+
+    execute_from_command_line(sys.argv)

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "TheOrangeOne-Site",
+  "version": "0.0.1",
+  "description": "TheOrangeOne.net site",
+  "main": "app.js",
+  "scripts": {
+    "lint": "echo 'Nothing yet.';",
+    "build-js": "bash scripts/build-js.sh",
+    "create-build-dirs": "mkdir -p static/build/js static/build/fonts static/build/css static/build/img private",
+    "build": "npm run create-build-dirs && npm run build-fonts && npm run build-images && npm run build-js && npm run build-less",
+    "build-less": "lessc --silent static/src/less/style.less static/build/css/style.css && cleancss -d --s0 -o static/build/css/style.css static/build/css/style.css",
+    "build-fonts": "cp -R node_modules/bootstrap/dist/fonts static/build/ && cp -R node_modules/ionicons-pre/fonts static/build/ ",
+    "build-images": "cp -r static/src/img/* static/build/img/",
+    "watch-images": "watch 'npm run build-images' static/src/img/",
+    "watch-less": "watch 'npm run build-less' static/src/less/",
+    "watch": "npm run watch-less & npm run watch-images",
+    "clean": "rm -rf static/build collected-static/ node_modules/ env/ private"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://bitbucket.org/TheOrangeOne/"
+  },
+  "dependencies": {
+    "bootstrap": "^3.3.5",
+    "jquery": "^2.1.4",
+    "less": "^2.5.1",
+    "markdown": "^0.5.0",
+    "react": "^0.13.3",
+    "react-bootstrap": "^0.25.1",
+    "skrollr": "^0.6.26"
+  },
+  "devDependencies": {
+    "browserify": "^11.0.1",
+    "clean-css": "^3.4.1",
+    "eslint": "^1.5.0",
+    "eslint-plugin-react": "^3.4.2",
+    "ionicons-pre": "^1.0.0-pre",
+    "react-tools": "^0.13.2",
+    "reactify": "^1.1.1",
+    "uglify-js": "^2.4.24",
+    "watch": "^0.16.0"
+  }
+}

project/college/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

project/college/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

project/college/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

project/college/urls.py

@@ -0,0 +1,7 @@
+from django.conf.urls import url
+from .views import StudentServerView
+
+
+urlpatterns = [
+    url(r'^student-server', StudentServerView.as_view(), name='student-server')
+]

project/college/views.py

@@ -0,0 +1,5 @@
+from django.views.generic import TemplateView
+from project.common.views import CustomHeaderBG
+
+class StudentServerView(CustomHeaderBG.Template):
+    template_name = 'college/student-server.html'

project/common/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

project/common/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

project/common/views.py

@@ -0,0 +1,13 @@
+from django.views.generic import TemplateView
+
+
+class CustomHeaderBG():
+    """Allow custom header background"""
+
+    class Template(TemplateView):
+        header_BG = ""
+        
+        def get_context_data(self, **kwargs):
+            context = super().get_context_data(**kwargs)
+            context['header_BG'] = self.header_BG
+            return context

project/media/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

project/media/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

project/media/urls.py

@@ -0,0 +1,8 @@
+from django.conf.urls import url
+from .views import GalleryView, YoutubeView
+
+
+urlpatterns = [
+    url(r'^gallery', GalleryView.as_view(), name='gallery'),
+    url(r'^youtube', YoutubeView.as_view(), name='youtube')
+]

project/media/views.py

@@ -0,0 +1,10 @@
+from django.views.generic import TemplateView
+from project.common.views import CustomHeaderBG
+
+
+class YoutubeView(CustomHeaderBG.Template):
+    template_name = "media/youtube.html"
+
+
+class GalleryView(TemplateView):
+    template_name = "media/gallery.html"

project/pages/tests.py

@@ -0,0 +1,3 @@
+# from django.test import TestCase
+
+# Create your tests here.

project/pages/urls.py

@@ -0,0 +1,11 @@
+from django.conf.urls import url
+from . import views
+
+
+urlpatterns = [
+    url(r'^about/website/$', views.AboutWebsiteView.as_view(), name='about-website'),
+    url(r'^about/$', views.AboutIndexView.as_view(), name='about'),
+    url(r'^no-js/$', views.NoJavascriptView.as_view(), name='no-js'),
+    url(r'^404/$', views.Custom404View.as_view(), name='404'),
+    url(r'^$', views.IndexView.as_view(), name='index')
+]

project/pages/views.py

@@ -0,0 +1,34 @@
+from django.views.generic import TemplateView
+from project.common.views import CustomHeaderBG
+from django.contrib.staticfiles.templatetags.staticfiles import static
+
+
+class IndexView(TemplateView):
+    template_name = 'index.html'
+
+
+class NoJavascriptView(TemplateView):
+    template_name = 'core/no-js.html'
+
+
+class Custom404View(CustomHeaderBG.Template):
+    template_name = 'core/404.html'
+    header_BG = static('img/ninjas.png')
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context['no_footer'] = True
+        return context
+
+    def get(self, request, *args, **kwargs):
+        context = self.get_context_data(**kwargs)
+        return self.render_to_response(context, status=404)
+
+
+class AboutWebsiteView(CustomHeaderBG.Template):
+    template_name = 'about/website.html'
+    header_BG = ''
+
+
+class AboutIndexView(TemplateView):
+    template_name = 'about/index.html'

project/projects/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

project/projects/urls.py

@@ -0,0 +1,16 @@
+from django.conf.urls import url
+from . import views
+
+urlpatterns = [
+    # Project URLs
+    url(r'^attack-on-blocks', views.AttackOnBlocksView.as_view(), name="attack-on-blocks"),
+    url(r'^bsod-enabler', views.BSODEnablerView.as_view(), name='bsod-enabler'),
+    url(r'^hipchat-emoticons-for-all', views.HipChatEmoticonsForAllView.as_view(), name='hipchat-emoticons'),
+    url(r'^pithos', views.PithosView.as_view(), name='pithos'),
+
+    # Code URLs
+    url(r'^morse-code-decoder', views.MorseCodeDecoderView.as_view(), name='morse-code-decoder'),
+    url(r'^wiki-game-solver', views.WikiGameSolverView.as_view(), name='wiki-game-solver'),
+
+    url(r'^', views.AllProjectsView.as_view(), name="index")
+]

project/projects/views.py

@@ -0,0 +1,35 @@
+from django.views.generic import TemplateView
+from project.common.views import CustomHeaderBG
+
+
+# Project Views
+class AllProjectsView(TemplateView):
+    template_name = "projects/all_projects.html"
+
+
+class AttackOnBlocksView(CustomHeaderBG.Template):
+    template_name = "college/attack-on-blocks.html"
+
+
+class BSODEnablerView(CustomHeaderBG.Template):
+    template_name = 'projects/BSOD-Enabler.html'
+    header_BG = 'http://cdn9.howtogeek.com/wp-content/uploads/2013/05/xwindows-8-blue-screen-error.png.pagespeed.ic.yOWUS_rYGn.png'
+
+
+class HipChatEmoticonsForAllView(CustomHeaderBG.Template):
+    template_name = 'projects/hipchat-emoticons-for-all.html'
+    header_BG = "https://info.seibert-media.net/plugins/servlet/pptslide?attachment=HipChat+Server+Sales+Pitch+Final+PPT.pptx&attachmentId=7536966&attachmentVer=1&pageId=3179011&slide=0"
+
+
+class PithosView(CustomHeaderBG.Template):
+    template_name = 'projects/pithos.html'
+
+
+# Code Views
+class MorseCodeDecoderView(CustomHeaderBG.Template):
+    template_name = 'projects/morse-code-decoder.html'
+
+
+class WikiGameSolverView(CustomHeaderBG.Template):
+    template_name = 'projects/wiki-game-solver.html'
+    header_BG = "http://is1.mzstatic.com/image/pf/us/r30/Purple/v4/a3/3f/31/a33f31dd-3ace-ffe4-5531-89d3f3a1106f/mzl.ihqwkbih.png"

project/robotics/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

project/robotics/urls.py

@@ -0,0 +1,10 @@
+from django.conf.urls import url
+from .views import Index2015View, Index2014View, RoboticsIndexView, Robot2015View
+
+
+urlpatterns = [
+    url(r'^$', RoboticsIndexView.as_view(), name='index' ),
+    url(r'^2015', Index2015View.as_view(), name='2015-index'),
+    url(r'^2015/robot', Robot2015View.as_view(), name='2015-robot'),
+    url(r'^2014', Index2014View.as_view(), name='2014-index')
+]

project/robotics/views.py

@@ -0,0 +1,22 @@
+from django.views.generic import TemplateView
+from project.common.views import CustomHeaderBG
+
+
+class RoboticsIndexView(TemplateView):
+    template_name = 'robotics/index.html'
+
+# 2015
+class Index2015View(CustomHeaderBG.Template):
+    template_name = 'robotics/2015-index.html'
+    header_BG = "https://farm8.staticflickr.com/7711/17122633430_7d1bde923a_k.jpg"
+
+
+class Robot2015View(CustomHeaderBG.Template):
+    template_name = 'robotics/2015-robot.html'
+    header_BG = ""
+
+
+# 2014
+class Index2014View(CustomHeaderBG.Template):
+    template_name = 'robotics/2014-index.html'
+    header_BG = "nothing"

project/settings.py

@@ -0,0 +1,108 @@
+"""
+Django settings for project.
+
+Generated by 'django-admin startproject' using Django 1.8.3.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/1.8/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/1.8/ref/settings/
+"""
+# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
+import dj_database_url
+# import logging
+import os
+import sys
+
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/1.8/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = 'q&^k#n_lkd5l9&g^k7$q1rhj_=%9yqy-)ln78ik414-bcowedy'
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = ['too.ctf.sh', 'theorangeone.net']
+
+# Application definition
+INSTALLED_APPS = (
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+
+    'rest_framework',
+    'bootstrapform',
+
+    'project.pages',
+    'project.common',
+    'project.projects',
+    'project.robotics',
+    'project.setup',
+    'project.media',
+    'project.college'
+)
+
+MIDDLEWARE_CLASSES = (
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+    'django.middleware.security.SecurityMiddleware',
+)
+
+ROOT_URLCONF = 'project.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [os.path.join(BASE_DIR, 'templates')],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'project.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/1.8/ref/settings/#databases
+DATABASES = {
+    'default': dj_database_url.config(default=os.environ['DATABASE_URL'])
+}
+
+EMAIL_BACKEND = os.environ['EMAIL_BACKEND']
+
+# Internationalization
+# https://docs.djangoproject.com/en/1.8/topics/i18n/
+LANGUAGE_CODE = 'en-gb'
+TIME_ZONE = 'UTC'
+USE_I18N = True
+USE_L10N = True
+USE_TZ = True
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/1.8/howto/static-files/
+STATIC_URL = '/static/'
+STATIC_ROOT = os.path.join(BASE_DIR, 'collected-static')
+STATICFILES_DIRS = (
+    os.path.join(BASE_DIR, 'static', 'build'),
+)
+STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'

project/setup/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

project/setup/models.py

@@ -0,0 +1,27 @@
+from django.db import models
+import uuid
+
+
+class Device(models.Model):
+    device_id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
+    device_name = models.CharField(max_length=50, blank=False, null=True)
+    friendly_name = models.CharField(max_length=50, blank=False, null=True, unique=True)
+    model_name = models.CharField(max_length=50, blank=False, null=True, unique=True)
+    description = models.TextField(blank=True, null=True)
+    computer = models.ForeignKey('setup.Computer')
+
+
+
+class Computer(models.Model):
+    computer_id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
+    CPU = models.TextField(max_length=30, blank=False, null=True, verbose_name="Processor")
+    GPU = models.TextField(max_length=40, blank=True, null=True, verbose_name="Graphics Card")
+    RAM = models.IntegerField(blank=False, null=True)
+
+
+
+class Peripheral(models.Model):
+    peripheral_id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
+    name = models.CharField(max_length=40, blank=False, null=True)
+    model_name = models.CharField(max_length=100, blank=False, null=True)
+    device = models.ForeignKey('setup.Device')

project/setup/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

project/setup/urls.py

@@ -0,0 +1,7 @@
+from django.conf.urls import url
+from . import views
+
+urlpatterns = [
+    url(r'^desk', views.DeskView.as_view(), name="desk"),
+    url(r'^', views.SetupIndexView.as_view(), name="index")
+]

project/setup/views.py

@@ -0,0 +1,11 @@
+from django.views.generic import TemplateView
+from project.common.views import CustomHeaderBG
+
+
+class SetupIndexView(TemplateView):
+    template_name = "setup/index.html"
+
+
+class DeskView(CustomHeaderBG.Template):
+    template_name = "setup/my-rig.html"
+    header_BG = "https://c1.staticflickr.com/1/557/18312934624_b51a541594_h.jpg"

project/urls.py

@@ -0,0 +1,15 @@
+from django.conf.urls import include, url
+from django.contrib import admin
+from project.pages.views import Custom404View
+
+urlpatterns = [
+    url(r'^site-admin/', include(admin.site.urls)),
+    url(r'^student-robotics/', include('project.robotics.urls', namespace='robotics')),
+    url(r'^projects/', include('project.projects.urls', namespace='projects')),
+    url(r'^media/', include('project.media.urls', namespace='media')),
+    url(r'^setup/', include('project.setup.urls', namespace='setup')),
+    url(r'^college/', include('project.college.urls', namespace='college')),
+    url(r'', include('project.pages.urls', namespace='pages'))
+]
+
+handler404 = Custom404View

project/wsgi.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for twm project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/1.8/howto/deployment/wsgi/
+"""
+import os
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "project.settings")
+
+from django.core.wsgi import get_wsgi_application
+from whitenoise.django import DjangoWhiteNoise
+
+application = get_wsgi_application()
+application = DjangoWhiteNoise(application)

requirements.txt

@@ -0,0 +1,14 @@
+coverage==3.7.1
+Django==1.8.3
+dj-database-url==0.3.0
+django-bootstrap-form==3.2
+djangorestframework==3.2.0
+djorm-ext-pgfulltext==0.10
+flake8==2.4.1
+pep8==1.5.7
+psycopg2==2.6.1
+pycrypto==2.6.1
+pyflakes==0.8.1
+six==1.9.0
+waitress==0.8.9
+whitenoise==2.0.2

runtests

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+set -e
+
+export PATH=env/bin:${PATH}
+
+coverage run --source=project --omit='*/wsgi.py,*/settings.py,*/migrations/*.py,*__init__*,*/tests.py' manage.py test $@
+flake8 project --ignore=E128,E501 --exclude="migrations,settings,*/wsgi.py"
+coverage report

scripts/build-js.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/bash
+
+set -e
+
+cp node_modules/bootstrap/dist/js/bootstrap.js static/src/js/lib/
+cp node_modules/skrollr/src/skrollr.js static/src/js/lib/
+
+echo ">> Building Libraries..."
+uglifyjs node_modules/jquery/dist/jquery.js --compress --screw-ie8 --define --stats --keep-fnames -o static/build/js/jquery.js
+uglifyjs node_modules/markdown/lib/markdown.js --compress --screw-ie8 --define --stats --keep-fnames -o static/build/js/markdown.js
+uglifyjs static/src/js/lib/* --compress --screw-ie8 --define --stats --keep-fnames -o static/build/js/libs.js
+
+echo ">> Building Application JS..."
+browserify -t reactify static/src/js/app.js -o static/build/js/app.js
+# uglifyjs static/build/js/app.js --compress --screw-ie8 --define --stats --keep-fnames -o static/build/js/app.js
+
+echo ">> Building Global Utilities..."
+uglifyjs static/src/js/utils.js --compress --screw-ie8 --define --stats --keep-fnames -o static/build/js/utils.js

scripts/get_private_data.sh

@@ -0,0 +1,14 @@
+#!/usr/bin/bash
+
+set -e
+
+echo ">> Removing old Private data..."
+rm -rf private/*
+mkdir private/
+cd private/
+
+echo ">> Cloning Private Repo..."
+git clone git@bitbucket.org:TheOrangeOne/theorangeone.net-site-private-data.git
+
+
+echo ">> That's it for now..."

static/src/js/app.js

@@ -0,0 +1,14 @@
+var React = require('react');
+var indexCarousel = require('./components/indexCarousel.js');
+
+require('./events.js');
+
+
+if ($('#index-carousel-container').length == 1) {
+    React.render(indexCarousel, $("#index-carousel-container")[0]);
+}
+
+$(window).load(function(){
+    $(window).trigger('scroll').trigger('resize');
+    var s = skrollr.init();
+});

static/src/js/components/indexCarousel.js

@@ -0,0 +1,27 @@
+var React = require('react');
+var Bootstrap = require('react-bootstrap');
+
+var Carousel = Bootstrap.Carousel;
+var CarouselItem = Bootstrap.CarouselItem;
+
+const indexCarousel = (
+  <Carousel>
+    <CarouselItem>
+      <div className='carousel-image'></div>
+      <div className='carousel-caption'>
+        <h3>Setup</h3>
+        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+      </div>
+    </CarouselItem>
+
+    <CarouselItem>
+      <div className='carousel-image'></div>
+      <div className='carousel-caption'>
+        <h3>Student Robotics</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </div>
+    </CarouselItem>
+  </Carousel>
+);
+
+module.exports = indexCarousel;

static/src/js/events.js

@@ -0,0 +1,16 @@
+$(window).scroll(function() {
+    position_navbar();
+});
+
+
+$(window).resize(function() {
+    set_page_sizes();
+    space_navbar();
+});
+
+
+$("#page-down").click(function() {
+    $('html, body').animate({
+        scrollTop: $("#navbar-anchor").offset().top
+    }, 750);
+});

static/src/js/utils.js

@@ -0,0 +1,83 @@
+var is_navbar_attached = false;
+function position_navbar() {
+    if ($(window).width() < 862) {  // @screen-sm
+        $('.navbar-icon').removeClass('ion-ios-arrow-up').addClass('ion-ios-arrow-down');
+        return;
+    }
+    if ($(window).scrollTop() > $('#navbar-anchor').offset().top) {
+        if(!is_navbar_attached) {attach_navbar(); is_navbar_attached = true;}
+    } else if (is_navbar_attached) {
+        detach_navbar();
+        is_navbar_attached = false;
+    }
+    $('.dropdown-menu').each(function(){
+        direction = ($(this).height() + 10 < $('nav').offset().top - $(window).scrollTop()) ? 'up' : 'down';
+        flip_dropdowns($(this), direction);
+    });
+}
+
+
+function detach_navbar() {
+    $('#navbar-container').removeClass('stick-top').addClass('align');
+    $('.dropdown-menu').removeClass('dropdown').addClass('dropup');
+}
+
+
+function set_page_sizes() {
+    win_height = $(window).height();
+    win_width = $(window).width();
+    $('.page-height').each(function() {
+        $(this).height(win_height);
+    });
+    $('.page-width').each(function() {
+        $(this).width(win_width);
+    });
+}
+
+
+function attach_navbar() {
+    $('#navbar-container').removeClass('align').addClass('stick-top');
+    $('.dropdown-menu').removeClass('dropup').addClass('dropdown');
+}
+
+
+function flip_dropdowns(obj, direction) {
+    if (obj.hasClass('drop'+direction)){ return; }
+    reverse = direction == 'up' ? 'down' : 'up';
+    obj.removeClass('drop' + reverse).addClass('drop' + direction);
+    obj.prev().children().removeClass('ion-ios-arrow-' + reverse).addClass('ion-ios-arrow-' + direction);
+}
+
+
+function space_navbar() { //This really should be CSS!
+    if ($(window).width() < 862) {return;}  // @screen-sm
+    nav_width = $('#navigation').outerWidth(true);
+    full_width = $('nav > .container-fluid').outerWidth(true) - $('.home-button').outerWidth(true);
+    margin = (full_width - nav_width) / 2;
+    $('#navigation').css('margin-left', margin);
+}
+
+
+function checkDomain(url) {
+  if ( url.indexOf('//') === 0 ) { url = location.protocol + url; }
+  return url.toLowerCase().replace(/([a-z])?:\/\//,'$1').split('/')[0];
+}
+
+
+function isExternal(url) {
+  return ( ( url.indexOf(':') > -1 || url.indexOf('//') > -1 ) && checkDomain(location.href) !== checkDomain(url) );
+}
+
+
+function is_on_screen(elm) {
+    var vpH = $(window).height(), // Viewport Height
+        st = $(window).scrollTop(), // Scroll Top
+        y = $(elm).offset().top,
+        elementHeight = $(elm).height();
+    return ((y < (vpH + st)) && (y > (st - elementHeight)));
+}
+
+
+function navTo(url){
+    location.href=url;
+}

static/src/less/style.less

@@ -0,0 +1,379 @@
+@import "node_modules/bootstrap/less/bootstrap";
+@import "node_modules/bootstrap/less/theme";
+@import "node_modules/ionicons-pre/less/ionicons";
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700);
+@import "variables";
+
+/* @group mixins */
+
+.transition(@value) {
+    -webkit-transition: @value;
+    -moz-transition: @value;
+    -o-transition: @value;
+    -ms-transition: @value;
+    transition: @value;
+}
+
+.box-shadow(@value) {
+  -webkit-box-shadow: @value;
+  -moz-box-shadow: @value;
+  box-shadow: @value;
+}
+
+
+/* @end mixins */
+
+/* @group Global Transitions */
+
+.btn {
+  .transition(~"ease-in-out .2s background-color");
+}
+
+p > a {
+  .transition(~"ease-in-out .20s ease");
+  &:not(.no-line):not(.btn) {
+    text-decoration: none;
+    position:relative;
+
+    &::before {
+      content: ' ';
+      display: block;
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 1px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: @link-color;
+      .transition(~"ease-in-out .2s opacity, ease-in-out .2s background-color");
+    }
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      &::before {
+        opacity: 1;
+        background-color: @link-hover-color;
+      }
+    }
+  }
+}
+
+/* @end Global Transitions */
+
+/* @group Global Styles */
+
+html, body{
+  margin: 0;
+  padding: 0;
+  width: 100% !important;
+  height: 100% !important;
+  font-family: 'Roboto', sans-serif;
+}
+
+p {
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+.row {
+  margin-left: 0;
+  margin-right: 0;
+  & > div {
+    // margin-left: 0;
+    padding-left: 0;
+  }
+}
+
+.panel {
+  margin-bottom: 0;
+  & h3 {
+    margin-top: 10px;
+  }
+}
+
+.container {
+  margin-top: 10px;
+}
+
+ol , ul{
+  font-size: inherit;
+  & > li {
+    font-size: inherit
+  }
+}
+
+/* @end Global Styles */
+
+/* @group Functional Clases */
+
+.stick-top {
+  position: fixed;
+  top: 0;
+  z-index: 10000;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.no-font {
+    font-size: 0px;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.center-text {
+  text-align: center;
+}
+
+div.fix-image {
+  background-attachment: fixed;
+  background-size: cover;
+}
+
+.margin-bottom {
+  margin-bottom: 10px;
+}
+
+.black-text {
+  color: black !important;
+}
+
+.white-text {
+  color: white !important;
+}
+
+.drop-shadow {
+  .box-shadow(0 0.4px 6px 0 rgba(0, 0, 0, 0.9));
+}
+
+.mega-icon {
+  font-size: 110px;
+  text-align: center;
+  margin-bottom: 0;
+
+  & ~ div.caption {
+    padding-top: 0;
+    h3 {
+      margin: 0;
+    }
+  }
+}
+
+/* @end Functional Classes */
+
+/* @group Header */
+
+#header {
+  margin: 0;
+  background: url(../img/header-bg.png);
+  background-attachment: fixed;
+  background-size: cover;
+  backgorund-position: center center;
+  margin-bottom: 15px;
+  color: @gray-lighter;
+  & div.jumbotron.container {
+    color: @gray-lighter;
+    text-align: center;
+    position: absolute;
+    top: 25%;
+    background-color: transparent;
+    & div.row {
+      text-shadow: 0px 3px 3px rgba(0, 0, 0, 1);
+    }
+  }
+}
+
+#page-down {
+  position: absolute;
+  bottom: 20%;
+  text-align: center !important;
+
+  & i {
+    .transition(~"ease-in-out .30s color");
+
+    &:hover {
+      color: black;
+    }
+  }
+}
+
+/* @end Header */
+
+/* @group Navigation Bar */
+
+.dropdown-menu {
+  @media (min-width: @screen-sm) {
+    right: auto;
+    left: 50%;
+    transform: translate(-50%, 0);
+    opacity: 0;
+    .transition(~"ease-in-out .2s all");
+  }
+  &.dropup {
+    bottom: 100%;
+    top: initial;
+  }
+  &.dropdown {
+    top: 100%;
+    bottom: initial;
+  }
+  .open & {
+    opacity: 1;
+  }
+}
+
+#navigation {
+  & a {
+    .transition(~"ease-in-out .3s color");
+  }
+  & > li {
+    @media (min-width: @screen-md-min) {
+      margin-right: 23px;
+    }
+    @media (max-width: @screen-sm-max) {
+      margin-right: 10px;
+      margin-left: 11px;
+    }
+    & > a {
+      @media (min-width: @screen-md-min) {
+        padding: 15px 10px;
+      }
+      @media (max-width: @screen-sm-max) {
+        padding: 15px 3px;
+      }
+    }
+  }
+}
+
+.navbar-nav.nav {
+  margin: 0;
+}
+
+#navbar-container {
+  z-index: 0;
+  & .container-fluid{
+    padding-right: 0;
+    padding-left: 0;
+  }
+  &.align {
+    @media (min-width: @screen-sm) {
+      position: absolute;
+      bottom: 0;
+      height: 52px;
+    }
+    @media (max-width: @screen-sm) {
+      position: fixed;
+      top: 0;
+      width: 100%;
+    }
+  }
+}
+
+#navbar-anchor {
+  position: absolute;
+  bottom: 0;
+  height: 52px;
+}
+
+.home-button {
+  margin-right: 15px !important;
+}
+
+#navbar {
+  margin: 0;
+  padding: 0;
+}
+
+.navbar-brand {
+  margin-left: 15px;
+}
+
+/* @end Navigation Bar */
+
+/* @group Footer */
+@footer-link-margin: 7px;
+footer {
+  height: 100px;
+  width: 100%;
+  margin-top: 15px;
+  background-color: black;
+  color: @text-color;
+  p:first-child {
+    padding-top: 30px;
+    margin-bottom: 0px;
+  }
+  p.footer-links > a {
+    font-size: 12px;
+    margin-top: -4px;
+    margin-left: @footer-link-margin;
+    margin-right: @footer-link-margin;
+  }
+}
+
+/* @end Footer */
+
+/* @group Index */
+
+@index-carousel-height: 525px;
+@index-carousel-width: 100%;
+#index-carousel-container {
+  height: @index-carousel-height;
+  width: @index-carousel-width;
+  & div.carousel-item {
+    height: @index-carousel-height;
+    overflow: hidden;
+  }
+  & div.carousel-image {
+    width: @index-carousel-width;
+    height: @index-carousel-height;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+  }
+  & div.item:nth-child(1) div.carousel-image {
+    background-image: url(https://farm1.staticflickr.com/557/18747807580_d01e8e877a_c.jpg);
+  }
+  & div.item:nth-child(2) div.carousel-image {
+      background-image: url(https://farm9.staticflickr.com/8815/17122387228_8b59d46392_b.jpg);
+  }
+}
+
+/* @end Index */
+
+/* @group Student Robotics */
+
+@btn-srobo-color: @gray-lighter;
+@btn-srobo-bg: #253571;
+@btn-srobo-border: darken(@btn-srobo-bg, 5%);
+.btn-srobo {
+  .button-variant(@btn-srobo-color; @btn-srobo-bg; @btn-srobo-border);
+}
+
+.thumbnail.sr-option {
+  padding: 5px;
+  & div.image {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 250px;
+    margin: 0;
+  }
+}
+/* @end Student Robotics */
+
+/* @group external */
+
+.gist {
+  width: 100%
+}
+/* @end external*/

static/src/less/variables.less

@@ -0,0 +1,708 @@
+//
+// Variables
+// --------------------------------------------------
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+@gray-base: #000;
+@gray-darker: lighten(@gray-base, 13.5%);
+@gray-dark: lighten(@gray-base, 20%);
+@gray: lighten(@gray-base, 33.5%);
+@gray-light: lighten(@gray-base, 46.7%);
+@gray-lighter: lighten(@gray-base, 93.5%);
+@brand-primary: #ff7f00;
+@brand-success: #5cb85c;
+@brand-info: #5bc0de;
+@brand-warning: #ebd300;
+@brand-danger: #d9534f;
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+@body-bg: #232323;
+//** Global text color on `<body>`.
+@text-color: @gray-lighter;
+//** Global textual link color.
+@link-color: @brand-primary;
+//** Link hover color set via `darken()` function.
+@link-hover-color: darken(@link-color, 15%);
+//** Link hover decoration.
+@link-hover-decoration: underline;
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-serif: Georgia, "Times New Roman", Times, serif;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
+@font-family-base: @font-family-sans-serif;
+@font-size-base: 14px;
+@font-size-large: ceil((@font-size-base * 1.25));
+@font-size-small: ceil((@font-size-base * 0.85));
+@font-size-h1: floor((@font-size-base * 2.6));
+@font-size-h2: floor((@font-size-base * 2.15));
+@font-size-h3: ceil((@font-size-base * 1.7));
+@font-size-h4: ceil((@font-size-base * 1.25));
+@font-size-h5: @font-size-base;
+@font-size-h6: ceil((@font-size-base * 0.85));
+//** Unit-less `line-height` for use in components like buttons.
+@line-height-base: 1.428571429;
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+@line-height-computed: floor((@font-size-base * @line-height-base));
+//** By default, this inherits from the `<body>`.
+@headings-font-family: inherit;
+@headings-font-weight: 500;
+@headings-line-height: 1.1;
+@headings-color: inherit;
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+//** Load fonts from this directory.
+@icon-font-path: "../fonts/";
+//** File name for all font files.
+@icon-font-name: "glyphicons-halflings-regular";
+//** Element ID within SVG icon file.
+@icon-font-svg-id: "glyphicons_halflingsregular";
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+@padding-base-vertical: 6px;
+@padding-base-horizontal: 12px;
+@padding-large-vertical: 10px;
+@padding-large-horizontal: 16px;
+@padding-small-vertical: 5px;
+@padding-small-horizontal: 10px;
+@padding-xs-vertical: 1px;
+@padding-xs-horizontal: 5px;
+@line-height-large: 1.3333333;
+@line-height-small: 1.5;
+@border-radius-base: 4px;
+@border-radius-large: 6px;
+@border-radius-small: 3px;
+//** Global color for active items (e.g., navs or dropdowns).
+@component-active-color: #fff;
+//** Global background color for active items (e.g., navs or dropdowns).
+@component-active-bg: @brand-primary;
+//** Width of the `border` for generating carets that indicator dropdowns.
+@caret-width-base: 4px;
+//** Carets increase slightly in size for larger components.
+@caret-width-large: 5px;
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `<th>`s and `<td>`s.
+@table-cell-padding: 8px;
+//** Padding for cells in `.table-condensed`.
+@table-condensed-cell-padding: 5px;
+//** Default background color used for all tables.
+@table-bg: transparent;
+//** Background color used for `.table-striped`.
+@table-bg-accent: @gray-light;
+//** Background color used for `.table-hover`.
+@table-bg-hover: #f5f5f5;
+@table-bg-active: @table-bg-hover;
+//** Border color for table and cell borders.
+@table-border-color: #ddd;
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+@btn-font-weight: normal;
+@btn-default-color: #333;
+@btn-default-bg: #fff;
+@btn-default-border: #ccc;
+@btn-primary-color: @gray-darker;
+@btn-primary-bg: @brand-primary;
+@btn-primary-border: darken(@btn-primary-bg, 5%);
+@btn-success-color: #fff;
+@btn-success-bg: @brand-success;
+@btn-success-border: darken(@btn-success-bg, 5%);
+@btn-info-color: #fff;
+@btn-info-bg: @brand-info;
+@btn-info-border: darken(@btn-info-bg, 5%);
+@btn-warning-color: @gray-base;
+@btn-warning-bg: @brand-warning;
+@btn-warning-border: darken(@btn-warning-bg, 5%);
+@btn-danger-color: #fff;
+@btn-danger-bg: @brand-danger;
+@btn-danger-border: darken(@btn-danger-bg, 5%);
+@btn-link-disabled-color: @gray-light;
+
+//== Forms
+//
+//##
+
+//** `<input>` background color
+@input-bg: #fff;
+//** `<input disabled>` background color
+@input-bg-disabled: @gray-lighter;
+//** Text color for `<input>`s
+@input-color: @gray;
+//** `<input>` border color
+@input-border: #ccc;
+//** Default `.form-control` border radius
+@input-border-radius: @border-radius-base;
+//** Large `.form-control` border radius
+@input-border-radius-large: @border-radius-large;
+//** Small `.form-control` border radius
+@input-border-radius-small: @border-radius-small;
+//** Border color for inputs on focus
+@input-border-focus: @brand-primary;
+//** Placeholder text color
+@input-color-placeholder: #999;
+//** Default `.form-control` height
+@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
+//** Large `.form-control` height
+@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+//** Small `.form-control` height
+@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
+//** `.form-group` margin
+@form-group-margin-bottom: 15px;
+@legend-color: @gray-dark;
+@legend-border-color: #e5e5e5;
+//** Background color for textual input addons
+@input-group-addon-bg: @gray-lighter;
+//** Border color for textual input addons
+@input-group-addon-border-color: @input-border;
+//** Disabled cursor for form controls and buttons.
+@cursor-disabled: not-allowed;
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+@dropdown-bg: #fff;
+//** Dropdown menu `border-color`.
+@dropdown-border: rgba(0,0,0,.15);
+//** Dropdown menu `border-color` **for IE8**.
+@dropdown-fallback-border: #ccc;
+//** Divider color for between dropdown items.
+@dropdown-divider-bg: #e5e5e5;
+//** Dropdown link text color.
+@dropdown-link-color: @gray-dark;
+//** Hover color for dropdown links.
+@dropdown-link-hover-color: @dropdown-bg;
+//** Hover background for dropdown links.
+@dropdown-link-hover-bg: @dropdown-link-color;
+//** Active dropdown menu item text color.
+@dropdown-link-active-color: @component-active-color;
+//** Active dropdown menu item background color.
+@dropdown-link-active-bg: @component-active-bg;
+//** Disabled dropdown menu item background color.
+@dropdown-link-disabled-color: @gray-light;
+//** Text color for headers within dropdown menus.
+@dropdown-header-color: @gray-light;
+//** Deprecated `@dropdown-caret-color` as of v3.1.0
+@dropdown-caret-color: #000;
+@zindex-navbar: 1000;
+@zindex-dropdown: 1000;
+@zindex-popover: 1060;
+@zindex-tooltip: 1070;
+@zindex-navbar-fixed: 1030;
+@zindex-modal-background: 1040;
+@zindex-modal: 1050;
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+//** Deprecated `@screen-xs` as of v3.0.1
+@screen-xs: 480px;
+//** Deprecated `@screen-xs-min` as of v3.2.0
+@screen-xs-min: @screen-xs;
+//** Deprecated `@screen-phone` as of v3.0.1
+@screen-phone: @screen-xs-min;
+//** Deprecated `@screen-sm` as of v3.0.1
+@screen-sm: 862px;
+@screen-sm-min: @screen-sm;
+//** Deprecated `@screen-tablet` as of v3.0.1
+@screen-tablet: @screen-sm-min;
+//** Deprecated `@screen-md` as of v3.0.1
+@screen-md: 1080px;
+@screen-md-min: @screen-md;
+//** Deprecated `@screen-desktop` as of v3.0.1
+@screen-desktop: @screen-md-min;
+//** Deprecated `@screen-lg` as of v3.0.1
+@screen-lg: 1200px;
+@screen-lg-min: @screen-lg;
+//** Deprecated `@screen-lg-desktop` as of v3.0.1
+@screen-lg-desktop: @screen-lg-min;
+@screen-xs-max: (@screen-sm-min - 1);
+@screen-sm-max: (@screen-md-min - 1);
+@screen-md-max: (@screen-lg-min - 1);
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+@grid-columns: 12;
+//** Padding between columns. Gets divided in half for the left and right.
+@grid-gutter-width: 30px;
+//** Point at which the navbar becomes uncollapsed.
+@grid-float-breakpoint: @screen-sm-min;
+//** Point at which the navbar begins collapsing.
+@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+@container-tablet: (660px + @grid-gutter-width);
+//** For `@screen-sm-min` and up.
+@container-sm: @container-tablet;
+@container-desktop: (880px + @grid-gutter-width);
+//** For `@screen-md-min` and up.
+@container-md: @container-desktop;
+@container-large-desktop: (1080px + @grid-gutter-width);
+//** For `@screen-lg-min` and up.
+@container-lg: @container-large-desktop;
+
+//== Navbar
+//
+//##
+
+@navbar-height: 50px;
+@navbar-margin-bottom: @line-height-computed;
+@navbar-border-radius: @border-radius-base;
+@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
+@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
+@navbar-collapse-max-height: 340px;
+@navbar-default-color: #777;
+@navbar-default-bg: #f8f8f8;
+@navbar-default-border: darken(@navbar-default-bg, 6.5%);
+@navbar-default-link-color: #777;
+@navbar-default-link-hover-color: #333;
+@navbar-default-link-hover-bg: transparent;
+@navbar-default-link-active-color: #555;
+@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
+@navbar-default-link-disabled-color: #ccc;
+@navbar-default-link-disabled-bg: transparent;
+@navbar-default-brand-color: @navbar-default-link-color;
+@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
+@navbar-default-brand-hover-bg: transparent;
+@navbar-default-toggle-hover-bg: #ddd;
+@navbar-default-toggle-icon-bar-bg: #888;
+@navbar-default-toggle-border-color: #ddd;
+@navbar-inverse-color: lighten(@gray-light, 15%);
+@navbar-inverse-bg: #222;
+@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-link-color: lighten(@gray-light, 15%);
+@navbar-inverse-link-hover-color: #fff;
+@navbar-inverse-link-hover-bg: transparent;
+@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
+@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-link-disabled-color: #444;
+@navbar-inverse-link-disabled-bg: transparent;
+@navbar-inverse-brand-color: @navbar-inverse-link-color;
+@navbar-inverse-brand-hover-color: #fff;
+@navbar-inverse-brand-hover-bg: transparent;
+@navbar-inverse-toggle-hover-bg: #333;
+@navbar-inverse-toggle-icon-bar-bg: #fff;
+@navbar-inverse-toggle-border-color: #333;
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+@nav-link-padding: 10px 15px;
+@nav-link-hover-bg: @gray-lighter;
+@nav-disabled-link-color: @gray-light;
+@nav-disabled-link-hover-color: @gray-light;
+
+//== Tabs
+//
+//##
+
+@nav-tabs-border-color: #ddd;
+@nav-tabs-link-hover-border-color: @gray-lighter;
+@nav-tabs-active-link-hover-bg: @body-bg;
+@nav-tabs-active-link-hover-color: @gray;
+@nav-tabs-active-link-hover-border-color: #ddd;
+@nav-tabs-justified-link-border-color: #ddd;
+@nav-tabs-justified-active-link-border-color: @body-bg;
+
+//== Pills
+//
+//##
+
+@nav-pills-border-radius: @border-radius-base;
+@nav-pills-active-link-hover-bg: @component-active-bg;
+@nav-pills-active-link-hover-color: @component-active-color;
+
+//== Pagination
+//
+//##
+
+@pagination-color: @link-color;
+@pagination-bg: #fff;
+@pagination-border: #ddd;
+@pagination-hover-color: @link-hover-color;
+@pagination-hover-bg: @gray-lighter;
+@pagination-hover-border: #ddd;
+@pagination-active-color: #fff;
+@pagination-active-bg: @brand-primary;
+@pagination-active-border: @brand-primary;
+@pagination-disabled-color: @gray-light;
+@pagination-disabled-bg: #fff;
+@pagination-disabled-border: #ddd;
+
+//== Pager
+//
+//##
+
+@pager-bg: @pagination-bg;
+@pager-border: @pagination-border;
+@pager-border-radius: 15px;
+@pager-hover-bg: @pagination-hover-bg;
+@pager-active-bg: @pagination-active-bg;
+@pager-active-color: @pagination-active-color;
+@pager-disabled-color: @pagination-disabled-color;
+
+//== Jumbotron
+//
+//##
+
+@jumbotron-padding: 30px;
+@jumbotron-color: @gray-dark;
+@jumbotron-bg: #fff;
+@jumbotron-heading-color: inherit;
+@jumbotron-font-size: ceil((@font-size-base * 1.5));
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+@state-success-text: #3c763d;
+@state-success-bg: #dff0d8;
+@state-success-border: darken(spin(@state-success-bg, -10), 5%);
+@state-info-text: #31708f;
+@state-info-bg: #d9edf7;
+@state-info-border: darken(spin(@state-info-bg, -10), 7%);
+@state-warning-text: #8a6d3b;
+@state-warning-bg: #fcf8e3;
+@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
+@state-danger-text: #a94442;
+@state-danger-bg: #f2dede;
+@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+@tooltip-max-width: 200px;
+//** Tooltip text color
+@tooltip-color: #fff;
+//** Tooltip background color
+@tooltip-bg: #000;
+@tooltip-opacity: .9;
+//** Tooltip arrow width
+@tooltip-arrow-width: 5px;
+//** Tooltip arrow color
+@tooltip-arrow-color: @tooltip-bg;
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+@popover-bg: #fff;
+//** Popover maximum width
+@popover-max-width: 276px;
+//** Popover border color
+@popover-border-color: rgba(0,0,0,.2);
+//** Popover fallback border color
+@popover-fallback-border-color: #ccc;
+//** Popover title background color
+@popover-title-bg: darken(@popover-bg, 3%);
+//** Popover arrow width
+@popover-arrow-width: 10px;
+//** Popover arrow color
+@popover-arrow-color: @popover-bg;
+//** Popover outer arrow width
+@popover-arrow-outer-width: (@popover-arrow-width + 1);
+//** Popover outer arrow color
+@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
+//** Popover outer arrow fallback color
+@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
+
+//== Labels
+//
+//##
+
+//** Default label background color
+@label-default-bg: @gray-light;
+//** Primary label background color
+@label-primary-bg: @brand-primary;
+//** Success label background color
+@label-success-bg: @brand-success;
+//** Info label background color
+@label-info-bg: @brand-info;
+//** Warning label background color
+@label-warning-bg: @brand-warning;
+//** Danger label background color
+@label-danger-bg: @brand-danger;
+//** Default label text color
+@label-color: #fff;
+//** Default text color of a linked label
+@label-link-hover-color: #fff;
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+@modal-inner-padding: 15px;
+//** Padding applied to the modal title
+@modal-title-padding: 15px;
+//** Modal title line-height
+@modal-title-line-height: @line-height-base;
+//** Background color of modal content area
+@modal-content-bg: #fff;
+//** Modal content border color
+@modal-content-border-color: rgba(0,0,0,.2);
+//** Modal content border color **for IE8**
+@modal-content-fallback-border-color: #999;
+//** Modal backdrop background color
+@modal-backdrop-bg: #000;
+//** Modal backdrop opacity
+@modal-backdrop-opacity: .5;
+//** Modal header border color
+@modal-header-border-color: #e5e5e5;
+//** Modal footer border color
+@modal-footer-border-color: @modal-header-border-color;
+@modal-lg: 900px;
+@modal-md: 600px;
+@modal-sm: 300px;
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+@alert-padding: 15px;
+@alert-border-radius: @border-radius-base;
+@alert-link-font-weight: bold;
+@alert-success-bg: @state-success-bg;
+@alert-success-text: @state-success-text;
+@alert-success-border: @state-success-border;
+@alert-info-bg: @state-info-bg;
+@alert-info-text: @state-info-text;
+@alert-info-border: @state-info-border;
+@alert-warning-bg: @state-warning-bg;
+@alert-warning-text: @state-warning-text;
+@alert-warning-border: @state-warning-border;
+@alert-danger-bg: @state-danger-bg;
+@alert-danger-text: @state-danger-text;
+@alert-danger-border: @state-danger-border;
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+@progress-bg: #f5f5f5;
+//** Progress bar text color
+@progress-bar-color: #fff;
+//** Variable for setting rounded corners on progress bar.
+@progress-border-radius: @border-radius-base;
+//** Default progress bar color
+@progress-bar-bg: @brand-primary;
+//** Success progress bar color
+@progress-bar-success-bg: @brand-success;
+//** Warning progress bar color
+@progress-bar-warning-bg: @brand-warning;
+//** Danger progress bar color
+@progress-bar-danger-bg: @brand-danger;
+//** Info progress bar color
+@progress-bar-info-bg: @brand-info;
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+@list-group-bg: #fff;
+//** `.list-group-item` border color
+@list-group-border: #ddd;
+//** List group border radius
+@list-group-border-radius: @border-radius-base;
+//** Background color of single list items on hover
+@list-group-hover-bg: #f5f5f5;
+//** Text color of active list items
+@list-group-active-color: @component-active-color;
+//** Background color of active list items
+@list-group-active-bg: @component-active-bg;
+//** Border color of active list elements
+@list-group-active-border: @list-group-active-bg;
+//** Text color for content within active list items
+@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
+//** Text color of disabled list items
+@list-group-disabled-color: @gray-light;
+//** Background color of disabled list items
+@list-group-disabled-bg: @gray-lighter;
+//** Text color for content within disabled list items
+@list-group-disabled-text-color: @list-group-disabled-color;
+@list-group-link-color: #555;
+@list-group-link-hover-color: @list-group-link-color;
+@list-group-link-heading-color: #333;
+
+//== Panels
+//
+//##
+
+@panel-bg: #fff;
+@panel-body-padding: 15px;
+@panel-heading-padding: 10px 15px;
+@panel-footer-padding: @panel-heading-padding;
+@panel-border-radius: @border-radius-base;
+//** Border color for elements within panels
+@panel-inner-border: #ddd;
+@panel-footer-bg: #f5f5f5;
+@panel-default-text: @gray-dark;
+@panel-default-border: #ddd;
+@panel-default-heading-bg: #f5f5f5;
+@panel-primary-text: #fff;
+@panel-primary-border: @brand-primary;
+@panel-primary-heading-bg: @brand-primary;
+@panel-success-text: @state-success-text;
+@panel-success-border: @state-success-border;
+@panel-success-heading-bg: @state-success-bg;
+@panel-info-text: @state-info-text;
+@panel-info-border: @state-info-border;
+@panel-info-heading-bg: @state-info-bg;
+@panel-warning-text: @state-warning-text;
+@panel-warning-border: @state-warning-border;
+@panel-warning-heading-bg: @state-warning-bg;
+@panel-danger-text: @state-danger-text;
+@panel-danger-border: @state-danger-border;
+@panel-danger-heading-bg: @state-danger-bg;
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+@thumbnail-padding: 5px;
+//** Thumbnail background color
+@thumbnail-bg: @gray-darker;
+//** Thumbnail border color
+@thumbnail-border: #999;
+//** Thumbnail border radius
+@thumbnail-border-radius: @border-radius-base;
+//** Custom text color for thumbnail captions
+@thumbnail-caption-color: #fff;
+//** Padding around the thumbnail caption
+@thumbnail-caption-padding: 7px;
+
+//== Wells
+//
+//##
+
+@well-bg: @jumbotron-bg;
+@well-border: darken(@well-bg, 7%);
+
+//== Badges
+//
+//##
+
+@badge-color: #fff;
+//** Linked badge text color on hover
+@badge-link-hover-color: #fff;
+@badge-bg: @gray-light;
+//** Badge text color in active nav link
+@badge-active-color: @link-color;
+//** Badge background color in active nav link
+@badge-active-bg: #fff;
+@badge-font-weight: bold;
+@badge-line-height: 1;
+@badge-border-radius: 10px;
+
+//== Breadcrumbs
+//
+//##
+
+@breadcrumb-padding-vertical: 8px;
+@breadcrumb-padding-horizontal: 15px;
+//** Breadcrumb background color
+@breadcrumb-bg: #f5f5f5;
+//** Breadcrumb text color
+@breadcrumb-color: #ccc;
+//** Text color of current page in the breadcrumb
+@breadcrumb-active-color: @gray-light;
+//** Textual separator for between breadcrumb elements
+@breadcrumb-separator: "/";
+
+//== Carousel
+//
+//##
+
+@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
+@carousel-control-color: #fff;
+@carousel-control-width: 15%;
+@carousel-control-opacity: .5;
+@carousel-control-font-size: 20px;
+@carousel-indicator-active-bg: #fff;
+@carousel-indicator-border-color: #fff;
+@carousel-caption-color: #fff;
+
+//== Close
+//
+//##
+
+@close-font-weight: bold;
+@close-color: #000;
+@close-text-shadow: 0 1px 0 #fff;
+
+//== Code
+//
+//##
+
+@code-color: #c7254e;
+@code-bg: #f9f2f4;
+@kbd-color: #fff;
+@kbd-bg: #333;
+@pre-bg: #f5f5f5;
+@pre-color: @gray-dark;
+@pre-border-color: #ccc;
+@pre-scrollable-max-height: 340px;
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+@component-offset-horizontal: 180px;
+//** Text muted color
+@text-muted: @gray-light;
+//** Abbreviations and acronyms border color
+@abbr-border-color: @gray-light;
+//** Headings small color
+@headings-small-color: @gray-light;
+//** Blockquote small color
+@blockquote-small-color: @gray-light;
+//** Blockquote font size
+@blockquote-font-size: (@font-size-base * 1.25);
+//** Blockquote border color
+@blockquote-border-color: @gray-lighter;
+//** Page header border color
+@page-header-border-color: @gray-lighter;
+//** Width of horizontal description list titles
+@dl-horizontal-offset: @component-offset-horizontal;
+//** Horizontal line color.
+@hr-border: @gray-lighter;

templates/about/index.html

@@ -0,0 +1,49 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}About{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>About all the things</h1>
+  </div>
+  <div class="row">
+    <h4>So, who and/or what am I exactly? Let's find out...</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <p>
+      There are 2 parts to this, me and my website. Information for both of which is below.
+    </p>
+  </div>
+  <div class="container">
+    <div class="row center-text">
+      <div class="col-sm-6">
+        <div class="thumbnail panel-primary">
+          <p class="center-text mega-icon">
+            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+          </p>
+          <div class="caption">
+            <h3>About Me</h3>
+            <p></p>
+            <p><a href="#" class="btn btn-primary btn-block btn-lg" role="button">Find out more</a></p>
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-6">
+        <div class="thumbnail panel-primary">
+          <p class="center-text mega-icon">
+            <span class="glyphicon glyphicon-hdd" aria-hidden="true"></span>
+          </p>
+          <div class="caption">
+            <h3>About the website</h3>
+            <p></p>
+            <p><a href="#" class="btn btn-primary btn-block btn-lg" role="button">Find out more</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+{% endblock %}

templates/about/website.html

@@ -0,0 +1,54 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}About the website{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>The Website</h1>
+  </div>
+  <div class="row">
+    <h4>Well it's obvious it works pretty damn well, you're looking at it right now!</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <p>
+      My website is the culmination of all my knowledge, compiled into 1 place. It not only contains all my projects, but it in itself is a project. Making sure this website works properly is a tall order, especially considering it's self hosted. And making sure that it stays secure is also important, as it contains a large amount of personal information.
+    </p>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-4">
+        <img style="border-radius: 12px;" class="full-width" src="" />
+      </div>
+      <div class="col-sm-8">
+        <h3>The server</h3>
+        <p>
+          The server itself is a VPS hosted by Inception hosting. Obviously if I did more looking around I could probably find a slightly better deal, but these people have brilliant customer support, fast and customizable servers, that are also hosted in a data center in the UK (a major bonus)!
+        </p>
+        <p>
+          The spec on this server are nothing special, but considering it wouldn't be running much, other than a web server, and a couple of other applications, it's pleanty. The most important thing is that it is hosted in the UK, for connection speed, and for other applications like a VPN.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-4">
+        <img style="border-radius: 12px;" class="full-width" src="" />
+      </div>
+      <div class="col-sm-8">
+        <h3>The website</h3>
+        <p>
+          The website itself is written in python, using Django, and a PostgreSQL database. Now obviously for what I need this is massivly overkill, but it means I can use the skills and shortcuts I learn at work to make a very fast and good looking website. It also means that if I ever want to expand and add new features, then with python running the back end, it's going to be very easy!
+        </p>
+        <p>
+          I went with the Django framework because it's what I work with at work, so I have a lot of contact with it, so exposure to bugs or clean ways to write things happen on a daily basis. I also chose it because it's written in python, one of my favourite languages, and one i'm highly fluent in. I chose PostgreSQL as a database engine because it's again what we use at work, and I already had some files preconfigured with the required config.
+      </div>
+    </div>
+  </div>
+
+{% endblock %}

templates/base.html

@@ -0,0 +1,152 @@
+{% load staticfiles %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>{% block htmltitle %}{% endblock %} | TheOrangeOne</title>
+    <meta chatset='utf-8' />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+    <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
+    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/>
+    <link rel="shortcut icon" href=""/>
+  </head>
+<body>
+  <div class="row page-width page-height" id="header" {% if header_BG %}style="background-image: url('{{ header_BG }}');" {% endif %}>
+    <div class="col-sm-10 col-sm-offset-1 jumbotron container">
+      {% block headercontent %}{% endblock %}
+    </div>
+    <div class="row page-width" id="page-down">
+      <div class="col-md-2 col-md-offset-5">
+        <i class="icon ion-chevron-down h2 clickable" id="page-down-button"></i>
+      </div>
+    </div>
+  </div>
+  <div id='navbar-anchor'></div>
+    <div id="navbar-container" class="align h4" style="width: 96%; left: 2%; margin: 0; z-index: 10000;">
+      <nav class="navbar navbar-inverse" style="border-radius: 0;">
+        <div class="container-fluid">
+          <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand visible-xs"><i class="icon ion-compass"></i> Navigation</a>
+          </div>
+          <div class="collapse navbar-collapse" id="navbar" style=" padding-left: 0px;">
+            <ul class="nav navbar-nav home-button hidden-sm">
+              <li class="active home"><a href="{% url 'pages:index' %}"><i class="icon ion-home"></i></a></li>
+            </ul>
+            <ul class="nav navbar-nav" id="navigation">
+              <li class="dropdown">
+                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                  Projects <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+                </a>
+                <ul class="dropdown-menu dropup">
+                  <li><a href="#"><i class="icon ion-social-freebsd-devil"></i> Pithos</a></li>
+                  <li><a href="{% url 'projects:bsod-enabler'%}"><i class="icon ion-ios-monitor"></i> BSOD Enabler</a></li>
+                  <li><a href="{% url 'projects:hipchat-emoticons' %}"><i class="icon ion-chatbox-working"></i> Hipchat Emoticons for All</a></li>
+                  <li><a href="{% url 'setup:desk' %}"><i class="icon ion-social-windows"></i> Custom PC</a></li>
+                  <li><a href="{% url 'projects:index' %}"><i class="icon ion-android-more-vertical"></i> All Projects...</a></li>
+                </ul>
+              </li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                  Code <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+                </a>
+                <ul class="dropdown-menu dropup">
+                  <li><a href="#"><i class="icon ion-code-working"></i> Code Challenges</a></li>
+                  <li><a href="{% url 'projects:morse-code-decoder' %}"><i class="icon ion-ios-circle-filled"></i> Morse Code Decoder</a></li>
+                  <li><a href="{% url 'projects:wiki-game-solver' %}"><i class="icon ion-ios-game-controller-a"></i> The Wiki Game Solver</a></li>
+                  <li><a href=""><span class="glyphicon glyphicon-print" aria-hidden="true"></span>  Printr</a></li>
+                </ul>
+              </li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                  College <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+                </a>
+                <ul class="dropdown-menu dropup">
+                  <li><a href="{% url 'robotics:index' %}">Student Robotics</a></li>
+                  <li><a href="{% url 'projects:attack-on-blocks' %}"><i class="icon ion-cube"></i> Attack on Blocks Game</a></li>
+                  <li><a href="{% url 'college:student-server' %}"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Student Server</a></li>
+                  <li><a href="#"><i class="icon ion-ios-paper"></i> EPQ</a></li>
+                  <li><a href="#">Wall of Sheep</a></li>
+                </ul>
+              </li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                  Setup <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+                </a>
+                <ul class="dropdown-menu dropup">
+                  <li><a href="{% url 'setup:desk' %}">&#128129; Desk</a></li>
+                  <li><a href="#"><i class="icon ion-briefcase"></i> Work</a></li>
+                  <li><a href="#"><i class="icon ion-model-s"></i> On the Go</a></li>
+                  <li><a href="#"><i class="icon ion-android-phone-portrait"></i> Devices</a></li>
+                  <li><a href="#"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Servers</a></li>
+                  <li><a href="{% url 'setup:index' %}"><i class="icon ion-android-more-vertical"></i> All</a></li>
+                </ul>
+              </li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                  Work <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+                </a>
+                <ul class="dropdown-menu dropup">
+                  <li><a href="#"><i class="icon ion-fork-repo"></i> Projects</a></li>
+                  <li><a href="#"><i class="icon ion-android-desktop"></i> Setup</a></li>
+                </ul>
+              </li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                  Media <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+                </a>
+                <ul class="dropdown-menu dropup">
+                  <li><a href="{% url 'media:youtube' %}"><i class="icon ion-social-youtube"></i> Youtube Channel</a></li>
+                  <li><a href="#"><i class="icon ion-social-rss"></i> Feed</a></li>
+                  <li><a href="{% url 'media:gallery' %}"><i class="icon ion-ios-camera"></i> Gallery</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Links</a></li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                  About <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+                </a>
+
+                <ul class="dropdown-menu dropup">
+                  <li><a href="#"><i class="icon ion-android-person"></i> Me</a></li>
+                  <li><a href="{% url 'pages:about-website' %}"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> Website</a></li>
+                  <li><a href="#"><i class="icon ion-android-contacts"></i> Contact Me</a></li>
+                </ul>
+              </li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                  Account <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+                </a>
+                <ul class="dropdown-menu dropup">
+                  <li class="active hidden-xs"><a><i class="icon ion-ios-body-outline"></i> *username*</a></li>
+                  <li><a href="#"><i class="icon ion-ios-cog-outline"></i> Preferences</a></li>
+                  <li><a href="#"><i class="icon ion-log-in"></i> Login / Logout</a></li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </div>
+      {% block content %}{% endblock %}
+    {% if not no_footer %}
+      <footer>
+        <p class="center-text">Copyright &copy; Jake Howard 2015</p>
+        <p class="center-text footer-links">
+          <a href="{%url 'pages:about' %}">About</a> - <a href="">Contact</a> - <a href="">Things</a>
+        </p>
+      </footer>
+    {% endif %}
+  <script type="text/javascript" src="{% static 'js/libs.js' %}"></script>
+  <script type="text/javascript" src="{% static 'js/utils.js' %}"></script>
+  <script type="text/javascript" src="{% static 'js/app.js' %}"></script>
+  <noscript>
+    <style> html, body { display:none; }</style>
+    <meta http-equiv="refresh" content="0.0;url={% url 'pages:no-js' %}">
+  </noscript>
+  </body>
+</html>

templates/college/attack-on-blocks.html

@@ -0,0 +1,60 @@
+{% extends 'base.html' %}
+{% load staticfiles %}
+{% block htmltitle %}Attack on Blocks{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>Attack on Blocks</h1>
+  </div>
+  <div class="row">
+    <h4>It's like the classic game 'Space Invaders', just with better music, customizable texture packs, and a couple of easter eggs...</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+	<div class="container">
+		<p>
+			Attack on Blocks is a space invaders style game that I wrote for my IT coursework, for the games development unit. We were allowed to make any game that we wanted, provided it could be done within the time limits, be very easy to play, and easily run on the college computer (which were pretty terrible). I had never written a game before, so I knew this was going to be a challenge.</p>
+		<p>
+			I decided to write the game in Python, seeing as there were other people in the class that could help me bug report and test features, and because it was easy to run on the college computers. I used PyGame for the graphics library, even though I had never used it before, because it was really simple to use, and there was a lot of support and documentation online.
+		</p>
+	</div>
+  <div class="container">
+    <h2>The Easter Eggs</h2>
+    <p>
+      One of the key features of this take on space invaders (and unfortunately the thing I spent the most time on), is the easter eggs. There are a few dotted around the game, which make the game either much easier, or way more fun! At the moment, there are 3 main easter eggs, the first enabling the other 2. If you would like to know what they are, click the button below. If not, pay the game and try and find them, or search through the source to find them (it's not too hard through the source).
+    </p>
+    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+      <div class="panel-primary">
+        <div class="panel-heading" role="tab" id="headingOne">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+              See Easter Eggs...
+            </a>
+          </h4>
+        </div>
+        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
+          <div class="panel-body panel black-text">
+          <h4></h4>
+          <p></p>
+          <h4></h4>
+          <p></p>
+          <h4></h4>
+          <p></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p>
+      As you will see (If and when you find the easter eggs), most of them are completely useless, and completely unrelated to the game or anything else. The main reason they were put in was because i'm friends with people that pester to the point it's just easier to give in. Hence there are some really very odd ones!
+    </p>
+  </div>
+  <div class="container">
+    <div class="btn-group btn-group-justified">
+      <p class="center-text">
+        <a class="btn btn-primary btn-lg" href="" download="Attack-on-blocks.zip">Download Attack on Blocks</a>
+        <a class="btn btn-default btn-lg" href="https://github.com/RealOrangeOne/attack-on-blocks">View on Github <i class="icon ion-social-github"></i></a>
+      </p>
+    </div>
+  </div>
+{% endblock %}

templates/college/student-server.html

@@ -0,0 +1,40 @@
+{% extends 'base.html' %}
+{% load staticfiles %}
+{% block htmltitle %}Student Server | College{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>Student Server</h1>
+  </div>
+  <div class="row">
+    <h4>The first server I ever properly ran, and surprisingly it didn't really break, that much!</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <p>
+      Back when I was in college, we needed a server for computing students to learn how to FTP, and script on a server using python CGI and <a href="Link to tonys php toolbox analagy">PHP</a>, as well as possibly for some students coursework. Fortunately, the college already had one, running the IT students microsite for extra course information. The problem was that it was majorly out of date, and no one really new how to use it properly. It was up to me and my friend Alex to bring the server up to date, and make it ready for the students who needed it.
+    </p>
+  </div>
+  <div class="container">
+    <p>
+      The original plan was to update the server's OS (at that stage running Ubuntu 12.04 LTS), install the python and PHP backends, add the users, and then make sure they couldn't edit eachothers documents. In the end Alex did a server backup, and then fully reinstalled the server OS from scratch, and then pushed the documents back on, which made our lives a lot easier.
+    </p>
+    <p>
+      Because he had worked with servers a lot in the past, and was already very fluent with the ubuntu terminal, he installed the software that was needed, and got it all configured properly, whilst I worked on the student logins and permission structure.
+    </p>
+  </div>
+  <div class="container">
+    <h3>User Creation</h3>
+    <p>
+      I knew we would need user accounts for the computing teachers, for the students doing A2 computing, and for updating the IT site, but I wasnt expecting this to amount to over 50 user accounts that needed to be created, and permissions setup for their accounts. It was then that I realied that I would need to write a script to do this in any useful amount of time. Fortunately Alex had started writing one with a small amount of logic, so I had something to work off to get this done, as this was my first major linux project.
+    </p>
+    <p>
+      The basis of the script was to load information about the users from a database I had created with all the required students in, create users based on this information, and configure the permissions for their user and their home directory. The script also allowed for manual entering of users with the same permission template, in case single users needed to be created. An additional feature that I added which has proved useful now that i've left is the ability to delete users manually, and from that original database, to make sure that no student will have access to the server once they have left, well, other than me that is!
+    </p>
+    <p>
+      The script I used to create these files can be found below, hosted as a gist on github. Unfortunately some of the information has been redacted to prevent giving too much information that could be considered a security threat to the server. The script may not work in this redacted state, however all the core logic has been kept.
+    </p>
+  </div>
+{% endblock %}

templates/core/404.html

@@ -0,0 +1,19 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}Oh no, There's nothing here!{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>404 - Page not found</h1>
+  </div>
+  <div class="row">
+    <h4>The page you were looking for could not be found. </h4>
+    <h4>Don't worry, I've sent these people to to go and find it. Rest assured it will be found!</h4>
+  </div>
+{% endblock %}
+
+{% block content %}
+<div class="container center-text">
+  <h5>Nope, There's nothing down here either. <a href="javascript:window.history.back()">Go back to where you came from!</h5></a>
+</div>
+{% endblock %}

templates/core/no-js.html

@@ -0,0 +1,72 @@
+{% load staticfiles %}
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Javascript Disabled | TheOrangeOne</title>
+  <meta chatset='utf-8' />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+  <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/>
+  <link rel="shortcut icon" href=""/>
+</head>
+<body>
+<div class="jumbotron" style="background-image: url('{% static 'img/bg.png' %}'); background-attachment: fixed;"><div class="container"><h1>Javascript is disabled!</h1></div></div>
+<div class="container">
+  <p>You appear to have javascript disabled. For my site to function properly, javascript must be enabled! The javascript is used to dynamically change the webpage on your device. Without them then the site will break, cause a tonne of errors, and not look right, all of which aren't very nice, for you or me. </p>
+  <p>The javascript on this page won't damage your computer in any way, and has been written entirely by me, or has used trusted and open-source 3rd-party libraries. You can trust this site! Re-enabling the javascript functions inside your browser is very easy, and helpful tutorials can be found below!</p>
+</div>
+<div class="container">
+  <h2>Re-enabling Javascript in your browser</h2>
+  <div class="panel-primary">
+    <div class="panel-heading">
+      <h3 class="panel-title">Re-enabling in Firefox</h3>
+    </div>
+    <div class="panel-body panel black-text">
+      <ol>
+        <li>Navigate to 'about:config', using the browsers address bar.</li>
+        <li>Accept the security warning, and notice that no dragons lie ahead.</li>
+        <li>In the search bar, enter 'javascript'</li>
+        <li>Find the entry 'Javascript.enabled' (possibly using <kbd>ctrl + F</kbd>)</li>
+        <li>Toggle the entry by either double-clicking the entry, or right-clicking and selecting 'Toggle'.</li>
+      </ol>
+    </div>
+  </div>
+
+  <div class="panel-success">
+    <div class="panel-heading">
+      <h3 class="panel-title">Re-enabling in Chrome</h3>
+    </div>
+    <div class="panel-body panel black-text">
+      <ol>
+        <li>Click the Chrome menu icon (<i class="icon ion-navicon-round"></i>) in the top right hand corder of the window.</li>
+        <li>Click 'Settings'.</li>
+        <li>Under the 'Privacy' section, select 'Content settings'.</li>
+        <li>Under 'Javascript', select 'Allow all sites to run Javascript(Recommended)'.</li>
+      </ol>
+    </div>
+  </div>
+
+  <div class="panel-info">
+    <div class="panel-heading">
+      <h3 class="panel-title">Re-enabling in Internet Explorer</h3>
+    </div>
+    <img src="{% static 'img/IE-scare.png' %}" height="200px" style="float: right;"/>
+      <div class="panel-body panel black-text">
+      <ol>
+        <li>Select the gear icon in the top right hand corner <i class="icon ion-ios-gear"></i>, and click 'Internet Options'.</li>
+        <li>Select Security > Internet > Custom Level.</li>
+        <li>Scroll down until you find 'Scripting', and select 'Enable'</li>
+      </ol>
+      <p>
+        <strong>Also: </strong> If you are using Internet Explorer (Or Microsoft Edge for that matter), <stong>Stop!</stong> Use one of the other ones. They're much faster, and better, especially <a href="//firefox.com">Firefox</a>!
+      </p>
+    </div>
+  </div>
+</div>
+<div class="container">
+  <p>
+    After enabling javascript, the page should automatically redirect to the homepage. If it doesn't, just refresh the page, or <a href="{% url 'pages:index'%}">Click here</a>.
+  </p>
+</div>
+</body>
+<script>window.location.href=location.href.replace("{% url 'pages:no-js' %}", '');</script>
+</html>

templates/index.html

@@ -0,0 +1,40 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}Homepage{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>Welcome Internet!</h1>
+  </div>
+  <div class="row">
+    <h4>Welcome to the place where my knowledge lies - Or at least most of it.</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <p>Welcome people, to my little slice of the internet. I'm Jake, an apprentice software engineer at <a href="//dabapps.com">Dabapps</a>, and this is my website. Somewhere I can put all my work, projects, media, and anything else I can think of. I've done a lot of things in the past, such as <a href="{% url 'robotics:index' %}">Student Robotics</a>, <a href="{% url 'setup:desk' %}">Custom built PC's</a> and <a>College Projects</a>. All of this and more ca be found here. Take a look around, chances are you'll see some very cool things!</p>
+  </div>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-5 col-md-offset-1 h5">
+        <div class="list-group">
+          <a class="list-group-item active h4">Recently Added</a>
+          <a href="#" class="list-group-item">Printr Module for Python. Display messages like a BOSS!</a>
+          <a href="#" class="list-group-item">Hipchat emoticons on other websites? Yes Please!</a>
+          <a href="#" class="list-group-item">All the Roboics media is finally live!</a>
+          <a href="#" class="list-group-item"></a>
+        </div>
+      </div>
+      <div class="col-md-5 col-md-offset-1">
+        <p style="text-align:center"><a class="twitter-timeline" data-dnt="true" href="https://twitter.com/RealOrangeOne" data-widget-id="600774030069760003">Tweets by @RealOrangeOne</a></p>
+        <script>
+          !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
+        </script>
+      </div>
+    </div>
+  </div>
+  <div class="full-width">
+    <div id="index-carousel-container"></div>
+  </div>
+{% endblock %}

templates/markdown.html

@@ -0,0 +1,18 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}{% titleMD %}{% endblock %}{% endblock %}
+
+{% block headercontent %}
+    {% block headerMD %}{% endblock %}
+{% endblock %}
+
+{% block content%}
+    <div class="container" id="markdown-container">
+    <pre>
+        {% autoescape off %}
+            {% block contentMD %}{% endblock %}
+        {% endautoescape %}
+    </pre></div>
+    <script type="text/javascript" src="{% static 'js/markdown.js'%}"></script>
+    <script>$('#markdown-container > pre')[0].innerHTML = markdown.toHTML($('#markdown-container > pre')[0].innerHTML); </script>
+{% endblock %}

templates/media/gallery.html

@@ -0,0 +1,28 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}Gallery{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>My Gallery</h1>
+  </div>
+  <div class="row">
+    <h4>I tend to take a lot of photos, and need somewhere to put them!</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <p>Naturally, I take a lot of photos, sometimes of really cool things! Unfortunately, due to the amount of storage on my server, and the fact that the connection bandwidth isnt great, I cannot store the images on this server, so I have decided to use <a href="https://www.flickr.com">Flickr</a>.</p>
+
+    <p>Flickr is a great service for storing images, allowing over 1TB of storage for free, and great album creation, as well as really easy hotlinks, so I can use the images at different sizes on my website, and therefore use their CDN, taking the strain of my server!</p>
+
+    <p>Click the button below to visit my flickr page, and see all the albums I have on there. Also, all my instagram photos are uploaded there too!</p>
+  </div>
+  
+  <div class="container">
+    <p class="center-text">
+      <button onClick="navTo('https://www.flickr.com/people/theorangeone/')" class="btn btn-primary btn-lg">Visit my Flickr Page <i class="icon ion-images"></i></button>
+    </p>
+  </div>
+{% endblock %}

templates/media/youtube.html

@@ -0,0 +1,25 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}Gallery{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>My Youtube Channel</h1>
+  </div>
+  <div class="row">
+    <h4>Where I put all my videos to help people learn things, or solve a problem.</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <p>I've been making Youtube videos now for the past couple of years, originally on my old channel that I worked on with my mate, and now on this one that's just me. The primary reason I make my videos is to help people out, and hopefully solve a problem for them, as I do exactly the same when I need help with a problem</p>
+    <p>With this channel, I want to kep the content educational and to a very high quality, therfore making it easier for people to find exactly what they need to know from my videos. I've built up a lot of knowledge in the field of technology and computing, and I believe I have a responsibiluty to share this so that others can learn too!
+  </div>
+
+  <div class="container">
+    <p class="center-text">
+      <a href="https://www.flickr.com/people/theorangeone/" class="btn btn-primary btn-lg">Visit my YouTube Channel <i class="icon ion-social-youtube"></i></a>
+    </p>
+  </div>
+{% endblock %}

templates/projects/BSOD-Enabler.html

@@ -0,0 +1,35 @@
+{% extends 'base.html' %}
+{% load staticfiles %}
+{% block htmltitle %}BSOD Enabler{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>BSOD Enabler</h1>
+  </div>
+  <div class="row">
+    <h4>Ever wanted to call a Blue Screen of Death on demand? Well now you can!</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container margin-bottom">
+    <p>For those that use windows, the famous <a href="https://en.wikipedia.org/wiki/Blue_Screen_of_Death">Blue Screen of Death</a> is an annoyance that plagues computers, causing error, frustration, and even loss of work. Whilst trying to configute Nvidia surround on my main rig and it keep blue screening, I thought to myself <q>This is really annoying, I wonder who else I can annoy with a BSOD</q></p>
+    <p><strong>And thus the BSOD_Enabler was born!</strong></p>
+    <p>After researching into it for a while, it turns out that there are a few different ways to cause a BSOD, unfortunately most of which are by doing things that are meant to cause a BSOD, and can therefore be dangereous to a computer, something I didn't really want. Then I stumbled upon <a href="http://www.wikihow.com/Force-a-Blue-Screen-in-Windows">this article</a>, which shows that you can infact envoke a BSOD through completely natural methods, which won't cause damage to a computer. Now to write a program that toggles it.</p>
+  </div>
+  <div class="full-width" style="height: 50%;">
+    <div class="full-height fix-image" style="background-size: cover; background-image: url('{% static 'img/BSOD_Enabler_Screenshot.png' %}');"></div>
+  </div>
+  <div class="container">
+    <p>Obviously there are many differnet ways, and probably far better ways of doing this, but I wanted something that was simple to use, fast, and could be done by anyone, no matter how technically illiterate. So I decided to write it in C#, and use a windows console interface.</p>
+    <p>Below you can find a download link to the application, as well as a link to the source code. I am hoping to upgrade the project in the future to allow for automated triggering, a much faster UI, with options, as well as a simple one-click setup and BSOD.</p>
+  </div>
+  <div class="container">
+    <div class="btn-group btn-group-justified">
+      <p class="center-text">
+        <a class="btn btn-primary btn-lg" href="" download="BSOD_Enabler.exe">Download BSOD Enabler Here</a>
+        <a class="btn btn-default btn-lg" href="javascript:alert('Coming in next version.');">View on Github <i class="icon ion-social-github"></i></a>
+      </p>
+    </div>
+  </div>
+{% endblock %}

templates/projects/all_projects.html

@@ -0,0 +1,78 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}All Projects{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>All Projects</h1>
+  </div>
+  <div class="row">
+    <h4>The list of (almost) Everything Ive ever done in my life!</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <p>
+      Here you can find all the projects I have made that I can publicly share, Some incredibly useful, others less so! Feel free to share any of the content with anyone you know, or feature it wherever you like! However, please reference me as the creator, and use my dedicated download link, so that no illegitimate or malicious copies are made.
+    </p>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-md-4">
+        <h3>Blue Screen of Death Enabler</h3>
+        <p>
+          Blue screens of death are an occurance that has plagued windows users for years, when something goes wrong on their computer and windows just goes "Nope, screw this, i'm done, bye". BSOD Enabler is a simple tool that enables the ability to call a Blue Screen on request, whether it's for testing purposes, or just to annoy someone, which trust me it really does!
+        </p>
+        <p class="pull-right">
+          <a href="{% url 'projects:bsod-enabler' %}" class="btn btn-default">More Information...</button>
+        </p>
+      </div>
+      <div class="col-md-8">
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-md-4">
+        <h3>Attact on Blocks Game</h3>
+        <p>
+          Attack on Blocks is a space invaders style game that I wrote for my IT coursework, for the games development unit. It was the first game i've written, and I think it turned out rather well, and the source code can be found at the bitbucket page. The game has a texture pack system, less 8-bit audio, as well as a much higher frame rate!
+        </p>
+        <p class="pull-right">
+          <a class="btn btn-default">More Information...</a>
+        </p>
+      </div>
+      <div class="col-md-8">
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-md-4">
+        <h3>Hipchat Emoticons for All</h3>
+        <p>
+          <i>Hipchat emoticons for all</i> is a browser extension that allows the use of hipchat emoticons, by far the best set, on many other websites, including GitHub and Trello. Because life without emoticons is just boring, and some sites have just limited or terrible ones naturally.
+        </p>
+        <p class="pull-right">
+          <a href="" class="btn btn-default">More Information...</a>
+        </p>
+      </div>
+      <div class="col-md-8">
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <h3>Github and Bitbucket?!</h3>
+    <p>
+      There is a reason that I have both a github and bitbucket account, whilst originally it was becuse different people used different services, now it just seems stupid to keep both and not really have a need for both! Now, after a eurika moment, I have a use for both services!
+    </p>
+    <p>
+      I'm going to use github for production projects, ones that are out and released properly, as it allows for much better contributions. Bitbucket on the other hand will be used for small development projects, and making , as it allows for unlimited private repositories.
+    </p>
+  </div>
+{% endblock %}

templates/projects/hipchat-emoticons-for-all.html

@@ -0,0 +1,33 @@
+{% extends 'base.html' %}
+{% load staticfiles %}
+{% block htmltitle %}Hipchat Emoticons for All{% endblock %}
+
+{% block headercontent %}
+  <div class="row black-text">
+    <h1>Hipchat Emoticons for all!</h1>
+  </div>
+  <div class="row black-text">
+    <h4>Bombard both your and others lives in emoticons - No website is safe!</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container margin-bottom">
+  <p>After starting my new job at Dabapps, I was introduced to the world of <a href="https://hipchat.com">Hipchat</a>, and it's wonderful array of emoticons, as well as the ones added. It was wonderful, it made communicating with friends and colleagues much more interesting!</p>
+  <p>Unfortunately, the emoticons on the other services we use, like <a href="https://github.com">Github</a>, were terrible in comparison. So it was after a discussion with <a href="https://github.com/jakesidsmith">@JakeSidSmith</a> about him just using things like (facepalm), (notsureif), and (wat) in <a href="https://www.messenger.com/">Facebook messenger</a>, and hoping people understand what it means, that I decided to make 'Hipchat Emoticons for all', so people like him could use a much better set of emoticons.</p>
+  </div>
+  <div class="container">
+    <p>The premis is very simple, whenever it sees a hpichat emoticon code, like (notsureif), it replaces it with an emoticon. If only writing the code could have been this simple! I started writing the plugin in firefox, using <a href="https://wiki.mozilla.org/Jetpack">Jetpack</a>, which uses Javascript. The initial stages of the code were very simple, but I encountered problems making sure that anything loaded after the page was loaded (such as a facebook message), be changed too.</p>
+    <p>Fortunately after many hours of testing, and changing the code, I finally got everything working perfectly, and in a way that made adding new sites incredibly easy! The code isnt the greatest in terms of performance, and there are some things that could have obviously been done better, but this was all done to help with a shared codebase between Chrome and Firefox, which don't play nice when it comes to extensions.</p>
+    <p>Currently the application is in very beta stages right now, only having tested partial support for github, but the code is all available on GitHub, if people have their own suggestions of improvements. </p>
+  </div>
+  <div class="container">
+    <div class="btn-group btn-group-justified">
+      <p class="center-text">
+        <a class="btn btn-primary btn-lg" href="">Download for Firefox</a>
+        <a class="btn btn-default btn-lg" href="https://github.com/RealOrangeOne/hipchat-emoticons-for-all">View on Github <i class="icon ion-social-github"></i></a>
+        <a class="btn btn-success btn-lg" href="">Download for Chrome</a>
+      </p>
+    </div>
+  </div>
+{% endblock %}

templates/projects/morse-code-decoder.html

@@ -0,0 +1,44 @@
+{% extends 'base.html' %}
+{% load staticfiles %}
+{% block htmltitle %}Wiki Game Solver{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>Wiki Game Solver</h1>
+  </div>
+  <div class="row">
+    <h4>Sometimes writing a cheat for a game is more fun than the game itself!</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <p>
+      It's not often someone will need to decode text into morse code (and visa-versa), but if I had something like this when I needed it, it would have saved me hours of time! I originally wrote this code for the Student Robotics 2015 Entry, to convert a string message into a morse code message that would be transmitted using LEDs, for aestetics and debugging. Unfortunately due to a fixed time frame, this idea was scraped before it could be fully implemented. Fortunately the decoder worked perfectly!
+    </p>
+    <p>
+      Originally I had written the code in python, but to make it much more useful for people, I've removed the decoding part of the code, and converted the information into JSON, so it can be used in a variety of different languages easily.
+    </p>
+  </div>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-8">
+        <h3>Using the library</h3>
+        <p>
+          Because the format is JSON, the library can be used in a wide variety of different languages. Just make sure to look up how to read JSON files in your chosen language, and it should work perfectly!
+        </p>
+      </div>
+      <div class="col-md-4">
+        <h3>View Source</h3>
+        <p>
+          The source of the library is on github as a gist. I recommend downloading the file to use yourself, however for testing you can use githubs raw view as a hotlink.
+        </p>
+        <p>
+          <a href="" class="btn btn-default btn-lg btn-block">
+            View on Github <i class="icon ion-social-github"></i>
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+{% endblock %}

templates/projects/wiki-game-solver.html

@@ -0,0 +1,54 @@
+{% extends 'base.html' %}
+{% load staticfiles %}
+{% block htmltitle %}Wiki Game Solver{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>Wiki Game Solver</h1>
+  </div>
+  <div class="row">
+    <h4>Sometimes writing a cheat for a game is more fun than the game itself!</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <p>
+      For those who dont know what the Wiki Game is: The Wiki Game is an online game where you attempt to navigate through wikipedia from a start page to a goal page using as few other pages as possible. Once i was shown the Wiki Game by my friend, and after i realised that I really wasn't very good at it, I looked into how the system worked, and how I could beat it.
+    </p>
+    <p>
+      I couldnt see how the back end worked, but after playing a few games and checking what happened on the page,the way that the game was won was when the iframe was at the final page location, or at least a clone of it on their servers with extra querystring information.
+    </p>
+    <p>
+      With this information, I started to write some javascript that would change the location of the iframe to the goal. Fortunately for me, there was already a link to the real winning page, so I could use that to construct the final URL, and direct the iframe to it, meaning I was able to win the game in 1 turn.
+    </p>
+  </div>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-5">
+        <h3>Using the code</h3>
+        <p>In the interest of ease of use, it's very simple to use. Just use the code, and let it do all the work.</p>
+        <ol>
+          <li>Start a new game on <a href="http://thewikigame.com/speed-race">Wiki Game</a>, DON'T press start!</li>
+          <li>Open your browser's developers console. This will vary from browser.</li>
+          <li>Open the javascript console</li>
+          <li>Paste the compact version of the code there, and execute it (press enter)</li>
+          <li>Congratulations, you just won!</li>
+        </ol>
+        <p>
+          If you want to win more games, just repaste the code, it works as often as you like!
+        </p>
+      </div>
+      <div class="col-md-7">
+        <h3>View Source</h3>
+        <script src="https://gist.github.com/RealOrangeOne/7da9a3dd1bf90ecdf7be.js"></script>
+      </div>
+    </div>
+  </div>
+  <div class="container">
+    <h3>Disclamier</h3>
+    <p>
+      As I experienced whilst developing this, the people that play Wiki Game don't tend to like people cheating. There were a lot of people getting very annoyed when I was testing it. So please use this at your own risk! At the moment I don't think there is any kind of banning system, but be warned!
+    </p>
+  </div>
+{% endblock %}

templates/robotics/2014-index.html

@@ -0,0 +1,50 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}Student Robotics 2014{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>Student Robotics 2014</h1>
+  </div>
+  <div class="row">
+    <h4>The home of Lucy. <small>(No it doesnt stand for anything)</small></h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-4">
+        <img style="border-radius: 12px;" class="full-width" src="https://farm1.staticflickr.com/737/20984044320_ccbba155f9_o.gif" />
+      </div>
+      <div class="col-sm-8">
+        <p>Welcome to the homepage of Collyer's Student Robotics Team 2015 (The 'A' Team) - Creators of 'A.L.I.C.E'! Here you can see everything that goes on throughout the competition.</p>
+        <p>This website is here to bridge the gap between the team and the outside world, and also to document everything that we do so that parents and Blue Shirts can see what we have been getting up to! Not only is the website for this, but it's also in the competition too! There is a prize (Awarded at the competition itself), for the best online presence. Hopefully no one else that has entered has their own domain name with dedicated section for the competition! </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <h2>The Competition</h2>
+    <p>As was announced at kickstart, the game for this year is a take on the classic gamemode Capture the Flag. 4 teams compete over 5 flags to move as many of them as they can into their scoring zones. The person with the most flags in their scoring zone wins.</p>
+    <p>The flags are 25cm cubes of wood on caster wheels weighing roughly 2kg. The rules prevent us from lifting them, so the idea is to drag them around!</p>
+    <p>To see a copy of the rules from the competition, Click Here!</p>
+  </div>
+
+  <div class="full-width" style="height: 75%;">
+    <div class="full-height fix-image" style="background-size: cover; background-image: url('https://farm8.staticflickr.com/7704/17309744901_2d0ac6a174_b.jpg');"></div>
+  </div>
+
+  <div class="container">
+    <h2>Why call it 'ALICE'?</h2>
+    <p>The decision to name the robot 'Alice' was a decision made by the whole group. Thats a lie, Ben suggested it and as no one had any better ideas and because he gets overruling vote on this for some reason , it stuck.</p>
+    <p>After this decisions was made, I decided to set out to find the cheesiest acronym we could for 'Alice', to make the name slightly more interesting, and not some random girls name pulled from thin air on the bus ride home from kickstart. There were a few rather good ideas, most of them coming from Sam:</p>
+    <p><ul>
+      <li>'Automated Laser-cut Interactive Capturing Entity'</li>
+      <li>'Abnormally Lame and Innacurate Control-less Engine'</li>
+      <li>'Anti-Losing Immaculate Competitive Extravaganza'</li>
+    </ul></p>
+    <p>One idea was also suggested that we name the robot after the first sponsor we got, but as we didnt get one util after the team split, the other team took that name instead. In the end we decided to go with one that Sam initially suggested, so 'Alice' officially stands for:</p>
+    <p><h3 class="center-text">'Autonomous Logistics and Inevitable Collision Engine'</h3></p>
+  </div>
+{% endblock %}

templates/robotics/2015-index.html

@@ -0,0 +1,50 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}Student Robotics 2015{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>Student Robotics 2015</h1>
+  </div>
+  <div class="row">
+    <h4>The home of the Autonomous Logistics and Inevitable Collision Engine!</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-4">
+        <img style="border-radius: 12px; width: 100%;" src="https://farm1.staticflickr.com/737/20984044320_ccbba155f9_o.gif" />
+      </div>
+      <div class="col-sm-8">
+        <p>Welcome to the homepage of Collyer's Student Robotics Team 2015 (The 'A' Team) - Creators of 'A.L.I.C.E'! Here you can see everything that goes on throughout the competition.</p>
+        <p>This website is here to bridge the gap between the team and the outside world, and also to document everything that we do so that parents and Blue Shirts can see what we have been getting up to! Not only is the website for this, but it's also in the competition too! There is a prize (Awarded at the competition itself), for the best online presence. Hopefully no one else that has entered has their own domain name with dedicated section for the competition! </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-8">
+        <h2>The Competition</h2>
+        <p>As was announced at kickstart, the game for this year is a take on the classic gamemode Capture the Flag. 4 teams compete over 5 flags to move as many of them as they can into their scoring zones. The person with the most flags in their scoring zone wins.</p>
+        <p>The flags are 25cm cubes of wood on caster wheels weighing roughly 2kg. The rules prevent us from lifting them, so the idea is to drag them around!</p>
+        <p>To see a copy of the rules from the competition, <a>Click Here!</a></p>
+      </div>
+      <div class="col-sm-4">
+        <div class="list-group">
+          <a class="list-group-item active h4">Quick Links</a>
+          <a href="{% url 'robotics:2015-robot' %}" class="list-group-item">The Robot - A.L.I.C.E</a>
+          <a href="#" class="list-group-item">The Code</a>
+          <a href="#" class="list-group-item">Gallery</a>
+          <a href="#" class="list-group-item">Blog</a>
+          <a href="#" class="list-group-item">Competition Information</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="full-width" style="height: 75%;">
+    <div class="full-height fix-image" style="background-size: cover; background-image: url('https://farm8.staticflickr.com/7704/17309744901_2d0ac6a174_b.jpg');"></div>
+  </div>
+{% endblock %}

templates/robotics/2015-robot.html

@@ -0,0 +1,54 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}The Robot | Student Robotics 2015{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>A.L.I.C.E</h1>
+  </div>
+  <div class="row">
+    <h4>The Autonomous Logistics and Inevitable Collision Engine!</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <p>
+      Our entry for 2015, named 'ALICE', was a massive improvement over last years model, in both design, and the code for it. Before ALICE was built, the design team built us a very basic chassis usind scrap parts from 2014, which allowed us to write a large amount of the code base before we even had the robot built. Originally I wanted the final chassis to be built before the end of January, so we had a lot of time to test out the design for the robot and test using the final, in reality, it was closer to the middle of march before this was a reality.
+    </p>
+  </div>
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-4">
+        <!-- Image of initial design (on paper) -->
+      </div>
+      <div class="col-sm-8">
+      </div>
+    </div>
+    <p>
+      The entire chassis was made from custom, in-house cut, sheets of plywood, which allowed us to be very precise in the design of the robot to make sure that all the pieces would fit together properly, making the chassis less likely to break.
+    </p>
+    <p>
+      The initial design was concieved by Ben, at kickstart, and was then refined over the coming weeks by me and the rest of the building team. This was made much easier from the use of the 3d model (See Right), that ben made, which helped us visualize any changes that were to be made, as well as work out strategy by seeing the measurements we had to work with.
+    </p>
+    <p>
+      Once the build was completed, it was to a much higher design and quality than I could have ever imagined! It allowed us to forget about any shortcomings when it came to chassis, not having to compensate for weight distribution, or worry about the grip on the wheels.
+    </p>
+  </div>
+  <div class="full-width" style="height: 75%;">
+    <div class="full-height fix-image" style="background-size: cover; background-image: url('https://farm8.staticflickr.com/7704/17309744901_2d0ac6a174_b.jpg');"></div>
+  </div>
+
+  <div class="container">
+    <h2>Why call it 'ALICE'?</h2>
+    <p>The decision to name the robot 'Alice' was a decision made by the whole group. Thats a lie, Ben suggested it and as no one had any better ideas and because he gets overruling vote on this, for some reason , it stuck.</p>
+    <p>After this decisions was made, I decided to set out to find the cheesiest acronym we could for 'Alice', to make the name slightly more interesting, and not some random girls name pulled from thin air on the bus ride home from kickstart. There were a few rather good ideas, most of them coming from Sam:</p>
+    <p><ul>
+      <li>'Automated Laser-cut Interactive Capturing Entity'</li>
+      <li>'Abnormally Lame and Innacurate Control-less Engine'</li>
+      <li>'Anti-Losing Immaculate Competitive Extravaganza'</li>
+    </ul></p>
+    <p>One idea was also suggested that we name the robot after the first sponsor we got, but as we didnt get one util after the team split, the other team took that name instead. In the end we decided to go with one that Sam initially suggested, so 'Alice' officially stands for:</p>
+    <p><h3 class="center-text">'Autonomous Logistics and Inevitable Collision Engine'</h3></p>
+  </div>
+{% endblock %}

templates/robotics/index.html

@@ -0,0 +1,54 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}Student Robotics{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>Student Robotics</h1>
+  </div>
+  <div class="row">
+    <h4>It's like a completely autonomous, nerdy, non-contact version of Robot Wars!</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <p>Student Robotics is the the place where my development knowledge really started to grow. Thanks to the other people in my team teaching me. I had never done anything robotics related, and so when my computing teacher initially told us about it, I wasnt really interested. After I found out that my friend was also doing it, I signed up, and went along to the kickstart. From then on I was hooked, getting involved with all aspects of the development and design, as well as helping out other teams on the IRC room.</p>
+  </div>
+
+  <div class="container">
+    <h2>What is Student Robotics?</h2>
+    <p>Student Robotics is a volunteer organisation that runs an annual robotics competition for 16-18 year olds. It was originally founded by students from the University of Southampton in 2006, and now includes volunteers (“Blue Shirts”) from multiple other universities, including the University of Bristol and Grenoble INP. It primarily takes teams and volunteers from the UK, but also some from Germany and France.</p>
+    <p>To find out more, visit their website <a href="https://studentrobotics.org">Here.</a></p>
+  </div>
+
+  <div class="container">
+    <p>Being at college for 2 years, meant I entered 2 years of competitions, SR14, and SR15. We were encouraged to gain an online presence for our team, so I created a website for both years. Unfortunately due to account inactivity, and me changing my website 3 times since, The original pages have been lost, however all the content still remains. Below you can find all the content, media and information about both competitions, as well as the source code for Lucy, the 2014 entry. </p>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-6">
+        <div class="thumbnail sr-option">
+          <div class='image' style="background-image: url('https://farm9.staticflickr.com/8687/16678909884_469834a1b6_b.jpg');"></div>
+          <div class="caption">
+            <h2>Student Robotics 2014</h2>
+            <p><strong>Robot Name:</strong> Lucy</p>
+            <p><a href="{% url 'robotics:2014-index' %}" class="btn btn-srobo btn-block">More Info</a></p>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-sm-6">
+        <div class="thumbnail sr-option">
+          <div class="image" style="background-image: url('https://farm8.staticflickr.com/7674/17308375182_8f8f60bfbb_b.jpg');"></div>
+          <div class="caption">
+            <h2>Student Robotics 2015</h2>
+            <p><strong>Robot Name : </strong> A.L.I.C.E <small>(<strong>A</strong>utonomous <strong>L</strong>ogistics and <strong>I</strong>nevitable <strong>C</strong>ollision <strong>E</strong>ngine)</small></p>
+            <p><a href="{% url 'robotics:2015-index' %}" class="btn btn-srobo btn-block" >More Info</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endblock %}

templates/setup/index.html

@@ -0,0 +1,40 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}My Setup{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>All the Tech!</h1>
+  </div>
+  <div class="row">
+    <h4>Yes there is a lot, but it all serves a purpose. Or at least most of it does anyway.</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <p>
+      My setup is much more of a project than something that is stable and constant. I am constantly upgrading, and changing things, whether it's on my main machine (which most of it is), my desk at work, or just a standard upgrade to my phone. As I use technology every day, for many, <strong>Many</strong> hours, I need it to work brilliantly, and not hold me back from anything I want to do.
+    </p>
+    <p>
+      As well as my main desk, there are a few other machines I use often, namely my laptop, work rig, and my phone. All of which follow the same criteria of not holdng me back from what I wantever to do.
+  </div>
+  <div class="container center-text" style="margin-bottom: 5px;">
+    <h2>Main Rig</h2>
+    <p>My main rig is the most powerful machine I own, and have ever owned. It's a fully custom built machine, currently in it's second generation, with an upgrade coming early 2016.</p>
+    <a href="{% url 'setup:desk' %}" class="btn btn-lg btn-primary">More Information</a>
+  </div>
+  <div class="full-width" style="height: 70%;">
+    <div class="full-height fix-image" style="background-image: url('https://c1.staticflickr.com/1/557/18312934624_ce49630c5f_b.jpg');">
+    </div>
+  </div>
+  <div class="container center-text" style="margin-bottom: 5px;">
+    <h2>Portable Devices</h2>
+    <p>Like most people my age, I'm never far from an interent connection, or at least some kind of gadget.</p>
+    <a href="" class="btn btn-lg btn-primary">More Information</a>
+  </div>
+  <div class="full-width" style="height: 75%;">
+    <div class="full-height fix-image" style="background-image: url('');">
+    </div>
+  </div>
+{% endblock %}

templates/setup/my-rig.html

@@ -0,0 +1,99 @@
+{% extends 'base.html' %}
+
+{% block htmltitle %}My Main Rig{% endblock %}
+
+{% block headercontent %}
+  <div class="row">
+    <h1>My Glorious Setup</h1>
+  </div>
+  <div class="row">
+    <h4>Yes it's incredibly overkill for what I do, but that's just the way I like it!</h4>
+  </div>
+{% endblock %}
+
+{% block content%}
+  <div class="container">
+    <p>
+      My setup is everything, I use my computer at least once a day to browse the internet, work on projects, even update this website, so it's very important that everything works perfectly and the fastest it can. Obviously these machines are probably a little too powerful for someone that does almost primarily software development, but it means when I want to do things like video editing, 3D modeling, or anything else that would require a high end computer, I can, because my computer is equip to handle it.
+    </p>
+    <p>
+      Over the 2 generations, my setup has evolved from a single monitor i5 workstation machine, to a triple monitor AMD FX-based monster of a computer. Parts lists for both machines, as well as my next planned build can be found below!
+    </p>
+  </div>
+
+  <div class="full-width" style="height: 75%;">
+    <div class="full-height fix-image" style="background-size: cover; background-image: url('https://c1.staticflickr.com/1/557/18747807580_b259bb0b48_h.jpg');">
+    </div>
+  </div>
+
+  <div class='container'>
+    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+      <div class="panel panel-primary">
+        <div class="panel-heading" role="tab" id="heading1">
+          <h4 class="panel-title">
+            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
+              1st Generation
+            </a>
+          </h4>
+        </div>
+        <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
+          <div class="panel-body black-text">
+            <p>
+              The first generation of this was the first custom build i'd ever done. When I first built this, I wasn't really into gaming, programming, or any kind of heavy workflow for that matter, so this build isn't particullly powerful, although compared to my old <a href="http://www.pcworld.com/product/31104/dell-inspiron-1525.html">Dell Inspiron 1525</a>, it was pretty damn incredible!
+            </p>
+            <p>
+              You can find the full list of parts over on the PCPartPicker link below. Unfortunately due to the lack of catalog, or bad memory on my part, not all the parts are there, but there are as many as possible.
+            </p>
+            <p class="center-text">
+              <a href="" class="btn btn-primary btn-lg">Visit PCPartPicker</a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="panel panel-primary">
+        <div class="panel-heading" role="tab" id="heading2">
+          <h4 class="panel-title">
+            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
+              2nd Generation
+            </a>
+          </h4>
+        </div>
+        <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
+          <div class="panel-body black-text">
+            <p>
+              The second generation of my build was in response to an updated workflow. I'd recently started working on 3D modeling, and found the wonderful world that is PC gaming, and needed something slightly more powerful than the <a href="#gen1">1st generation</a>.
+            </p>
+            <p>
+              I've been using the current generation for around 3 years now, and it's worked perfectly for all of this. The main reason I'm upgrading is to get more features, The 990FX chipset is very old, and my motherboard is missing a few key features such as dynamic fan control. And also I want to get into surround gaming, and I need some symetrical monitors, and more graphics horsepower for that!
+            </p>
+            <p class="center-text">
+              <a href="" class="btn btn-primary btn-lg">Visit PCPartPicker</a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="panel panel-primary">
+        <div class="panel-heading" role="tab" id="heading3">
+          <h4 class="panel-title">
+            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
+              3rd Generation - Coming Soon
+            </a>
+          </h4>
+        </div>
+        <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
+          <div class="panel-body black-text">
+            <p>
+              The 3rd generation of my build isn't actually a thing yet, but I'm still actively working on what it's going to look like and the components inside it. Currently it's going to be an Intel based build, unless AMD release the reported 16-core monster, which I obviously have to have! You can find the current parts list at the link below, the list is always changing.
+            </p>
+            <p>
+              The main reason this build will be different, and a complete change from the previous 2, is the OS setup. Unlike the other 2, the main OS will be Ubuntu Gnome, and to maintain support for windows-only software and games, I'm going to be using a virtual machine running windows, with a graphics card hardware pass-through to it, so I can run windows applications, and then game using steam in-home streaming from the VM to the linux machine. The best of both worlds! I got the idea for doing this from a video <a href="https://www.youtube.com/user/razethew0rld">TekSyndicate</a> made, which is by far the single greatest example of tech wizzardry i've ever seen. You can find the video <a href="https://www.youtube.com/watch?v=16dbAUrtMX4">here</a>.
+            </p>
+            <p class="center-text">
+              <a href="" class="btn btn-primary btn-lg">Visit PCPartPicker</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endblock %}