feat: initialize modern PSecLab academic website with GitHub Actions deployment

Author: Arslan8

.github/workflows/deploy.yml

@@ -0,0 +1,52 @@
+name: Deploy Lab Website to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build static site
+        run: npm run build
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1 +1,139 @@
-# PSecLab.github.io
+# PSecLab Website | Penn Systems & Security Lab
+
+Official repository and website source for **PSecLab** (Systems & Security Research Group).
+Hosted live at: **[https://pseclab.github.io](https://pseclab.github.io)**
+
+---
+
+## 🚀 Technology Stack
+
+- **Base Framework**: [Vite](https://vitejs.dev/) + [React](https://react.dev/)
+- **Styling**: [Tailwind CSS](https://tailwindcss.com/) with cyber/dark theme & responsive typography
+- **Interactivity & 3D**: [Three.js](https://threejs.org/) for the dynamic interactive hero network visualization
+- **Icons**: [Lucide React](https://lucide.dev/)
+- **Hosting & CI/CD**: [GitHub Pages](https://pages.github.com/) via GitHub Actions (`.github/workflows/deploy.yml`)
+
+---
+
+## 📁 Project Architecture & Data Management
+
+Adding new publications, lab members, research thrusts, or news updates is as simple as editing JSON files in `src/data/`:
+
+```
+lab-website/
+├── .github/
+│   └── workflows/
+│       └── deploy.yml      # Automated GitHub Pages CI/CD workflow
+├── src/
+│   ├── components/         # Hero3D, Navbar, Footer, PaperCard, MemberCard, ProjectCard, NewsSection, etc.
+│   ├── data/
+│   │   ├── members.json    # Students, PI, postdocs, alumni, contacts & photos
+│   │   ├── papers.json     # BibTeX citations, abstracts, PDFs, code links, awards
+│   │   ├── projects.json   # Research thrusts, grants, open-source software tools
+│   │   └── news.json       # Announcements, paper acceptances, awards
+│   ├── styles/
+│   │   └── index.css       # Tailwind CSS directives and custom glow styling
+│   ├── App.jsx             # Main interactive application layout
+│   └── main.jsx
+├── public/                 # Static assets, PDFs, images
+├── package.json
+└── vite.config.js
+```
+
+---
+
+## 🛠️ Local Development
+
+### 1. Prerequisites
+Ensure you have **Node.js (>= 18.x)** and **npm** installed:
+```bash
+node -v
+npm -v
+```
+
+### 2. Install Dependencies
+```bash
+npm install
+```
+
+### 3. Run Local Dev Server
+```bash
+npm run dev
+```
+Open your browser at `http://localhost:5173`.
+
+### 4. Build for Production
+```bash
+npm run build
+```
+Outputs static HTML, CSS, and JS bundles into the `dist/` folder.
+
+---
+
+## 📝 How to Update Lab Data
+
+### Adding a New Paper
+Add an entry to [`src/data/papers.json`](src/data/papers.json):
+```json
+{
+  "id": "paper-slug",
+  "title": "Your Paper Title",
+  "authors": "Author 1, Author 2, Lab PI",
+  "venue": "IEEE S&P 2026",
+  "year": 2026,
+  "award": "Best Paper Award",
+  "highlight": true,
+  "tags": ["Binary Analysis", "Systems Security"],
+  "abstract": "Summary abstract here...",
+  "pdfUrl": "https://arxiv.org/...",
+  "codeUrl": "https://github.com/PSecLab/...",
+  "bibtex": "@inproceedings{...}"
+}
+```
+
+### Adding / Updating Members
+Add an entry to [`src/data/members.json`](src/data/members.json):
+```json
+{
+  "id": "phd-john",
+  "name": "Jane Doe",
+  "role": "Ph.D. Student",
+  "category": "phd", // "pi" | "phd" | "ms_bs" | "alumni"
+  "affiliation": "Penn State University",
+  "avatar": "https://example.com/photo.jpg",
+  "bio": "Researching hardware enclaves and system verification.",
+  "researchInterest": ["TEE", "Hardware Security"],
+  "email": "jane@pseclab.org",
+  "github": "https://github.com/...",
+  "googleScholar": "https://scholar.google.com/..."
+}
+```
+
+### Adding a News Milestone
+Add an entry to [`src/data/news.json`](src/data/news.json):
+```json
+{
+  "id": "news-2025-spring",
+  "date": "May 2025",
+  "title": "Paper Accepted to USENIX Security '25!",
+  "category": "Paper Award",
+  "description": "Our paper on protocol verification was accepted.",
+  "link": "#publications"
+}
+```
+
+---
+
+## ⚙️ Automated GitHub Pages Deployment
+
+This repository uses **GitHub Actions** to automatically build and deploy the site upon any push to `main`.
+
+### Enabling GitHub Pages in Repository Settings:
+1. Go to repository **Settings** → **Pages** (`https://github.com/PSecLab/PSecLab.github.io/settings/pages`).
+2. Under **Build and deployment** → **Source**, select **GitHub Actions**.
+3. Push changes to `main`. The `.github/workflows/deploy.yml` workflow will trigger and publish the website to `https://pseclab.github.io`.
+
+---
+
+## 📄 License
+PSecLab Research Group. All rights reserved.

index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en" class="scroll-smooth dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338a5f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></svg>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="PSecLab (Systems & Security Lab) - Advancing Trustworthy Systems, Binary Analysis, Confidential Computing, Embedded Security, and Cyber-Physical Systems." />
+    <meta name="keywords" content="PSecLab, Security Research, Systems Security, Binary Analysis, Fuzzing, Embedded Systems, Confidential Computing, Penn State" />
+    <title>PSecLab | Systems & Security Research Group</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  </head>
+  <body class="bg-slate-950 text-slate-100 font-sans selection:bg-brand-500 selection:text-white transition-colors duration-200">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>