Skip to content

README.md

Latest commit

 

History

History
252 lines (200 loc) · 6.72 KB

README.md

File metadata and controls

252 lines (200 loc) · 6.72 KB

EmPACT Lab Website

Official website for the Embodied Perception and Interaction Lab (EmPACT) at NTU Singapore, led by Assistant Professor Addison Lin Wang.

🌐 Live Website

Visit: https://namaibest.github.io/EmPACT-Lab/

📋 Overview

This is a Bootstrap 3-based educational website showcasing the lab's research, team members, publications, and news. The website uses a database-driven approach for easy content management without requiring backend infrastructure.

🗂️ Page Structure

1. Home (index.html)

  • Lab introduction and mission statement
  • Principal Investigator information
  • Research focus areas
  • Quick links to other sections

2. Research (research.html)

  • Three main research pillars:
    • Neuro- and Physics-inspired Sensing and Perception
    • Spatial Intelligence and Edge AI
    • Robot Learning and Human-Agent Interaction
  • Uses Font Awesome icons

3. People (people.html)

  • Principal Investigator section
  • Team members organized by categories:
    • PhD Students
    • MSc Students
    • Visiting PhD Students
    • Research Associates & Fellows
  • LinkedIn integration - entire card is clickable when LinkedIn URL is provided

4. Publications (publication.html)

  • Grouped by year (2026, 2025, 2024, 2023, etc.)
  • Summarized format (e.g., "8 papers accepted to CVPR 2024")
  • Color-coded venue badges
  • Automatic year-based organization

5. News (news.html)

  • Lab announcements and achievements
  • Color-coded by type:
    • 🎤 Keynote (red)
    • 🏆 Award (orange)
    • 📄 Publication (green)
    • 👥 People (blue)
    • 📢 Announcement (purple)

6. Contact (contact.html)

  • Contact form with Google Sheets integration
  • Lab address and contact information
  • Form submissions automatically saved to Google Sheets

🗄️ Database Structure

All content is managed through JavaScript objects at the top of each HTML file. No backend database required!

Research Database (research.html)

const researchData = {
    sections: [
        {
            title: "Research Area Title",
            areas: [
                {
                    icon: "fa-icon-name",  // Font Awesome icon
                    title: "Sub-area Title",
                    description: "Description text"
                }
            ]
        }
    ]
};

People Database (people.html)

const peopleData = {
    phd: [
        {
            name: "Full Name",
            role: "PhD",
            research: "Research interests",
            image: "filename.jpg",  // Must be in assets/People_Images/
            linkedin: "https://linkedin.com/in/username"  // Optional
        }
    ],
    msc: [...],
    visiting: [...],
    fellows: [...]
};

Features:

  • Images stored in assets/People_Images/
  • Circular 160px profile images
  • LinkedIn integration - entire card is clickable when URL provided
  • Empty linkedin: "" for members without LinkedIn

Publications Database (publication.html)

const publicationsData = [
    {
        date: "2025-06",  // YYYY-MM format
        venue: "CVPR 2025",
        title: "3 papers accepted to CVPR 2025",  // Use summarized format
        authors: "EmPACT Lab Team",
        link: "#",  // Optional paper link
        count: 3  // Optional - for grouped papers
    }
];

Features:

  • Automatically groups by year
  • Color-coded venue badges
  • Hover effects on cards
  • Paper links open in new tab

News Database (news.html)

const newsData = [
    {
        date: "2025-11",
        type: "keynote",  // keynote, award, publication, people, announcement
        title: "News headline",
        description: "Detailed description"
    }
];

News Types:

  • keynote - Speaking engagements (red)
  • award - Awards and recognition (orange)
  • publication - Paper acceptances (green)
  • people - Team updates (blue)
  • announcement - General announcements (purple)

🎨 Design System

Colors

  • Primary Red: #dc2626, #ef4444
  • Text: #1a1a1a (headings), #666 (body)
  • Borders: #e8e8e8
  • Background: #f9f9f9

Card Styling

  • Gradient background: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 100%)
  • Border radius: 12px
  • Box shadow: 0 2px 10px rgba(0,0,0,0.08)
  • Hover effect: Lifts up with enhanced shadow

Typography

  • Font: Open Sans (300, 400, 700)
  • Headings: 600 weight, #1a1a1a
  • Body: 400 weight, #666

🛠️ Technical Stack

  • Framework: Bootstrap 3.0
  • Icons: Font Awesome 4.x
  • Fonts: Google Fonts (Open Sans)
  • JavaScript: Vanilla JS (ES6)
  • Backend: None (static site with Google Sheets integration)

📁 File Structure

NTU new website/
├── index.html              # Home page
├── research.html           # Research areas
├── people.html            # Team members
├── publication.html       # Publications list
├── news.html              # Lab news
├── contact.html           # Contact form
├── assets/
│   ├── css/
│   │   ├── bootstrap.min.css
│   │   ├── font-awesome.min.css
│   │   ├── bootstrap-theme.css
│   │   └── style.css
│   ├── js/
│   │   ├── bootstrap.min.js
│   │   └── custom.js
│   ├── images/
│   │   ├── logo.png
│   │   └── Prof.jpg
│   └── People_Images/      # Team member photos
│       ├── [Name].jpg
│       └── ...
└── README.md

🚀 Deployment

GitHub Pages

  1. Push changes to GitHub repository
  2. Go to repository Settings → Pages
  3. Select branch: main, folder: / (root)
  4. Save and wait for deployment
  5. Site will be live at: https://[username].github.io/[repo-name]/

Local Development

Simply open any HTML file in a web browser. No build process required.

🔧 Customization Tips

Changing Colors

Search and replace color codes:

  • Primary red: #dc2626 and #ef4444
  • Use find/replace across all HTML files

Changing Icons

Research page icons can be changed by updating the icon field:

Adding New Sections

Follow the existing pattern:

  1. Create database object at top of page
  2. Write generator function
  3. Call on DOMContentLoaded

📞 Contact

Embodied Perception and Interaction Lab (EmPACT)
School of Electrical and Electronic Engineering
Nanyang Technological University, Singapore

Email: linwang@ntu.edu.sg
Phone: (65) 6790-5629

📄 License

© 2025 EmPACT Lab, NTU Singapore. All rights reserved.

Last Updated: November 2025
Maintained by: EmPACT Lab Team