udportfolio/index.html at master · PeteLevineA/udportfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Updated Portfolio For Critical Rendering Path">
    <meta name="author" content="Pete Levine">
    <title>Pete Levine: Critical Rendering Path 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">-->

    <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: 100; }
        body, button, input, select, textarea {
            font-family: "Segoe UI",Frutiger,"Frutiger Linotype","Dejavu Sans","Helvetica Neue",Arial,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;}
        }

    </style>
    <link href="css/print.css" rel="stylesheet" media="print">

    <script async src="http://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>Pete Levine<br><span>Course Takerer</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 :) <br> Contact me: me@email.com
      </div>

          <div class="content">
            <ul>
              <li>
                <img src="https://lh4.ggpht.com/kJEnfqhPvtm4m3EneSZ4fWYGS8lW4YNhEjk6zPkyrQaBUHc-2Y_ElDic99NHI0h-UBLXVbRCjFybFvrWxdk=s100">
                <a href="project-2048.html">Build Your Own 2048!</a>
                <p>I made my own version of 2048. How cool is that!?</p>
              </li>

              <li>
                <img src="https://lh6.ggpht.com/f_0W8h__3G99CWTjnMjD8BUKm7yp2-wJyApLtTwFoFtlal2ULf_JgHIsOQq2NiYfKOdMlXlMHDKNo5XVZLs=s100">
                <a href="project-webperf.html">Website Performance Optimization</a>
                <p>Hey... this class looks familiar.</p>
              </li>

              <li>
                <img src="https://lh5.ggpht.com/IKdCmTWn8a2nMhlwMYzryvzRN5CUZAOBr4tDrEAbszV7TIFe9pRAInA4kkYcgTXwrifJsBEsq1agTueuu-g=s100">
                <a href="project-mobile.html">Mobile Web Development</a>
                <p>Making mobile apps isn't so hard after all.</p>
              </li>

              <li>
                <img style="width: 100px;" src="views/images/pizzeria.jpg">
                <a href="views/pizza.html">Cam's Pizzeria</a>
                <p>Who wants a performant pizza?</p>
              </li>
            </ul>
        </div>
    </div>
    <footer>
      <p>&copy; Web Performance 2014 <span id="crp-stats"></span></p>
    </footer>
    <script async>
        (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');

        // Optional TODO: replace with your Google Analytics profile ID.
        ga('create', 'UA-XXXX-Y');
        ga('send', 'pageview');
    </script>

  </body>
</html>