Web Critter Creative

Hi! I'm Brandi Johnecheck

...and I think websites should be awesome.

Portfolio

Websites

  • Savage Models website

    Savage Models

    A website for Savage modelling agency to display the models they work with. More info Visit Site

    Savage Models
    Savage Models website
    										
    /**** Individual professional port pages ****/
    
    body.single-portfolio div#content { padding-top: 4em; }
    
    div#content article.page, div#content article.portfolio { border: none; }
    
    article.portfolio header.post-titles { display: none; }
    
    /* stat tables */
    article.portfolio section.entry table tr { border: 0; }
    article.portfolio section.entry table td { padding: 3px 15px 4px 0; }
    
    article.portfolio footer.row { clear: both; }
    
    article.portfolio img.prof-img {
    	float: left;
    	margin-left: 15%;
    	width: 35%;
    }
    
    article.portfolio section.entry {
    	float: right;
    	width: 50%;
    	box-sizing: border-box;
    	padding-left: 20px;
    }
    
    article.portfolio section.entry h1 { margin-top: -0.26em; }
    
    article.portfolio div.nextprevious_posts {display: none; }
    
    @media only screen and (min-width: 401px) and (max-width: 768px) {
    	article.portfolio img.prof-img {
    		width: 50%;
    		margin-left: 10%;
    		margin-right: 20px;
    	}
    	article.portfolio section.entry { width: 45%; }
    
    	body.single-portfolio div#content { padding-top: 1em; }
    }
    
    @media only screen and (max-width: 400px) {
    	article.portfolio img.prof-img {
    		float: none;
    		width: 100%;
    		margin: 0;
    	}
    
    	article.portfolio section.entry {
    		float: none;
    		width: 100%;
    		padding: 10px;
    		text-align: center;
    	}
    
    	body.single-portfolio div#content { padding-top: 0; }
    
    	article.portfolio section.entry table { margin: auto; }
    }
    										
    									

    The Savage website was built for Savage Models in WordPress, using a modification of Themeva's ePix theme. Having much of the design customizble via the theme itself and a plugin, direct CSS alterations needed to be minimal, and what alterations were made needed to be as screen-flexible as the rest of the theme. The client desired a clean, dark look that focused on black and white. Because the client also intends to expand beyond models, adding new groups needed to be just as easy as adding individual models.

    x

  • Weerd Works website

    Weerd Works

    A portfolio site designed for and built in WordPress for clothing and accessory designer Mark vanWeerd. More info Visit Site

    Weerd Works
    Weerd Works website
    										
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    	<header class="entry-header">
    		<h1 class="entry-title"><?php the_title(); ?></h1>
    
    	</header><!-- .entry-header -->
    
    	<div class="project images">
    		<ul id="project_thumbs">
    			<?php 
    				$photos = get_field_duplicate('project_image');
    				if (!empty($photos)) {
    					foreach ($photos as $photo) { ?>
    						<li><a href="#"><img src="<?php echo $photo[o]; ?>" alt="<?php the_title(); ?>" class="thumb" /></a></li>
    					<?php }
    				}
    			?>
    		</ul>
    		<a href="<?php echo $photos[1][o]; ?>" target="_blank" class="bigPic">
    			<img src="<?php echo $photos[1][o]; ?>" alt="<?php the_title(); ?>" class="feature border" />
    		</a>
    	</div>
    
    	<div class="entry-content">
    		<?php the_content(); ?>
    		<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'toolbox' ), 'after' => '</div>' ) ); ?>
    
    		<div id="specs">
    			<?php
    				$measure = get('measurements');
    				$material = get('materials');
    				$time_est = get('time_estimate');
    				$cost_est = get('cost_range');
    			?>
    
    			<h2>Specs</h2>
    			<?php if (!empty($measure)) { ?>
    			<h4>Measurements:</h4> 
    			<?php echo $measure;
    			} ?>
    			<?php if (!empty($material)) { ?>
    			<h4>Materials:</h4> 
    			<?php echo $material;
    			} ?>
    			<?php if (!empty($time_est)) { ?>
    			<h4>Time:</h4> 
    			<?php echo $time_est;
    			} ?>
    			<?php if (!empty($cost_est)) { ?>
    			<h4>Cost:</h4> 
    			<?php echo $cost_est;
    			} ?>
    		</div>
    
    	</div><!-- .entry-content -->
    
    	<footer class="entry-meta">
    		<?php
    			/* translators: used between list items, there is a space after the comma */
    			$category_list = get_the_category_list( __( ', ', 'toolbox' ) );
    
    			/* translators: used between list items, there is a space after the comma */
    			$tag_list = get_the_tag_list( '', ', ' );
    
    			if ( ! toolbox_categorized_blog() ) {
    				// This blog only has 1 category so we just need to worry about tags in the meta text
    				if ( '' != $tag_list ) {
    					$meta_text = __( 'Tags: %2$s.' );
    				} 
    
    			} else {
    				// But this blog has loads of categories so we should probably display them here
    				if ( '' != $tag_list ) {
    					$meta_text = __( 'Listed in: %1$s. Tags: %2$s.' );
    				} else {
    					$meta_text = __( 'Listed in: %1$s.' );
    				}
    
    			} // end check for categories on this blog
    
    			printf(
    				$meta_text,
    				$category_list,
    				$tag_list,
    				get_permalink(),
    				the_title_attribute( 'echo=0' )
    			);
    		?>
    
    		<?php edit_post_link( __( 'Edit', 'toolbox' ), '<span class="edit-link">', '</span>' ); ?>
    	</footer><!-- .entry-meta -->
    </article><!-- #post-<?php the_ID(); ?> -->
    										
    									
    										
    /* Home */
    .home.page div#content {
    	background: url('img/mark_full.png') bottom right no-repeat;
    	min-height: 784px;
    }
    
    .home.page div#content article {
    	width: 620px;
    	padding: 10px;
    	display: block;
    }
    
    nav#port_links {
    	width: 640px;
    }
    
    nav#port_links ul#menu-portlinks {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	overflow: hidden;
    }
    
    nav#port_links li {
    	display: inline-block;
    	float: left;
    	margin: 0 10px 10px 0;
    	border-style: solid;
    	-moz-border-image: url(img/border_light.jpg) 13 repeat;
    	-webkit-border-image: url(img/border_light.jpg) 13 repeat;
    	-o-border-image: url(img/border_light.jpg) 13 repeat;
    	border-image: url(img/border_light.jpg) 13 repeat;
    	border-width: 9px;
    }
    
    nav#port_links li:hover {
    	-moz-border-image: url(img/border.jpg) 13 repeat;
    	-webkit-border-image: url(img/border.jpg) 13 repeat;
    	-o-border-image: url(img/border.jpg) 13 repeat;
    	border-image: url(img/border.jpg) 13 repeat;
    	border-width: 9px;
    }
    
    .ie nav#port_links li {
    	border-color:#DED0BB;
    	border-style: double;
    }
    .ie nav#port_links li:hover {border-color:#503D33;}
    
    nav#port_links li a {
    	display: block;
    	width:608px;
    	height:160px;
    	text-indent: -9999px;
    }
    
    nav#port_links li#menu-item-217 a {
    	background: url('img/apparel.jpg') top left no-repeat;
    }
    nav#port_links li#menu-item-56 a {
    	background: url('img/accessories2.jpg') top left no-repeat;
    }
    nav#port_links li#menu-item-57 a {
    	background: url('img/concepts2.jpg') top left no-repeat;
    }
    										
    									
    										
    $(function() {
    
    	$('ul#project_thumbs a').click(function(event) {
    		event.preventDefault();
    		var newImg = $(this).children('img').attr('src');
    		$('div.project.images img.feature').attr('src', newImg);
    		$('div.project.images a.bigPic').attr('href', newImg);
    	});
    
    });
    										
    									

    Weerd Works is the portfolio site of apparel and accessory designers Mark and Andrea vanWeerd. It needed to be easy for them to update on the fly, and so was built in WordPress, with everything kept simple. The design is based on Mark's physical portfolio, to keep consistant. For browsers than cannot use images as borders, a similar, simpler fallback border was set.

    x

  • Web Standards course final

    Web Standards Course Final

    Team exercise on HTML5 semantics. I did the large footer, blog page, and cross-browser styling for search bar. More info View

    Web Standards Course Final
    #
    										
    <footer>
      <div id="mega">
        <ul>
          <li class="section" id="blog">
            <h2>Latest Blog Entries</h2>
            <!-- A different method would have to be used if the dates were actually going to be changing with updates -->
            <ol>
              <li>
                <h3>We did a redesign...</h3>
                <p>Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium</p>
                </li>
              <li>
                <h3>Moving to new server</h3>
                <p>Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium</p>
              </li>
              <li>
                <h3>We have a new client...</h3>
                <p>Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium</p>
              </li>
            </ol>
          </li>
          <li class="section" id="comments">
          <h2>Recent Comments</h2>
          <!-- Assumably listed according most recent, thus introducing an order -->
          <ol>
            <li>
              <p><cite>Ben</cite> said:</p>
              <q>Gratuitous octopus niacin, sodium</q>
            </li>
            <li>
              <p><cite>Joe Santos</cite> said:</p>
              <q>Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</q>
            </li>
            <li>
              <p><cite>Marko</cite> said:</p>
              <q>Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate.</q>
            </li>
          </ol>
          </li>
          <li class="section" id="ads">
            <h2>Advertising</h2>
            <ul>
              <li>
                <a href="#">
                  <img src="includes/img/ad1.png" alt="Advertisement." />
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="includes/img/ad2.png" alt="Advertisement." />
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="includes/img/ad3.png" alt="Advertisement." />
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="includes/img/ad4.png" alt="Advertisement." />
                </a>
              </li>
            </ul>
          </li>
          <li class="section" id="twitter">
            <h2>Tweeter Stuff</h2>
            <blockquote>
              <address><a href="#">wisefalco</a>:</address>
              <p><q>@<a href="#">simmor</a> Haha, this is really funny (<a href="#">http://tinyurl.com/</a>)</q></p>
              <p>5 minutes ago from web</p>
              <!-- Attempted to use time tag, but the validator kept complaining, "The text content of element time was not in the required format: The literal did not satisfy the date or time format." -->
            </blockquote>
            <a href="#">Follow us on Twitter</a>
          </li>
        </ul>
      </div>
      <div id="bottom">
        <h2>WDIM268</h2>
        <p>Copyright 2009. All rights reserved. Valid (X)HTML / CSS.</p>
        <nav>
          <ul>
            <li>
              <a class="footSelected" href="index.html">Home</a>
            </li>
            <li>
              <a href="about.html">About</a>
            </li>
            <li>
              <a href="services.html">Services</a>
            </li>
            <li>
              <a href="portfolio.html">Portfolio</a>
            </li>
            <li>
              <a href="blog.html">Blog</a>
            </li>
            <li>
             <a href="contact.html">Contact</a>
            </li>
            <li>
              <a href="pricing.html">Pricing</a>
            </li>
          </ul>
        </nav>
      </div>
    </footer>
    										
    									
    										
    footer {
      background: #dcdcda;
      border-top: 1px solid #a5a5a5;
      font-size: 11px;
      height: 390px;
      line-height: 1.3;
      margin: 60px 0 0 0;
      padding: 10px 0;
      font-family: Arial, Helvetica, sans-serif;
      
    }
      
      footer #mega {
        width:100%;
        background-image:url('../img/megaglow_bg.jpg'); /*Adujst on bigger screen*/
        background-repeat:no-repeat;
        background-position:top; 
        background-color:#4b4d4a;
        border-top: 1px solid #3e3f3e;
        border-bottom: 1px solid #fff;
        color: #fff;
        margin-bottom: 10px;
      }
      
        footer #mega ul {
          margin: 0 auto;
          height: 355px;
          width: 960px;
          text-align: left;
        }
      
        footer #mega .section {
          float: left;
          max-height: 325px;
          padding: 10px;
          width: 220px;
        }
        
        footer .section ul { 
          height: auto;
          width: auto;
        }
        
        footer .section h2 {
          border-bottom: 1px solid #c2c2c2;
          font-family: "Open Sans Condensed", sans-serif;
          font-size: 16px;
          margin-bottom: 20px;
          padding: 5px 0;
          text-transform: uppercase;
        }
        
        footer .section h3 {
          float: right;
          font-size: 12px;
          font-weight: bold;
          padding: 2px 0;
          width: 170px;
        }
          
          footer #blog li {
            list-style-image: url('../img/bullet_date.png');
            list-style-position: inside;
            margin-bottom: 15px;
          }
          
           /* Problem with blog's ol in Firefox; attempt to use clear on p only partly fixes, and adds problem in Chrome. */
          
          footer #comments li {
            list-style-image: url('../img/bullet_comment.png');
            margin: 0 0 15px 30px;
          }
            
          footer #comments p {
            font-size: 12px;
            padding-bottom: 5px;
          }
          
          footer #comments cite { font-weight: bold; }
          
        footer #ads ul {
          height: auto;
          width: auto;
        }  
          
          footer #ads li { 
            border: 1px solid #fff; 
            float: left;
            height: 98px;
            width: 98px;
          }
          
          footer #ads li:first-child { margin: 0 20px 20px 0; }
          footer #ads li:nth-child(3) { margin-right: 20px; }
          
          footer #ads a { 
            border: 4px solid #aeaeae; 
            display: block;
            height: 90px;
            width: 90px;
          }
          
          footer #ads img { border: 1px solid #fff; }
          
        footer #twitter { 
          background: url('../img/twitterbird_bg.png') 110px bottom no-repeat;
          font-style: italic;
          height: 260px;
        }
          
          footer #twitter h2 { font-style: normal; }
          
          footer #twitter blockquote {
            background: url('../img/tweetquote_bg.png') no-repeat;
            color: #484848;
            font-family: "Times New Roman", serif;
            padding: 20px 15px;
          }
    
            footer #twitter blockquote a { color: #d05706; }
            footer #twitter blockquote p:last-child { margin: 20px 0; }
          
          footer #twitter address {
            font-weight: bold;
            font-size: 14px;
          }
          
          footer #twitter a { color: #fff; }
          footer #twitter p { font-size: 12px; color:#484848; }
          
          footer #twitter q { font-size: 14px; }
    
      footer #bottom {
        clear: both;
        margin: 0 auto;
        width: 960px;
      }
      
        footer #bottom * { 
        color: #848484;
        float: left; 
      }
      
      footer #bottom h2 {
        font-family: "Arial Narrow", sans-serif;
        font-weight: bold;
        font-size: 18px;
        padding: 0 5px 0 10px;
      }
      
      footer #bottom p { padding: 5px; }
      footer #bottom nav { float: right; }
      
        footer #bottom nav a {
          padding: 5px 15px;
          text-decoration: none;
          text-transform: uppercase;
        }
        
        footer #bottom nav a:hover, footer #bottom nav a.footSelected { 
          color: #505457; 
        }
    										
    									

    An entirely hand-coded project that focused on the semantically correct useage of HTML tags, including those introduced with HTML5, as defined by the W3C. Parts of the site were assigned to each team member. I built and styled the large footer and blog (except the sidebar), and fixed cross-browser styling on the searchbar.

    x

  • PDX Interactive event page

    PDX Interactive

    A project management event set up by students of AIPD. I led the content team and assited with the layout. More info Visit Site

    PDX Interactive
    PDX Interactive website

    Rather than simply sit through lectures, we opted to set up an event in which active web developers and designers would discuss their views on project management. We broke into teams to plan the event and create a website and posters to announce it. I helped plan the layout of the site before and after the event, but primarily acted as content lead.

    x

  • Ai Departments Redesign

    Ai Departments Redesign

    Redesign exercise of the old Ai Departments site. Single page, hand coded. (Photos from stock.xchng.) More info View

    Ai Departments Redesign
    Ai Departments redesign
    										
    <body>
    	<header>
        	<a href="index.html">
    			<h1>AiPD Departments</h1>
    		</a>
    		<a href="http://myaicampus.com/" class="portal">MyAiCampus Student Portal</a>
    		<form class="search">
    			<input type="text" name="search_term" class="search_term" />
    			<input type="submit" value="Search" class="submit" />
    		</form>
    	</header>
    	<nav id="primary">
    		<ul class="dropdown">
    			<li>
    				<a href="#">Education</a>
    				<ul class="sub_menu">
    					<li><a href="#">Advising</a></li>
    					<li><a href="#">Registration</a></li>
    					<li><a href="#">Library</a></li>
    					<li><a href="#">Tutoring</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">Financial</a>
    				<ul class="sub_menu">
    					<li><a href="#">Scholarships</a></li>
    					<li><a href="#">FAFSA</a></li>
    					<li><a href="#">Accounting</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">Student Affairs</a>
    				<ul class="sub_menu">
    					<li><a href="#">Student Housing</a></li>
    					<li><a href="#">Career Services</a></li>
    					<li><a href="#">Academic Assistance</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">Departments</a>
    				<ul class="sub_menu">
    					<li><a href="#">Art</a></li>
    					<li><a href="#">Liberal Arts</a></li>
    					<li><a href="#">Advertising</a></li>
    					<li><a href="#">Accessory Design</a></li>
    					<li><a href="#">Apparel Design</a></li>
    					<li><a href="#">Culinary Arts</a></li>
    					<li><a href="#">Design Management</a></li>
    					<li><a href="#">Design Research</a></li>
    					<li><a href="#">Design Visualization</a></li>
    					<li><a href="#">Digital Film & Video</a></li>
    					<li><a href="#">Fashion Marketing</a></li>
    					<li><a href="#">Game Art & Design</a></li>
    					<li><a href="#">Graphic & Web Design</a></li>
    					<li><a href="#">Industrial Design</a></li>
    					<li><a href="#">Interior Design</a></li>
    					<li><a href="#">Media Arts & Animation</a></li>
    					<li><a href="#">Photography</a></li>
    					<li><a href="#">Vis Affects & Motion Graphics</a></li>
    					<li><a href="#">Visual & Game Programming</a></li>
    				</ul>
    			</li>
    		</ul>
    	</nav>
        <div id="wrapper">
    		<div id="sidebar" class="right">
    			<ul id="hours">
    				<li>
    					<h3>Main Building</h3>
    					<ul class="details">
    						<li>
    							<span class="day">Mon - Thu</span>
    							<span class="time">7:30am - 11:45pm</span>
    						</li>
    						<li>
    							<span class="day">Fri - Sat</span>
    							<span class="time">7:30am - 10:00pm</span>
    						</li>
    						<li>
    							<span class="day">Sunday</span>
    							<span class="time">11:00am - 10:00pm</span>
    						</li>
    					</ul>
    				</li>
    				<li>
    					<h3>Library</h3>
    					<ul class="details">
    						<li>
    							<span class="day">Mon - Thu</span>
    							<span class="time">7:30am - 10:00pm</span>
    						</li>
    						<li>
    							<span class="day">Friday</span>
    							<span class="time">7:30am - 9:00pm</span>
    						</li>
    						<li>
    							<span class="day">Saturday</span>
    							<span class="time">10:00am - 6:00pm</span>
    						</li>
    						<li>
    							<span class="day">Sunday</span>
    							<span class="time">12:00pm - 10:00pm</span>
    						</li>
    					</ul>
    				</li>
    				<li>
    					<h3>The Equipment Cage</h3>
    					<ul class="details">
    						<li>
    							<span class="day">Mon - Thu</span>
    							<span class="time">7:30am - 1:30pm, 3:00pm - 10:30pm</span>
    						</li>
    						<li>
    							<span class="day">Friday</span>
    							<span class="time">7:30am - 10:00pm</span>
    						</li>
    						<li>
    							<span class="day">Saturday</span>
    							<span class="time">8:00am - 4:45pm</span>
    						</li>
    						<li>
    							<span class="day">Sunday</span>
    							<span class="time">12:00pm - 10:00pm</span>
    						</li>
    					</ul>
    				</li>
    				<li>
    					<h3>Technology Service Center</h3>
    					<ul class="details">
    						<li>
    							<span class="day">Mon - Thu</span>
    							<span class="time">7:45am - 6:30pm</span>
    						</li>
    						<li>
    							<span class="day">Friday</span>
    							<span class="time">7:45am - 10:00pm</span>
    						</li>
    						<li>
    							<span class="day">Saturday</span>
    							<span class="time">8:00am - 4:00pm</span>
    						</li>
    					</ul>
    				</li>
    				<li>
    					<h3>Supply Store</h3>
    					<ul class="details">
    						<li>
    							<span class="day">Mon - Thu</span>
    							<span class="time">7:30am - 6:30pm</span>
    						</li>
    						<li>
    							<span class="day">Friday</span>
    							<span class="time">7:30am - 5:30pm</span>
    						</li>
    						<li>
    							<span class="day">Saturday</span>
    							<span class="time">10:00am - 3:00pm</span>
    						</li>
    					</ul>
    				</li>
    				<li>
    					<h3>Registrar</h3>
    					<ul class="details">
    						<li>
    							<span class="day">Mon - Thu</span>
    							<span class="time">8:00am - 6:00pm</span>
    						</li>
    						<li>
    							<span class="day">Friday</span>
    							<span class="time">8:00am - 5:00pm</span>
    						</li>
    					</ul>
    				</li>
    				<li>
    					<h3>Industrial Design Shop</h3>
    					<ul class="details">
    						<li>
    							<span class="day">Mon - Thu</span>
    							<span class="time">7:30am - 10:00pm</span>
    						</li>
    						<li>
    							<span class="day">Friday</span>
    							<span class="time">7:30am - 5:00pm</span>
    						</li>
    						<li>
    							<span class="day">Saturday</span>
    							<span class="time">9:00am - 5:00pm</span>
    						</li>
    						<li>
    							<span class="day">Sunday</span>
    							<span class="time">12:00pm - 5:00pm</span>
    						</li>
    					</ul>
    				</li>
    				<li>
    					<h3>Culinary Building</h3>
    					<ul class="details">
    						<li>
    							<span class="day">Mon - Fri</span>
    							<span class="time">6:00am - 7:00pm</span>
    						</li>
    					</ul>
    				</li>
    				<li>
    					<h3>Sharp (<a href="#">make reservations</a>)</h3>
    					<ul class="details">
    						<li>
    							<span class="day">Thu - Fri</span>
    							<span class="time">12:45pm - 2:30pm</span>
    						</li>
    					</ul>
    				</li>
    			</ul>
    		</div>
    		<div id="slides">
    			<div class="slides_container">
    				<div>
    					<img src="img/gallery.jpg" alt="Art Gallery" />
    					<div class="text">
    						<h3>This month in the gallery...</h3>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper placerat urna vel euismod. Sed iaculis, nunc id commodo rutrum, erat tellus consequat mi, in convallis neque lectus eu velit. Donec luctus gravida porta.</p>
    						<p><a href="#">Read more...</a></p>
    					</div>
    				</div>
    				<div>
    					<img src="img/costume.jpg" alt="Costume Party" />
    					<div class="text">
    						<h3>Halloween Party an Undead Success!</h3>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper placerat urna vel euismod. Sed iaculis, nunc id commodo rutrum, erat tellus consequat mi, in convallis neque lectus eu velit. Donec luctus gravida porta.</p>
    						<p><a href="#">Read more...</a></p>
    					</div>
    				</div>
    				<div>
    					<img src="img/pie.jpg" alt="Costume Party" />
    					<div class="text">
    						<h3>Have some pie, on us!</h3>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper placerat urna vel euismod. Sed iaculis, nunc id commodo rutrum, erat tellus consequat mi, in convallis neque lectus eu velit. Donec luctus gravida porta.</p>
    						<p><a href="#">Read more...</a></p>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div id="content">
    			<ul id="quick_buttons">
    			<!--Buttons not done; snazzy typography designs-->
    				<li>
    					<a href="#" id="register">Remember to <span>register!</span></a>
    				</li>
    				<li>
    					<a href="#" id="tutor">Tough class? <span>Get a <span>tutor!</span></span></a>
    				</li>
    				<li>
    					<a href="#" id="scholar">How many scholarships have you applied for?</a>
    				</li>
    				<li>
    					<a href="#" id="grad"><span>Graduating soon?</span></a>
    				</li>
    				<li>
    					<a href="#" id="grades">Passing your classes? <span>Find out.</span></a>
    				</li>
    				<li>
    					<a href="#" id="job"><span>Need money? <span>Get a job!</span><span></a>
    				</li>
    			</ul>
    			<!--Interactive event calendar-->
    			<table id="calendar" cellspacing="5">
    				<tr class="month">
    					<td><a href="#"><-Prev</a></td>
    					<th colspan="5">November 2011</th>
    					<td><a href="#">Next-></a></td>
    				</tr>
    				<tr class="days">
    					<th>Sun</th>
    					<th>Mon</th>
    					<th>Tue</th>
    					<th>Wed</th>
    					<th>Thu</th>
    					<th>Fri</th>
    					<th>Sat</th>
    				</tr>
    				<tr class="dates">
    					<td> </td>
    					<td> </td>
    					<td>1</td>
    					<td>2</td>
    					<td>3</td>
    					<td>4</td>
    					<td>5</td>
    				</tr>
    				<tr class="dates">
    					<td>6</td>
    					<td>7</td>
    					<td>8</td>
    					<td>9</td>
    					<td>10</td>
    					<td>
    						11
    						<p>Some Event<br />7pm</p>
    					</td>
    					<td>12</td>
    				</tr>
    				<tr class="dates">
    					<td>13</td>
    					<td>14</td>
    					<td>15</td>
    					<td>16</td>
    					<td>17</td>
    					<td>18</td>
    					<td>19</td>
    				</tr>
    				<tr class="dates">
    					<td>20</td>
    					<td>21</td>
    					<td>
    						22
    						<p>Free pie!<br />11:45am</p>
    					</td>
    					<td>23</td>
    					<td>24</td>
    					<td>25</td>
    					<td>26</td>
    				</tr>
    				<tr class="dates">
    					<td>27</td>
    					<td>28</td>
    					<td>29</td>
    					<td>30</td>
    					<td> </td>
    					<td> </td>
    					<td> </td>
    				</tr>
    			</table>
    		</div>
        </div>
        <footer>
    		<span class="right">
    			<a href="#"><img src="img/fb.jpg" alt="Facebook" /></a> 
    			<a href="#"><img src="img/twitter.png" alt="Twitter" /></a> 
    			<a href="#"><img src="img/linkedin.png" alt="LinkedIn" /></a> 
    		</span>
    		<small class="copyright">Copyright © 2011 <a href="http://www.artinstitutes.edu/portland/">Brandi L. Johnecheck</a><!-- and <a href="http://www.artinstitutes.edu/">The Art Institutes International</a>. <br />
    		The Art Institutes and Ai logo are trademarks of <a href="http://edmc.edu/">Education Management Corporation</a>. All rights reserved-->.</small>
        </footer>
    </body>
    										
    									
    										
    /* Page */
    
    #wrapper {
    	background:#efefef;
    	border:1px solid #999;
    	color:#000;
    	margin:20px auto;
    	overflow:hidden;
    	padding:10px;
    	width:897px;
    }
    
    #wrapper a:hover {color:#000;}
    
    #sidebar {
    	background:#ddd;
    	font-size:12px;
    	margin:-10px -10px -10px 10px;
    	padding:10px 20px;
    	width:230px;
    }
    
    #sidebar #hours h3 {
    	border-bottom:1px dashed #999;
    	clear:both;
    }
    #sidebar #hours li {
    	margin-bottom:1.8em;
    	overflow:hidden;
    }
    #sidebar #hours .details li {
    	border-bottom:1px dotted #999;
    	margin:0;
    }
    #sidebar #hours span {display:inline-block;}
    #sidebar #hours .day {
    	float:left;
    	width:105px;
    }
    #sidebar #hours .time {
    	float:right;
    	width:120px;
    }
    
    #content #quick_buttons {
    	width:615;
    	overflow:hidden;
    	margin:40px 0;
    }
    #content #quick_buttons li {
    	float:left;
    	margin:0 7px 7px 0;
    	width:200px;
    }
    #content #quick_buttons a {
    	color:#fff;
    	font-size:16px;
    	display:block;
    	height:56px;
    	width:191px;
    	padding:5px;
    	text-decoration:none;
    }
    
    #content #quick_buttons #register {
    	background:orange;
    	text-align:center;
    	line-height:20px;
    }
    	#content #quick_buttons #register span {
    		margin-top:3px;
    		font-size:40px;
    		display:inline-block;
    	}
    	
    #content #quick_buttons #tutor {
    	background:green;
    	font-size:18px;
    }
    	#content #quick_buttons #tutor span {
    		display:block;
    		font-size:25px;
    		margin:10px 0 0 20px;
    	}
    	#content #quick_buttons #tutor span span {
    		display:inline;
    		font-size:38px;
    		margin:0;
    	}
    
    #content #quick_buttons #grades {
    	background:red;
    }
    	#content #quick_buttons #grades span {
    		display:block;
    		text-align:right;
    		margin-top:15px;
    		font-size:24px;
    	}
    #content #quick_buttons #grad {
    	background:darkblue;
    	text-align:center;
    	font-size:18px;
    }
    	#content #quick_buttons #grad span {
    		margin:18px 0;
    		display:block;
    	}
    #content #quick_buttons #job {
    	background:teal;
    	font-size:18px;
    }
    	#content #quick_buttons #job span {
    		display:block;
    		margin:7px 0 0 8px;
    	}
    	#content #quick_buttons #job span span {
    		margin:0 8px 7px 0;
    		text-align:right;
    		font-size:22px;
    	}
    #content #quick_buttons #scholar {
    	background:purple;
    	text-align:right;
    }
    										
    									

    An exercise re-designing the old Ai Departments front page, focused on clarity and usability. The Ai Departments site (which no longer exists at this point) was used as a source of school information for AiPD students, but was generally considered to be poorly designed, with the front page being nothing but a list of large icons for the various departments.

    x

  • ALLCAPS Media

    ALLCAPS Media

    An HTML mockup for ALLCAPS Media, a currently hobby-level group mostly focused on humorous media. More info View Home View Profile

    ALLCAPS Media
    ALLCAPS Media website
    										
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Welcome to localhost | localhost</title>
      <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
      <link href="css/reset.css" rel="stylesheet" type="text/css" />
      <link href="css/home-styles.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="page-wrapper">
    <div id="main-wrapper">
    	<header>
    		<a href="#"><h1>ALLCAPS</h1></a>
    		<a href="#" class="contact">Contact Card</a>
    	</header>
    	<nav id="main_nav">
    		<ul>
    			<li>
    				<a href="#">home</a>
    			</li>
    			<li>
    				<a href="#">gallery</a>
    			</li>
    			<li>
    				<a href="#">about us</a>
    			</li>
    			<li>
    				<a href="#" class="store">store</a>
    			</li>
    		</ul>
    	</nav>
    	<div id="content">
    		<div id="welcome">
    			<h2>OMFG Welcome!</h2>
    			<p>If you're looking for top-name brands at rock-bottom prices, you've come to the wrong site. We're just here to entertain.</p>
    			<p>ALLCAPS is our way of bringing our ideas to life and spewing them all over the internet. We deal in film and animation, games and music and stories and t-shirts - all in the name of amusement. Mostly our own amusement. But especially yours! After all, making a scene is so much more fun with an audience.</p>
    			<p>We do it all for you. Why? Because you're awesome. (And so are we.)</p>
    		</div>
    		<div id="recent_updates">
    			<h2>Recent Updates</h2>
    			<ul>
    				<li>
    					<a href="#">
    						<h3>Title of Update</h3>
    						Title of Project, Post Date
    					</a>
    				</li>
    				<li>
    					<a href="#">
    						<h3>Title of Update</h3>
    						Title of Project, Post Date
    					</a>
    				</li>
    				<li>
    					<a href="#">
    						<h3>Title of Update</h3>
    						Title of Project, Post Date
    					</a>
    				</li>
    				<li>
    					<a href="#">
    						<h3>Title of Update</h3>
    						Title of Project, Post Date
    					</a>
    				</li>
    				<li>
    					<a href="#">
    						<h3>Title of Update</h3>
    						Title of Project, Post Date
    					</a>
    				</li>
    			</ul>
    		</div>
    		<div id="news">
    			<h2>ALLCAPS NEWS</h2>
    			<ul>
    				<li>
    					<h3>Header</h3>
    					<cite>Author Name // Dec 12</cite>
    					<p>This is an article that isn’t really an article. It is just here for the sake of example, but I didn’t want to use Lorem Ipsum, as that bores me and, in my opinion, makes it harder to tell what parts of the page are supposed to be what. Full articles won’t be shown here; instead, it will be the first parts, and a link to the full thing.</p>
    					<p>This is more filler, since there’s more space. It’s filler-tastic! Filler, filler, filler...</p>
    					<a href="#" class="continue_news">Continued...</a>
    				</li>
    				<li>
    					<h3>Header</h3>
    					<cite>Author Name // Dec 12</cite>
    					<p>This is an article that isn’t really an article. It is just here for the sake of example, but I didn’t want to use Lorem Ipsum, as that bores me and, in my opinion, makes it harder to tell what parts of the page are supposed to be what. Full articles won’t be shown here; instead, it will be the first parts, and a link to the full thing.</p>
    					<p>This is more filler, since there’s more space. It’s filler-tastic! Filler, filler, filler...</p>
    					<a href="#" class="continue_news">Continued...</a>
    				</li>
    				<li>
    					<h3>Header</h3>
    					<cite>Author Name // Dec 12</cite>
    					<p>This is an article that isn’t really an article. It is just here for the sake of example, but I didn’t want to use Lorem Ipsum, as that bores me and, in my opinion, makes it harder to tell what parts of the page are supposed to be what. Full articles won’t be shown here; instead, it will be the first parts, and a link to the full thing.</p>
    					<p>This is more filler, since there’s more space. It’s filler-tastic! Filler, filler, filler...</p>
    					<a href="#" class="continue_news">Continued...</a>
    				</li>
    			</ul>
    		</div>
    		<footer>
    			<p>Copyright © 2011 ALLCAPS Media.</p>
    			<nav>
    				<ul>
    					<li>
    						<a href="#">Home</a>
    					</li>
    					<li>
    						<a href="#">Gallery</a>
    					</li>
    					<li>
    						<a href="#">About Us</a>
    					</li>
    					<li>
    						<a href="#">Contact</a>
    					</li>
    					<li>
    						<a href="#">Store</a>
    					</li>
    				</ul>
    			</nav>
    		</footer>
    	</div>
    </div>
    </div>
    </body>
    
    </html>
    										
    									
    										
    #content {
    	background: url('../img/bg_folder.png') no-repeat;
    	height:1150px;
    	padding:0 20px;
    	position:relative;
    }
    
    #bio {
    	background: url('../img/bg_papers_clip_big.png') no-repeat;
    	height:530px;
    	width:382px;
    	padding:65px 55px;
    	position:absolute;
    	top:-41px;
    	left:15px;
    	z-index:0;
    }
    	#bio p {
    		margin-bottom:0.6em;
    	}
    	#bio ul {
    		padding-left:50px;
    		list-style:square;
    	}
    	
    #polaroid {
    		background:#fefefe;
    		font-family:'RockSaltRegular', Arial, Helvetica, sans-serif;
    		font-size:12px;
    		padding:15px;
    		width:250px;
    		position:absolute;
    		top:0;
    		right:20px;
    		-webkit-box-shadow: 2px 2px 2px #c8b998;
    		box-shadow: 2px 2px 2px #c8b998;
    		-webkit-transform:rotate(2deg);
    		-moz-transform:rotate(2deg);
    		-o-transform:rotate(2deg);
    		-ms-transform:rotate(2deg);
    		transform:rotate(2deg);
    	}
    	#polaroid p {
    		height:35px;
    		margin-top:10px;
    	}
    
    #content a.contact {
    		background:#fff;
    		height:60px;
    		width:150px;
    		padding:25px;
    		position:absolute;
    		right:65px;
    		top:420px;
    		-webkit-box-shadow: 2px 1px 2px #d9caa9;
    		box-shadow: 2px 1px 2px #d9caa2;
    		-webkit-transform:rotate(-6deg);
    		-moz-transform:rotate(-6deg);
    		-o-transform:rotate(-6deg);
    		-ms-transform:rotate(-6deg);
    		transform:rotate(-6deg);
    	}
    	
    #more_work {
    	position:absolute;
    	bottom:40px;
    	left:;
    }
    	#more_work h2 {
    		background:url('../img/more_work.png') no-repeat;
    		width:203px;
    		height:47px;
    		margin:0 auto 5px;
    		text-indent:-9999px;
    	}
    	
    	#workbook {
    		background:url('../img/bg_workbook.png') no-repeat;
    		width:700px;
    		height:490px;
    		padding:0 32px;
    		position:relative;
    	}
    		#workbook a.last, #workbook a.next {
    			color:#b0b0b0;
    			display:block;
    			letter-spacing:5px;
    			padding-top:10px;
    			padding-bottom:20px;
    			position:absolute;
    			top:60px;
    			text-decoration:none;
    			text-transform:uppercase;
    		}
    		#workbook a.last {
    			left:-39px;
    			padding-right:90px;
    			padding-left:5px;
    			-webkit-transform:rotate(-90deg);
    			-moz-transform:rotate(-90deg);
    			-o-transform:rotate(-90deg);
    			-ms-transform:rotate(-90deg);
    			transform:rotate(-90deg);
    		}
    		#workbook a.next {
    			right:-33px;
    			padding-left:90px;
    			-webkit-transform:rotate(90deg);
    			-moz-transform:rotate(90deg);
    			-o-transform:rotate(90deg);
    			-ms-transform:rotate(90deg);
    			transform:rotate(90deg);
    		}
    		#workbook a.last:hover, #workbook a.next:hover {font-weight:bold;}
    		
    		#workbook li h3 {
    			font-size:18px;
    			font-weight:bold;
    			margin-bottom:0;
    			text-decoration:underline;
    		}
    		#workbook li p{margin-bottom:3px;}
    		
    		#workbook li.web_project {
    			width:285px;
    			float:left;
    			margin:32px;
    		}
    			#workbook li.web_project img {
    				border:0;
    				width:285px;
    				height:213px;
    			}
    										
    									

    ALLCAPS is a small group of friends who decided to start making short animations and videos, games, and amusing articles, and they desired a central website that would both provide information about them and show updates from all projects. The design desired is playful and a bit tongue-in-cheek, with a strong theme. This is an HTML mockup of the homepage.

    x

