Skip to content

Commit

Permalink
Overhaul again
Browse files Browse the repository at this point in the history
  • Loading branch information
@excid3
excid3 committed Jul 29, 2012
1 parent 13b687f commit ac34802
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 99 deletions.
112 changes: 66 additions & 46 deletions index.html
View file
@@ -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>
169 changes: 116 additions & 53 deletions style.css
View file
@@ -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.