Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

fixed indentations, moved js libraries to a separate file

  • Loading branch information...
commit 9ae8ff78749b57d01f0ce59a6862fb5a02477231 1 parent 2cc14b7
@brettjurgens authored
Showing with 607 additions and 460 deletions.
  1. +40 −40 about.html
  2. +247 −247 css/new.css
  3. +49 −54 index.html
  4. +101 −0 js/brett.js
  5. +51 −0 js/jq.js
  6. +119 −119 portfolio.html
View
80 about.html
@@ -1,46 +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 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');
+ printEmail('brett', 'brettjurgens', 'com');
});
</script>
View
494 css/new.css
@@ -1,250 +1,250 @@
- /*Reset - http://meyerweb.com/eric/tools/css/reset/ */
+/*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;}
+/* 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;
+}
- /* 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;}
+#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;}
- .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;}
+/* 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
103 index.html
@@ -1,60 +1,55 @@
<!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>
+ <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/jq.js"></script>
+ <script type="text/javascript" src="js/brett.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>
+ <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">
+ 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
101 js/brett.js
@@ -0,0 +1,101 @@
+/**
+ brettjurgens.com Javascript
+ by: Brett Jurgens (well, the jQuery (UI) team had some input...)
+ Libraries: jQuery & jQuery UI (check below for more details)
+
+ Kopimi.
+ (^except jQuery and jQuery UI, check below for licensing)
+*/
+ // This function is pointless, but amuses me for some 'strange' reason.
+ function brettjurgens(y) {
+ text(1,y);
+ load(); // Load the other pages, so the images load and stuff
+ $('.move').hover(function(){aHov(this,10,'a');}, function(){aHov(this,0,'d');});
+ }
+
+ // On boy! JavaScript (lol jk, it's jQuery) recursion!
+ function text(x,y) {
+ if(x>y) {arrowHelper(); return;}
+ var speed = 750 + 7.5*($('#' + x).html().length);
+ $('#' + x).fadeIn(speed, function() {text(++x,y);}).removeClass('hid');
+ }
+
+ function override() {
+ $('.hid').show();
+ }
+ // Oh no! not another function...
+ function arrowHelper() {
+ $('<a>&larr; portfolio</a>').appendTo('#pa');
+ $('<a>&larr; about me</a>').appendTo('#aa');
+ $('#footer').fadeIn('slow');
+ }
+
+ // Hovering over arrow elements
+ function aHov(element,move,color) {
+ name = $(element).attr('id');
+ name = (name==2) ? 'aa' : ((name==5) ? 'pa' : name);
+ $('#' + name).stop().animate({left: move}, 'slow').css('color', '#' + color + color + color);
+ }
+
+ // Loads the pages
+ function load() {
+ $('#about').load('about.html');
+ $('#portfolio').load('portfolio.html'); // preloads portfolio elements
+ }
+
+ // View Change
+ function changeView(view) {
+ var d1,d2;
+ var current = $('.current').attr('id');
+ window.location.hash = view;
+ if(current != view) {
+ if((current=='portfolio' && view=='about')||(view=='home')){d1='right';d2='left';} // 'home' view should be opposite
+ else {d1='left'; d2='right';}
+ $('.current').hide('slide', {direction: d1}, 1000, function(){
+ $('#' + view).show('slide', {direction: d2}, 1000, function(){
+ $('.nav').hide();
+ $('.view').hide();
+ $('.homearrow').hide();
+ $('.currentfnav').addClass('fnav').removeClass('currentfnav');
+ $('#' + view.substr(0,1) + 'nav').addClass('currentfnav');
+ $('.current').removeClass('current');
+ if(view!='home')$('#' + view + 'nav').fadeIn();
+ if(view=='home')$('.homearrow').fadeIn();
+ if(view=='portfolio')$('.view').fadeIn();
+ $('#' + view).addClass('current');
+ });
+ });
+ }
+ }
+
+ // Loads the page directly
+ function getIt(thepage){
+ changeView(thepage);
+ override();
+ $('#footer').fadeIn('slow');
+ }
+
+ // Portfolio Javascript
+ function portfolio() {
+ $('#batchdefine').fadeIn(1000).removeClass('unselectedSite').addClass('selectedSite'); // fixes the disappear bug and looks cleaner
+ $('#siteList li').click(function(){theOlSwitcheroo($(this));});
+ }
+ function theOlSwitcheroo(element){ // It's like these hip musicians with their complicated shoes!
+ var load = element.attr('load'); // gets the name of the loading element
+ var id = $('.selectedSite').attr('id'); // gets the name of the fading element
+ if (load != id){
+ $('#' + id).fadeOut(750, function() {
+ $('#' + load).fadeIn(1250).removeClass('unselectedSite').addClass('selectedSite');
+ $('<span id="site">' + load + '</span>').replaceAll('#site'); // updates the top nav
+ $('.selected').removeClass('selected').addClass('unselected'); // updates the
+ element.removeClass('unselected').addClass('selected'); // nav list
+
+ }).removeClass('selectedSite').addClass('unselectedSite'); // hides current view and loads the new one
+ }
+ }
+
+ // About / Email Javascript
+ function printEmail(name, site, tld) {
+ var at = "@";
+ $('<a id="email" class="pro" href="mailto:' + name + at + site + '.' + tld + '">' + name + at + site + '.' + tld + '</a>').replaceAll('#email');
+ }
View
51 js/jq.js
51 additions, 0 deletions not shown
View
238 portfolio.html
@@ -1,127 +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 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>
+ <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();
+ portfolio();
});
</script>
Please sign in to comment.
Something went wrong with that request. Please try again.