Scripting

  • Flexible jQuery Multi-Slider

    Flexible jQuery Multi-Slider

    The 3-item scroller used on this site, created because I couldn't find a suitable flexible, multi-item scroller. More info

    Flexible jQuery Multi-Slider
    										
    $(function() {
    	//Stop refresh on scroller
    	$('p.button a').click(function(event) {
    		event.preventDefault();
    	});
    
    	//array of the lists
    	var webList = $('ul#web li.proj');
    	var designList = $('ul#design li.proj');
    	var codeList = $('ul#code li.proj');
    	var webArray = $.makeArray(webList);
    	var designArray = $.makeArray(designList);
    	var codeArray = $.makeArray(codeList);
    
    	//check screen size; normal shows and moves 3 at a time, small screen does only 1
    	var slots;
    	function getWidth() {
            var windowWidth = $(window).width();
            if (windowWidth < 450) {
                slots = 1;
            } else {
            	slots = 3;
            }
        };
        getWidth();
        $(window).resize(getWidth);
    
    	function slideForward(array,list) {
    		var removed = [];
    		for (i=0;i<slots;i++) {
    			var removed = array.shift();
    			array.push(removed);
    		}
    		list.children('li').animate({'left':'-='+pageWidth}, 1200, function() {
    			list.empty();
    			list.append(array);
    			list.children('li').css('left',0);
    			list.parent().children('p').children('a').removeClass('none');
    		});
    	};
    	
    	function slideBack(array,list) {
    		var removed = [];
    		for (i=0;i<slots;i++) {
    			var removed = array.pop();
    			array.unshift(removed);
    		}
    		list.empty();
    		list.append(array);
    		list.children('li').css('left','-'+pageWidth+'px');
    		list.children('li').animate({'left':'+='+pageWidth}, 1200, function() {
    			list.children('li').css('left',0);
    			list.parent().children('p').children('a').removeClass('none');
    		});
    	};
    	
    	//Next button clicked, move forward
    	$('p.button a.next').click(function() {
    		if (!$(this).hasClass('none')) {
    			$(this).parent('p').children('a').addClass('none');
    			var section = $(this).closest('section').attr('id');
    			if (section === 'webstuff') {
    				slideForward(webArray, $('ul#web'));
    			} else if (section === 'designstuff') {
    				slideForward(designArray, $('ul#design'));
    			} else if (section === 'codestuff') {
    				//slideForward(codeArray, $('ul#code'));
    			}
    		}
    	});
    	
    	//Prev button clicked, move back
    	$('p.button a.prev').click(function() {
    		if (!$(this).hasClass('none')) {
    			$(this).parent('p').children('a').addClass('none');
    			var section = $(this).closest('section').attr('id');
    			if (section === 'webstuff') {
    				slideBack(webArray, $('ul#web'));
    			} else if (section === 'designstuff') {
    				slideBack(designArray, $('ul#design'));
    			} else if (section === 'codestuff') {
    				//slideBack(codeArray, $('ul#code'));
    			}
    		}
    	});
    });
    										
    									
    										
    ul#web li, ul#design li, ul#code li {
    	float:left;
    	font-size:.85em;
    	margin-right:3.33333%;
    	padding-bottom:5px;
    	position:relative;
    	width:30%;
    }
    
    ul#web li img, ul#design li img, ul#code li img {width:100%;}
    										
    									

    While building my portfolio, I tried to locate a plugin designed to be flexible and which showed multiple items at once. I couldn't find one that I considered acceptable, so I built my own. I plan to eventually rework the script into a plugin to share with others.

    x

  • CatIcon WP Plugin

    CatIcon WP Plugin

    My first WordPress plugin, designed to add icons next to post titles according to category. More info View GitHub

    CatIcon WP Plugin
    										
    <?php
    /*
    Plugin Name: CatIcon
    Description: Adds category-based icons next to post titles.
    Version: 1.0
    Author: Novalyyn
    Author URI: http://webcrittercreative.com
    */
    
    // Created with heavy referencing of http://pippinsplugins.com/adding-custom-meta-fields-to-taxonomies/
    
    function blj_caticon_i18n() { 
      $plugin_dir = trailingslashit( basename( dirname( __FILE__ ) ) ); 
      load_plugin_textdomain( 'blj_caticon', false, $plugin_dir . 'languages/' ); 
    } 
    
    add_action( 'plugins_loaded', 'blj_caticon_i18n' );
    
    //Bring in styles
    function blj_caticon_styles() {
      wp_enqueue_style( 'caticon', plugins_url( 'caticon-styles.css', __FILE__ ) );
    }
    
    add_action( 'wp_enqueue_scripts', 'blj_caticon_styles' );
    
    // Add input to new term page
    function blj_new_add_icon_field() {
      wp_nonce_field( plugins_url( __FILE__ ), 'blj_noncename' );
      ?>
      <div class="form-field">
        <label for="caticon"><?php _e( 'Icon URL', 'blj_caticon' ); ?></label>
        <input type="text" name="term_meta[blj_caticon_value]" id="caticon" value="">
        <p class="description"><?php _e( 'Enter the complete image URL','blj_caticon' ); ?></p>
      </div>
    <?php
    }
    
    add_action( 'category_add_form_fields', 'blj_new_add_icon_field', 10, 2 );
    
    // Add input to edit term page
    function blj_edit_add_icon_field($term) {
      wp_nonce_field( plugins_url( __FILE__ ), 'blj_noncename' );
      $t_id = $term->term_id;
      $term_meta = get_option( "taxonomy_$t_id" ); ?>
      <tr class="form-field">
      <th scope="row" valign="top"><label for="caticon"><?php _e( 'Icon URL', 'blj_caticon' ); ?></label></th>
        <td>
          <input type="text" name="term_meta[blj_caticon_value]" id="caticon" value="<?php echo esc_attr( $term_meta['blj_caticon_value'] ) ? esc_attr( $term_meta['blj_caticon_value'] ) : ''; ?>">
          <p class="description"><?php _e( 'Enter the complete image URL','blj_caticon' ); ?></p>
        </td>
      </tr>
    <?php
    }
    
    add_action( 'category_edit_form_fields', 'blj_edit_add_icon_field', 10, 2 );
    
    // Save fields
    function blj_save_icon_url( $term_id ) {
      if ( isset( $_POST['term_meta'] ) ) {
        $t_id = $term_id;
        $term_meta = get_option( "taxonomy_$t_id" );
        $cat_keys = array_keys( $_POST['term_meta'] );
        foreach ( $cat_keys as $key ) {
          if ( isset ( $_POST['term_meta'][$key] ) ) {
            $term_meta[$key] = $_POST['term_meta'][$key];
          }
        }
        if ( isset( $_POST[ 'blj_noncename' ] ) && wp_verify_nonce( $_POST[ 'blj_noncename' ], plugins_url( __FILE__ ) ) ) {
          update_option( "taxonomy_$t_id", $term_meta );
        }
      }
    }  
    
    add_action( 'edited_category', 'blj_save_icon_url', 10, 2 );  
    add_action( 'create_category', 'blj_save_icon_url', 10, 2 );
    
    function blj_display_icon( $title ) {
      //only displays first category
      //only show on/for single posts
      if ( is_single() && in_the_loop() ) {
        //steps to get cat icon value
        $s1 = get_the_category();
        $s2 = $s1[0]->term_id;
        $s3 = get_option( "taxonomy_$s2" );
        $cat_url = $s3['blj_caticon_value'];
        //check for value to show
        if ( $cat_url ) {
          $cat_icon = '<img src="' . esc_url( $cat_url ) . '" alt="' . esc_attr( $s1[0]->name ) . '" title="' . esc_attr( $s1[0]->name ) . '" class="blj-caticon" />';
          $title = $cat_icon . $title;
        }
      }
    
      return $title;
    }
    
    add_filter( 'the_title', 'blj_display_icon' );
    										
    									
    										
    .entry-title, .navigation {
            position: relative;
    }
    
    .blj-caticon {
            max-height: 2.3em;
            vertical-align: top;
            margin: 0.1em;
            float: left;
    }
    
    .navigation .blj-caticon {
            display: none;
    }
    										
    									

    A plugin which allows images to be associated with categories, and places those images to the left of post titles. The images only appear on individual post pages, and are sized for two lines of title. Only one category's image will be displayed. This plugin has not been sent to WordPress for approval, but is secure for version 3.6; not tested for other versions.

    x

  • JavaScript Card Game: War

    JS Card Game: War

    Logic for the classic and complete card game War, built using a card deck plugin. More info View

    JS Card Game: War
    										
    var deck, pHand, cHand, pPlayed, cPlayed, pClaimed, cClaimed;
    var pHandDiv, cHandDiv, pPlayedDiv, cPlayedDiv, pClaimedDiv, cClaimedDiv;
    
    window.onload = init;
    
    function init() {
    	deck = new Stack();
    	deck.makeDeck(1);
    
    	pHand = new Stack();
    	cHand = new Stack();
    	pPlayed = new Stack();
    	cPlayed = new Stack();
    	pClaimed = new Stack();
    	cClaimed = new Stack();
    	warBox = new Stack();
    
    	pHandDiv = document.getElementById("pHandDiv");
    	cHandDiv = document.getElementById("cHandDiv");
    	pPlayedDiv = document.getElementById("pPlayedDiv");
    	cPlayedDiv = document.getElementById("cPlayedDiv");
    	pClaimedDiv = document.getElementById("pClaimedDiv");
    	cClaimedDiv = document.getElementById("cClaimedDiv");
    
    	dealOut();
    
    	pHandDiv.onclick = function() {
    		playCard();
    	}
    }
    
    function dealOut() {
    	if (pClaimed.cardCount() > 0) {
    		while (pClaimed.cardCount() > 0) {
    			deck.addCard(pClaimed.deal());
    		}
    	}
    	if (cClaimed.cardCount() > 0) {
    		while (cClaimed.cardCount() > 0) {
    			deck.addCard(cClaimed.deal());
    		}
    	}
    
    	deck.shuffle(1);
    	pHand.shuffle(1);
    	cHand.shuffle(1);
    
    	while (deck.cardCount() > 0) {
    		pHand.addCard(deck.deal());
    		cHand.addCard(deck.deal());
    	}
    	pHandDiv.style.background = "url(cards/cardback.gif)";
    	cHandDiv.style.background = "url(cards/cardback.gif)";
    }
    
    function playCard(war) {
    	if (pHand.cardCount() == 0 || cHand.cardCount() == 0) {
    		if (pClaimed.cardCount() == 0 || cClaimed.cardCount() == 0) {
    			alert("Game Over");
    		} else {
    			alert("Shuffling captured cards for play.");
    			pClaimedDiv.innerHTML = "";
    			cClaimedDiv.innerHTML = "";
    			dealOut();
    			return;
    		}	
    	}
    
    	if (!war) {
    		pPlayed.addCard(pHand.deal());
    		cPlayed.addCard(cHand.deal());
    		pCard = pPlayed.cards[0].createNode();
    		cCard = cPlayed.cards[0].createNode();
    		pPlayedDiv.appendChild(pCard);
    		cPlayedDiv.appendChild(cCard);
    		pHandDiv.innerHTML = "";
    		cHandDiv.innerHTML = "";
    		compareCards();
    	} else {
    		alert("War!");
    		var top  = 0;
    		for (i = 0; i < 3; i++) {
    			pPlayed.addCard(pHand.deal());
    			cPlayed.addCard(cHand.deal());
    			pCard = pPlayed.cards[0].createNode();
    			cCard = cPlayed.cards[0].createNode();
    			pCard.firstChild.style.visibility = "hidden";
    			cCard.firstChild.style.visibility = "hidden";
    			pCard.style.top  = top  + "px";
    			cCard.style.top  = top  + "px";
    			top  += 20;
    			pPlayedDiv.appendChild(pCard);
    			cPlayedDiv.appendChild(cCard);
    		}
    		pPlayed.addCard(pHand.deal());
    		cPlayed.addCard(cHand.deal());
    		pCard = pPlayed.cards[0].createNode();
    		cCard = cPlayed.cards[0].createNode();
    		pCard.style.top  = top  + "px";
    		cCard.style.top  = top  + "px";
    		pPlayedDiv.appendChild(pCard);
    		cPlayedDiv.appendChild(cCard);
    		pHandDiv.innerHTML = "";
    		cHandDiv.innerHTML = "";
    		compareCards();
    	}
    
    	if (pHand.cardCount() == 0) {
    		pHandDiv.style.background = "none";
    	}
    	if (cHand.cardCount() == 0) {
    		cHandDiv.style.background = "none";
    	}
    }
    
    function faceToNum(letter) {
    	switch(letter) {
    			case 'A':
    				return 14;
    				break;
    			case 'K':
    				return 13;
    				break;
    			case 'Q':
    				return 12;
    				break;
    			case 'J':
    				return 11;
    				break;
    		}
    }
    
    function compareCards() {
    	var lastCard = 0;
    	for (i=0;i>pPlayed.cardCount();i++) {
    		lastCard = lastCard + 1;
    	}
    
    	var pCard = pPlayed.cards[lastCard].rank;
    	var cCard = cPlayed.cards[lastCard].rank;
    
    	if (pCard == 'A' || pCard == 'K' || pCard == 'Q' || pCard == 'J') {
    		pCard = faceToNum(pCard);
    	}
    	if (cCard == 'A' || cCard == 'K' || cCard == 'Q' || cCard == 'J') {
    		cCard = faceToNum(cCard);
    	}
    
    	pCard = parseInt(pCard);
    	cCard = parseInt(cCard);
    
    	if (pCard > cCard) {
    		alert("You win this round.");
    		while (pPlayed.cardCount() > 0) {
    			pClaimed.addCard(pPlayed.deal());
    		}
    		while (cPlayed.cardCount() > 0) {
    			pClaimed.addCard(cPlayed.deal());
    		}
    		while (warBox.cardCount() > 0) {
    			pClaimed.addCard(warBox.deal());
    		}
    		var numCards = pClaimed.cardCount();
    		for (i = 0; i < numCards; i++) {
    			pCard = pClaimed.cards[0].createNode();
    			pCard.firstChild.style.visibility = "hidden";
    			pClaimedDiv.appendChild(pCard);
    		}
    		pPlayedDiv.innerHTML = "";
    		cPlayedDiv.innerHTML = "";
    	} else if (pCard < cCard) {
    		alert("The computer wins this round.");
    		while (pPlayed.cardCount() > 0) {
    			cClaimed.addCard(pPlayed.deal());
    		}
    		while (cPlayed.cardCount() > 0) {
    			cClaimed.addCard(cPlayed.deal());
    		}
    		while (warBox.cardCount() > 0) {
    			cClaimed.addCard(warBox.deal());
    		}
    		var numCards = cClaimed.cardCount();
    		for (i = 0; i < numCards; i++) {
    			cCard = cClaimed.cards[0].createNode();
    			cCard.firstChild.style.visibility = "hidden";
    			cClaimedDiv.appendChild(cCard);
    		}
    		pPlayedDiv.innerHTML = "";
    		cPlayedDiv.innerHTML = "";
    	} else if (pCard == cCard) {
    		while (pPlayed.cardCount() > 0 || cPlayed.cardCount() > 0) {
    			warBox.addCard(pPlayed.deal());
    			warBox.addCard(cPlayed.deal());
    		}
    		playCard(1)
    	} else {
    		alert("Something messed up.");
    	}
    
    }
    										
    									

    A logic exercise, using a card deck plugin as a base to build the classic card game "War." The game includes logic for the game's namesake event, a multi-card "war" when both players lay the same card, and can even handle a multi-war from repeated ties.

    x

