Skip to content

Commit

Permalink
Entirely new layout :D
Browse files Browse the repository at this point in the history
  • Loading branch information
excid3 committed Nov 9, 2010
1 parent a5fac14 commit 4225cbd
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 235 deletions.
Binary file added League Gothic.otf
Binary file not shown.
Binary file added images/grunge.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
129 changes: 26 additions & 103 deletions index.html
@@ -1,108 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<meta name="author" content="Chris Oliver"> <meta name="author" content="Chris Oliver">
<meta name="copyright" content="2010 Chris Oliver"> <meta name="copyright" content="2010 Chris Oliver">
<meta name="description" content="Chris Oliver | excid3.com"> <meta name="description" content="Chris Oliver | excid3.com">
<title>Chris Oliver | excid3.com</title> <title>Chris Oliver | excid3.com</title>


<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
<script type="text/javascript" </head>
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#default").click(function() {
return something("#default_info");
});

$("#projects").click(function() {
return something("#projects_info");
});

$("#blog").click(function() {
return something("#blog_info");
});

$("#contact").click(function() {
return something("#contact_info");
});
});

function something(obj) {
$(".current").fadeOut("fast", function() {
$(".current").removeClass("current");
$(obj).fadeIn("fast", function() {
$(obj).addClass("current");
});
});

return false;
}
</script>
</head>
<body> <body>

<!-- Super cool layout inspired by http://trentwalton.com/2010/04/06/css3-background-clip-font-face/ -->
<a href="http://github.com/excid3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a> <div id="container">

<div class="main">
<div id="border"> <div class="name">My name is Chris Oliver and I'm a software</div>
<div id="page"> <div class="dev"><a href="http://github.com/excid3">developer</a></div>
<div id="title"> <span class="line-left"></span><div class="itworked">&amp; love to</div><span class="line-right"></span>
<a href="/" id="default">Chris Oliver</a> <div class="hoo">create!</div>
</div> <div class="view">
<hr /> <a href="http://excid3.com/blog">View my blog</a>

&bull;
<div id="content"> <a href="http://twitter.com/excid3">Follow me on Twitter</a>
<ul> </div>
<li class="red"> </div>
<a href="/blog/projects" id="projects">Projects</a> <div class="explanation">This website uses HTML5/CSS3. If you are having trouble, try using a browser like <a href="http://www.apple.com/safari/download/">Safari</a> or <a href="http://www.google.com/chrome">Chrome</a>.</div>
</li> </div>

<li class="green">
<a href="/blog" id="blog">Blog</a>
</li>

<li class="blue">
<a href="/blog/contact" id="contact">Contact</a>
</li>
</ul>

<div id="info">
<div id="default_info" class="current">
<p>I am a software engineer.</p>
<p>I have been programming since 2000.</p>
<p>My resume is available in PDF and DOCX format <a href="http://github.com/excid3/resume/zipball/master">here</a>.</p>
<p>I love open source and am an active contributor.</p>
<p>I enjoy web development but have a background in desktop software.</p>
<p>Security is a currently untapped passion I have.</p>
<p>
</div>
<div id="projects_info" class="red">
<p><a href="http://keryxproject.org">Keryx</a> is an application Ubuntu and Debian Linux users who have low bandwidth connections.</p>
<p><a href="http://tracklerapp.com">Trackler</a> is a time tracking application for Android devices.</p>
<p>You can find a list of some of my other projects on <a href="http://github.com/excid3">Github</a> and my <a href="http://currentprojects.heroku.com">Projects Page</a></p>
</div>
<div id="blog_info" class="green">
<p>Development can be a frustrating activity. I try to keep a log of large problems and concepts I have tackled over the years which you can find in my blog.</p>
<p>Visit my <a href="/blog">Blog</a></p>
</div>
<div id="contact_info" class="blue">
<p>You can reach me by email at <a href="mailto:chris@excid3.com">chris {at} excid3 [dot] c o m</a></p>
<p>I'm often found hanging out on IRC at <a href="irc://irc.freenode.net/keryx">#keryx</a></p>
<p>Also find me on <a href="http://twitter.com/excid3">Twitter</a>, <a href="http://github.com/excid3">Github</a>, <a href="http://www.linkedin.com/in/excid3">LinkedIn</a>, <a href="http://www.last.fm/user/excid3">Last.fm</a></p>
<p>If you prefer instant messenger or an email form, please visit my <a href="/blog/contact">Contact Page</a></p>
</div>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>

<div id="footer">
<span class="left">Source available on <a href="http://github.com/excid3/landing">Github</a></span>
Copyright &copy; 2010 Chris Oliver
</div>


<script type="text/javascript"> <script type="text/javascript">


