Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

804 lines (659 sloc) 48.008 kB
{% extends "parent.html" %}
{% block body %}
<div class="caution pattern">
<strong class="title" style=""><span>This Page is a</span>work in progress</strong>
<div>
Oh my, this is embarassing. It seems you've stumbled upon a section of the site
that isn't exactly ready for primetime yet. It's horribly outdated and not exactly the nicest on the eyes,
however it should do until I have time to properly clean it up.
</div>
</div>
<!-- Don't hold this against me! Copied and pasted from (ugh) Drupal. -->
<div class="views-row-2 views-row-even">
<div class="item">
<div class="image">
<a href="http://mozilla.org/sopa" class="imagefield imagefield-nodelink
imagefield-field_image"><img src="../images/portfolio/sopa.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://mozilla.org/sopa">Mozilla's Stop SOPA Campaign</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Fall 2011 | Idea, Programming, Design, Copy</span>
<p>The night before the first SOPA hearings, Mozilla decided we should do what we could to raise awareness. However, we couldn't find a good, concise
place to link to. So, I designed and wrote copy for a "landing page", which was eventually replaced the main Mozilla site during the 24 hour blackout. The
site has helped educate millions of people.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://mozilla.org/sopa">Mozilla's Stop Sopa page</a></b> | <a href="https://github.com/gkoberger/stopsopa"
class="ongithub">Code on Github</a> | <a href="http://cl.ly/1Y1K0X1l3t1w1H3W0Y0N">On NBC</a> | <a href="http://cl.ly/25212V073P000r162K0z">On the NY Times Homepage</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-2 views-row-even">
<div class="item">
<div class="image">
<a href="https://addons.mozilla.org/" class="imagefield imagefield-nodelink imagefield-field_image"><img src="../images/portfolio/addons.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="https://addons.mozilla.org/">Mozilla Add-ons Site</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Summer 2010 | Product Management, Programming, Design</span>
<p>The Mozilla Add-ons website serves over a billion requests a day. I started as a developer (and sometimes designer) on the site, and eventually became the product manager.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="https://addons.mozilla.org/">Visit addons.mozilla.org</a></b> | <a
href="https://github.com/mozilla/zamboni" class="ongithub">Code on Github</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-2 views-row-even">
<div class="item">
<div class="image">
<a href="https://addons.mozilla.org/en-US/firefox/addon/bugzillajs/" class="imagefield imagefield-nodelink
imagefield-field_image"><img src="../images/portfolio/bugzillajs.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="https://addons.mozilla.org/en-US/firefox/addon/bugzillajs/">BugzillaJS</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Spring 2011 | Programming, Design</span>
<p>Bugzilla is a bit like enterprise software &mdash; it does everything, but the UI is horrible. So, I created BugzillaJS, a Firefox add-on that
addresses some major pain points in the software. It's currently used by over half of all Mozilla employees.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="https://addons.mozilla.org/en-US/firefox/addon/bugzillajs/">BugzillaJS on addons.mozilla.org</a></b> | <a
href="https://github.com/gkoberger/bugzillajs" class="ongithub">Code on Github</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-2 views-row-even">
<div class="item">
<div class="image">
<a href="https://addons.mozilla.org/" class="imagefield imagefield-nodelink imagefield-field_image"><img src="../images/portfolio/popcornjs.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="https://services.addons.mozilla.org/en-US/firefox/discovery/pane/11.0/Darwin">Interactive "What Are Add-ons?" Video</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Summer 2011 | Programming</span>
<p>After seeing the "What Are Add-ons?" video, I wanted to do something cool with <a href="http://popcornjs.org/">Mozilla's Popcorn.js</a>. As the video
plays, the site around it changes. For example, the page is translated when translation add-ons are mentioned, and the whole browser gets a background
when Themes are mentioned. (Click "Learn More" to watch the video.)</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="https://services.addons.mozilla.org/en-US/firefox/discovery/pane/11.0/Darwin">The Video</a></b> | <a
href="https://github.com/gkoberger/zamboni/blob/master/media/js/zamboni/discovery_video.js" class="ongithub">Code on Github</a> | <a href="http://popcornjs.org/">Popcorn.js</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-2 views-row-even">
<div class="item">
<div class="image">
<a href="http://gkoberger.net/firefox" class="imagefield imagefield-nodelink
imagefield-field_image"><img src="../images/portfolio/quine.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://gkoberger.net/firefox">Firefox Logo Quine</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Winter 2012 | Programming, Design</span>
<p>Mozilla Webdev started looking for a new t-shirt design, and I decided to try to make a Firefox logo quine using HTML5. A quine is code that outputs
itself. (This isn't a true quine since I cheated a lot, however the concept of it being self-reproducing stands.) We had t-shirts with the HTML5-y Firefox
logo printed.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://gkoberger.net/firefox">Firefox Logo in HTML5</a></b> | <a
href="https://github.com/gkoberger/fxquine" class="ongithub">Code on Github</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-2 views-row-even">
<div class="item">
<div class="image">
<a href="http://olivethemovie.com" class="imagefield imagefield-nodelink
imagefield-field_image"><img src="../images/portfolio/olive.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://olivethemovie.com">Olive</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Fall 2011 | Programming, Design</span>
<p>Olive is the very first full length feature film shot 100% on a cell phone. I designed the website and movie poster for it.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://olivethemovie.com">Olive: The Movie</a></b> | <a
href="https://github.com/gkoberger/olive" class="ongithub">Code on Github</a> | <a
href="http://www.huffingtonpost.com/hooman-khalili/the-making-and-the-music-_b_1211554.html">On Huffington Post</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-2 views-row-even">
<div class="item">
<div class="image">
<a href="http://www.offbeatguides.com" class="imagefield imagefield-nodelink
imagefield-field_image"><img src="../images/portfolio/offbeat.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://www.offbeatguides.com">Offbeat Guides</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started Summer 2008 | Programming</span>
<p>Offbeat Guides was the first startup I worked at. It was a travel guide company with a twist &mdash; the high quality printed travel guides were completely customized for
you, including your name on the cover and things like events and weather while you'd be there. I worked as the lead programmer for the website.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://www.offbeatguides.com">Website</a></b> | <a
href="http://www.techcrunch.com/2009/01/26/offbeat-guides-launches-affiliate-program-grab-promo-codes-here/">TechCrunch
(Launch)</a> | <a href="http://www.techcrunch.com/2008/11/12/technorati-founder-dave-sifry-launches-offbeatguidescom-diy-guidebooks-on-the-go/">TechCrunch (Affiliates)</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-2 views-row-even">
<div class="item">
<div class="image">
<a href="http://rit.edu/intersect" class="imagefield imagefield-nodelink
imagefield-field_image"><img src="../images/portfolio/intersect.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://rit.edu/intersect">RIT Intersect</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Programming, Design, Implementation</span> <p>The RIT Intersect was a project I created while
at RIT (independent of the university). Registering for classes is a quarterly nightmare for students, so I created the system to make it easier. The RIT
Intersect lets you browse, sort, filter and search courses, as well as stores lists, keep track of your plans of study, and generate schedules.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://rit.edu/intersect">The RIT Intersect</a></b> |
<a href="http://www.rit.edu/gccis/intersect/tour/">Tour</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-3 views-row-odd">
<div class="item">
<div class="image">
<a href="http://web.archive.org/web/20100807155009/http://gigaomnetwork.com/" class="imagefield imagefield-nodelink imagefield-field_image"><img
src="../images/portfolio/gigaom.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://web.archive.org/web/20100807155009/http://gigaomnetwork.com/">GigaOM Network</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started Summer 2009 | Design, Implementation</span>
<p>One of the first things I did while at GigaOM was to redesign their <a href="http://web.archive.org/web/20100807155009/http://gigaomnetwork.com/">corporate
website</a>. It was a bit outdated, and needed a refresh. I designed the site and implemented it in WordPress. <em>This website has since been deprecated.</em></p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://gigaomnetwork.com">GigaOM Network
Redesign</a></b> | <a href="http://gkoberger.net/node/159">More Information</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-4 views-row-even">
<div class="item">
<div class="image">
<a
href="http://gkoberger.net/projects/lsi/index.html"
class="imagefield imagefield-nodelink imagefield-field_image"><img src="../images/portfolio/lsi.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://gkoberger.net/projects/lsi/index.html">La Salle Institute Redesign [Prototype]</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started Summer 2009 | Design</span> <p>I was unhappy with the quality of my high school's <a
href="http://lasalleinstitute.org/">current website</a>, so I created a redesign. Currently it's just a proposal, as the school is happy with the
current version.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a
href="http://gkoberger.net/projects/lsi/index.html">La
Salle Redesign</a></b> | <a href="http://lasalleinstitute.org/">Current Site</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-5 views-row-odd">
<div class="item">
<div class="image">
<a
href="http://gkoberger.net/projects/obg/index.html"
class="imagefield imagefield-nodelink imagefield-field_image"><img src="../images/portfolio/obg-redesign.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://gkoberger.net/projects/obg/index.html">Offbeat Guides Redesign [Prototype]</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started January 2010 | Design</span> <p>After working for Offbeat Guides for a number of
years, I came up with my version of what I thought the front page should look like. I sketched it out on paper, and then turned it into a mockup.
I wanted something more fun and colorful &mdash; after all, the company has <em>offbeat</em> in the name!</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a
href="http://gkoberger.net/projects/obg/index.html">Offbeat
Guides Redesign</a></b> | <a href="http://offbeatguides.com">Current Site</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-6 views-row-even">
<div class="item">
<div class="image">
<a href="http://pleasecallmyphone.com" class="imagefield
imagefield-nodelink imagefield-field_image"><img src="../images/portfolio/pcmp.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://pleasecallmyphone.com">Please Call My Phone</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started February 2010 | Programming, Design, Implementation</span> <p>Prior to having a smart
phone, I kept misplacing my phone. And I really wanted to try out Twilio. So, Please Call My Phone was born.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://pleasecallmyphone.com">PleaseCallMyPhone.com &raquo</a></b></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-7 views-row-odd">
<div class="item">
<div class="image">
<a href="http://rit48.com" class="imagefield imagefield-nodelink imagefield-field_image"><img
src="../images/portfolio/rit48.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://rit48.com">RIT48</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started Spring 2010 | Implementation</span> <p>I co-founded <a
href="http://rit48.com">RIT48</a>, an event that aims to bring together students from various disciplines to pitch, plan, develop and launch a web
startup in one weekend &mdash; or, as the name suggests, 48 hours. An intense, energy fueled, entrepreneurial event, RIT48 was designed to showcase the
innovative and creative spirit of RIT students while offering the opportunity to learn and meet new people. Since its creation in 2010, I've been invited
back to judge.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://rit48.com">RIT48 Information</a></b> | <a
href="http://network.rit48.com">RIT48 Network</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-8 views-row-even">
<div class="item">
<div class="image">
<a href="http://sixdegre.es" class="imagefield imagefield-nodelink
imagefield-field_image"><img src="../images/portfolio/sixdegrees.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://sixdegre.es">Six Degrees</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started Summer 2009 | Programming, Design</span> <p>Based on <a
href="http://www.txtst.com/portfolio.php?id=20">Social Genius</a>, six<strong>degrees</strong> was made for the RIT College of Business as a way for
teachers to learn student's names. The software is currently in indefinite private beta, however it will eventually be released for anyone organizing a conference or teaching a course.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://sixdegre.es">Six Degrees &raquo</a></b></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-9 views-row-odd">
<div class="item">
<div class="image">
<a href="http://technospect.com/election2008" class="imagefield
imagefield-nodelink imagefield-field_image"><img src="../images/portfolio/election.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://technospect.com/election2008">Election 2008 Issues</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started August 2008 | Programming, Design</span> <p>This is a little tool I made before the
2008 presidential election, so you could pick a stance you most agree with on 20 issues, and find out candidate you most agree with. The content comes from CNN's "The Issues" section of their Election website.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://technospect.com/election2008">Election2008 Website &raquo</a></b></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-10 views-row-even">
<div class="item">
<div class="image">
<a href="http://www.rit.edu/gwteachin/" class="imagefield
imagefield-nodelink imagefield-field_image"><img src="../images/portfolio/teachin.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://www.rit.edu/gwteachin/">Febuary 5 National Teach-In 2009</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started January 2009 | Design, Implementation</span> <p>This is a website I made for RIT's
participation in the February 5 National Teach-In. It's just a one page static HTML website, listing the events that would be occurring throughout the day.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a
href="http://www.rit.edu/gwteachin/">Post-event
Website</a></b> | <a href="http://www.rit.edu/academicaffairs/gwteachin/schedule.html">Event Schedule</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-12 views-row-even">
<div class="item">
<div class="image">
<a
href="http://gkoberger.net/projects/rit/index.php"
class="imagefield imagefield-nodelink imagefield-field_image"><img src="../images/portfolio/semesters.png" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://gkoberger.net/projects/rit/index.php">RIT Quarters v Semesters Infograph</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started February 2010 | Design, Implementation</span> <p>My university, <a href="http://rit.edu">Rochester Institute of Technology</a>, created a controversy when they decided to switch from quarters to semesters. The email they sent describing the changes had a ton of information, and I felt it could benefit from visualizations.</p>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a
href="http://gkoberger.net/projects/rit/index.php">Quarters
v Semesters :: An Infograph</a></b> | <a href="http://www.reddit.com/r/rit/comments/b2wt1/quarters_v_semesters_by_the_numbers_infograph/">Reddit Comments</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div style="display: none;">
<div class="views-row-13 views-row-odd">
<div class="item">
<div class="image">
<a
href="http://docs.google.com/gview?url=http://gkoberger.net/projects/cheatsheets/twitter_cheatsheet.pdf&embedded=true" class="imagefield imagefield-nodelink imagefield-field_image"><img src="http://gkoberger.net/sites/default/files/twitter_small.jpg" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a
href="http://docs.google.com/gview%3Furl%3Dhttp://gkoberger.net/projects/cheatsheets/twitter_cheatsheet.pdf%26amp%3Bembedded%3Dtrue">Twitter Cheat Sheet [PDF]</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started January 2010 | Implementation</span> <p>I was giving a talk at <a href="http://homecarerochester.com/">Home Care Rochester</a> about Twitter use for senior citizens with Parkinson's Disease, and was unable to find a dead-simple cheat sheet for people new to Twitter. I knew most people in the audience wouldn't remember what I talked about, so I created a simple cheat sheet based on my presentation.</p>
<div class="block spacer">
<b class="label">Tested on:</b>
<div class="icon" style="background-image:url('/images/icons//Firefox.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer6.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer7.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Safari.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Opera.jpg');"></div>
</div>
<div class="block spacer">
<b class="label">Made With:</b>
<div class="icon" style="background-image:url('/images/icons/Photoshop.jpg');"></div>
</div>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a
href="http://docs.google.com/gview%3Furl%3Dhttp://gkoberger.net/projects/cheatsheets/twitter_cheatsheet.pdf%26amp%3Bembedded%3Dtrue">Twitter
Cheat Sheet (Google PDF Viewer)</a></b> | <a href="http://gkoberger.net/projects/cheatsheets/twitter_cheatsheet.pdf">PDF Version</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-11 views-row-odd">
<div class="item">
<div class="image">
<a href="http://blog.gkoberger.net" class="imagefield imagefield-nodelink imagefield-field_image"><img src="http://gkoberger.net/sites/default/files/blog_small.jpg" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://blog.gkoberger.net">Gregory Koberger :: The Blog</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started Summer 2009 | Design, Implementation</span> <p><em><strong>Note:</strong> Gone! The blog is now part of the
main site.</em> When I designed my site, I was looking to make a portfolio. I later decided I wanted to blog, as well, however I felt the site wasn't suitable for the type of blog I was looking to run. It was too graphics-intensive, so I created a simplified layout for my personal blog.</p>
<div class="block spacer">
<b class="label">Tested on:</b>
<div class="icon" style="background-image:url('/images/icons//Firefox.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer6.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer7.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Safari.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Opera.jpg');"></div>
</div>
<div class="block spacer">
<b class="label">Made With:</b>
<div class="icon" style="background-image:url('/images/icons/jQuery.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/CSS.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/XHTML.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/Wordpress.jpg');"></div>
</div>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://blog.gkoberger.net">Gregory Koberger's Blog &raquo</a></b></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-14 views-row-even">
<div class="item">
<div class="image">
<a href="http://technospect.com/hci/mockup.html" class="imagefield imagefield-nodelink imagefield-field_image"><img src="http://gkoberger.net/sites/default/files/itaxi_t.jpg" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://technospect.com/hci/mockup.html">iTaxi [Prototype]</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started Spring 2008</span> <p>iTaxi is a prototype for a touch screen back-seat interface for a taxi. It was made for a class on Human Computer Interaction and usability, and went through numerous usability tests. Since it's a prototype, only about half the functionality works- just enough for the various usability tests we administered. The entire project involved 4 people, however I did the design and programming for this prototype.</p>
<div class="block spacer">
<b class="label">Tested on:</b>
<div class="icon" style="background-image:url('/images/icons//Firefox.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Safari.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Opera.jpg');"></div>
</div>
<div class="block spacer">
<b class="label">Made With:</b>
<div class="icon" style="background-image:url('/images/icons/PHP.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/CSS.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/XHTML.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/MooTools.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/Photoshop.jpg');"></div>
</div>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://technospect.com/hci/mockup.html">Mockup</a></b> |
<a href="http://technospect.com/hci/designDocument.pdf">Design Doc</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-15 views-row-odd">
<div class="item">
<div class="image">
<a href="http://labforsocialcomputing.net/" class="imagefield imagefield-nodelink imagefield-field_image"><img src="http://gkoberger.net/sites/default/files/lsc_2.jpg" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://labforsocialcomputing.net/">Lab for Social Computing Website</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started January 2009 | Design, Implementation</span> <p>I designed the Lab for Social Computing website, and implemented it using Drupal. A large number of websites at RIT are starting to use Drupal, so it only made sense to follow suit.</p>
<div class="block spacer">
<b class="label">Tested on:</b>
<div class="icon" style="background-image:url('/images/icons//Firefox.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer6.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer7.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Safari.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Opera.jpg');"></div>
</div>
<div class="block spacer">
<b class="label">Made With:</b>
<div class="icon" style="background-image:url('/images/icons/Drupal.jpg');"></div>
</div>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://labforsocialcomputing.net/">Lab for Social Computing website &raquo</a></b></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-16 views-row-even">
<div class="item">
<div class="image">
<a href="http://technospect.com/project/3/" class="imagefield imagefield-nodelink imagefield-field_image"><img src="http://gkoberger.net/sites/default/files/onlinephotoshop_t_0.jpg" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://technospect.com/project/3/">Online Photo Editor (Proof of Concept)</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started Spring 2007 | Programming, Design</span> <p>My favorite website projects involve a combination of backend and frontend programming. For this project, I decided to try to make an online image editor. I wrote this in about a weekend as a proof-of-concept, so it's far from full-featured. While online photo editors are pretty common these days, back when I started there weren't really any good ones.</p>
<div class="block spacer">
<b class="label">Tested on:</b>
<div class="icon" style="background-image:url('/images/icons//Firefox.jpg');"></div>
</div>
<div class="block spacer">
<b class="label">Made With:</b>
<div class="icon" style="background-image:url('/images/icons/PHP.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/CSS.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/XHTML.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/MooTools.jpg');"></div>
</div>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://technospect.com/project/3/">Online Photo Editor &raquo</a></b></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-17 views-row-odd">
<div class="item">
<div class="image">
<a href="http://technospect.com/scheduler/" class="imagefield imagefield-nodelink imagefield-field_image"><img src="http://gkoberger.net/sites/default/files/scheduler_t.jpg" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://technospect.com/scheduler/">RIT Schedule Maker (v1)</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started Summer 2007 | Programming, Design</span> <p>Currently, most of RIT uses <a href="http://ejohn.org/">John Resig</a>'s <a href="http://schedule.csh.rit.edu/">RIT Schedule Maker</a> to create their schedules for the quarter. His is great, however I wanted to to see if I could improve on it. This is the prototype- which is cool to play with, but isn't any more useful than the original. It has been superceeded by my <a href="http://rit.edu/intersect">RIT Intersect project</a>.</p>
<div class="block spacer">
<b class="label">Tested on:</b>
<div class="icon" style="background-image:url('/images/icons//Firefox.jpg');"></div>
</div>
<div class="block spacer">
<b class="label">Made With:</b>
<div class="icon" style="background-image:url('/images/icons/PHP.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/CSS.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/XHTML.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/MooTools.jpg');"></div>
</div>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://technospect.com/scheduler/">RIT Schedule Maker &raquo</a></b></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-18 views-row-even">
<div class="item">
<div class="image">
<a href="http://technospect.com/project/2/kaleidoscope.svg" class="imagefield imagefield-nodelink imagefield-field_image"><img src="http://gkoberger.net/sites/default/files/kaleidoscope_t.jpg" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://technospect.com/project/2/kaleidoscope.svg">SVG Kaleidoscope</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started Januery 2008 | Programming, Design</span> <p>This is a kaleidoscope written using SVG (Scalable Vector Graphics, used for the shapes), SMIL (Synchronized Multimedia Integration Language, used to animate the shapes), and Javascript (used for drawing and, when SMIL isn't available, for animating the shapes). While SVG was a bit of a pain, it's definitely going to catch on in the next few years. (<strong>Note</strong>: This was written a few years ago. Since then, it has stopped working in Firefox and only somewhat works in Chrome.)</p>
<div class="block spacer">
<b class="label">Tested on:</b>
<div class="icon" style="background-image:url('/images/icons//Opera.jpg');"></div>
</div>
<div class="block spacer">
<b class="label">Made With:</b>
<div class="icon" style="background-image:url('/images/icons/Javascript.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/SVG.jpg');"></div>
</div>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://technospect.com/project/2/kaleidoscope.svg">View the Kaleidoscope &raquo</a></b></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-19 views-row-odd">
<div class="item">
<div class="image">
<a href="http://technospect.com" class="imagefield imagefield-nodelink imagefield-field_image"><img src="http://gkoberger.net/sites/default/files/technospect_t.jpg" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://technospect.com">Technospect</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started October 2004 | Programming, Design</span> <p>I needed a place to store and display projects I've been working on- this site is more of a portfolio, so I decided to create a whole separate site. I went with Technospect (a play on the word "retrospect"), and try to add things to it every once in awhile. "Try" being the key word.</p>
<div class="block spacer">
<b class="label">Tested on:</b>
<div class="icon" style="background-image:url('/images/icons//Firefox.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer6.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer7.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Safari.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Opera.jpg');"></div>
</div>
<div class="block spacer">
<b class="label">Made With:</b>
<div class="icon" style="background-image:url('/images/icons/PHP.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/jQuery.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/CSS.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/XHTML.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/MooTools.jpg');"></div>
</div>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://technospect.com">Technospect &raquo</a></b></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-20 views-row-even">
<div class="item">
<div class="image">
<a href="http://gkoberger.net/works/final/" class="imagefield imagefield-nodelink imagefield-field_image"><img src="http://gkoberger.net/sites/default/files/whereimfrom_t.jpg" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://gkoberger.net/works/final/">Where I&#039;m From</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started Winter 2007 | Programming, Design, Implementation</span> <p>This was my final project for Website Design and Implementation with <a href="http://mamamusings.com/">Elizabeth Lawley</a>. The assignment was to make a five page website about a place you've lived. The concept behind my project is that you "zoom" in the further right you go. The experimental text wrapping probably isn't something I'd use in a real site, however I wanted to try new techniques.</p>
<div class="block spacer">
<b class="label">Tested on:</b>
<div class="icon" style="background-image:url('/images/icons//Firefox.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer6.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer7.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Safari.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Opera.jpg');"></div>
</div>
<div class="block spacer">
<b class="label">Made With:</b>
<div class="icon" style="background-image:url('/images/icons/PHP.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/CSS.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/XHTML.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/MooTools.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/Photoshop.jpg');"></div>
</div>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a
href="http://gkoberger.net/works/final/">Website</a></b> | <a
href="http://blogs.it.rit.edu/409/072/gpk5222/2008/01/midterm_project_1.html">Documentation
1</a> | <a href="http://blogs.it.rit.edu/409/072/gpk5222/2008/02/final_site.html">Documentation 2</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-21 views-row-odd">
<div class="item">
<div class="image">
<a href="http://technospect.com/movies" class="imagefield imagefield-nodelink imagefield-field_image"><img src="http://gkoberger.net/sites/default/files/movie_t_0.jpg" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://technospect.com/movies">Movie Time Lookup</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started Winter 2007 | Programming, Design</span> <p><em>No longer works due to API changes. Plus, smart phone apps do a much better job of this these days.</em> I couldn't find an easy place to browse movie times, so I threw this together. It's made with Javascript (no framework!) and PHP, with AJAX tying it all together. The data is scraped from a website using PHP, and served to the browser using XML. It's cross-browser, and degrades very gracefully (it's still usable without javascript). All elements are created dynamically, and zips are stored in cookies.</p>
<div class="block spacer">
<b class="label">Tested on:</b>
<div class="icon" style="background-image:url('/images/icons//Firefox.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer6.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer7.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Safari.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Opera.jpg');"></div>
</div>
<div class="block spacer">
<b class="label">Made With:</b>
<div class="icon" style="background-image:url('/images/icons/PHP.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/Javascript.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/CSS.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/XHTML.jpg');"></div>
</div>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://technospect.com/movies">Simple Movie Look-up &raquo</a></b></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
<div class="views-row-22 views-row-even views-row-last">
<div class="item">
<div class="image">
<a href="http://blogs.it.rit.edu/409/072/gpk5222/" class="imagefield imagefield-nodelink imagefield-field_image"><img src="http://gkoberger.net/sites/default/files/409blog_t.jpg" alt="" title="" width="295" height="150" class="imagefield imagefield-field_image" /></a> </div>
<div class="info">
<h3 class="title"><a href="http://blogs.it.rit.edu/409/072/gpk5222/">Website Design and Implementation Blog</a></h3>
<span style="color: rgb(153, 153, 153); font-size: 11px;">Started Winter 2007 | Design, Implementation</span> <p>During our 10 week class, we were expected to keep a Movable Type blog about the projects we worked on. I designed this blog, and posted detailed descriptions of the projects I worked on in the class, taught by <a href="http://mamamusings.com/">Elizabeth Lawley</a>. Not really much to see here, beside the layout and a few links to small projects I worked on for the class.</p>
<div class="block spacer">
<b class="label">Tested on:</b>
<div class="icon" style="background-image:url('/images/icons//Firefox.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer6.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//InternetExplorer7.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Safari.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons//Opera.jpg');"></div>
</div>
<div class="block spacer">
<b class="label">Made With:</b>
<div class="icon" style="background-image:url('/images/icons/CSS.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/XHTML.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/MovableType.jpg');"></div>
<div class="icon" style="background-image:url('/images/icons/Photoshop.jpg');"></div>
</div>
<div class="block">
<b class="label">Visit:</b>
<p style="margin:0"><b><a href="http://blogs.it.rit.edu/409/072/gpk5222/">Movable Type Blog &raquo</a></b></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- field_components_value, field_role_value, field_supports_value --> </div>
</div>
{% endblock %}
Jump to Line
Something went wrong with that request. Please try again.