hello world!

cameronwp · Jun 21, 2014 · 0cdb969 · 0cdb969
1 parent fbbdd94
commit 0cdb969
Show file tree

Hide file tree

Showing 12 changed files with 191 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 Your challenge, if you wish to accept it (and we sure hope you will), is to optimize this online portfolio for speed! In particular, optimize the critical rendering path and make this page render as quickly as possible by applying the techniques you've picked up in the [Critical Rendering Path course](https://www.udacity.com/course/ud884).
 
-To get started, check out the repository, inspect the code, 
+To get started, check out the repository, inspect the code,
 
 ### Getting started
 

diff --git a/css/print.css b/css/print.css
@@ -0,0 +1,10 @@
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
+  a, a:visited { color: #444 !important; text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3{ page-break-after: avoid; }
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,49 @@
+html {
+  font-size: 100%;
+  overflow-y: scroll;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: none;
+}
+body { margin: 0; font-size: 14px; line-height: 1.61; font-weight: 400; }
+body, button, input, select, textarea { font-family: 'Open Sans', sans-serif; color: #333; }
+
+a { color: #12C; }
+a:visited { color: #61C; }
+a:focus { outline: thin dotted; }
+a:hover, a:active { color: #c00; outline: 0; }
+
+b, strong { font-weight: bold; }
+pre, code { font-family: monospace, monospace; font-size: 1em; }
+ul, ol { margin: 1em 0; padding: 0 0 0 20px; }
+img { border: 0; max-width: 100%; }
+
+body { background: #fff; }
+header, footer, .container { max-width: 45em; margin: 0 auto; }
+
+header { padding: 0 0.5em; color: #C90B0B; }
+header img { border-radius: 40px; float: left; }
+header p { font-size:1.5em; font-weight: bold; padding-left: 4em;}
+header p span { font-size: 0.8em; font-weight: normal;}
+
+.hero { padding: 2em; background-color: #f8f8f8; font-size:1.2em;
+  border-bottom: 1px solid #ccc;
+  border-top: 1px solid #ccc;
+}
+
+.content { padding: 1em 1em; }
+.content li { list-style-type: none; font-size: 1.1em;}
+li img { float:left; padding-right: 1em; }
+li p { font-size: 0.9em; font-style: italic; }
+
+footer {
+  padding: 0 0.5em;
+  border-top: 1px solid #ccc;
+}
+footer span { float: right; font-style: italic; }
+
+/* Smartphones (portrait) */
+@media only screen and (max-width: 480px) {
+  body { font-size: 12px;}
+  header p { padding-left: 4.5em;}
+}
diff --git a/img/.gitignore b/img/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/img/delightstudents.jpg b/img/delightstudents.jpg
diff --git a/img/oop.png b/img/oop.png
diff --git a/img/profilepic.jpg b/img/profilepic.jpg
diff --git a/img/pwp.png b/img/pwp.png
diff --git a/img/webperf1.png b/img/webperf1.png
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content=" FILL ME IN ">
+    <meta name="author" content=" FILL ME IN ">
+    <title>Cameron Pitman: Portfolio</title>
+
+    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
+
+    <link href="css/style.css" rel="stylesheet">
+    <link href="css/print.css" rel="stylesheet">
+
+    <script>
+      (function(w,g){w['GoogleAnalyticsObject']=g;
+      w[g]=w[g]||function(){(w[g].q=w[g].q||[]).push(arguments)};w[g].l=1*new Date();})(window,'ga');
+
+      // TODO: replace with your Google Analytics profile ID.
+      ga('create', 'UA-XXXX-Y');
+      ga('send', 'pageview');
+    </script>
+    <script src="//www.google-analytics.com/analytics.js"></script>
+    <script async src="js/perfmatters.js"></script>
+  </head>
+
+  <body>
+    <header>
+      <a href="/"><img src="/img/profilepic.jpg"></a>
+      <p>Cameron Pittman<br><span>Course Developer</span></p>
+    </header>
+
+    <div class="container">
+      <div class="hero">
+        <strong>I love web development!</strong> This is a template for a simple portfolio. I decided to use it to showcase a few Udacity courses I've taken and some teaching work, but you can use it to showcase any kind of project that you want the world to see :)
+      </div>
+
+      <div class="content">
+        <ul>
+          <li>
+            <img src="https://lh5.ggpht.com/fDU9wOu-XF_FLJJUkLR0ur-8b3bBtnS3dc0YWq0czwmmxuU87ySjf0VMqmw05xotlx29M8eSdluxJnwjZt8=s100">
+            <a href="project-2048.html">2048 on Udacity</a>
+            <p>Quick description goes here</p>
+          </li>
+
+          <li>
+            <img src="https://lh5.ggpht.com/fDU9wOu-XF_FLJJUkLR0ur-8b3bBtnS3dc0YWq0czwmmxuU87ySjf0VMqmw05xotlx29M8eSdluxJnwjZt8=s100">
+            <a href="project-2048.html">Web Perf course</a>
+            <p>Quick description goes here</p>
+          </li>
+
+          <li>
+            <img src="https://lh5.ggpht.com/fDU9wOu-XF_FLJJUkLR0ur-8b3bBtnS3dc0YWq0czwmmxuU87ySjf0VMqmw05xotlx29M8eSdluxJnwjZt8=s100">
+            <a href="project-2048.html">Other course</a>
+            <p>Quick description goes here</p>
+          </li>
+        </ul>
+    </div>
+
+    <footer>
+      <p>&copy; Web Performance 2014 <span id="crp-stats"></span></p>
+    </footer>
+  </body>
+</html>
diff --git a/js/perfmatters.js b/js/perfmatters.js
@@ -0,0 +1,14 @@
+// Measuring the Critical Rendering Path with Navigation Timing
+// https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp
+
+function logCRP() {
+  var t = window.performance.timing,
+    dcl = t.domContentLoadedEventStart - t.domLoading,
+    complete = t.domComplete - t.domLoading;
+  var stats = document.getElementById("crp-stats");
+  stats.textContent = 'DCL: ' + dcl + 'ms, onload: ' + complete + 'ms';
+}
+
+window.addEventListener("load", function(event) {
+  logCRP();
+});
diff --git a/project-2048.html b/project-2048.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content=" FILL ME IN ">
+    <meta name="author" content=" FILL ME IN ">
+    <title>Cameron Pitman: Portfolio</title>
+
+    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
+
+    <link href="css/style.css" rel="stylesheet">
+    <link href="css/print.css" rel="stylesheet">
+
+    <script>
+      (function(w,g){w['GoogleAnalyticsObject']=g;
+      w[g]=w[g]||function(){(w[g].q=w[g].q||[]).push(arguments)};w[g].l=1*new Date();})(window,'ga');
+
+      // TODO: replace with your Google Analytics profile ID.
+      ga('create', 'UA-XXXX-Y');
+      ga('send', 'pageview');
+    </script>
+    <script src="//www.google-analytics.com/analytics.js"></script>
+    <script async src="js/perfmatters.js"></script>
+  </head>
+
+  <body>
+    <header>
+      <a href="/"><img src="/img/profilepic.jpg"></a>
+      <p>Cameron Pittman<br><span>Course Developer</span></p>
+    </header>
+
+    <div class="container">
+      <div class="hero">
+        <strong>2048 is awesome!</strong> I loved making my own 2048 with Andy and Sarah. Below, I'm showing off a screenshot from the Udacity version of 2048.
+      </div>
+
+      <div class="content">
+        <p>Use <a href="http://getbootstrap.com/css/">Bootstrap's documentation</a> to customize this section.</p>
+
+        <p>Bacon ipsum dolor sit amet et pork belly porchetta excepteur dolor, laborum laboris magna labore dolore in fugiat beef ribs. Fugiat leberkas nulla do kevin dolore. Flank hamburger dolor swine prosciutto sirloin pig jerky sunt consequat pariatur. Mollit meatloaf nostrud laboris shoulder excepteur velit officia meatball nisi turkey. Nulla jowl spare ribs, et drumstick magna frankfurter.</p>
+
+        <p>Venison spare ribs dolor tri-tip duis turkey. Ut chicken proident ribeye est flank, sed frankfurter. Kielbasa exercitation ullamco leberkas. Landjaeger turkey culpa, tail short loin consectetur salami venison in corned beef eiusmod qui ad leberkas. Tri-tip adipisicing frankfurter ut sirloin rump consectetur. Chuck sint filet mignon labore eiusmod nulla. Venison shankle pork, consectetur nisi bacon spare ribs anim meatball sausage ball tip labore aute reprehenderit adipisicing.</p>
+
+        <img class="img-responsive" src="http://cameronwp.github.io/udportfolio/img/2048.png">
+    </div>
+
+    <footer>
+      <p>&copy; Web Performance 2014 <span id="crp-stats"></span></p>
+    </footer>
+  </body>
+</html>