SafeAndSecureAI.github.io/people.html at main · SafeAndSecureAI/SafeAndSecureAI.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>People — Safe and Secure AI</title>
    <meta name="description" content="Faculty, students, and collaborators in Safe and Secure AI." />
    <link rel="stylesheet" href="assets/css/site.css" />
    <link rel="icon" href="assets/images/logo.png" type="image/png" />
  </head>
  <body class="flex min-h-screen flex-col bg-canvas font-sans text-ink antialiased">
    <header class="sticky top-0 z-50 border-b border-white/10 bg-primary text-white shadow-sm">
      <div class="mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8">
        <a
          href="index.html"
          class="order-1 inline-flex min-w-0 items-center gap-2.5 text-lg font-semibold tracking-tight text-white transition-colors hover:text-accent"
        >
          <img
            src="assets/images/logo.png"
            alt=""
            width="32"
            height="32"
            class="h-8 w-auto shrink-0 object-contain"
            decoding="async"
          />
          <span class="truncate">Safe and Secure AI</span>
        </a>
        <button
          type="button"
          id="site-nav-toggle"
          class="order-2 inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md text-white/90 hover:bg-white/10 md:hidden"
          aria-expanded="false"
          aria-controls="site-nav"
          aria-label="Open menu"
        >
          <span class="site-nav-icon-open" aria-hidden="true">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="h-6 w-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
              />
            </svg>
          </span>
          <span class="site-nav-icon-close hidden" aria-hidden="true">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="h-6 w-6"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </span>
        </button>
        <nav
          id="site-nav"
          class="order-3 hidden w-full flex-col gap-1 border-t border-white/10 pt-3 text-sm font-medium md:order-2 md:flex md:w-auto md:flex-row md:items-center md:gap-2 md:border-t-0 md:pt-0"
          aria-label="Main"
        >
          <a
            href="index.html"
            class="block w-full rounded-md px-3 py-2 text-left text-white/85 transition-colors hover:bg-white/10 hover:text-white md:inline-block md:w-auto"
            >Home</a
          >
          <a
            href="papers.html"
            class="block w-full rounded-md px-3 py-2 text-left text-white/85 transition-colors hover:bg-white/10 hover:text-white md:inline-block md:w-auto"
            >Papers</a
          >
          <a
            href="projects.html"
            class="block w-full rounded-md px-3 py-2 text-left text-white/85 transition-colors hover:bg-white/10 hover:text-white md:inline-block md:w-auto"
            >Projects</a
          >
          <a
            href="people.html"
            class="block w-full rounded-md bg-white/15 px-3 py-2 text-left text-white md:inline-block md:w-auto"
            aria-current="page"
            >People</a
          >
        </nav>
      </div>
    </header>

    <main id="main-content" class="flex-1">
      <section class="border-b border-accent/25 bg-white" aria-labelledby="people-heading">
        <div class="mx-auto max-w-5xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
          <h1 id="people-heading" class="text-3xl font-bold tracking-tight text-ink sm:text-4xl">
            People
          </h1>
          <p class="mt-3 max-w-2xl text-lg text-ink/75">
            Faculty, researchers, and students working on AI safety and security.
          </p>
        </div>
      </section>

      <section class="py-12 sm:py-14" aria-label="Lab members">
        <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
          <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            <article class="flex gap-4 rounded-xl border border-accent/30 bg-white p-6 shadow-sm">
              <div
                class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-bold text-white"
                aria-hidden="true"
              >
                DM
              </div>
              <div>
                <h2 class="font-semibold text-ink">Dr. David Miller</h2>
                <p class="text-sm text-ink/65">Principal Investigator | Professor</p>
                <p class="mt-2 text-sm">
                  <a
                    href="mailto:djm25@example.org"
                    class="text-secondary transition-colors hover:text-primary"
                    >djm25@psu.edu</a
                  >
                </p>
              </div>
            </article>
            <article class="flex gap-4 rounded-xl border border-accent/30 bg-white p-6 shadow-sm">
              <div
                class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-secondary text-sm font-bold text-white"
                aria-hidden="true"
              >
                GK
              </div>
              <div>
                <h2 class="font-semibold text-ink">Dr. George Kesidis</h2>
                <p class="text-sm text-ink/65">Principal Investigator | Professor</p>
                <p class="mt-2 text-sm">
                  <a
                    href="mailto:gk2@example.org"
                    class="text-secondary transition-colors hover:text-primary"
                    >gk2@psu.edu</a
                  >
                </p>
              </div>
            </article>
            <article class="flex gap-4 rounded-xl border border-accent/30 bg-white p-6 shadow-sm">
              <div
                class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-primary/90 text-sm font-bold text-white"
                aria-hidden="true"
              >
                GY
              </div>
              <div>
                <h2 class="font-semibold text-ink">Guangmingmei Yang</h2>
                <p class="text-sm text-ink/65">Ph.D. Student</p>
                <p class="mt-2 text-sm">
                  <a
                    href="mailto:gzy5102@example.org"
                    class="text-secondary transition-colors hover:text-primary"
                    >gzy5102@psu.edu</a
                  >
                </p>
              </div>
            </article>
            <article class="flex gap-4 rounded-xl border border-accent/30 bg-white p-6 shadow-sm">
              <div
                class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-secondary/90 text-sm font-bold text-white"
                aria-hidden="true"
              >
                NA
              </div>
              <div>
                <h2 class="font-semibold text-ink">Nader Alfares</h2>
                <p class="text-sm text-ink/65">Ph.D. Student</p>
                <p class="mt-2 text-sm">
                  <a
                    href="mailto:nna5040@example.org"
                    class="text-secondary transition-colors hover:text-primary"
                    >nna5040@psu.edu</a
                  >
                </p>

              </div>
            </article>
            <article class="flex gap-4 rounded-xl border border-accent/30 bg-white p-6 shadow-sm">
              <div
                class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-bold text-white"
                aria-hidden="true"
              >
                ZL
              </div>
              <div>
                <h2 class="font-semibold text-ink">Zhengxing Li</h2>
                <p class="text-sm text-ink/65">Ph.D. Student</p>
                <p class="mt-2 text-sm">
                  <a
                    href="mailto:zkl5394@example.org"
                    class="text-secondary transition-colors hover:text-primary"
                    >zkl5394@psu.edu</a
                  >
                </p>
              </div>
            </article>
          </div>
        </div>
      </section>
    </main>

    <footer class="border-t border-accent/25 bg-primary text-sm text-white/80">
      <div class="mx-auto flex max-w-5xl flex-col gap-2 px-4 py-8 sm:flex-row sm:items-center sm:justify-between sm:px-6 lg:px-8">
        <p class="font-medium text-white">Safe and Secure AI</p>
        <p>Trustworthy systems and AI security research</p>
      </div>
    </footer>
    <script src="assets/js/site-nav.js" defer></script>
  </body>
</html>