Skip to content

Instantly share code, notes, and snippets.

@aareese

aareese/gist:1355298

Created November 10, 2011 16:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save aareese/1355298 to your computer and use it in GitHub Desktop.
Save aareese/1355298 to your computer and use it in GitHub Desktop.
Download ZIP
the most awesome website ever
Raw
gistfile1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta name="description" content="I am a UI Designer and all around problem solver.">
<meta name="keywords" content="UI, Boulder, Technology, Apps, Design, Web Development, Front End, Information Architecture, iPhone Design, Entrepreneur">
<meta charset="UTF-8">
<meta name="copyright" content="2011">
<title>Alyssa Reese | app design in Boulder, Colorado</title>
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="css/screen.css" type="css/screen.css" media="screen, projection">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container cf">
<!--<header class="span-1">
<h1><a href="index.html" class="none"><span class="light">fleet</span>Creature</a></h1>
<p>designs of Alyssa Reese</p>
<p class="sub">*engravings by Albrecht Durer</p>
</header> -->
<!-- <nav class="span-1">
<ul style="list-style:none">
<li><a href="about.html">about</a></li>
<li><a href="work.html">work</a></li> -->
<!-- <li><a href="graphics.html">blog</a></li> -->
<!-- <li><a href="projects.html">inspirations</a></li> -->
<!-- <li><a href="projects.html">resources</a></li> -->
<!--<li><a href="contact.html">contact</a></li> -->
<nav>
<ul style="list-style:none">
<li class="social"><a href="http://twitter.com/#!/aaReese" title="Follow @aaReese on Twitter" target="_blank"><img src="images/twitter_icon_hover.png" /></a>
<ul style="list-style:none" id="twitter_update_list"></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/aareese.json?callback=twitterCallback2&count=1"></script>
</li>
</ul>
</nav>
<div class="animal">
<img src="images/beetle_illustration.png"/>
</div>
<div class="me-image">
<img src="images/fight.png"/>
</div>
<section class="main-about span-4 cf">
<div class="banner span-4 last">
<div class="fL">
<h1>hello & welcome! i'm alyssa</h1>
<h2>i design apps</h2>
</div>
<div class="fL">
<h3>i battle complexity & bad UI</h3>
<h4>to protect the innocent</h4>
</div>
</div>
<div class="devices cf">
<h3><span class="emphasis">What's your idea? </span>I help motivated people with excellent ideas bring their products to life.</h3>
<img src="images/devices.png">
<ul style="list-style:none">
<li class="first fL span-1"><span class="emphasis">I can help you create:</li>
<li class="fL span-1">Mobile applications for iPhone, Android, iPad & mobile web.</li>
<li class="fL span-1">Desktop & web applications.</li>
<li class="fL span-1 last">Traditional websites.</li>
</ul>
</div>
<div class="banner span-4 last">
<div class="fL">
<h1>check out my work. this</h1>
<h2>is my sweat...</h2>
</div>
<div class="fL">
<h3>if you get as far as any of these clients did</h3>
<h4>you'll deserve a glass of milk</h4>
</div>
</div>
<section class="work span-4 cf fL">
<!--foodtree-->
<a id="inline" href="#foodtree" rel="foodtree">
<div class="one sample span-1"></div>
<a id="inline" href="#popup2" rel="foodtree"></a>
<a id="inline" href="#popup3" rel="foodtree"></a>
<a id="inline" href="#popup4" rel="foodtree"></a>
<a id="inline" href="#popup5" rel="foodtree"></a>
<a id="inline" href="#popup6" rel="foodtree"></a>
<a id="inline" href="#popup7" rel="foodtree"></a>
</a>
<div style="display: none;">
<div id="foodtree" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Foodtree<h2>
<h1>Know more. Eat Better.<h1>
</div>
<div class="fL">
<h3>an app based on helping people find and<h3>
<h4>share information about food.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>the client</h1>
<p>A professional chef from Vancouver and his team of developers.</p>
<h2>challenge</h2>
<p>How do you work with a client and developers that are 2000 miles away in another country?</p>
<h2>solution</h2>
<p>Bi-weekly skype calls, impropmptu meetings & lot's of chat.</p>
</div>
</div>
<img src="images/foodtree1.png">
</div>
<div id="popup2" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Foodtree<h2>
<h1>Know more. Eat Better.<h1>
</div>
<div class="fL">
<h3>an app based on helping people find and<h3>
<h4>share information about food.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>the start</h1>
<p>The old website for the app had some traction in Vancouver but needed a serious rethinking of features, UI & visual design.</p>
<p>We were given a brand document and a list of user stories a mile long.</p>
</div>
</div>
<img src="images/foodtree2.png">
</div>
<div id="popup3" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Foodtree<h2>
<h1>Know more. Eat Better.<h1>
</div>
<div class="fL">
<h3>an app based on helping people find and<h3>
<h4>share information about food.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>the architecture</h1>
<h2>challenge</h2>
<p>Paring down features. Choosing the correct language to describe food relationships.</p>
<h2>solution</h2>
<p>Focus on key user stories. Round table discussion between client, designers & programmers brainstorming langauge conventions for describing foods & their relationships to producers & consumers.</p>
</div>
</div>
<img src="images/foodtree3.png">
</div>
<div id="popup4" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Foodtree<h2>
<h1>Know more. Eat Better.<h1>
</div>
<div class="fL">
<h3>an app based on helping people find and<h3>
<h4>share information about food.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>UI Design</h1>
<h2>challenge</h2>
<p>Enticing users to upload accurate information and create a crowd-sourced, current food database</p>
<h2>solution</h2>
<p>Allow users to take photos of foods through a mobile app and tag them with information about where the foods were bought & grown.</p>
</div>
</div>
<img src="images/foodtree4.png">
</div>
<div id="popup5" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Foodtree<h2>
<h1>Know more. Eat Better.<h1>
</div>
<div class="fL">
<h3>an app based on helping people find and<h3>
<h4>share information about food.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>Visual Design</h1>
<h2>challenge</h2>
<p>Create a look & feel that is modern but also reflective of the homesteading movement sinage that the Foodtree logo is based on.</p>
<h2>solution</h2>
<p>A mix of clean design & subtle rustic textures.</p>
</div>
</div>
<img src="images/foodtree5.png">
</div>
<div id="popup6" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Foodtree<h2>
<h1>Know more. Eat Better.<h1>
</div>
<div class="fL">
<h3>an app based on helping people find and<h3>
<h4>share information about food.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>Visual Design</h1>
<h2>challenge</h2>
<p>Create a look & feel that is modern but also reflective of the homesteading movement sinage that the Foodtree logo is based on.</p>
<h2>solution</h2>
<p>A mix of clean design & subtle rustic textures.</p>
</div>
</div>
<img src="images/foodtree6.png">
</div>
<div id="popup7" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Foodtree<h2>
<h1>Know more. Eat Better.<h1>
</div>
<div class="fL">
<h3>an app based on helping people find and<h3>
<h4>share information about food.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>the status</h1>
<p>The Foodtree crew is hard at work launching the latest version of the website, is getting lots of interest in their mobile app and their api, and are pursuing their next round of funding.
</div>
</div>
<img src="images/foodtree7.png">
</div>
</div>
<!--end foodtree-->
<div class="two sample span-1">
</div>
<div class="three sample span-1">
</div>
<!-- start lokalite -->
<a id="inline" href="#lokalite" rel="lokalite">
<div class="four sample span-1 last"></div>
<a id="inline" href="#lokalite2" rel="lokalite"></a>
<a id="inline" href="#lokalite3" rel="lokalite"></a>
<a id="inline" href="#lokalite4" rel="lokalite"></a>
<a id="inline" href="#lokalite5" rel="lokalite"></a>
<a id="inline" href="#lokalite6" rel="lokalite"></a>
</a>
<div style="display: none;">
<div id="lokalite" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>lokalite<h2>
<h1>Get Unbored.<h1>
</div>
<div class="fL">
<h3>an app based on simplicity in local event listings<h3>
<h4>fueled by a team of recent grads<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>the client</h1>
<p>5 founders, recently graduated from college with a strong vision & angel investment.</p>
<h2>challenge</h2>
<p>Helping to not only create a product with the Lokalite team but help them cut their teeth in the entreprenuership & tech world</p>
<h2>solution</h2>
<p>Patience & lots of communication.</p>
</div>
</div>
<img src="images/lokalite1.png">
</div>
<div id="lokalite2" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>lokalite<h2>
<h1>Get Unbored.<h1>
</div>
<div class="fL">
<h3>an app based on simplicity in local event listings<h3>
<h4>fueled by a team of recent grads<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>the start</h1>
<p>lokalite was called Collegepedia and needed a brand overhaul along with the creation of their app.</p>
<p>The app had a light backend that needed a total reworking and no front end</p>
<h2>challenge.</h2>
<p>Finding a good name & creating consensus among the 5 founders about the new brand direction.</p>
</div>
</div>
<img src="images/lokalite2.png">
</div>
<div id="lokalite3" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>lokalite<h2>
<h1>Get Unbored.<h1>
</div>
<div class="fL">
<h3>an app based on simplicity in local event listings<h3>
<h4>fueled by a team of recent grads<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>branding</h1>
<p>The brand approach was based on conveying simplicity.</p>
<p>Two final logos were created and the founders voted on which would become their new identity.</p>
</div>
</div>
<img src="images/lokalite3.png">
</div>
<div id="lokalite4" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>lokalite<h2>
<h1>Get Unbored.<h1>
</div>
<div class="fL">
<h3>an app based on simplicity in local event listings<h3>
<h4>fueled by a team of recent grads<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>UI Design</h1>
<p>The lokalite crew was disenchanted with the complexity of most event listing sites.</p>
<h2>challenge</h2>
<p>Create a website with tons of varied information while keeping simplicity & visual unity.</p>
<h2>solution</h2>
<p>Lists of events in simple text & the use of ajax to call up quick previews of the events without having to navigate to a new page.</p>
</div>
</div>
<img src="images/lokalite4.png">
</div>
<div id="lokalite5" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>lokalite<h2>
<h1>Get Unbored.<h1>
</div>
<div class="fL">
<h3>an app based on simplicity in local event listings<h3>
<h4>fueled by a team of recent grads<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>Visual Design</h1>
<p>The client had a strong desire to visually create the "iTunes of events".</p>
</div>
</div>
<img src="images/lokalite5.png">
</div>
<div id="lokalite6" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>lokalite<h2>
<h1>Get Unbored.<h1>
</div>
<div class="fL">
<h3>an app based on simplicity in local event listings<h3>
<h4>fueled by a team of recent grads<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>Status</h1>
<p>lokalite recently launched version 2 of their website and a mobile application</p>
<p>They are currently raising another round of funding.</p>
</div>
</div>
<img src="images/lokalite6.png">
</div>
</div>
<!-- end lokalite -->
<!-- start splickit -->
<a id="inline" href="#splickit" rel="splickit">
<div class="five sample span-1"></div>
<a id="inline" href="#splickit2" rel="splickit"></a>
<a id="inline" href="#splickit3" rel="splickit"></a>
<a id="inline" href="#splickit4" rel="splickit"></a>
<a id="inline" href="#splickit5" rel="splickit"></a>
<a id="inline" href="#splickit6" rel="splickit"></a>
<a id="inline" href="#splickit7" rel="splickit"></a>
</a>
<div style="display: none;">
<div id="splickit" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Splickit<h2>
<h1>Grab, grin & go.<h1>
</div>
<div class="fL">
<h3>a skinnable app for convienient mobile ordering<h3>
<h4> in the fast food industry.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>give me some skin</h1>
<p>Splickit sells custom branded apps to food retailers.</p>
<p>Customers can order food & pay for it on their phones and then skip the line when they go to pick up their food.</p>
</div>
</div>
<img src="images/splickit1.png">
</div>
<div id="splickit2" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Splickit<h2>
<h1>Grab, grin & go.<h1>
</div>
<div class="fL">
<h3>a skinnable app for convienient mobile ordering<h3>
<h4> in the fast food industry.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>the start</h1>
<p>When I came on the project the mobile app was built. My role was to create skins for the existing UI and to help streamline the entire skinning process for iPhone & Android.</p>
<p>I later helped design & implement the UI for the web version of the app & began creating web skins.</p>
</div>
</div>
<img src="images/splickit2.png">
</div>
<div id="splickit3" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Splickit<h2>
<h1>Grab, grin & go.<h1>
</div>
<div class="fL">
<h3>a skinnable app for convienient mobile ordering<h3>
<h4> in the fast food industry.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>quiznos</h1>
</div>
</div>
<img src="images/splickit3.png">
</div>
<div id="splickit4" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Splickit<h2>
<h1>Grab, grin & go.<h1>
</div>
<div class="fL">
<h3>a skinnable app for convienient mobile ordering<h3>
<h4> in the fast food industry.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>tokyo joe's</h1>
</div>
</div>
<img src="images/splickit4.png">
</div>
<div id="splickit5" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Splickit<h2>
<h1>Grab, grin & go.<h1>
</div>
<div class="fL">
<h3>a skinnable app for convienient mobile ordering<h3>
<h4> in the fast food industry.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>splickit web</h1>
</div>
</div>
<img src="images/splickit5.png">
</div>
<div id="splickit6" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Splickit<h2>
<h1>Grab, grin & go.<h1>
</div>
<div class="fL">
<h3>a skinnable app for convienient mobile ordering<h3>
<h4> in the fast food industry.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>smiling moose</h1>
</div>
</div>
<img src="images/splickit6.png">
</div>
<div id="splickit7" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Splickit<h2>
<h1>Grab, grin & go.<h1>
</div>
<div class="fL">
<h3>a skinnable app for convienient mobile ordering<h3>
<h4> in the fast food industry.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>juice it up</h1>
</div>
</div>
<img src="images/splickit7.png">
</div>
</div>
<!-- end splickit -->
<div class="six sample span-1">
</div>
<!-- golden mind -->
<a id="inline" href="#goldenmind" rel="goldenmind">
<div class="seven sample span-1"></div>
<a id="inline" href="#goldenmind2" rel="goldenmind"></a>
<a id="inline" href="#goldenmind3" rel="goldenmind"></a>
</a>
<div style="display: none;">
<div id="goldenmind" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Golden Mind<h2>
<h1>Meditation Timer<h1>
</div>
<div class="fL">
<h3>a simple app that created a partnership<h3>
<h4>and launched Plebeian Apps.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>the inspiration</h1>
<p>Create a beautiful & simple meditation timer that doesn't display the time while running.</p>
</div>
</div>
<img src="images/goldenmind1.png">
</div>
<div id="goldenmind2" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Golden Mind<h2>
<h1>Meditation Timer<h1>
</div>
<div class="fL">
<h3>a simple app that created a partnership<h3>
<h4>and launched Plebeian Apps.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>UI design</h1>
<p>While running, the timer dissappears and the app displays an image whose percent opacity is linked to percent time remaining.</p>
<p>As time runs out, the image fades to black.</p>
</div>
</div>
<img src="images/goldenmind2.png">
</div>
<div id="goldenmind3" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Golden Mind<h2>
<h1>Meditation Timer<h1>
</div>
<div class="fL">
<h3>a simple app that created a partnership<h3>
<h4>and launched Plebeian Apps.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>Visual design</h1>
<p>A combination of a dark, unobtrusive palate and an array of custom display mandalas and images create a subtle tool.</p>
</div>
</div>
<img src="images/goldenmind3.png">
</div>
</div>
<!-- end golden mind-->
<!-- start wireframing -->
<a id="inline" href="#wireframe" rel="wireframe">
<div class="eight last sample span-1"></div>
<a id="inline" href="#wireframe2" rel="wireframe"></a>
<a id="inline" href="#wireframe3" rel="wireframe"></a>
<a id="inline" href="#wireframe4" rel="wireframe"></a>
</a>
<div style="display: none;">
<div id="wireframe" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Wireframing<h2>
<h1>Creating the skeleton<h1>
</div>
<div class="fL">
<h3>sample wireframes from a mobile video<h3>
<h4>app for iphone & ipad<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>give me some skin</h1>
<p>Splickit sells custom branded apps to food retailers.</p>
<p>Customers can order food & pay for it on their phones and then skip the line when they go to pick up their food.</p>
</div>
</div>
<img src="images/wireframe1.png">
</div>
<div id="wireframe2" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Wireframing<h2>
<h1>Creating the skeleton<h1>
</div>
<div class="fL">
<h3>sample wireframes from a mobile video<h3>
<h4>app for iphone & ipad<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>give me some skin</h1>
<p>Splickit sells custom branded apps to food retailers.</p>
<p>Customers can order food & pay for it on their phones and then skip the line when they go to pick up their food.</p>
</div>
</div>
<img src="images/wireframe2.png">
</div>
<div id="wireframe3" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Wireframing<h2>
<h1>Creating the skeleton<h1>
</div>
<div class="fL">
<h3>sample wireframes from a mobile video<h3>
<h4>app for iphone & ipad<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>give me some skin</h1>
<p>Splickit sells custom branded apps to food retailers.</p>
<p>Customers can order food & pay for it on their phones and then skip the line when they go to pick up their food.</p>
</div>
</div>
<img src="images/wireframe3.png">
</div>
<div id="wireframe4" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Wireframing<h2>
<h1>Creating the skeleton<h1>
</div>
<div class="fL">
<h3>sample wireframes from a mobile video<h3>
<h4>app for iphone & ipad<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>give me some skin</h1>
<p>Splickit sells custom branded apps to food retailers.</p>
<p>Customers can order food & pay for it on their phones and then skip the line when they go to pick up their food.</p>
</div>
</div>
<img src="images/wireframe4.png">
</div>
</div>
<!-- end wireframing -->
<!--icons-->
<a id="inline" href="#icons" rel="icons">
<div class="nine sample span-1"></div>
<a id="inline" href="#icons2" rel="icons"></a>
</a>
<div style="display: none;">
<div id="icons" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>APP ICONS<h2>
</div>
<div class="fL">
<h4>sweet little design gems.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h2>Street Fighter II Guide</h2>
</div>
</div>
<img src="images/icon1.png">
</div>
<div id="icons2" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>APP ICONS<h2>
</div>
<div class="fL">
<h4>sweet little design gems.<h4>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h2>Naropa Mediate</h2>
<h2>Golden Mind</h2>
<h2>KFC</h2>
<h2>Bean & Leaf</h2>
<h2>Captain D's</h2>
<h2>Einstein Bros</h2>
<h2>Smash Burger</h2>
<h2>Tokyo Joe's</h2>
<h2>Quiznos</h2>
</div>
</div>
<img src="images/icon2.png">
</div>
</div>
<!--end icons-->
<!--illustration-->
<a id="inline" href="#illustration" rel="illustration">
<div class="ten sample span-1"></div>
<a id="inline" href="#illustration2" rel="illustration"></a>
</a>
<div style="display: none;">
<div id="illustration" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h1>Illustration<h1>
</div>
<div class="fL">
<h3>some free time, some playfulness<h3>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<p>check out my latest on <a href="http://www.dribbble.com/aareese" target="blank" title="Alyssa on Dribble">dribble.</a></p>
</div>
</div>
<img src="images/illustration1.png">
</div>
<div id="illustration2" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h1>Illustration<h1>
</div>
<div class="fL">
<h3>some free time, some playfulness<h3>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<p>check out my latest on <a href="http://www.dribbble.com/aareese" target="blank" title="Alyssa on Dribble">dribble.</a></p>
</div>
</div>
<img src="images/illustration2.png">
</div>
</div>
<!--end illustration-->
<!--photography-->
<a id="inline" href="#photo0" rel="photo">
<div class="eleven sample span-1"></div>
<a id="inline" href="#photo" rel="photo"></a>
<a id="inline" href="#photo2" rel="photo"></a>
<a id="inline" href="#photo3" rel="photo"></a>
<a id="inline" href="#photo4" rel="photo"></a>
<a id="inline" href="#photo5" rel="photo"></a>
<a id="inline" href="#photo6" rel="photo"></a>
<a id="inline" href="#photo7" rel="photo"></a>
<a id="inline" href="#photo8" rel="photo"></a>
<a id="inline" href="#photo9" rel="photo"></a>
<a id="inline" href="#photo10" rel="photo"></a>
<a id="inline" href="#photo11" rel="photo"></a>
<a id="inline" href="#photo12" rel="photo"></a>
<a id="inline" href="#photo13" rel="photo"></a>
<a id="inline" href="#photo14" rel="photo"></a>
<a id="inline" href="#photo15" rel="photo"></a>
</a>
<div style="display: none;">
<div id="photo0">
<div class="banner alone dark">
<div class="fL">
<h1>some photos that i took before<h1>
<h2>the digital era<h2>
</div>
<div class="fL">
<h3>when the world was still<h3>
<h4>cast in silver<h4>
</div>
</div>
</div>
<div id="photo" class="popupbox photos">
<img src="images/photo1.png">
</div>
<div id="photo2" class="popupbox photos">
<img src="images/photo2.png">
</div>
<div id="photo3" class="popupbox photos">
<img src="images/photo3.png">
</div>
<div id="photo4" class="popupbox photos">
<img src="images/photo4.png">
</div>
<div id="photo5" class="popupbox photos">
<img src="images/photo5.png">
</div>
<div id="photo6" class="popupbox photos">
<img src="images/photo6.png">
</div>
<div id="photo7" class="popupbox photos">
<img src="images/photo7.png">
</div>
<div id="photo8" class="popupbox photos">
<img src="images/photo8.png">
</div>
<div id="photo9" class="popupbox photos">
<img src="images/photo9.png">
</div>
<div id="photo10" class="popupbox photos">
<img src="images/photo10.png">
</div>
<div id="photo11" class="popupbox photos">
<img src="images/photo11.png">
</div>
<div id="photo12" class="popupbox photos">
<img src="images/photo12.png">
</div>
<div id="photo13" class="popupbox photos">
<img src="images/photo13.png">
</div>
<div id="photo14" class="popupbox photos">
<img src="images/photo14.png">
</div>
<div id="photo15" class="popupbox photos">
<img src="images/photo15.png">
</div>
</div>
<!--end photography-->
<!-- start plebeian apps -->
<a id="inline" href="#plebeian" rel="plebeian">
<div class="twelve last sample span-1"></div>
<a id="inline" href="#plebeian2" rel="plebeian"></a>
<a id="inline" href="#plebeian3" rel="plebeian"></a>
<a id="inline" href="#plebeian4" rel="plebeian"></a>
<a id="inline" href="#plebeian5" rel="plebeian"></a>
</a>
<div style="display: none;">
<div id="plebeian" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Plebeian Apps<h2>
<h1>Mission Driven technology<h1>
</div>
<div class="fL">
<h4>everyone has an app idea<h4>
<h3>we build the ones that will do good<h3>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>founders</h1>
<p>In May 2011 the three of us came together to build technology products.</p>
<h2>Alyssa Reese</h2>
<h2>Jesse Seavers</h2>
<h2>Nathan Snyder</h2>
</div>
</div>
<img src="images/plebeian1.png">
</div>
<div id="plebeian2" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Plebeian Apps<h2>
<h1>Mission Driven technology<h1>
</div>
<div class="fL">
<h4>everyone has an app idea<h4>
<h3>we build the ones that will do good<h3>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>founders</h1>
<p>In May 2011 the three of us came together to build technology products.</p>
<h2>Alyssa Reese</h2>
<h2>Jesse Seavers</h2>
<h2>Nathan Snyder</h2>
</div>
</div>
<img src="images/plebeian2.png">
</div>
<div id="plebeian3" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Plebeian Apps<h2>
<h1>Mission Driven technology<h1>
</div>
<div class="fL">
<h4>everyone has an app idea<h4>
<h3>we build the ones that will do good<h3>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>founders</h1>
<p>In May 2011 the three of us came together to build technology products.</p>
<h2>Alyssa Reese</h2>
<h2>Jesse Seavers</h2>
<h2>Nathan Snyder</h2>
</div>
</div>
<img src="images/plebeian3.png">
</div>
<div id="plebeian4" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Plebeian Apps<h2>
<h1>Mission Driven technology<h1>
</div>
<div class="fL">
<h4>everyone has an app idea<h4>
<h3>we build the ones that will do good<h3>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>founders</h1>
<p>In May 2011 the three of us came together to build technology products.</p>
<h2>Alyssa Reese</h2>
<h2>Jesse Seavers</h2>
<h2>Nathan Snyder</h2>
</div>
</div>
<img src="images/plebeian4.png">
</div>
<div id="plebeian5" class="popupbox">
<div class="banner dark cf">
<div class="fL">
<h2>Plebeian Apps<h2>
<h1>Mission Driven technology<h1>
</div>
<div class="fL">
<h4>everyone has an app idea<h4>
<h3>we build the ones that will do good<h3>
</div>
</div>
<div class="popup-content">
<div class="popup-copy">
<h1>founders</h1>
<p>In May 2011 the three of us came together to build technology products.</p>
<h2>Alyssa Reese</h2>
<h2>Jesse Seavers</h2>
<h2>Nathan Snyder</h2>
</div>
</div>
<img src="images/plebeian5.png">
</div>
</div>
<!-- end plebeian apps -->
</section>
<div class="banner span-4 last">
<div class="fL">
<h1>there is some skill</h1>
<h2>involved</h2>
</div>
<div class="fL">
<h3>especially in decoding when to be a perfectionist &</h3>
<h4>when to know you can edit it later</h4>
</div>
</div>
<div class="skills cf">
<img src="images/skills.png">
</div>
<div class="banner span-4 last">
<div class="fL">
<h1>let's be friends</h1>
</div>
<div class="fL">
<h3>here's some other stuff I dig outside of the tech world</h3>
</div>
</div>
<div class="lets-be-friends span-4 last">
<div class="other-interests span-1 cf">
<div class="sample ultimate">
</div>
<p>I play <span class="emphasis">ultimate frisbee</span> nearly year round.</p>
</div>
<div class="other-interests span-1 cf">
<div class="sample travel">
</div>
<p>I love to <span class="emphasis">travel</span> and am really good at closing my eyes for important pictures.</p>
</div>
<div class="other-interests span-1 cf">
<div class="sample bio">
</div>
<p><span class="emphasis">Science.</span> Can't get enough of it. Got my other degree in evolutionary biology.</p>
</div>
<div class="other-interests span-1 cf last">
<div class="sample family">
</div>
<p>My <span class="emphasis">friends & family</span> aren't always this weird.</p>
</div>
</div>
<div class="banner span-4 last">
<div class="fL">
<h2>you call. i'll bring the milk.</h2>
</div>
<div class="fL">
<h3>free half hour</h3>
<h3>consultations</h3>
</div>
</div>
<div class="contact span-4">
<div class="contact-image sample span-1">
<a href="mailto:alyssa.reese@gmail.com" title="Write me a lovely email"><img src="images/beetle_small.png" class="beetle">email me</a>
</div>
<div class="contact-image sample span-1">
<a href="http://twitter.com/#!/aaReese" title="Follow me @aaReese on Twitter" target="_blank"><img src="images/hare_small.png" class="hare">follow me</a>
</div>
<div class="contact-image sample span-1">
<a href="http://facebook.com/alyssa.a.reese" title="Find me on Facebook" target="_blank"><img src="images/owl_small.png" class="owl">friend me</a>
</div>
<div class="contact-image sample span-1 last">
<a href="#" class="show-map" title="Meet me at my favorite coffee shop"><img src="images/rhino_small.png">find me</a>
</div>
<script type="text/javascript">
<script type="text/javascript">
$(document).ready( function() {
$('.show-map').one("click", function() {
$('.map').animate({
left: '+=10000'
});
});
});
$('.hide-map').click(function() {
$('.map').animate({
left: '-=10000'
});
});
</script>
</div>
<div class="map">
<div class="go-away"><a href="#" class="hide-map">go away map</a></div>
<p>i can often be found at my favorite coffee shop. come find me to talk shop or just share a cup of joe ...</p>
<div class="google-map">
<iframe width="920" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;q=atlas+purveyors&amp;safe=off&amp;ie=UTF8&amp;hq=atlas+purveyors&amp;hnear=Boulder,+Colorado&amp;ll=40.018875,-105.275731&amp;spn=0.008557,0.011408&amp;t=m&amp;vpsrc=6&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?hl=en&amp;q=atlas+purveyors&amp;safe=off&amp;ie=UTF8&amp;hq=atlas+purveyors&amp;hnear=Boulder,+Colorado&amp;ll=40.018875,-105.275731&amp;spn=0.008557,0.011408&amp;t=m&amp;vpsrc=6&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment