Skip to content

Commit fcd5f44

Browse files
Arslan8Arslan8
committed
feat: populate real PSecLab information, publications, team, and projects from arslan8.github.io
1 parent 9c65ec0 commit fcd5f44

7 files changed

Lines changed: 566 additions & 150 deletions

File tree

‎src/App.jsx‎

Lines changed: 108 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import papersData from './data/papers.json';
1414
import membersData from './data/members.json';
1515
import projectsData from './data/projects.json';
1616

17-
import { Search, Filter, BookOpen, Users, Sparkles, Code, ShieldCheck, Terminal, Cpu } from 'lucide-react';
17+
import { Search, Filter, BookOpen, Users, Sparkles, ShieldCheck, Terminal, Cpu } from 'lucide-react';
1818

1919
export default function App() {
2020
// BibTeX Modal state
@@ -75,7 +75,7 @@ export default function App() {
7575
<Navbar />
7676

7777
{/* 1. HERO SECTION */}
78-
<section id="overview" className="relative min-h-[85vh] flex items-center justify-center pt-28 pb-20 overflow-hidden">
78+
<section id="overview" className="relative min-h-[88vh] flex items-center justify-center pt-28 pb-20 overflow-hidden">
7979
{/* 3D Interactive Three.js Network Canvas */}
8080
<Hero3D />
8181

@@ -87,17 +87,17 @@ export default function App() {
8787
{/* Badge */}
8888
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-mono bg-brand-950/80 text-brand-300 border border-brand-700/40 shadow-inner mb-6 backdrop-blur-md">
8989
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
90-
<span>Systems & Security Research Group</span>
90+
<span>Penn State Systems & Security Research Group</span>
9191
</div>
9292

9393
{/* Main Title */}
9494
<h1 className="text-4xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight text-white leading-tight max-w-5xl mx-auto">
95-
Welcome to <span className="text-gradient">PSecLab</span>
95+
Penn Systems & <span className="text-gradient">Security Lab</span>
9696
</h1>
9797

9898
{/* Subtitle */}
9999
<p className="mt-6 text-base sm:text-xl text-slate-300 max-w-3xl mx-auto font-normal leading-relaxed">
100-
Advancing research in systems security, software security, and trustworthy computing architectures.
100+
Directed by <strong>Prof. Arslan Khan</strong> at Penn State University (EECS & INSR). Advancing systems security—uncovering critical vulnerabilities and architecting secure mechanisms across <strong>operating systems</strong>, <strong>confidential computing</strong>, and <strong>embedded systems</strong>.
101101
</p>
102102

103103
{/* CTAs */}
@@ -115,7 +115,15 @@ export default function App() {
115115
className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl bg-slate-900/90 hover:bg-slate-800 border border-slate-700/80 text-slate-200 hover:text-white text-sm font-semibold transition"
116116
>
117117
<ShieldCheck className="w-4 h-4 text-cyan-400" />
118-
<span>Research</span>
118+
<span>Research Thrusts</span>
119+
</a>
120+
121+
<a
122+
href="#team"
123+
className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl bg-slate-900/90 hover:bg-slate-800 border border-slate-700/80 text-slate-200 hover:text-white text-sm font-semibold transition"
124+
>
125+
<Users className="w-4 h-4 text-emerald-400" />
126+
<span>People</span>
119127
</a>
120128

121129
<a
@@ -140,31 +148,21 @@ export default function App() {
140148
<div className="text-center max-w-3xl mx-auto mb-16">
141149
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-mono text-cyan-400 bg-cyan-950/50 border border-cyan-800/40 mb-3">
142150
<ShieldCheck className="w-3.5 h-3.5" />
143-
<span>Core Focus</span>
151+
<span>Research Program</span>
144152
</div>
145153
<h2 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
146-
Research Thrusts
154+
Core Research Thrusts
147155
</h2>
148156
<p className="text-slate-400 text-sm sm:text-base mt-3 leading-relaxed">
149-
Explore our primary research directions and projects.
157+
We design principled defenses and automated analysis pipelines to safeguard modern computing infrastructures.
150158
</p>
151159
</div>
152160

153-
{projectsData && projectsData.length > 0 ? (
154-
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
155-
{projectsData.map((project) => (
156-
<ProjectCard key={project.id} project={project} />
157-
))}
158-
</div>
159-
) : (
160-
<div className="text-center py-16 px-4 rounded-2xl bg-slate-900/40 border border-slate-800 text-slate-400 text-sm max-w-2xl mx-auto">
161-
<ShieldCheck className="w-8 h-8 text-cyan-400/60 mx-auto mb-3" />
162-
<p className="font-semibold text-slate-200 text-base">No research thrusts listed yet</p>
163-
<p className="text-xs text-slate-400 mt-1.5">
164-
Add research areas and projects in <code className="text-cyan-400 font-mono">src/data/projects.json</code>.
165-
</p>
166-
</div>
167-
)}
161+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
162+
{projectsData.map((project) => (
163+
<ProjectCard key={project.id} project={project} />
164+
))}
165+
</div>
168166
</div>
169167
</section>
170168

@@ -175,72 +173,66 @@ export default function App() {
175173
<div>
176174
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-mono text-brand-400 bg-brand-950/50 border border-brand-800/40 mb-3">
177175
<BookOpen className="w-3.5 h-3.5" />
178-
<span>Publications</span>
176+
<span>Selected Publications</span>
179177
</div>
180178
<h2 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
181-
Papers & Artifacts
179+
Publications & Papers
182180
</h2>
183181
<p className="text-slate-400 text-sm mt-2">
184-
Conference and journal papers authored by lab members.
182+
Published at top-tier security conferences (IEEE S&P, USENIX Security, EuroS&P).
185183
</p>
186184
</div>
187185

188186
{/* Publication Search */}
189-
{papersData && papersData.length > 0 && (
190-
<div className="relative w-full md:w-80">
191-
<Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
192-
<input
193-
type="text"
194-
placeholder="Search papers, authors, topics..."
195-
value={pubSearch}
196-
onChange={(e) => setPubSearch(e.target.value)}
197-
className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-brand-500 transition"
198-
/>
199-
</div>
200-
)}
187+
<div className="relative w-full md:w-80">
188+
<Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
189+
<input
190+
type="text"
191+
placeholder="Search papers, authors, topics..."
192+
value={pubSearch}
193+
onChange={(e) => setPubSearch(e.target.value)}
194+
className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-brand-500 transition"
195+
/>
196+
</div>
201197
</div>
202198

203199
{/* Tags / Filters */}
204-
{papersData && papersData.length > 0 && (
205-
<div className="flex flex-wrap items-center justify-between gap-4 mb-8 pb-4 border-b border-slate-800/60">
206-
<div className="flex flex-wrap items-center gap-1.5">
207-
<span className="text-xs text-slate-400 mr-2 flex items-center gap-1">
208-
<Filter className="w-3 h-3" />
209-
<span>Topic:</span>
210-
</span>
211-
{allTags.map((tag) => (
212-
<button
213-
key={tag}
214-
onClick={() => setSelectedTag(tag)}
215-
className={`px-3 py-1 rounded-lg text-xs font-medium transition ${
216-
selectedTag === tag
217-
? 'bg-brand-600 text-white font-semibold shadow-md shadow-brand-600/20'
218-
: 'bg-slate-900/80 text-slate-400 hover:text-white hover:bg-slate-800'
219-
}`}
220-
>
221-
{tag}
222-
</button>
223-
))}
224-
</div>
200+
<div className="flex flex-wrap items-center justify-between gap-4 mb-8 pb-4 border-b border-slate-800/60">
201+
<div className="flex flex-wrap items-center gap-1.5">
202+
<span className="text-xs text-slate-400 mr-2 flex items-center gap-1">
203+
<Filter className="w-3 h-3" />
204+
<span>Topic:</span>
205+
</span>
206+
{allTags.map((tag) => (
207+
<button
208+
key={tag}
209+
onClick={() => setSelectedTag(tag)}
210+
className={`px-3 py-1 rounded-lg text-xs font-medium transition ${
211+
selectedTag === tag
212+
? 'bg-brand-600 text-white font-semibold shadow-md shadow-brand-600/20'
213+
: 'bg-slate-900/80 text-slate-400 hover:text-white hover:bg-slate-800'
214+
}`}
215+
>
216+
{tag}
217+
</button>
218+
))}
219+
</div>
225220

226-
{allYears.length > 1 && (
227-
<div className="flex items-center gap-2">
228-
<span className="text-xs text-slate-400">Year:</span>
229-
<select
230-
value={selectedYear}
231-
onChange={(e) => setSelectedYear(e.target.value)}
232-
className="bg-slate-900 border border-slate-800 rounded-lg px-2.5 py-1 text-xs text-slate-300 focus:outline-none focus:border-brand-500"
233-
>
234-
{allYears.map((yr) => (
235-
<option key={yr} value={yr}>
236-
{yr === 'All' ? 'All Years' : yr}
237-
</option>
238-
))}
239-
</select>
240-
</div>
241-
)}
221+
<div className="flex items-center gap-2">
222+
<span className="text-xs text-slate-400">Year:</span>
223+
<select
224+
value={selectedYear}
225+
onChange={(e) => setSelectedYear(e.target.value)}
226+
className="bg-slate-900 border border-slate-800 rounded-lg px-2.5 py-1 text-xs text-slate-300 focus:outline-none focus:border-brand-500"
227+
>
228+
{allYears.map((yr) => (
229+
<option key={yr} value={yr}>
230+
{yr === 'All' ? 'All Years' : yr}
231+
</option>
232+
))}
233+
</select>
242234
</div>
243-
)}
235+
</div>
244236

245237
{/* Paper List */}
246238
{filteredPapers.length > 0 ? (
@@ -254,12 +246,14 @@ export default function App() {
254246
))}
255247
</div>
256248
) : (
257-
<div className="text-center py-16 px-4 rounded-2xl bg-slate-900/40 border border-slate-800 text-slate-400 text-sm max-w-2xl mx-auto">
258-
<BookOpen className="w-8 h-8 text-brand-400/60 mx-auto mb-3" />
259-
<p className="font-semibold text-slate-200 text-base">No publications listed yet</p>
260-
<p className="text-xs text-slate-400 mt-1.5">
261-
Add papers and BibTeX citations in <code className="text-brand-400 font-mono">src/data/papers.json</code>.
262-
</p>
249+
<div className="text-center py-16 bg-slate-900/40 rounded-2xl border border-slate-800">
250+
<p className="text-slate-400 text-sm">No publications matching your search criteria.</p>
251+
<button
252+
onClick={() => { setPubSearch(''); setSelectedTag('All'); setSelectedYear('All'); }}
253+
className="mt-3 text-xs text-brand-400 hover:underline"
254+
>
255+
Reset all filters
256+
</button>
263257
</div>
264258
)}
265259
</div>
@@ -272,58 +266,46 @@ export default function App() {
272266
<div>
273267
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-mono text-emerald-400 bg-emerald-950/50 border border-emerald-800/40 mb-3">
274268
<Users className="w-3.5 h-3.5" />
275-
<span>Members</span>
269+
<span>People</span>
276270
</div>
277271
<h2 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
278-
Lab Team & Members
272+
Lab Members & Alumni
279273
</h2>
280274
<p className="text-slate-400 text-sm mt-2">
281-
Faculty, researchers, students, and alumni.
275+
Faculty, graduate researchers, and alumni of PSecLab.
282276
</p>
283277
</div>
284278

285279
{/* Category tabs */}
286-
{membersData && membersData.length > 0 && (
287-
<div className="flex flex-wrap items-center gap-1.5 bg-slate-900 p-1.5 rounded-xl border border-slate-800">
288-
{[
289-
{ label: 'All', value: 'all' },
290-
{ label: 'Faculty / PI', value: 'pi' },
291-
{ label: 'Ph.D. Students', value: 'phd' },
292-
{ label: 'MS / Undergrads', value: 'ms_bs' },
293-
{ label: 'Alumni', value: 'alumni' }
294-
].map((tab) => (
295-
<button
296-
key={tab.value}
297-
onClick={() => setTeamCategory(tab.value)}
298-
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition ${
299-
teamCategory === tab.value
300-
? 'bg-brand-600 text-white font-semibold'
301-
: 'text-slate-400 hover:text-white'
302-
}`}
303-
>
304-
{tab.label}
305-
</button>
306-
))}
307-
</div>
308-
)}
280+
<div className="flex flex-wrap items-center gap-1.5 bg-slate-900 p-1.5 rounded-xl border border-slate-800">
281+
{[
282+
{ label: 'All', value: 'all' },
283+
{ label: 'Faculty / PI', value: 'pi' },
284+
{ label: 'Ph.D. & D.Eng.', value: 'phd' },
285+
{ label: 'Undergrads / MS', value: 'ms_bs' },
286+
{ label: 'Alumni', value: 'alumni' }
287+
].map((tab) => (
288+
<button
289+
key={tab.value}
290+
onClick={() => setTeamCategory(tab.value)}
291+
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition ${
292+
teamCategory === tab.value
293+
? 'bg-brand-600 text-white font-semibold'
294+
: 'text-slate-400 hover:text-white'
295+
}`}
296+
>
297+
{tab.label}
298+
</button>
299+
))}
300+
</div>
309301
</div>
310302

311303
{/* Members Grid */}
312-
{filteredMembers.length > 0 ? (
313-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
314-
{filteredMembers.map((member) => (
315-
<MemberCard key={member.id} member={member} />
316-
))}
317-
</div>
318-
) : (
319-
<div className="text-center py-16 px-4 rounded-2xl bg-slate-900/40 border border-slate-800 text-slate-400 text-sm max-w-2xl mx-auto">
320-
<Users className="w-8 h-8 text-emerald-400/60 mx-auto mb-3" />
321-
<p className="font-semibold text-slate-200 text-base">No team members listed yet</p>
322-
<p className="text-xs text-slate-400 mt-1.5">
323-
Add PI, students, and researchers in <code className="text-emerald-400 font-mono">src/data/members.json</code>.
324-
</p>
325-
</div>
326-
)}
304+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
305+
{filteredMembers.map((member) => (
306+
<MemberCard key={member.id} member={member} />
307+
))}
308+
</div>
327309
</div>
328310
</section>
329311

@@ -336,10 +318,10 @@ export default function App() {
336318
<span>Announcements</span>
337319
</div>
338320
<h2 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
339-
Lab News & Updates
321+
Recent News & Updates
340322
</h2>
341323
<p className="text-slate-400 text-sm sm:text-base mt-3 leading-relaxed">
342-
Recent news, milestones, and announcements.
324+
Paper acceptances, course announcements, and group milestones.
343325
</p>
344326
</div>
345327

0 commit comments

Comments
 (0)