Expand Down
201 changes: 69 additions & 132 deletions style.css
@@ -1,155 +1,92 @@
html, body, div, span, applet, object, iframe, /* Reset
h1, h2, h3, h4, h5, h6, p, blockquote, pre, -------------------------------------------------------------- */
a, abbr, acronym, address, big, cite, code, html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
del, dfn, em, font, img, ins, kbd, q, s, samp, table{border-collapse:separate;border-spacing:0;margin-bottom:1.4em;}
small, strike, strong, sub, sup, tt, var, caption,th,td{text-align:left;font-weight:400;}
b, u, i, center, blockquote:before,blockquote:after,q:before,q:after{content:"";}
dl, dt, dd, ol, ul, li, blockquote,q{quotes:;}
fieldset, form, label, legend, a img{border:none;}
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; /* Page
padding: 0; -------------------------------------------------------------- */
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body { body {
/*background-color: #E3E3E3;*/ color: #2a4f54;
background-color: #FFFFFF; text-align: center;
color: #58595B; background-color: #4a8d97;
text-shadow: 2px 2px #FFFFFF; background-image: url(./images/grunge.jpg);
font-family: palatino, 'times new roman', serif;
}

a, a:hover, a:visited{
color: #58595B;
font-weight: bold;
text-decoration: none;
}
a:hover { text-decoration: underline; }

p { margin-bottom: 10px; }

hr {
color: #ffffff;
background-color: #ffffff;
border: 1px dotted #BDBDBD;
border-style: none none dotted;
} }

#container {
#border { margin: 0px auto 35px;
border: 10px solid #E0E0E0; width:660px;
margin: 80px auto 0; padding-top: 60px;
width: 800px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
} }

.main {
#border #page { font-family: "LeagueGothicRegular",Lucida, sans-serif;
background: #EFEFEF; text-transform: uppercase;
border: 1px solid #CACACA; line-height: .9;
height: 300px;
padding: 10px;
} }

.explanation {
#border #page #title { margin-top: 20px;
font-size: 2em; font: italic 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 5px;
} }
#border #page #title a { a {
color: #38393B; color: #2a4f54;
font-weight: bold; text-decoration: none;
-webkit-transition: color .6s linear;
} }

a:hover {
#border #page #title span { color: #fff;
clear: right; -webkit-transition: color .1s linear;
color: #737A7D;
font-size: 13.34px;
float: right;
text-align: right;
width: 550px;
text-shadow: 1px 1px #FFFFFF;
} }


#border #page #content {
padding: 15px;
}


#border #page #content #nav { @font-face {
float: left; font-family: 'LeagueGothicRegular';
margin-right: 20px; src: local('League Gothic Regular'), url('League Gothic.otf') format('opentype');
text-align: center;
width: 128px;
} }


#border #page #content #nav a { margin-bottom: 15px; }


#content ul { .name {
float: left; font-size: 50px;
}
#content ul li {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
list-style-type: none;
margin: 10px;
padding: 10px;
text-align: center;
width: 100px;
} }

.dev {
#content ul li a { font-size: 206px;
color: white; letter-spacing: 5px;
padding: 10px; line-height: 1;
} }

.itworked {
.blue, .red, .green, .blue a, .red a, .green a { font: italic 60px/0 cursive;
border-radius: 5px; text-transform: lowercase;
-moz-border-radius: 5px; margin-bottom: 12px;
-webkit-border-radius: 5px; margin-top:12px;
color: white;
} }

.hoo {
.blue { font-size: 258px;
background-color: #1D9EC5; letter-spacing: 5px;
text-shadow: 1px 1px #0089CA; line-height: 1;
} }
.red { .view {
background-color: #EE4036; font-size: 57px;
text-shadow: 1px 1px #D02117; margin-top: -15px;
} }
.green { .hoo, .css {
background-color: #95CD3C; text-shadow: #4a8d97 3px 3px 0;
text-shadow: 1px 1px #5E9D0E;
} }


#info {
float: left;
}


#info div { .line-left, .line-right {
display: none; border-bottom: 2px solid #2a4f54;
margin: 10px 10px 10px 25px; width: 160px;
padding: 10px; display: inline-block;
width: 550px; margin-bottom: -30px;
} }
#info .current { .line-left {
display: block; float: left;
} margin-top: 28px;
#info a { margin-left: 15px;
text-decoration: underline;
} }

.line-right {

float: right;
#footer, #footer a, #footer a:hover { margin-top: -26px;
font-size: 10px; margin-right: 15px;
color: #666666;
margin: 7px auto 20px;
width: 800px;
} }

#footer span { float:right; }

0 comments on commit 4225cbd

Please sign in to comment.