mlh-11ty/index.html at master · maureenlholland/mlh-11ty · 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
---
title: "Maureen L. Holland"
tagline: "writer / web developer / wanderer"
projects:
  - name: "React To-Do List"
    image: "img/react-to-do.jpg"
    github: "https://github.com/maureenlholland/to-do-app"
    live: "https://to-do-app-2018.herokuapp.com/"
    description: "Super simple but weirdly addictive to-do list. Add and delete as many items as you like! Built with React and hosted on Heroku."
  - name: "Vue To-Do List"
    image: "img/vue-to-do.jpg"
    github: "https://github.com/maureenlholland/vue-to-do"
    live: "https://maureenlholland.github.io/vue-to-do/"
    description: "Finally a to-do list with the joys of editing! Built with Vue and hosted on gh-pages."
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="{{ tagline }}" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta property="og:type" content="site" />
    <meta property="og:title" content="{{ title }}" />
    <meta property="og:description" content="{{ tagline }}" />
    <meta property="og:url" content="https://maureenlholland.com/" />
    <meta property="og:site_name" content="{{ title }}" />
    <meta name="twitter:title" content="{{ title }}" />
    <meta name="twitter:description" content="{{ tagline }}" />
    <link rel="icon" type="image/png" href="img/typewriter-favicon.png" />
    <link rel="serviceworker" href="/serviceworker.js" />
    <title>{{ title }}</title>
    <link
      href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <header>
      <h1>{{ title }}</h1>
      <p>{{ tagline }}</p>
    </header>
    <footer>
      <p>
        Design modified from
        <a href="https://html5up.net/strata">HTML5 UP's Strata template</a>
      </p>
      <p>Copyright {{ "now" | date: "%Y" }}</p>
    </footer>
    <main>
      <section class="about">
        <h2>About</h2>
        <p>
          I write for humans, computers and money (not necessarily in that
          order). If online and not coding, most likely watching clips of
          <strong>Inside the NBA</strong>. If offline and not sleeping, may be
          found
          <strong>re-reading Harry Potter or re-watching Grizzly Man</strong>,
          depending on mood. If outdoors and biking,
          <strong>probably lost</strong>. Extremely introverted and easily
          startled. Please approach with caution.
        </p>
      </section>
      <section class="projects">
        <h2>Side Projects</h2>
        <ul class="list">
          {% for project in projects %}
          <li class="list__item">
            <h3 class="item__name">{{ project.name }}</h3>
            <div class="item__container">
              <img
                src="{{ project.image }}"
                alt="{{ project.name screenshot }}"
              />
            </div>
            <div class="item__ctas">
              <a href="{{ project.github }}">View Github</a>
              <a href="{{ project.live }}">View Live</a>
            </div>
            <p class="item__description">{{ project.description }}</p>
          </li>
          {% endfor %}
        </ul>
      </section>
      <section class="in-progress">
        <h2>Does this site look weird?</h2>
        <p>
          It should. I took some liberties with the design and it's a work in
          progress. I wanted to play around with
          <a href="https://www.11ty.dev/">a Static Site Generator</a>,
          <a href="https://css-tricks.com/snippets/css/complete-guide-grid/"
            >CSS Grid</a
          >, and
          <a href="https://github.com/dequelabs/axe-core"
            >automated accessibility testing</a
          >. You can find
          <a href="https://github.com/maureenlholland/mlh-11ty"
            >the code for this project on GitHub</a
          >.
        </p>
      </section>
    </main>
    <script>
      if (navigator.serviceWorker) {
        navigator.serviceWorker.register("/serviceworker.js");
      }
    </script>
  </body>
</html>