Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

revamp, switch to bootstrap from CDN

  • Loading branch information...
commit ae3e680beb950b0dd6e607e793914ee51d0ea1fb 1 parent b49ecd4
@excid3 authored
View
7 README.md
@@ -0,0 +1,7 @@
+# excid3.com homepage
+
+Written by Chris Oliver <excid3@gmail.com>
+
+Compile stylesheets using:
+
+ sass --scss sass/style.scss stylesheets/style.css
View
BIN  font/fontawesome-webfont.eot
Binary file not shown
View
255 font/fontawesome-webfont.svg
0 additions, 255 deletions not shown
View
BIN  font/fontawesome-webfont.ttf
Binary file not shown
View
BIN  font/fontawesome-webfont.woff
Binary file not shown
View
70 index.html
@@ -2,14 +2,17 @@
<html>
<head>
<title>Chris Oliver | Saint Louis Ruby on Rails Web Developer</title>
- <meta name="description" content="Saint Louis Web Developer specializing in web development with Ruby on Rails, Javascript, HTML5, and CSS3">
+ <meta name="description" content="Chris Oliver is a Saint Louis Web Developer specializing in web development with Ruby on Rails, Javascript, HTML5, and CSS3">
<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>
-
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" charset="utf-8">
+
+ <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
+ <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
+
+ <script type="text/javascript" src="http://use.typekit.net/voa6eso.js"></script>
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
@@ -25,67 +28,66 @@ <h1 class="name"><a href="http://excid3.com">Chris Oliver</a></h1>
</div>
</div>
- <section class="dark">
+ <section class="hero">
<div class="fluid-container">
<div class="container">
<div class="row">
- <div class="span4 leftside animated fadeInUp">
- <h1>
- Building visions<br/>
- <span class="light-blue">one day at a time</span>
- </h1>
- <p><i class="icon-map-marker light-blue"></i> Based in beautiful Saint Louis, Missouri</p>
- <p><i class="icon-link light-blue"></i> Specializing in modern Web Development</p>
- <p><i class="icon-beaker light-blue"></i> Crafting with Ruby on Rails, HTML5, CSS3, JS</p>
+ <div class="span5">
+ <img src="macbook.png" alt="work" class="macbook"/>
</div>
-
- <div class="span7 offset1 animated fadeInRight">
- <p>People believe that software is just built. It doesn't matter who writes it; the product will always end up how it was planned.</p>
- <p><em>That could not be further from the truth.</em></p>
- <p>Success comes from neat ideas, great timing, strong expertise, and a dash of luck. Don't take chances with a mediocre developer.</p>
- <p><b>Choose someone who knows their craft.</b></p>
+ <div class="span5 offset1 hero-about">
+ <h1>I make web apps.</h1>
+ <p>You have a product you want built or improved, and that's where I come in. You can hire me to launch a new web app from scratch, or improve your current application.</p>
+ <p><a href="mailto:chris@excid3.com?subject=I've got a new project for you!" class="right-arrow">Let's get started</a></p>
</div>
-
</div>
</div>
</div>
</section>
- <section class="red">
+ <section class="dark">
<div class="fluid-container">
- <div class="container animated fadeInUp">
- <h1 class="centered">Much More Than Your Average Developer</h1>
+ <div class="container">
<div class="row">
<div class="span4">
- <h3><i class="icon-magic"></i> Experience</h3>
- <p>User experience is the <em>one</em> thing a person takes away from your product. How it feels, how they remember it, and how they use your product are crucial to making their experience great.</p>
+ <h3>Strategic Planning</h3>
+ <p>You have an idea but don't know how to best build it as a web application. Together we can brainstorm and put together an application that's smart and super simple to use.</p>
</div>
<div class="span4">
- <h3><i class="icon-heart"></i> Simplicity</h3>
- <p>If you look at the majority of websites out there, 90% of them are way too complex. That's because simplicity is very hard. You must truly understand the problems you try to solve.</p>
+ <h3>Software Development</h3>
+ <p>You don't want to wait months to find out if your idea is going to work, that's why I use Ruby on Rails. It lets us make changes quickly while we are building our reliable, trustworthy web apps.</p>
</div>
<div class="span4">
- <h3><i class="icon-comments"></i> Feedback</h3>
- <p>Most developers like to pretend they can do anything. But honest communication, feedback, and constructive criticism are important qualities of an exceptional team.</p>
+ <h3>Straightforward Rates</h3>
+ <p>Projects are typically priced at a flat rate. You can also purchase time on a daily and weekly basis for support, maintenance, and small development tasks at any time.</p>
</div>
+
</div>
</div>
</div>
</section>
- <section class="blue">
+ <section class="red">
<div class="fluid-container">
<div class="container animated fadeInUp">
<div class="row">
<div class="span7 animated fadeinright">
- <p>Everything you craft is an expression of your vision, your personality, your beliefs. And my belief is that software should simply work, it should be a joy to use, and it should look good while doing so.</p>
- <p><b>Sound like someone you'd like to work with?</b></p>
- <p><a href="mailto:chris@excid3.com?subject=Hello!" class="button">Get In Touch</a></p>
+ <h3>Philosphy</h3>
+ <p>Everything you craft is an expression of your vision, your personality, your beliefs. And my belief is that software should simply work, should be a joy to use, and should look good while doing so.</p>
+ <p>It's important to me to work with people who feel the same way and want their software to put a smile on people's faces.</p>
</div>
- <h1 class="span4 offset1 normal hidden-phone animated fadeinup">Creating Software Is A Form Of Art</h1>
+ <div class="span4 offset1">
+ <div class="well hire-me">
+ <h3>Want to hire me?</h3>
+ <p>If you're interested in working with me, send me an email detailing your idea, goals, and problems you're trying to solve.</p>
+ <div>
+ <a href="mailto:chris@excid3.com?subject=I've got a new project for you!" class="btn btn-block btn-large right-arrow">Let's chat</a>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
View
BIN  macbook.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
108 sass/style.scss
@@ -1,15 +1,6 @@
-@import "bootstrap";
-@import "bootstrap-responsive";
-@import "animate";
-@import "font-awesome";
-
body {
background-color: white;
- font-family: 'Open Sans', sans-serif;
-}
-
-.centered {
- text-align: center;
+ font-family: 'proxima-nova', sans-serif;
}
.header {
@@ -58,9 +49,11 @@ body {
.dark {
background-color: #20272F;
color: white;
+
+ p { color: #ccc; }
}
.red {
- background-color: #EA2E49;
+ background-color: darken(#EA2E49, 5%);
color: white;
}
.blue {
@@ -68,57 +61,41 @@ body {
color: white;
}
+.right-arrow:after {
+ content: "";
+}
+
+.hero {
+ p {
+ color: #777;
+ font-size: 1.2em;
+ }
+
+ .hero-about {
+ margin-top: 50px;
+ }
+}
+
+
section {
- padding: 100px 0;
+ padding: 60px 0;
h1 {
- font-size: 38px;
+ font-size: 56px;
font-weight: 400;
letter-spacing: -1px;
margin-bottom: 35px;
- text-shadow: 0 2px rgba(0, 0, 0, 0.3);
- text-transform: uppercase;
}
h3 {
line-height: 60px;
-
- [class^="icon-"], [class*=" icon-"] {
- background: rgba(0,0,0,0.2);
- border-radius: 50%;
- float: left;
- height: 60px;
- line-height: normal;
- margin-right: 10px;
- width: 60px;
-
- &:before { margin: 20px 0 0 19px; }
- }
}
p {
- font-size: 1.4em;
- line-height: 1.75em;
- text-shadow: 0 2px rgba(0, 0, 0, 0.2);
- margin-bottom: 15px;
- }
-
- .leftside {
- margin-top: 20px;
-
- p {
- font-size: 1.15em;
- line-height: 1.2em;
- margin-bottom: 5px;
- padding-left: 18px;
- position: relative;
-
- [class^="icon-"] {
- position: absolute;
- top: 0;
- left: 0;
- }
- }
+ font-size: 1.2em;
+ line-height: 1.5em;
+ /*text-shadow: 0 2px rgba(0, 0, 0, 0.2);*/
+ margin-bottom: 10px;
}
}
@@ -140,23 +117,6 @@ footer {
}
}
-.button {
- background-color: whiteSmoke;
- border: 1px solid #CCC;
- border-radius: 5px;
- color: #222;
- font-weight: 800;
- padding: 8px 20px;
- text-shadow: none;
- text-transform: uppercase;
-
- &:hover {
- background-color: white;
- color: #333;
- text-decoration: none;
- }
-}
-
@media (max-width: 767px) {
body { padding: 0; }
.container { padding: 0 20px; }
@@ -176,3 +136,19 @@ footer {
}
}
}
+
+.well {
+ color: #444;
+
+ p {
+ color: #444;
+ }
+}
+
+.hire-me {
+ font-size: 1em;
+}
+
+.centered {
+ text-align: center;
+}
View
117 stylesheets/style.css
@@ -0,0 +1,117 @@
+@charset "UTF-8";
+body {
+ background-color: white;
+ font-family: 'proxima-nova', sans-serif; }
+
+.header {
+ background-color: whiteSmoke;
+ text-transform: uppercase; }
+ .header h1 {
+ display: inline-block;
+ font-size: 56px;
+ letter-spacing: -3px;
+ line-height: 96px; }
+ .header h1 a {
+ color: black; }
+ .header h1 a:hover {
+ color: #666;
+ text-decoration: none; }
+ .header h1 span {
+ color: #3D3D3D;
+ font-size: 40px;
+ letter-spacing: -1px; }
+
+.nav {
+ font-weight: bold;
+ margin-top: 50px; }
+ .nav a {
+ color: #808080;
+ margin-left: 15px; }
+ .nav a:first-child {
+ margin-left: 0px; }
+ .nav a:hover {
+ color: black;
+ text-decoration: none; }
+
+.light-blue {
+ color: #9BA3B2; }
+
+.dark {
+ background-color: #20272F;
+ color: white; }
+ .dark p {
+ color: #ccc; }
+
+.red {
+ background-color: #e71735;
+ color: white; }
+
+.blue {
+ background-color: #02A9B9;
+ color: white; }
+
+.right-arrow:after {
+ content: ""; }
+
+.hero p {
+ color: #777;
+ font-size: 1.2em; }
+.hero .hero-about {
+ margin-top: 50px; }
+
+section {
+ padding: 60px 0; }
+ section h1 {
+ font-size: 56px;
+ font-weight: 400;
+ letter-spacing: -1px;
+ margin-bottom: 35px; }
+ section h3 {
+ line-height: 60px; }
+ section p {
+ font-size: 1.2em;
+ line-height: 1.5em;
+ /*text-shadow: 0 2px rgba(0, 0, 0, 0.2);*/
+ margin-bottom: 10px; }
+
+footer .motd {
+ color: #888;
+ margin: 60px 0; }
+footer .nav {
+ margin: 60px 0;
+ text-transform: uppercase; }
+ footer .nav a {
+ color: #444;
+ font-weight: 800;
+ margin: 0 15px 0 0; }
+
+@media (max-width: 767px) {
+ body {
+ padding: 0; }
+
+ .container {
+ padding: 0 20px; }
+
+ .nav {
+ display: block;
+ margin: 10px 0;
+ text-align: center;
+ width: 100%; }
+
+ .header h1 {
+ display: block;
+ font-size: 36px;
+ line-height: 40px;
+ text-align: center; }
+ .header h1 span {
+ font-size: 24px; } }
+.well {
+ color: #444; }
+ .well p {
+ color: #444; }
+
+.hire-me {
+ font-size: 1em; }
+
+.centered {
+ text-align: center; }
Please sign in to comment.
Something went wrong with that request. Please try again.