nerd-style/index.html at master · nerding/nerd-style · 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
<html>
<head>
  <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400,600,700,900' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">

  <title>Nerd Style</title>
</head>
<body>
  <div class="wrap">
    <img src="http://placehold.it/125x125" class="person">
    <h1>Nerd Style</h1>

    <p>
      <em>Nerd Style</em> is a simple and programmer-y template for a basic
      personal website. You know, the kind without any extra nonsense, like a
      blog, but just a simple about page. For a more accurate demo, checkout
      <a href="don.html">/don.html</a>. For seeing it out in the wild, check
      out <a href="http://tonyphelps.net/">http://tonyphelps.net/</a>.
    </p>

    <p>
      While it is very basic (that's kinda the point), it does provide a nice
      starting point for anyone who wants a fairly basic design. Plus it fits
      with the rest of the Enginerding sites, which is also kinda the point.
    </p>

    <h2>The Styles</h2>

    <p>
      Again, this is very basic, so there are no additional styles over the
      basic html text styling tags. Well, there are two, .person, which is the
      image next to (or above, depending on the width of your screen) your
      title, and .wrap, which is what all the content is inside of.
    </p>

    <p>
      It is mildly responsive, which sounds funny, because it's only 500px wide
      to begin with. The image (the .person image) will either be next to, or
      above the title, depending on the width of the page. If it's above, the
      title centers itself. Nifty, right?
    </p>

    <h2>The Content</h2>

    <p>
      So what exactly would you put here? Well, I would start with a fun
      introductory paragraph, because you want to hook people into learning
      more about you? Following that, you can just write about yourself, or
      whatever you happen to fancy writing about. It's just basic HTML, you
      don't have to limit yourself to anything. Well, you might <em>want</em>
      to limit yourself, because self-censorship is a thing, but that's up to
      you, dear writer.
    </p>

    <footer>
      <p>
        Created by <a href="http://don.kuntz.co">Don Kuntz</a>, an
        <a href="http://enginerding.co">Enginerding.</a> project.
        Check it out on
        <a href="https://github.com/enginerding/nerd-style">GitHub</a>.
      </p>
    </footer>
  </div>
</body>
</html>