Avery2.github.io/index.html at main · Avery2/Avery2.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
130
131
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Hi, I'm Justin \'Avery\' Chan 👋 Welcome to my website!">
  <meta name="author" content="Justin \"Avery\" Chan">

  <!-- Open Graph / Social Media -->
  <meta property="og:title" content="Avery">
  <meta property="og:description" content="Product Engineer at Amplitude. 30+ open source projects.">
  <meta property="og:image" content="https://www.averychan.site/assets/images/profile/face.jpg">
  <meta property="og:url" content="https://www.averychan.site">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">

  <title>Avery</title>

  <!-- Favicon -->
  <link rel="icon" href="./assets/images/profile/face.jpg" type="image/jpeg">

  <!-- CSS -->
  <link rel="stylesheet" href="css/main.css">

  <!-- Font Awesome (for icons) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer">

  <!-- External dependencies for YAML parsing and markdown rendering -->
  <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked@11.1.0/marked.min.js"></script>

  <!-- Main JavaScript (ES6 module) -->
  <script type="module" src="js/main.js"></script>

  <!-- Posthog -->
  <script>
    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group identify setPersonProperties setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags resetGroups onFeatureFlags addFeatureFlagsHandler onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    posthog.init('phc_QQb6yU96ZZpxnhnO9skm09ZAnelbpwFoYKZJdQHk7mI', {
        api_host: 'https://us.i.posthog.com',
        defaults: '2026-01-30'
    })
</script>
</head>
<body>
  <!-- Header / Navigation -->
  <header class="site-header" id="header">
    <div class="header-content">
      <div class="header-main">
        <div class="header-left">
          <a href="#" class="site-title">Avery</a>
          <!-- Filter toggle button in header -->
          <button class="filter-toggle-btn" id="filter-toggle-btn" aria-expanded="false">
            <i class="fas fa-search"></i>
            <span>Find</span>
            <i class="fas fa-chevron-down toggle-icon"></i>
          </button>
        </div>

        <div class="header-right">
          <!-- Social links (populated by JS) -->
          <div class="social-links" id="social-links">
            <!-- Populated by JavaScript -->
          </div>

          <!-- Theme toggle -->
          <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme" title="Toggle theme">
            🌙
          </button>

          <!-- Mobile menu toggle (only visible on mobile) -->
          <button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Menu" aria-expanded="false">
            <i class="fas fa-bars"></i>
          </button>

          <!-- Mobile menu dropdown -->
          <div class="mobile-menu-dropdown" id="mobile-menu-dropdown">
            <div class="social-links" id="mobile-social-links">
              <!-- Populated by JavaScript -->
            </div>
            <button id="mobile-theme-toggle" class="theme-toggle" aria-label="Toggle theme" title="Toggle theme">
              🌙
            </button>
          </div>
        </div>
      </div>

      <!-- Filter controls (collapsible within header) -->
      <div class="header-filter-wrapper" id="filter-wrapper">
        <div id="filters" class="filter-controls">
          <!-- Populated by JavaScript -->
        </div>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <main class="main-content">
    <!-- Projects Grid Section -->
    <section class="projects-section" id="projects-section">
      <div class="projects-container">

        <!-- Tile Grid (CSS Grid masonry layout) -->
        <div class="grid-container" id="grid-container" data-loading="true">
          <!-- Loading spinner -->
          <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <p>Loading projects...</p>
          </div>

          <!-- All tiles will be rendered here by JavaScript -->
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="site-footer" id="footer">
      <div class="footer-content">
        <p>Made with ❤️ by Avery</p>
      </div>
    </footer>
  </main>

  <!-- Error message template (hidden by default) -->
  <div id="error-message" class="error-message" style="display: none;">
    <i class="fas fa-exclamation-triangle"></i>
    <p id="error-text">An error occurred loading data.</p>
  </div>
</body>
</html>