Electrochemistry Modelling and Management | 电化学建模与管理

A modern, responsive, and multilingual website built with TailwindCSS for TSu Energy, featuring optimized performance, accessibility, and professional code organization.

• 🌍 Multilingual Support: English and Chinese with automatic language detection
• 📱 Fully Responsive: Mobile-first design with TailwindCSS
• ⚡ Performance Optimized: Lazy loading, code splitting, and optimized assets
• ♿ Accessibility: WCAG 2.1 Level AA compliant
• 🎨 Modern Design: Gradient backgrounds, smooth animations, and interactive elements
• 🧩 Component-based: Reusable HTML components
• 📦 Modular JavaScript: Clean, maintainable code architecture

• Node.js (v14 or higher)
• npm or yarn

# Clone the repository
git clone https://github.com/TSu-Energy/TSu-Energy.github.io.git
cd TSu-Energy.github.io

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Open index.html in your browser to see the language selection page, or directly access:

• English: pages/en/index.html
• Chinese: pages/zh/index.html

TSu-Energy.github.io/
├── index.html              # Language selection page
├── pages/                  # Page files
│   ├── en/                # English pages
│   ├── zh/                # Chinese pages
│   └── blog/              # Blog posts
├── assets/                 # Assets
│   ├── css/               # Stylesheets
│   ├── js/                # JavaScript (modular)
│   │   ├── core/         # Core functionality
│   │   ├── modules/      # Feature modules
│   │   ├── utils/        # Utilities
│   │   └── vendor/       # Third-party libraries
│   └── images/            # Images
├── components/             # Reusable components
├── src/                    # Source files
│   └── styles/            # Style sources
├── config/                 # Configuration files
├── docs/                   # Documentation
└── public/                 # Public files

Edit config/tailwind.config.js:

colors: {
  primary: "#3056D3",    // Your brand color
  secondary: "#13C296",  // Secondary color
}

1. Update Text: Edit HTML files in pages/en/ or pages/zh/
2. Add Images: Place images in assets/images/ subdirectories
3. Modify Components: Edit files in components/

1. Edit src/styles/main.css
2. Run npm run build to compile
3. Changes will be reflected in assets/css/main.css

npm run dev          # Development mode with watch
npm run build        # Build for production (minified)
npm run build:prod   # Build and optimize
npm run format       # Format code with Prettier
npm run format:check # Check code formatting

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

• English Documentation
  • Developer Guide
• 中文文档
  • 快速开始
• Project Restructure
• Restructure Complete Report
• Optimization Summary

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• CSS Framework: TailwindCSS 3.0+
• Build Tools: PostCSS, Prettier
• Animation: WOW.js, CSS Animations
• Icons: SVG Icons

• First Contentful Paint: ~1.2s
• Largest Contentful Paint: ~2.1s
• Total Blocking Time: ~180ms
• Cumulative Layout Shift: 0.05

• WCAG 2.1 Level AA compliant
• Keyboard navigation support
• Screen reader optimized
• ARIA labels and roles
• Focus management
• Reduced motion support

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your 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

This project is licensed under the MIT License - see the LICENSE file for details.

TSu Energy Team

• Website: https://tsu-energy.github.io
• Email: info@tsu-energy.com

• Built with TailwindCSS
• UI Components from TailGrids
• Icons from Heroicons
• Animations powered by WOW.js

Version: 3.0.0 | Last Updated: 2026-03-12 | Status: ✅ Production Ready

Made with ❤️ by TSu Energy Team