Skip to content

avongpa/ispectral

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

1 Commit
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

i-Watch Research Portal

i-Watch Logo

Light Β· Material Β· Spectra

A comprehensive web-based research platform for spectroscopy, sensing, and instrumentation research. The i-Watch portal provides researchers with curated information on funding opportunities, spectroscopy applications, and spectrometer design principles.


🌟 Features

  • Funding Intelligence: Comprehensive database of local and international research funding opportunities
  • Spectroscopy Applications: Domain-specific applications across petrochemicals, pharmaceuticals, food & agriculture, and forensics
  • Spectrometer Design: Technical overview of optical architectures and key performance parameters
  • Interactive UI: Dynamic tab navigation with smooth animations
  • Responsive Design: Mobile-friendly interface that adapts to all screen sizes
  • Animated Background: Particle system with connection visualization

πŸš€ Live Demo

Visit the live site: https://YOUR-USERNAME.github.io/i-watch-research/

(Replace with your actual GitHub Pages URL after deployment)


πŸ“‹ Table of Contents


πŸ’» Installation

Prerequisites

  • Git installed on your system
  • A modern web browser (Chrome, Firefox, Safari, Edge)
  • A code editor (VS Code recommended)

Local Setup

  1. Clone the repository

    git clone https://github.com/YOUR-USERNAME/i-watch-research.git
    cd i-watch-research
  2. Open in browser

    • Simply open index.html in your web browser
    • Or use a local server:
      # Using Python
      python -m http.server 8000
      
      # Using Node.js
      npx serve
  3. Access the site

    • Direct file: file:///path/to/index.html
    • Local server: http://localhost:8000

πŸ“ Project Structure

i-watch-research/
β”œβ”€β”€ index.html              # Main HTML file
β”œβ”€β”€ images/
β”‚   └── logo.png           # i-Watch logo
β”œβ”€β”€ css/
β”‚   └── style.css          # Stylesheet with theme variables
β”œβ”€β”€ js/
β”‚   └── script.js          # Interactive functionality
β”œβ”€β”€ README.md              # This file
└── .gitignore             # Git ignore rules

πŸ› οΈ Technologies Used

  • HTML5: Semantic markup
  • CSS3:
    • CSS Variables for theming
    • Flexbox & Grid layouts
    • Animations & transitions
    • Responsive design with media queries
  • JavaScript (ES6+):
    • Tab navigation system
    • Canvas particle animation
    • Intersection Observer API
    • Smooth scroll behavior
  • Fonts:
    • Playfair Display (headings)
    • Outfit (body text)
    • JetBrains Mono (code/stats)

🎨 Usage

Navigation

The portal is organized into four main sections:

  1. Local Funding (πŸ›οΈ): National research grant opportunities
  2. Foreign Funding (🌐): International funding sources
  3. Applications (πŸ”¬): Spectroscopy application domains
  4. Spectrometer Design (βš™οΈ): Technical architectures and parameters

Click any sidebar tab to navigate between sections.

Key Components

  • Hero Sections: Overview statistics and descriptions
  • Card Grids: Detailed information cards with hover effects
  • Data Tables: Structured funding and programme comparisons
  • Callouts: Important tips and strategies
  • Visual Elements: Spectrum bars, architecture flows, parameter charts

🎨 Customization

Color Theme

Edit CSS variables in css/style.css:

:root {
  --teal: #00ffc8;     /* Primary accent */
  --blue: #4fa3ff;     /* Secondary accent */
  --amber: #ffb830;    /* Tertiary accent */
  --violet: #b57aff;   /* Quaternary accent */
  --red: #ff5f7e;      /* Alert/closed status */
}

Content Updates

  1. Funding Opportunities: Edit card content in index.html under <div class="cards-grid">
  2. Statistics: Update values in <div class="hero-stats">
  3. Tables: Modify data in <table class="data-table">

Adding New Sections

  1. Add tab button in sidebar:

    <button class="tab-btn t-teal" data-panel="newsection">
      <div class="tab-icon-wrap">πŸ”¬</div>
      <div class="tab-text">
        <span class="tab-title">New Section</span>
        <span class="tab-meta">DESCRIPTION</span>
      </div>
    </button>
  2. Add corresponding panel:

    <div class="panel" id="panel-newsection">
      <!-- Content here -->
    </div>

🀝 Contributing

Contributions are welcome! To contribute:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Development Guidelines

  • Maintain responsive design principles
  • Follow existing code style and structure
  • Test across multiple browsers
  • Update documentation for new features
  • Ensure accessibility standards (ARIA labels, semantic HTML)

πŸ“„ License

This project is licensed under the MIT License - see below for details:

MIT License

Copyright (c) 2026 i-Watch Research

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

πŸ“§ Contact

Project Maintainer: [Your Name]

  • πŸ“§ Email: your.email@university.edu
  • πŸ”— LinkedIn: [Your Profile]
  • 🐦 Twitter: [@yourhandle]
  • 🌐 Website: [Your Website]

Research Group: Sensing & Instrumentation Lab

  • πŸ›οΈ Institution: [Your University]
  • πŸ”¬ Department: [Your Department]

πŸ™ Acknowledgments

  • Research funding information compiled from NRF, TIA, Horizon Europe, and other public sources
  • Spectroscopy technical content based on established literature and industry standards
  • Built with modern web technologies and best practices
  • Inspired by the need for centralized research intelligence in the spectroscopy community

πŸ“Š Project Status

Version: 1.0 (February 2026)
Status: Active Development
Last Updated: February 19, 2026

Roadmap

  • Add search functionality
  • Integrate deadline tracking system
  • Add user accounts for saved opportunities
  • Build API for programmatic access
  • Create mobile app version
  • Add multi-language support

πŸ”– Keywords

spectroscopy research-funding instrumentation optics sensors embedded-systems machine-learning analytical-chemistry forensics web-portal academic-research


Made with πŸ”¬ by the i-Watch Research Team

Advancing spectroscopy research through technology

Report Bug Β· Request Feature Β· Documentation

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors