Permalink
Browse files

Entirely new layout :D

  • Loading branch information...
1 parent a5fac14 commit 4225cbdd74a0f1b2e879134ff467768afb2ad114 @excid3 committed Nov 9, 2010
Showing with 95 additions and 235 deletions.
  1. BIN League Gothic.otf
  2. BIN images/grunge.jpg
  3. +26 −103 index.html
  4. +69 −132 style.css
View
Binary file not shown.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -1,108 +1,31 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<!DOCTYPE html>
<html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
- <meta name="author" content="Chris Oliver">
- <meta name="copyright" content="2010 Chris Oliver">
- <meta name="description" content="Chris Oliver | excid3.com">
- <title>Chris Oliver | excid3.com</title>
-
- <link rel="shortcut icon" href="favicon.ico">
- <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
- <script type="text/javascript"
- 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>
+ <head>
+ <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
+ <meta name="author" content="Chris Oliver">
+ <meta name="copyright" content="2010 Chris Oliver">
+ <meta name="description" content="Chris Oliver | excid3.com">
+ <title>Chris Oliver | excid3.com</title>
+
+ <link rel="shortcut icon" href="favicon.ico">
+ <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
+ </head>
<body>
-
-<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="border">
- <div id="page">
- <div id="title">
- <a href="/" id="default">Chris Oliver</a>
- </div>
- <hr />
-
- <div id="content">
- <ul>
- <li class="red">
- <a href="/blog/projects" id="projects">Projects</a>
- </li>
-
- <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>
+ <!-- Super cool layout inspired by http://trentwalton.com/2010/04/06/css3-background-clip-font-face/ -->
+ <div id="container">
+ <div class="main">
+ <div class="name">My name is Chris Oliver and I'm a software</div>
+ <div class="dev"><a href="http://github.com/excid3">developer</a></div>
+ <span class="line-left"></span><div class="itworked">&amp; love to</div><span class="line-right"></span>
+ <div class="hoo">create!</div>
+ <div class="view">
+ <a href="http://excid3.com/blog">View my blog</a>
+ &bull;
+ <a href="http://twitter.com/excid3">Follow me on Twitter</a>
+ </div>
+ </div>
+ <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>
+ </div>
<script type="text/javascript">
View
@@ -1,155 +1,92 @@
-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, font, 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 {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- font-size: 100%;
- vertical-align: baseline;
- background: transparent;
-}
-
+/* Reset
+-------------------------------------------------------------- */
+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;}
+table{border-collapse:separate;border-spacing:0;margin-bottom:1.4em;}
+caption,th,td{text-align:left;font-weight:400;}
+blockquote:before,blockquote:after,q:before,q:after{content:"";}
+blockquote,q{quotes:;}
+a img{border:none;}
+
+/* Page
+-------------------------------------------------------------- */
body {
- /*background-color: #E3E3E3;*/
- background-color: #FFFFFF;
- color: #58595B;
- text-shadow: 2px 2px #FFFFFF;
- 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;
+ color: #2a4f54;
+ text-align: center;
+ background-color: #4a8d97;
+ background-image: url(./images/grunge.jpg);
}
-
-#border {
- border: 10px solid #E0E0E0;
- margin: 80px auto 0;
- width: 800px;
- border-radius: 10px;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
+#container {
+ margin: 0px auto 35px;
+ width:660px;
+ padding-top: 60px;
}
-
-#border #page {
- background: #EFEFEF;
- border: 1px solid #CACACA;
- height: 300px;
- padding: 10px;
+.main {
+ font-family: "LeagueGothicRegular",Lucida, sans-serif;
+ text-transform: uppercase;
+ line-height: .9;
}
-
-#border #page #title {
- font-size: 2em;
- padding: 5px;
+.explanation {
+ margin-top: 20px;
+ font: italic 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
-#border #page #title a {
- color: #38393B;
- font-weight: bold;
+a {
+ color: #2a4f54;
+ text-decoration: none;
+ -webkit-transition: color .6s linear;
}
-
-#border #page #title span {
- clear: right;
- color: #737A7D;
- font-size: 13.34px;
- float: right;
- text-align: right;
- width: 550px;
- text-shadow: 1px 1px #FFFFFF;
+a:hover {
+ color: #fff;
+ -webkit-transition: color .1s linear;
}
-#border #page #content {
- padding: 15px;
-}
-#border #page #content #nav {
- float: left;
- margin-right: 20px;
- text-align: center;
- width: 128px;
+@font-face {
+ font-family: 'LeagueGothicRegular';
+ src: local('League Gothic Regular'), url('League Gothic.otf') format('opentype');
}
-#border #page #content #nav a { margin-bottom: 15px; }
-#content ul {
- float: left;
-}
-#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;
+.name {
+ font-size: 50px;
}
-
-#content ul li a {
- color: white;
- padding: 10px;
+.dev {
+ font-size: 206px;
+ letter-spacing: 5px;
+ line-height: 1;
}
-
-.blue, .red, .green, .blue a, .red a, .green a {
- border-radius: 5px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- color: white;
+.itworked {
+ font: italic 60px/0 cursive;
+ text-transform: lowercase;
+ margin-bottom: 12px;
+ margin-top:12px;
}
-
-.blue {
- background-color: #1D9EC5;
- text-shadow: 1px 1px #0089CA;
+.hoo {
+ font-size: 258px;
+ letter-spacing: 5px;
+ line-height: 1;
}
-.red {
- background-color: #EE4036;
- text-shadow: 1px 1px #D02117;
+.view {
+ font-size: 57px;
+ margin-top: -15px;
}
-.green {
- background-color: #95CD3C;
- text-shadow: 1px 1px #5E9D0E;
+.hoo, .css {
+ text-shadow: #4a8d97 3px 3px 0;
}
-#info {
- float: left;
-}
-#info div {
- display: none;
- margin: 10px 10px 10px 25px;
- padding: 10px;
- width: 550px;
+.line-left, .line-right {
+ border-bottom: 2px solid #2a4f54;
+ width: 160px;
+ display: inline-block;
+ margin-bottom: -30px;
}
-#info .current {
- display: block;
-}
-#info a {
- text-decoration: underline;
+.line-left {
+ float: left;
+ margin-top: 28px;
+ margin-left: 15px;
}
-
-
-#footer, #footer a, #footer a:hover {
- font-size: 10px;
- color: #666666;
- margin: 7px auto 20px;
- width: 800px;
+.line-right {
+ float: right;
+ margin-top: -26px;
+ margin-right: 15px;
}
-
-#footer span { float:right; }

0 comments on commit 4225cbd

Please sign in to comment.