organized posts and styled footer and added broccolini to home

_layouts/default.html

@@ -36,40 +36,37 @@
 
   {{ content }}
 
-  <div class="block">
-    <!-- <div class="portfolio"> -->
-    <div class="columnA">
-      <!-- <h1>I'm on teh Internets!</h1>       -->
-    </div>
-    <div class="columnB">
-      <h1 id="me-on-teh-internets">I'm on teh Internets!</h1>          
-    <div class="contact">
-      <p>
-        Diana Mounter is broccolini<br />
-        diana.mounter@gmail.com<br />
-        <a href="http://twitter.com/broccolini/">twitter.com/broccolini</a><br />
-        <a href="http://broccolini.tumblr.com/">broccolini.tumblr.com</a><br />
-        <a href="http://github.com/broccolini/">github.com/broccolini</a>
-      </p>
-    </div>
-    <div class="contact">
-      <p>
-				<a href="http://dribbble.com/broccolini">dribbble.com/broccolini</a><br />
-        <a href="http://flickr.com/photos/broccolini/">flickr.com/photos/broccolini</a><br />
-				<a href="http://pictajam.com/broccolini">pictajam.com/broccolini</a><br />
-        <a href="http://www.quora.com/Diana-Mounter">quora.com/Diana-Mounter</a><br />
-        <a href="http://au.linkedin.com/in/dianamounter">au.linkedin.com/in/dianamounter</a>
-      </p>
-    </div>
-    <!-- </div> -->
-    </div>
-    <!-- <div class="rss">
-      <a href="http://feeds.feedburner.com/broccolini">
-        <img src="/images/rss.png" alt="Subscribe to RSS Feed" />
-      </a>
-    </div> -->
-  </div>
-</div>
+<div class="block">
+  <div class="footer">
+		<div class="container-title">
+        <h2 class="footer">I'm on teh Interwebs!</h2>
+		</div><!--container-title-->
+       <div class="container">
+    		<div class="social">
+		      <p>Diana Mounter is broccolini<br />
+		        diana.mounter@gmail.com<br />
+						<a href="http://twitter.com/broccolini/">twitter.com/broccolini</a>       
+		      </p>
+		    </div><!-- social -->
+		    <div class="social">
+		      <p>
+		        <a href="http://github.com/broccolini/">github.com/broccolini</a>
+						<a href="http://dribbble.com/broccolini">dribbble.com/broccolini</a><br />
+						<a href="http://speakerdeck.com/u/broccolini">speakerdeck.com/u/broccolini</a>
+
+		      </p>
+		    </div><!-- social -->
+				<div class="social">
+					<p>
+						<a href="http://broccolini.tumblr.com/">broccolini.tumblr.com</a><br />
+		        <a href="http://flickr.com/photos/broccolini/">flickr.com/photos/broccolini</a><br />
+		        <a href="http://www.quora.com/Diana-Mounter">quora.com/Diana-Mounter</a>
+		      </p>
+				</div><!-- social -->
+			</div><!-- container -->
+		<div><!-- footer -->
+	</div><!-- block -->
+ </div><!-- background -->
 
 <!-- ClickTale Bottom part -->
 <div id="ClickTaleDiv" style="display: none;"></div>

css/screen.css

@@ -93,6 +93,11 @@ h2.portfolio {
 	margin-top: 115px;
 }
 
