jsh562.github.io/index.html at main · jsh562/jsh562.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>James Han — Portfolio</title>
<meta name="description" content="Dashboards, data tools and interfaces by James Han.">

<!-- Link previews on LinkedIn / Slack / iMessage. Update the URL once the domain is final. -->
<meta property="og:title" content="James Han — Portfolio">
<meta property="og:description" content="Dashboards, data tools and interfaces.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jsh562.github.io/">
<meta property="og:image" content="https://jsh562.github.io/images/thumbs/role-dashboard.png">

<link rel="stylesheet" href="style.css">
<link rel="icon" href="data:,">
</head>
<body>

<header class="site-header">
  <div class="wrap">
    <h1>James Han</h1>
    <p class="tagline">Dashboards, data tools and interfaces.</p>
    <nav class="links" aria-label="Elsewhere">
      <a href="https://github.com/jsh562">GitHub</a>
      <a href="mailto:jsh562@gmail.com">Email</a>
      <!-- <a href="https://linkedin.com/in/...">LinkedIn</a> -->
    </nav>
  </div>
</header>

<main class="wrap">
  <!-- Both chip rows are generated from projects.js — kinds from `kind`, tags from `tags`.
       Adding a new value to either field creates its chip automatically. -->
  <div id="kind-filters" class="filters" role="group" aria-label="Filter projects by kind"></div>
  <div id="filters" class="filters" role="group" aria-label="Filter projects by tag"></div>

  <!-- Cards are generated from projects.js -->
  <div id="grid" class="grid"></div>

  <p id="empty" class="empty" hidden>No projects match that filter.</p>
</main>

<footer class="site-footer">
  <div class="wrap">
    <p>Built as a static site, hosted on GitHub Pages.</p>
  </div>
</footer>

<!-- Lightbox. Native <dialog> gives us focus trapping and Esc-to-close for free. -->
<dialog id="lightbox" class="lightbox" aria-label="Project image">
  <button id="lb-close" class="lb-close" type="button" aria-label="Close">&times;</button>
  <button id="lb-prev" class="lb-nav lb-prev" type="button" aria-label="Previous project">&#8249;</button>
  <button id="lb-next" class="lb-nav lb-next" type="button" aria-label="Next project">&#8250;</button>
  <figure class="lb-figure">
    <img id="lb-img" alt="">
    <figcaption class="lb-caption">
      <div class="lb-head">
        <h2 id="lb-title"></h2>
        <span id="lb-count" class="lb-count" hidden></span>
      </div>
      <!-- A div, not a p: a bullet-list blurb renders a <ul> in here, and a <ul>
           inside a <p> is invalid — the browser closes the paragraph early. -->
      <div id="lb-blurb"></div>
      <p id="lb-tags" class="lb-tags"></p>
      <a id="lb-link" class="lb-link" hidden>View project &rarr;</a>
    </figcaption>
  </figure>
</dialog>

<script src="projects.js"></script>
<script src="app.js"></script>
</body>
</html>