Permalink
Browse files

the real initial commit

  • Loading branch information...
1 parent c74d88d commit 46f0b628e8b9d58158d87aeb1f1049e1addfaebf @brettjurgens committed May 22, 2012
View
46 about.html
@@ -0,0 +1,46 @@
+<div id="aboutLoaded">
+ <div id="navwrap">
+ <div id="aboutnav" class="nav">
+ <a onClick="changeView('home')">Home</a>
+ <span class="arrow">></span>
+ About
+ </div>
+ </div>
+ <div id="siteWrapper">
+ <div id="aboutleft">
+ <div class="title">about me</div>
+ <div class="aboutdesc">
+ Hi. If you haven't figured it out by now, my name is Brett. I grew up in New Jersey and am currently studying Computer Science at the <a href="http://illinois.edu" target="_blank" class="pro">University of Illinois in Urbana-Champaign</a>. I am involved in several societies on campus including <a href="http://pikapp.org" target="_blank" class="pro">Pi Kappa Phi Fraternity</a>, <a href="http://ieee.org" target="_blank" class="pro">IEEE</a>, and <a href="http://acm.org" target="_blank" class="pro">ACM</a>. I have also participated in Facebook's <a href="http://camphackathon.com" target="_blank" class="pro">Camp Hackathon</a> and the <a href="http://tec.illinois.edu/cozad" target="_blank" class="pro">Cozad New Venture Competition</a>. I enjoy front-end web development and design but also have a passion for the back-end side. I like to develop for the web, to assure cross platform and browser compatibility*, but recognize its limitations. My setup includes a 4 year old MacBook, Photoshop, Coda and Google Chrome. I'm also an android user.
+ <br /><br />
+ If you'd like to contact me, check out my twitter (<a href="http://twitter.com/brettjurgens" target="_blank" class="pro">@brettjurgens</a>) or send me an email at <a id="email"></a>.
+ <br /><br />
+ <span class="iedisc">*Except IE6.</span>
+ </div>
+ </div>
+ <div class="aboutright">
+ <div id="picturewrap">
+ <div id="picture">Typical CSS3 Rotated Profile Picture</div>
+ </div>
+ <div class="aboutlisttitle">Useful Links:</div>
+ <ul id="aboutlist">
+ <li class="aboutlist"><a href="resume.pdf" target="_blank">Resume <span class="pdf">(PDF)</span></a></li>
+ <li class="aboutlist"><a href="http://twitter.com/brettjurgens" target="_blank">Twitter</a></li>
+ <li class="aboutlist"><a href="http://gplus.cm/brettjurgens" target="_blank">Google Plus</a></li>
+ <li class="aboutlist"><a href="http://zerply.com/brettjurgens" target="_blank">Zerply</a></li>
+ </ul>
+ <div class="aboutlisttitle">Programming Skills:</div>
+ <ul id="aboutlist">
+ <li class="aboutlist">jQuery</li>
+ <li class="aboutlist">CSS</li>
+ <li class="aboutlist">PHP</li>
+ <li class="aboutlist">MySQL</li>
+ <li class="aboutlist">Java</li>
+ </ul>
+ </div>
+ </div>
+</div>
+<script type="text/javascript">
+$( function(){
+ printEmail('brett', 'brettjurgens', 'com');
+});
+</script>
View
250 css/new.css
@@ -0,0 +1,250 @@
+ /*Reset - http://meyerweb.com/eric/tools/css/reset/ */
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a:link,a:visited{text-decoration:none;}
+ /* home */
+ #home {
+ font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+ font-size: 48px;
+ color: #888;
+ line-height: 54px;
+ padding: 3% 5%;
+ }
+ .pro {
+ color: #ff7800;
+ }
+ .graytal {
+ color: #adadad;
+ font-style: italic;
+ }
+ .hid {
+ display: none;
+ }
+ .homearrow{
+ color: #ddd;
+ font-size: 26px;
+ vertical-align: middle;
+ left: 0px;
+ position: relative;
+ width: 300px;
+ display: inline;
+ line-height:26px;
+ }
+ .homearrow:hover{
+ color: #aaa;
+ }
+ #portfolio, #about {
+ display: none;
+ }
+ .pointer {cursor: pointer;}
+ #portload:link, #portload:visited{color:#888;}
+ .foot{margin-top:20px;font-family: 'La Belle Aurore', cursive;font-size: 24px; width: 50%; float: left;}
+ .copy{width:40%; float:right;margin-top:25px;font-family: 'La Belle Aurore', cursive;font-size: 16px;text-align:right;color:#ccc;}
+ #footer{
+ display: none;
+ position:absolute;
+ bottom:0px;
+ height:60px;
+ width:95%;
+ color: #fff;
+ padding: 0 2.5%;
+ background: #272727;
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI3MjcyNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTExMTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, #272727 0%, #111111 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#272727), color-stop(100%,#111111));
+ background: -webkit-linear-gradient(top, #272727 0%,#111111 100%);
+ background: -o-linear-gradient(top, #272727 0%,#111111 100%);
+ background: -ms-linear-gradient(top, #272727 0%,#111111 100%);
+ background: linear-gradient(top, #272727 0%,#111111 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#272727', endColorstr='#111111',GradientType=0 );
+ }
+ #fnavcont{
+ margin-left: 30px;
+ }
+ .fnav {
+ font-size: 18px;
+ color: #aaa;
+ cursor: pointer;
+ margin-right: 5px;
+ }
+ .fnav:hover {
+ color: #ccc;
+ }
+ .currentfnav {
+ font-size: 18px;
+ color: #eee;
+ cursor: pointer;
+ }
+ /* Portfolio Page */
+ #portfolioLoaded{
+ font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+ width: 900px;
+ margin: 2% auto 0;
+ }
+ #siteWrapper {
+ height: 540px;
+ }
+ .unselectedSite {
+ display:none;
+ }
+ .title{
+ font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+ font-size: 40px;
+ }
+ .desc{
+ margin-top:5px;
+ color: #5e5e5e;
+ font-size: 20px;
+ font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+ }
+ .sidewrap {
+ width: 200px;
+ margin-top: 40px;
+ font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+ line-height: 22px;
+ float: left;
+ }
+ .feature {
+ color:#424242;
+ font-size:20px;
+ }
+ #skills {
+ margin-bottom: 30px;
+ }
+ .featureDesc {
+ color: #5e5e5e;
+ font-size: 18px;
+ }
+
+ #mbploader{
+ display: none;
+ }
+ #mbp {
+ width: 623px;
+ height: 372px;
+ background-image: url('../images/mbp.png');
+ float: right;
+ margin-top: 40px;
+ }
+ #iphone {
+ float: right;
+ margin-right: 20px;
+ }
+ .siteimage {
+ margin-left: 99px;
+ margin-top: 26px;
+ width: 420px;
+ height: 264px;
+ }
+ #siteList {
+ text-align: center;
+ color: #ccc;
+ }
+ #siteList li {
+ display:inline;
+ padding: 0 5px;
+ cursor: pointer;
+ }
+ li.selected {
+ color: #333;
+ }
+ li.unselected {
+ color: #aaa;
+ }
+ li.unselected:hover {
+ color: #222;
+ }
+ #navwrap {
+ height: 16px;
+ }
+ .nav {
+ color: #999;
+ font-size: 13px;
+ margin-bottom: 10px;
+ display: none;
+ }
+ .nav a {cursor:pointer;}
+ .nav a:link, #nav a:visited {color: #999; text-decoration: none;}
+ .nav a:hover {color: #666; text-decoration: underline;}
+ .arrow {font-size: 11px;vertical-align: top;}
+
+ /* About page */
+ #aboutLoaded{
+ font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+ width: 900px;
+ margin: 2% auto 0;
+ }
+ #aboutleft {
+ height: 540px;
+ width: 600px;
+ float: left;
+ }
+ .aboutdesc {
+ width: 580px;
+ margin-top: 15px;
+ font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+ font-size: 20px;
+ color: #5e5e5e;
+ line-height: 22px;
+ float: left;
+ }
+ .aboutlisttitle {
+ color:#424242;
+ font-size:16px;
+ margin-top: 20px;
+ margin-right: 25px;
+ }
+ .aboutlist {
+ margin-right: 25px;
+ }
+ #aboutlist {
+ color: #5e5e5e;
+ font-size: 14px;
+ }
+ #aboutlist a:link, #aboutlist a:visited{color:#5e5e5e}
+ #aboutlist a:hover {color: #999;}
+ .iedisc {color: #5e5e5e; font-size: 14px;}
+ .aboutright {
+ width:300px;
+ float: right;
+ text-align: right;
+ line-height: 20px;
+ }
+ .pdf {color:#9d9d9d;}
+ #picturewrap{ width: 300px; height: 175px;}
+ #picture {
+ font-family: 'The Girl Next Door', cursive;
+ height: 120px;
+ width: 125px;
+ float: right;
+ padding: 15px 10px 10px;
+ color: #b0b0b0;
+ text-align: center;
+ font-size: 22px;
+ border: 1px solid #ccc;
+ transform: rotate(15deg);
+ -ms-transform: rotate(15deg); /* IE 9 */
+ -webkit-transform: rotate(15deg); /* Safari and Chrome */
+ -o-transform: rotate(15deg); /* Opera */
+ -moz-transform: rotate(15deg); /* Firefox */
+ line-height: 30px;
+ }
+ .aboutdesc a:link, .aboutdesc a:visited {color: #FF7800;}
+
+ .view {
+ display: none;
+ background-color: #F7F7F9;
+ border: 1px solid #E1E1E8;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ padding: 3px 4px;
+ font-size: 14px;
+ vertical-align: middle;
+ color: #08C;
+ }
+ .view:hover {
+ background-color: #F3F3F5;
+ color: #06C;
+ }
+
+ /* SEO */
+ #profile{display:none;}
View
BIN images/batchdefinembp.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/mbp.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/movieaggregatormbp.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/mtd.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/xy.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
61 index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="description" content="My name is Brett. I'm a web developer and designer from New Jersey currently studying at the University of Illinois. Check out some things I've made.">
+ <meta name="google-site-verification" content="Q3OCKYfhyEEIz-X_r0MFWmVJDhWaEmAPgwiIAY5dvr8" />
+ <title>brett jurgens. awesome.</title>
+ <link href='http://fonts.googleapis.com/css?family=La+Belle+Aurore|The+Girl+Next+Door' rel='stylesheet' type='text/css'>
+ <link href="css/new.css" rel="stylesheet" type="text/css">
+ <!--[if gte IE 9]>
+ <style type="text/css">
+ .gradient {
+ filter: none;
+ }
+ </style>
+ <![endif]-->
+ <script type="text/javascript" src="js/bjquery.js"></script>
+ </head>
+
+ <body>
+ <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
+ <div id="home" class="current">
+ <span class="hid" id="1">hello there.<br /></span>
+ <span class="hid move" id="2">i'm <a id="aboutload" class="pro pointer" onClick="changeView('about')">brett jurgens</a>. <div id="aa" class="homearrow"></div><br /></span>
+ <span class="hid" id="3">i <span class="graytal">tell</span> people that i'm a <span class="pro">programmer</span>.<br /></span>
+ <span class="hid" id="4">i also <span class="graytal">think</span> that i'm a <span class="pro">designer</span>.<br /></span>
+ <span class="hid move" id="5"><a id="portload" class="pointer" onClick="changeView('portfolio')">judge for yourself.</a> <div id="pa" class="homearrow"></div></span>
+ </div>
+ <div id="portfolio"></div>
+ <div id="about"></div>
+ <div id="footer">
+ <div class="foot">brett jurgens
+ <span id="fnavcont">
+ <span onClick="changeView('home')" id="hnav" class="fnav currentfnav">home</span>
+ <span onClick="changeView('about')" id="anav" class="fnav">about</span>
+ <span onClick="changeView('portfolio')" id="pnav" class="fnav">portfolio</span>
+ </span>
+ </div>
+ <div class="copy">&copy;2012<a href="https://plus.google.com/117000088450345843512" rel="author"></a></div><div id="profile" xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person"><span property="v:name">Brett Jurgens</span><a rel="v:url">www.brettjurgens.com</a><span rel="v:address"><span typeof="v:Address"><span property="v:locality">Champaign</span><span property="v:region">IL</span></span></span></div>
+ </div>
+ </body>
+ <script type="text/javascript">
+
+ /***************************************
+ Here be my javascript (jQuery)
+ Don't steal it :)
+ Copyright (c)2012 Brett Jurgens
+ ***************************************/
+ if(window.location.hash) {
+ if(window.location.hash == '#about' || window.location.hash == '#portfolio' || window.location.hash == '#home')
+ getIt(window.location.hash.substring(1));
+ }
+ $(function(){
+ brettjurgens($('.hid').length); // I'm a function, everybody! ZOMGLOL!!!!! -_- // value could be hardcoded, but that's no fun.
+ });
+ </script>
+</html>
+<!--
+ Surrender to the city of the fireflies
+-->
View
152 js/bjquery.js
152 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
127 portfolio.html
@@ -0,0 +1,127 @@
+<div id="mbploader"><img src="images/mbp.png" /></div>
+<div id="portfolioLoaded">
+ <div id="navwrap">
+ <div id="portfolionav" class="nav">
+ <a onClick="changeView('home')">Home</a>
+ <span class="arrow">></span>
+ Portfolio
+ <span class="arrow">></span>
+ <span id="site">batchdefine</span>
+ </div>
+ </div>
+ <div id="siteWrapper">
+ <div id="batchdefine" class="unselectedSite">
+ <div class="title">batchdefine <a class="view" href="http://batchdefine.com" target="_blank">Visit Site!</a></div>
+ <div class="desc">a website that allows you to easily and efficiently find the definitions to a list of words</div>
+ <div class="sidewrap">
+ <div id="skills">
+ <div class="feature">Skills:</div>
+ <ul id="skillsList">
+ <li class="featureDesc">jQuery</li>
+ <li class="featureDesc">PHP</li>
+ <li class="featureDesc">MySQL</li>
+ <li class="featureDesc">Photoshop</li>
+ <li class="featureDesc">XML/JSON</li>
+ <li class="featureDesc">OpenGraph</li>
+ </ul>
+ </div>
+ <div id="techDesc">
+ <div class="feature">Technical Description:</div>
+ <div class="featureDesc">Uses jQuery to make AJAX calls to the dictionary.com API. The result is then parsed using jQuery.</div>
+ </div>
+ </div>
+ <div id="right">
+ <div id="mbp">
+ <div class="siteimage"><img src="images/batchdefinembp.png" /></div>
+ </div>
+ </div>
+ </div>
+ <!-- End BDef / Start MovieAggregator -->
+ <div id="movieaggregator" class="unselectedSite">
+ <div class="title">movieaggregator <a class="view" href="http://movieaggregator.com" target="_blank">Visit Site!</a></div>
+ <div class="desc">a website that aggregates movie information, developed in 24 hours</div>
+ <div class="sidewrap">
+ <div id="skills">
+ <div class="feature">Skills:</div>
+ <ul id="skillsList">
+ <li class="featureDesc">jQuery</li>
+ <li class="featureDesc">PHP</li>
+ <li class="featureDesc">Photoshop</li>
+ <li class="featureDesc">XML/JSON</li>
+ </ul>
+ </div>
+ <div id="techDesc">
+ <div class="feature">Technical Description:</div>
+ <div class="featureDesc">Developed as part of a facebook hackathon, MovieAggregator uses jQuery to make AJAX calls to 6 different APIs and compiles the data in an organized fashion.</div>
+ </div>
+ </div>
+ <div id="right">
+ <div id="mbp">
+ <div class="siteimage"><img src="images/movieaggregatormbp.png" /></div>
+ </div>
+ </div>
+ </div>
+ <!-- End MovieAggregator / Start MTD -->
+ <div id="mtd" class="unselectedSite">
+ <div class="title">Champaign-Urbana MTD Mobile App <a class="view" href="http://chambanabus.com" target="_blank">Visit Site!</a></div>
+ <div class="desc">the perfect mobile web app for MTD riders</div>
+ <div class="sidewrap">
+ <div id="skills">
+ <div class="feature">Skills:</div>
+ <ul id="skillsList">
+ <li class="featureDesc">jQuery</li>
+ <li class="featureDesc">Geolocation</li>
+ <li class="featureDesc">Mobile Development</li>
+ <li class="featureDesc">Photoshop</li>
+ <li class="featureDesc">XML/JSON</li>
+ </ul>
+ </div>
+ <div id="techDesc">
+ <div class="feature">Technical Description:</div>
+ <div class="featureDesc">This app uses the MTD API to help riders find the plan trips, see coming buses, and find local stops.</div>
+ </div>
+ </div>
+ <div id="right">
+ <div id="iphone">
+ <div class="siteimage"><img src="images/mtd.png" /></div>
+ </div>
+ </div>
+ </div>
+ <!-- End MTD / Start ProCosmicXy -->
+ <div id="procosmicxy" class="unselectedSite">
+ <div class="title">ProCosmicXy <a class="view" href="http://procosmicxy.info" target="_blank">Visit Site!</a></div>
+ <div class="desc">an easy to look at proxy with powerful features, based on glype</div>
+ <div class="sidewrap">
+ <div id="skills">
+ <div class="feature">Skills:</div>
+ <ul id="skillsList">
+ <li class="featureDesc">jQuery</li>
+ <li class="featureDesc">PHP</li>
+ <li class="featureDesc">Photoshop</li>
+ </ul>
+ </div>
+ <div id="techDesc">
+ <div class="feature">Technical Description:</div>
+ <div class="featureDesc">This is a simple glype proxy, but unlike others it features unobtrusive advertisements and a clean design.</div>
+ </div>
+ </div>
+ <div id="right">
+ <div id="mbp">
+ <div class="siteimage"><img src="images/xy.png" /></div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <ul id="siteList">
+ <li load="batchdefine" class="selected">batchdefine</li> |
+ <li load="movieaggregator" class="unselected">movieaggregator</li> |
+ <li load="mtd" class="unselected">Bus App</li> |
+ <li load="procosmicxy" class="unselected">ProCosmicXy</li>
+ </ul>
+</div>
+<script type="text/javascript">
+$( function(){
+ portfolio();
+});
+</script>
View
BIN resume.pdf
Binary file not shown.

0 comments on commit 46f0b62

Please sign in to comment.