The official landing page for the Improve-ImgSLI application, a modern and responsive website built to showcase its features, releases, and development journey.
This repository contains the source code for the official landing page of Improve-ImgSLI, an advanced open-source image comparison tool.
The website is a static, single-page application designed to be fast, responsive, and easy to navigate. It provides all essential information for users and potential contributors, including feature descriptions, installation guides, release history, and the project's development roadmap.
- 🎨 Modern & Responsive Design: A clean, dark-themed UI that looks great on both desktop and mobile devices.
- 🌍 Multi-Language Support: Built-in internationalization (i18n) with seamless language switching between English, Russian, and Chinese.
- 🚀 Interactive Elements: Features like a smooth-scrolling navigation, copy-to-clipboard buttons for code blocks, and an elegant image lightbox gallery with dynamic, multilingual captions enhance the user experience.
- 📄 Rich Content Sections: Clearly organized sections for the app's features, releases, development story, and future roadmap.
- ⚡ Zero Dependencies: Built with pure HTML, CSS, and Vanilla JavaScript for maximum performance and simplicity.
This website was built with fundamental web technologies, without any external frameworks.
- HTML5
- CSS3
- Vanilla JavaScript
A live version of the website is hosted on GitHub Pages.
➡️ Click here to view the Live Demo
Show Development Story
This website was brought to life in a total of 10 hours, split into an initial rapid development sprint and a final polishing phase, showcasing the power of modern AI-assisted workflows.
-
Phase 1: Initial 6-Hour Sprint
- Conceptualization & Styling (Claude): The initial design direction, layout ideas, and overall aesthetic were sketched out with the help of Claude. Its ability to generate creative and coherent styling concepts provided the foundational look and feel for the project.
- Intensive Development (Gemini & Cursor): The bulk of the coding—including the HTML structure, final CSS implementation, and all JavaScript logic—was hammered out in a highly productive session using a combination of Google's Gemini and Cursor. This AI pairing was instrumental in refining the initial concepts and writing clean code for interactive features like the i18n switcher and initial lightbox.
-
Phase 2: Polishing & Deployment (4 hours)
- Following the initial build, this stage involved deploying the site to GitHub Pages, tackling hosting-specific issues, and conducting a thorough UX/UI polish. Key improvements included adding dynamic, multilingual captions to the image lightbox, ensuring a consistent layout across all pages, and consolidating project assets for streamlined maintenance and self-contained deployment.
The entire process, from concept to a fully functional and deployed multi-language site in just 10 hours, serves as a testament to the efficiency of AI-augmented development.
- Phase 3: Infrastructure Stabilization & UX Refinement (Background)
- This phase focused on infrastructure permanence and detailed user experience fixes. Despite initial fatigue, I successfully secured a permanent domain name—an inexpensive but functional solution—and managed the necessary redirects to decouple the site from the initial GitHub Pages URL.
- A brief attempt was made to migrate the site behind the Cloudflare CDN for enhanced performance and security. However, this CDN caused unforeseen conflicts with the existing hosting configuration, leading to a quick decision to revert the infrastructure back to the reliable GitHub Pages setup, with the new domain pointing successfully.
- In parallel, significant UX cleanup took place: the accordion/collapsible elements were debugged and repaired for smooth operation, the site's navigation panel was critically adjusted to be sticky to the viewport (the top of the browser window) rather than the top of the entire page, and various other minor layout and responsiveness issues were patched up.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See the LICENSE.txt file for more information.