Design

  • Trapped in a Movie Theme Options

    Trapped in a Movie Themesets

    Potential design themes for movie-themed satirical survival guide site, Trapped in a Movie. Created in Photoshop. More info View

    Trapped in a Movie Themesets
    Ai Departments redesign
    • action movie example title
    • classic film example title and navigation
    • modern example aside and link colors
    • silent film example aside and link colors
    • fonts for assorted headers and special body copy
    • fonts for assorted headers and special body copy

    Trapped in a Movie is a site planned by freelance Cracked writer Teddem Yee (aka Umbrascitor), for articles about movies in the form of survival guides. The designs are based around things commonly associated with movies, such as film, the scene clapper, and silent film motifs. One design is more action-focused, while the other has a more general and classic approach. The moodboards were created in Photoshop.

    x

  • Weerd Works Theme Options

    Weerd Works Themesets

    Potential design themes for apparel/accessory designers Mark & Andrea vanWeerd. Created in Photoshop. More info View

    Weerd Works Themesets
    Weerd Works theme sets
    • stamped leather example title
    • example headers and foxed paper background
    • fancy leaf decoration and paper background
    • ribbon example navigation and fancy background pattern
    • example title and faded newsprint background
    • gear, chain, and ivy leaf header/border decoration

    Theme examples for the Weerd Works portfolio website, using motifs suited to the sorts of work featured and favored by Mark vanWeerd, who works with leather and cloth, and enjoys steampunk culture, nature, and the color green. The final design used incorporates bits from these moodboards.

    x

  • Influence Music Hall design comp

    IMH Design Comp

    Home page design for the Influence Music Hall website with existing logo. Comp created in Photoshop. More info View

    IMH Design Comp
    Ai Departments redesign
    • main header typeface and paisley decoration
    • secondary header and general text typeface, and rounded corners
    • spot script typeface on invitation
    • decorative carpet-style background

    Design composition for the Influence Music Hall website. The design was inspired by the assortment of decorative rugs that cover the floor of their building, being one of the most notable features. Small alterations were made when the website was built.

    x

  • Crafty icon set

    Crafty Icons

    An assortment of arts & crafts icons created for a class. Made in Illustrator and Photoshop. More info View

    Crafty Icons
    Ai Departments redesign
    • feather icon
    • scissors icon

    A small icon set based on crafting tools. Created with a mix of Illustrator and Photoshop.

    x

  • Linking worksheet for tutoring

    Linking Worksheet

    Created as a tutoring aid, using ready-made icons in Illustrator. (Feel free to take it.) More info View

    Linking Worksheet
    Ai Departments redesign
    • root folder
    • images and file extensions

    A worksheet I created while tutoring at the Art Institute of Portland, because linking seemed to be one of the primary points of confusion. It asks numerous questions about different ways to write out paths, all referencing the graph provided.

    x

  • Sitemap and user flows

    Info Design Assortment

    A sitemap and two user flows, created for a class. Made in Illustrator. More info View

    Info Design Assortment
    Ai Departments redesign

    A sitemap and two user flows, created for a class. Made in Illustrator.

    x

Available For

Myself

Photo of Brandi Johnecheck, the web critter