DISSECT Research Group Website

A modern, responsive website for the DISSECT research group, built with React and Vite. DISSECT is a research-driven initiative focused on advancing cybersecurity best practices across internet-based services, with particular emphasis on supporting public sector institutions.

Features

• Dynamic Content Management: All key content (publications, projects, team members) loaded from JSON files for easy updates
• Responsive Design: Fully responsive layout that works seamlessly on desktop, tablet, and mobile devices
• Modern UI: Clean, professional design using TailwindCSS with a consistent gray theme
• Fast Performance: Built with Vite for lightning-fast development and optimized production builds
• Easy Customization: Simple JSON-based content management system

Tech Stack

• React 19 - UI library
• Vite 5 - Build tool and development server
• React Router DOM v6 - Client-side routing
• TailwindCSS - Utility-first CSS framework
• TypeScript - Type-safe component development
• Lucide React - Icon library

Project Structure

new-website/
├── public/
│   ├── data/
│   │   ├── publications.json    # Research publications data
│   │   ├── projects.json        # Active projects data
│   │   └── members.json         # Team members data
│   └── images/
│       ├── logo-dissect.png     # DISSECT logo
│       └── team/                # Team member profile images
├── src/
│   ├── components/
│   │   ├── Header.tsx           # Navigation header
│   │   ├── Footer.tsx           # Site footer
│   │   └── Layout.tsx           # Page layout wrapper
│   ├── pages/
│   │   ├── Home.tsx             # Landing page
│   │   ├── About.tsx            # About DISSECT & Opt-out form
│   │   ├── Team.tsx             # Team members page
│   │   ├── Projects.tsx         # Research projects page
│   │   ├── Publications.tsx     # Publications page
│   │   └── NotFound.tsx         # 404 page
│   ├── App.tsx                  # Main app component with routes
│   └── main.tsx                 # Application entry point
└── package.json

Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd new-website

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run lint - Run ESLint

Content Management

Adding/Editing Publications

Edit /public/data/publications.json:

{
  "id": 1,
  "title": "Your Publication Title",
  "authors": ["Author 1", "Author 2"],
  "venue": "Conference/Journal Name",
  "year": 2026,
  "type": "Conference",
  "doi": "10.1234/example",
  "pdf": "https://link-to-pdf.com",
  "abstract": "Your abstract text here..."
}

Publications are automatically sorted by ID in descending order (newest first). Abstracts are truncated to 200 characters on display.

Adding/Editing Projects

Edit /public/data/projects.json:

{
  "id": 1,
  "name": "Project Name",
  "description": "Project description",
  "icon": "Shield",
  "tags": ["tag1", "tag2"],
  "github": "https://github.com/...",
  "demo": "https://demo-link.com",
  "status": "Active"
}

Available icons: Shield, Code, Search (from Lucide React)

Adding/Editing Team Members

Edit /public/data/members.json:

{
  "id": 1,
  "name": "Dr. Jane Doe",
  "position": "Principal Investigator",
  "bio": "Brief biography...",
  "email": "jane.doe@dissect.research",
  "github": "https://github.com/janedoe",
  "linkedin": "https://linkedin.com/in/janedoe",
  "website": "https://janedoe.com",
  "image": "jane-doe.jpg"
}

Profile Images: Place images in /public/images/team/ and reference the filename in the image field. If no image is provided, initials will be displayed instead.

Social Links: All fields (email, github, linkedin, website) are optional. Icons only appear when the corresponding field exists.

Updating the Opt-Out Form

In /src/pages/About.tsx, replace YOUR_GOOGLE_FORM_URL_HERE with your Google Form embed URL:

1. Open your Google Form
2. Click "Send" → Click the <> (embed) icon
3. Copy the URL from the src attribute
4. Paste it into the iframe src in About.tsx

Customization

Colors

The site uses a gray theme (gray-800/gray-900). To change colors, search and replace color classes in the component files.

Logo

Replace /public/images/logo-dissect.png with your logo. The current sizing uses h-72 with negative margins for optimal display.

Fonts and Styling

Global styles are in /src/index.css. TailwindCSS configuration is in tailwind.config.js.

Building for Production

npm run build

The production-ready files will be in the dist/ directory.

Deployment

The built site can be deployed to any static hosting service:

• Vercel: Connect your repository and deploy automatically
• Netlify: Drag and drop the dist/ folder or connect via Git
• GitHub Pages: Use GitHub Actions to build and deploy
• Any static host: Upload the contents of dist/ folder

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

See LICENSE file for details.

Contact

For questions about DISSECT, visit the website or contact the team through the information provided on the site.