dsmcclain.github.io/index.html at master · dsmcclain/dsmcclain.github.io · 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
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
  <title>little programs</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Source+Code+Pro&display=swap">
  <link rel="stylesheet" href="styles.css">
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <script src="w3.js"></script>
</head>
<body>
  <div role="navigation" w3-include-html="partials/navbar.html" class="nav-wrapper"></div>
  <div class="container">

    <div class="main-hero-wrapper" role="banner">

      <div class="hero-items-wrapper">
        <div class="main-hero-background" style="background-image:url(images/title-image.jpg)"></div>

        <div class="hero-text-wrapper">
          <h1 class="site-title">little programs</h1>
        </div>
      </div>
    </div>

    <div class="articles-container">
      <div class="header" role="main">
        <div class="about-statement">
          <p>Exploring the scripts, apps,
            libraries, and websites
            I find interesting.</p>
        </div>
      </div>

  <!-- PROGRAMS BY ME SECTION -->
      <section aria-label="programs by me section" class="articles-children by-me-section">
        <h2 class="articles-section-header">Built By Me</h2>
        <div class="articles-card">
          <div class="icon-caption-wrapper">
            <a href="neon.html" class="articles-icon neon">
              <h3 class="articles-title">NEON</h3>
            </a>
            <p class="articles-caption">Bringing a lost puzzle game into the modern web.</p>
          </div>
        </div>
        <div class="articles-card">
          <div class="icon-caption-wrapper">
            <a href="airy-canary.html" class="articles-icon airy-canary">
              <h3 class="articles-title">AIRY CANARY</h3>
            </a>
            <p class="articles-caption">Air quality alerts for the linux desktop.</p>
          </div>
        </div>
        <div class="articles-card">
          <div class="icon-caption-wrapper">
            <a href="little-programs.html" class="articles-icon little-programs">
              <h3 class="articles-title">LITTLE PROGRAMS</h3>
            </a>
            <p class="articles-caption">Why my personal site is mostly markup.</p>
          </div>
        </div>
        <div class="articles-card">
          <div class="icon-caption-wrapper">
            <a href="yahtzee.html" class="articles-icon yahtzee">
              <h3 class="articles-title">YAHTZEE</h3>
            </a>
            <p class="articles-caption">Building the classic dice game with React.</p>
          </div>
        </div>
        <div class="articles-card">
          <div class="icon-caption-wrapper">
            <a href="take-a-break.html" class="articles-icon take-a-break">
              <h3 class="articles-title">TAKE A BREAK</h3>
            </a>
            <p class="articles-caption">Getting started with cron jobs.</p>
          </div>
        </div>
        <div class="articles-card">
            <div class="icon-caption-wrapper">
            <a href="orbit.html" class="articles-icon orbit">
              <h3 class="articles-title">ORBIT</h3>
            </a>
            <p class="articles-caption">A monopoly game for your terminal window.  Written in Ruby.</p>
          </div>
        </div>
      </section>
  <!-- PROGRAMS BY OTHERS SECTION -->
      <section aria-label="programs by others section" class="articles-children by-others-section">
        <h2 class="articles-section-header by-others">Built By Others</h2>
        <div class="articles-card others">
          <a href="awk.html" class="articles-icon awk">
            <h3 class="articles-title">AWK</h3>
          </a>
          <p class="articles-caption">A classic file-searching utility with an undeserved reputation.</p>
        </div>
        <div class="articles-card others">
          <a href="postman.html" class="articles-icon postman">
            <h3 class="articles-title">POSTMAN</h3>
          </a>
          <p class="articles-caption">The one-stop-shop for managing API development.</p>
        </div>
        <div class="articles-card others">
          <a href="webtap.html" class="articles-icon webtap">
            <h3 class="articles-title">WEBTAP</h3>
          </a>
          <p class="articles-caption">Princeton's Web Transparency and Accountability Project.</p>
        </div>
        <div class="articles-card others">
          <a href="vuelidate.html" class="articles-icon vuelidate">
            <h3 class="articles-title">VUELIDATE</h3>
          </a>
          <p class="articles-caption">A validation library for the Vue framework.</p>
        </div>
      </section>
      <div w3-include-html="partials/footer.html" class="footer"></div>
    </div>
  </div>

  <script>
    w3.includeHTML(setActiveLink);

    function setActiveLink() {
      const elem = document.getElementById('home-link')
      elem.classList.add('active-nav-link')
    }
  </script>
</body>
</html>