Permalink
Browse files

Overhaul again

  • Loading branch information...
1 parent 13b687f commit ac3480212f321f5f52ca1588f1bdb06f05e358ae @excid3 committed Jul 29, 2012
Showing with 182 additions and 99 deletions.
  1. +66 −46 index.html
  2. +116 −53 style.css
View
@@ -1,53 +1,73 @@
<!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>
+ <head>
+ <title>Chris Oliver is a rebel | excid3.com</title>
+ <meta name="description" content="I write innovative software using Ruby, Rails, and Javascript for agencies, companies, and individuals looking for a developer who can understand their needs. ">
+ <meta name="author" content="Chris Oliver">
<link rel="shortcut icon" href="favicon.ico">
+ <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,800' rel='stylesheet' type='text/css'>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
+ <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
+ </head>
+ <body>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
- </head>
-<body>
- <div id="container">
- <div id="header">
- <a href="/"><img class="avatar" src="http://www.gravatar.com/avatar/ce795239ba5dd2384fc2f88ffaff5451" /></a>
- <div class="name">Hi, I'm Chris Oliver.</div>
- <div class="dev">I'm a software engineer</div>
- <div>
- <a href="http://twitter.com/excid3"><img src="images/twitter.png" alt="twitter" /></a>
- <a href="http://github.com/excid3"><img src="images/github.png" alt="Github" /></a>
- <a href="mailto:excid3@gmail.com"><img src="images/email.png" alt="email" /></a><D-r>
- </div>
- </div>
-
- <ul id="projects">
- <li class="first"><a href="http://excid3.com/blog">My blog about linux, programming, and life.</a></li>
- <li>I created a package management system for offline Linux users called <a href="http://keryxproject.org">Keryx</a>.</li>
- <li><a href="http://fluttrly.com">Fluttrly</a> is a minimalist todo list app I wrote.</li>
- <li>A <a href="http://projects.excid3.com">list of projects</a> I'm currently working on.</li>
- </ul>
-
- </div>
-
- <!-- Google Analytics -->
- <script type="text/javascript">
-
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-8399719-1']);
- _gaq.push(['_trackPageview']);
-
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
-
- </script>
-
-</body>
+ <div class="container">
+ <h1 class="name"><a href="http://excid3.com">Chris Oliver</a> <span>is a rebel</span></h1>
+
+ <div class="about">
+ I write <strong>innovative software</strong> for agencies, companies, and individuals looking for a developer who can understand their needs.
+ </div>
+ </div>
+
+ <div id="nav">
+ <div class="container">
+ <ul class="links">
+ <li><a class="email" href="#get-in-touch">say hello</a></li>
+ <li><a class="blog" href="#blog">read my blog</a></li>
+ <li><a class="twitter" href="http://twitter.com/excid3">follow me on twitter</a></li>
+ <li><a class="github" href="http://github.com/excid3">view my work on github</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div id="get-in-touch" class="section">
+ <div class="container">
+ <p class="large">Everyone you meet knows something you don't.</p>
+ <p>I'd love to meet you. Share your thoughts or just say hi.</p>
+ <a class="btn" href="mailto:chris@excid3.com">Let's chat</a>
+ </div>
+ </div>
+
+ <div id="blog" class="section">
+ <div class="container">
+ <p class="large">Success Is Based On Persistence</p>
+ <p>Life is complicated. I write often to help document, analyze, and inspire throughout my travels as a developer and entrepreneur.</p>
+ <a class="btn" href="http://excid3.com/blog">Read My Blog</a>
+ </div>
+ </div>
+
+ <div id="footer">
+ <div class="container">
+ <p>Do things that scare you.</p>
+ </div>
+ </div>
+
+ <!-- Google Analytics -->
+ <script type="text/javascript">
+ $('.carousel').carousel({interval: 8000});
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-8399719-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+
+ </body>
</html>
View
169 style.css
@@ -1,64 +1,127 @@
-/* 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: white;
- font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
- text-shadow: #DFDFDF 1px 1px 0;
-}
+ font-family: 'Open Sans', sans-serif;
+ margin: 0;
+ padding: 0;
+}
-a { color: #36B; text-decoration: none; }
-a:hover { text-decoration: underline; }
+div.container {
+ margin: 0 auto;
+ padding: 0;
+ width: 970px;
+}
-#container {
- margin: 10px auto;
- padding: 0;
- width: 400px;
-}
-#header {
- margin-top: 140px;
- width: 400px;
-}
-#header .avatar {
- border: 1px solid #DFDFDF;
- float: left;
- margin-right: 15px;
- padding: 5px;
-}
-#header .avatar:hover {
- border: 1px solid #CCC;
+h1.name {
+ border-bottom: 1px solid #eee;
+ font-size: 96px;
+ letter-spacing: -7px;
+ margin: 0;
+ padding: 20px 0;
+ text-transform: uppercase;
+}
+h1.name a {
+ color: black;
+ text-decoration: none;
+}
+h1.name a:hover { color: #00B9E4; }
+h1.name span {
+ color: #3D3D3D;
+ font-size: 60px;
+ letter-spacing: -5px;
+}
- box-shadow: 1px 1px 5px #999;
- -moz-box-shadow: 1px 1px 5px #999;
- -webkit-box-shadow: 1px 1px 5px #999;
+div.about {
+ font-size: 42px;
+ letter-spacing: -1px;
+ padding: 60px 0 100px 0;
+ margin: 0 auto;
+ width: 650px;
+ text-align: center;
}
-#header .name {
- font-size: 28px;
- letter-spacing: -1px;
- padding-top: 5px;
+
+ul.links {
+ color: white;
+ font-size: 20px;
+ font-weight: 600;
+ list-style-type: none;
+ text-align: center;
+ margin: 0;
+ padding: 40px 0;
}
-#header .dev {
- color: #C00;
- font-size: 18px;
- margin-bottom: 5px;
+ul.links li {
+ display: inline;
+ margin: 0 20px 0 0;
+ padding: 0;
+}
+ul.links li a {
+ color: white;
+ text-decoration: none;
+}
+
+.email:hover { color: #8CD600; }
+.blog:hover { color: #ED0C95; }
+.twitter:hover { color: #00B9E4; }
+.github:hover { color: #F88000; }
+
+.main {
+ font-size: 42px;
+ letter-spacing: -1px;
+}
+
+#nav, #footer {
+ background-color: #3d3d3d;
}
-#projects {
- list-style: none;
- margin: 25px auto;
+p {
+ font-size: 28px;
+ font-weight: 400;
+ text-align: center;
}
-#projects li {
- border-top: 1px solid #EFEFEF;
- padding: 15px;
+p.large {
+ font-size: 38px;
+ font-weight: 800;
+ letter-spacing: -1px;
+}
+
+.section {
+ color: white;
+ padding: 150px;
+ overflow: hidden;
+}
+
+
+a.btn{
+ background-color: #3D3D3D;
+ border-radius: 10px;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ color: white;
+ display: block;
+ font-size: 22px;
+ font-weight: 800;
+ margin: 60px auto;
+ padding: 20px 0;
+ text-align: center;
+ text-decoration: none;
+ width: 40%;
+}
+a.btn:hover {
+ background-color: white;
+ color: #4D4D4D;
+}
+
+#get-in-touch {
+ background-color: #EA2E49;
+}
+
+#blog {
+ background-color: #77C4D3;
+}
+
+#footer {
+ color: white;
+ overflow: hidden;
}
-#projects .first {
- border: none;
+#footer p {
+ font-size: 20px;
+ font-weight: 200;
}

0 comments on commit ac34802

Please sign in to comment.