+h2.footer {
+	font-size: 40px;
+	padding-bottom: 11px;
+}
+
 h3 {
 	font-size: 30px;
 	font-weight: normal;
@@ -215,8 +220,17 @@ div.feature-image {
 div.footer {
 	width: 780px;
 	display: block;
+	margin: 0 auto;
+}
+
+div.social {
+	display: block;
+	width: 230px;
+	float: left;
+	margin: 0 30px 0 0;
 }
 
+
 div.minor {
 	display: block;
 	width: 180px;

designs/github-black-swan-posters.html

@@ -0,0 +1,18 @@
+---
+layout: portfolio
+title: GitHub black swan posters
+---
+
+	  <div class="container-title">
+			<h3> {{ page.title }} </h3>
+		</div><!--container-title-->	
+
+					<div class="major">
+						  <p>I wanted to stretch my Illustrator skills so I created myself a project, which was to design a poster for GitHub as if it were a film in the style of the <a href="http://www.annihall.com/beautyblog/wp-content/uploads/2010/12/FI_BLACKSWAN_posters4.jpeg">Black Swan movie posters</a> using the <a href="http://octodex.github.com/">GitHub Octocat</a> as the main visual feature.</p>
+						  <a class="img" href="/images/portfolio/github-poster1.png"><img class="thumb" src="/images/portfolio/github-poster1-thumb.png"></a>
+						  <a class="img" href="/images/portfolio/github-poster2.png"><img class="thumb" src="/images/portfolio/github-poster2-thumb.png"></a>
+						  <a class="img" href="/images/portfolio/github-poster3.png"><img src="/images/portfolio/github-poster3-thumb.png"></a>          
+
+
+
+					</div><!--major-->

designs/octoswan-wallpaper.html

@@ -0,0 +1,17 @@
+---
+layout: portfolio
+title: OctoSwan wallpaper
+---
+
+<div class="major">
+  	<h3> {{ page.title }} </h3>
+	  	<p>After making the <a href="/designs/github-black-swan-posters.html">GitHub "black swan" posters</a> I turned 2 of the designs into wallpaper for desktop and devices.</p>
+		  <p>I made variations of the cream one into a faint grey background after a friend said he liked low contrast backgrounds. I then experimented and made myself a bright red version. I expected to find it too much, but I find the bright red color energetic and it helps make me feel motivated. I've totally fallen in love with it and have it on my iPhone too.</p>
+		  <a class="img" href="https://github.com/broccolini/background_downloads/raw/master/downloads/github/github-iPhone4-red.png"><img src="/images/backgrounds/octoswan-red.png"></a>        
+			<p>You can download all of the backgrounds I've made so far from my <a href="https://github.com/broccolini/background_downloads/tree/master/downloads">background downloads repo on GitHub</a> </p>
+			<a class="img" href="https://github.com/broccolini/background_downloads/raw/master/downloads/github/github-iPhone4-lite.png"><img class="thumb" src="/images/backgrounds/octoswan-grey.png"></a>
+		  <a class="img" href="https://github.com/broccolini/background_downloads/raw/master/downloads/github/github-iPhone4-black.png"><img class="thumb" src="/images/backgrounds/octoswan-black.png"></a>
+		  <a class="img" href="https://github.com/broccolini/background_downloads/raw/master/downloads/github/github-iPhone4-cream.png"><img src="/images/backgrounds/octoswan-cream.png"></a>								
+			<p>I'm working on a few other backgrounds and I am working on a site to host them all so that's in the pipeline.</p>
+			</div><!-- major -->
+

designs/octotron.html

@@ -0,0 +1,14 @@
+---
+layout: portfolio
+title: OctoTron
+---
+
+			<h3> {{ page.title }} </h3>
+
+		<div class="major">
+			<p>After seeing <a href="http://octodex.github.com/ironcat/">IronCat</a> way back in April this year I couldn't help but think what octocat I would make. I'd recently watched Tron and so naturally I had to make OctoTron.</p>
+			<a href="/images/backgrounds/octotron-desktop-dark-blue.png"><img src="/images/backgrounds/octotron-on-dark-blue.png"></a>					
+				<p>I decided to go with a version inspired by the first movie. It took me a while to finish with the small event of moving countries. But finally, here's <a href="/images/backgrounds/octotron.jpg">OctoTron</a>, now also proudly living on the <a href="http://octodex.github.com/octotron/">octodex</a>.</p>
+			<p>You can also grab him from my <a href="https://github.com/broccolini/background_downloads/tree/master/downloads/github">backgrounds repo</a> for iPhone, iPad and desktop in a few variations. Enjoy. </p>
+
+			</div><!-- major -->

designs/stick-party.html

@@ -0,0 +1,10 @@
+---
+layout: portfolio
+title: Stick Party
+---
+
+<div class="major">
+  	<h3> {{ page.title }} </h3>
+	    <p>The Stick Party site was for advertising a web app that a friend of mine was building. He wanted it to be a fun design and liked the hand-drawn sketched look. I created "Mr Stick" which I think help achieved the fun feel.</p>
+	    <img src="/images/portfolio/stickparty.png">
+</div><!-- major -->

index.html

@@ -3,7 +3,6 @@
 title: Broccolini
 ---
 
-<div class="page">
 
 	<!-- <div class="block"> -->	
 	<div class="container">
@@ -13,7 +12,7 @@
 		<p class="description-text">I currently work at <a href="http://about.vast.com">Vast</a> doing visual design and user experience strategies. Previously I worked in Sydney at <a href="http://digitaleskimo.net">Digital Eskimo</a> as an Experience Architect.</p>
 		</div><!--description-->
 		<div class="feature-image">
-			<!-- <img src="/images/fighters-red.png"> -->
+			<img src="/images/broccolini.png">
 		</div><!--feature-image-->
 		</div><!--container-->		
 		<!-- </div> -->	
@@ -25,11 +24,11 @@ <h2 id="design">design</h2>
 		<div class="container">
 				<div class="description">
 	        <p class="description-text">I start any design by sketching my ideas out with a black pen and plain white paper. I continue to craft my designs in Illustrator, Photoshop, and Fireworks, for digital and printed things.</p>
-				<!-- <ul>
-					<li>OctoTron</li>
-					<li>OctoSwan backgrounds</li>
-					<li>Stick Party</li>
-				</ul> -->
+					<p>In my current role I am unable to show design work until the sites are live, so for now here are a couple of illustrative projects I've done:</p>
+				<ul class="portfolio">
+					<li><a href="/designs/octotron.html">OctoTron</a></li>
+					<li><a href="/designs/octoswan-wallpaper.html">OctoSwan backgrounds</a></li>
+				</ul>
 				</div><!--description-->
 				<div class="feature-image">
 					<img src="/images/octotron-feature.png">
@@ -45,11 +44,11 @@ <h2 id="projects">projects</h2>
 		</div><!--container-title-->
 		<div class="container">
 				<div class="description">
-	        <p class="description-text">I research and design user experiences, and develop concepts into UI specifications.</p>
+	        <p class="description-text">At Digital Eskimo my role was to research and design user experiences,  develop concepts into UI specifications, and oversee their implementation.</p>
+					<p>Here are some projects I was particularly proud of:</p>
 				<ul class="portfolio">
 					<li><a href="/projects/urban-sketch-lab.html">Urban sketch lab</a></li>
 					<li><a href="/projects/virtual-learning-environment.html">Virtual learning environment</a></li>
-					<li><a href="/projects/designing-broccolini">Designing broccolini.net</a></li>
 				</ul>
 				</div><!--description-->
 				<div class="feature-image">
@@ -70,14 +69,12 @@ <h2 id="talks">talks</h2>
 				<ul class="portfolio">
 					<li><a href="/talks/scrummaster-lord-of-the-universe.html">How I became ScrumMaster Lord of the Universe</a></li>
 					<li><a href="/talks/build-cool-stuff-for-local-government.html">How I build cool stuff for local government</a></li>
+					<li><a href="http://0.0.0.0:4000/talks/better-experience-design.html">Better Experience Design</a></li>
 				</ul>
 				</div><!--description-->
 				<div class="feature-image">
 					<img src="/images/talks-scrum.png">
 				</div><!--feature-image-->
         </div><!--description-->
-		</div><!--container-->
-		</div><!--block-->
 
 
-</div><!--page-->

projects/urban-sketch-lab.html

@@ -48,8 +48,8 @@ <h3>User testing</h3>
 		<p class="caption">The Sketch Lab in use at the event</p>
 
 		<p>The installation generated a lot of interest online too from those unable to attend as <a href="http://www.flickr.com/photos/digitaleskimo/sets/72157624480862991/">we posted images on flickr.</a> the insights gained from this first-hand user feedback were used to inform how we re-purposed it for a global web conference series - <a href="http://south10.webdirections.org/">Web Directions</a> - as they asked us to develop a custom version as the Sydney events key interactive feature.</p>
-		</div><!--major-->
-		</div><!-- container -->
+				</div><!--major-->
+			</div><!-- container -->
 		</div><!-- block -->
 
 

talks/better-experience-design.html

@@ -0,0 +1,16 @@
+---
+layout: portfolio
+title: Better experience design
+---
+
+<p>A presentation I did a few years ago to my colleagues at Digital Eskimo about some of the top things that have helped me become a better user experience designer. Many of these things are still a huge influence on the way I work.</p>
+
+	<div class="container-title">
+	<h3> {{ page.title }} </h3>
+</div><!--container-title-->
+
+	<div class="major">
+
+		<script src="http://speakerdeck.com/embed/4f41a5d9d436c1001f001239.js"></script>
+
+	</div><!--major-->

talks/scrummaster-lord-of-the-universe.html

@@ -12,7 +12,7 @@ <h3> {{ page.title }} </h3>
 		<div class="major">
 
 			<iframe width="560" height="315" src="http://www.youtube.com/embed/-Sc6XJ3q4Ow" frameborder="0" allowfullscreen></iframe>
-		<p><a href="http://www.slideshare.net/diana.mounter/scrum-master-lordoftheuniversefinal">View this presentation on slideshare</a></p>
+		<p><a href="http://speakerdeck.com/u/broccolini/p/how-i-became-scrummaster-lord-of-the-universe">View these slides on Speaker Deck</a></p>
 
 			</div><!--major-->