cameronwp · htwmehdi · Jun 21, 2014 · Jun 21, 2014 · Jun 21, 2014 · Jun 21, 2014
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+* text=auto
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,56 @@
+'use strict';
+
+module.exports = function (grunt) {
+  var ngrok = require('ngrok');
+
+  // Load grunt tasks automatically
+  require('load-grunt-tasks')(grunt);
+
+  grunt.initConfig({
+    connect: {
+      server: {
+        options: {
+          port: 8000
+        }
+      }
+    },
+    pagespeed: {
+      options: {
+        nokey: true,
+        locale: "en_US",
+        threshold: 40
+      },
+      local: {
+        options: {
+          strategy: "desktop"
+        }
+      },
+      mobile: {
+        options: {
+          strategy: "mobile"
+        }
+      }
+    }
+  });
+
+  grunt.registerTask('server', ['connect:server:keepalive']);
+
+  grunt.registerTask('psi-ngrok', 'Run pagespeed with ngrok', function() {
+    var done = this.async();
+    var port = 8000;
+
+    ngrok.connect(port, function(err, url) {
+      if (err !== null) {
+        grunt.fail.fatal(err);
+        return done();
+      }
+      grunt.config.set('pagespeed.options.url', url);
+      grunt.task.run('pagespeed');
+      done();
+    });
+  });
+
+  // Register default tasks
+  grunt.registerTask('default', ['connect', 'psi-ngrok']);
+
+};
diff --git a/img/cam_be_like.jpg b/img/cam_be_like.jpg
diff --git a/img/mobilewebdev.jpg b/img/mobilewebdev.jpg
diff --git a/img/profilepic.jpg b/img/profilepic.jpg
diff --git a/index.html b/index.html
@@ -8,21 +8,60 @@
     <title>Cameron Pittman: Portfolio</title>
 
     <!-- Hmm, what is the impact of web fonts on speed? Measure it... -->
-    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
+    <!--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">
+    <style type="text/css">
+      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; }
 
-    <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');
+      a { color: #12C; }
+      a:visited { color: #61C; }
+      a:focus { outline: thin dotted; }
+      a:hover, a:active { color: #c00; outline: 0; }
 
-      // TODO: replace with your Google Analytics profile ID.
-      ga('create', 'UA-XXXX-Y');
-      ga('send', 'pageview');
-    </script>
-    <script src="http://www.google-analytics.com/analytics.js"></script>
-    <script async src="js/perfmatters.js"></script>
+      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;}
+      }
+    </style>
+    <link href="css/print.css" rel="stylesheet" media="print">
   </head>
 
   <body>
@@ -62,4 +101,13 @@
       <p>&copy; Web Performance 2014 <span id="crp-stats"></span></p>
     </footer>
   </body>
+  <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');
+
+    ga('create', 'UA-52159504-1', 'auto');
+    ga('send', 'pageview');
+  </script>
+  <script async src="http://www.google-analytics.com/analytics.js"></script>
+  <script async src="js/perfmatters.js"></script>
 </html>
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "udportfolio",
+  "version": "0.0.0",
+  "description": "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).",
+  "main": "index.html",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/asapach/udportfolio.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/asapach/udportfolio/issues"
+  },
+  "homepage": "https://github.com/asapach/udportfolio",
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-connect": "^0.8.0",
+    "ngrok": "^0.1.95",
+    "grunt-pagespeed": "^0.2.0",
+    "load-grunt-tasks": "^0.6.0"
+  }
+}