{"id":30269097,"url":"https://github.com/shineii86/aniresizer","last_synced_at":"2025-08-16T01:40:01.336Z","repository":{"id":308724937,"uuid":"1033858607","full_name":"Shineii86/AniResizer","owner":"Shineii86","description":"🧪 AniResizer – A Dr. Stone-themed, client-side image resizer built with pure HTML, CSS, and JavaScript. Resize, compress, and preview images locally—no server, no upload, just science.","archived":false,"fork":false,"pushed_at":"2025-08-07T15:06:45.000Z","size":41,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-07T15:09:55.984Z","etag":null,"topics":["anime-themed","animejs","canvas","client-side","dr-stone","html5","image-compression","image-resizer","javascript","offline","particlesjs","vanilla-js"],"latest_commit_sha":null,"homepage":"https://shineii86.github.io/AniResizer/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Shineii86.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-07T13:05:26.000Z","updated_at":"2025-08-07T15:06:49.000Z","dependencies_parsed_at":"2025-08-07T15:10:23.412Z","dependency_job_id":"c29f50f9-685e-4104-98a7-e81e9f685744","html_url":"https://github.com/Shineii86/AniResizer","commit_stats":null,"previous_names":["shineii86/aniresizer"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Shineii86/AniResizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shineii86%2FAniResizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shineii86%2FAniResizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shineii86%2FAniResizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shineii86%2FAniResizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Shineii86","download_url":"https://codeload.github.com/Shineii86/AniResizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shineii86%2FAniResizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270657491,"owners_count":24623458,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-15T02:00:12.559Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["anime-themed","animejs","canvas","client-side","dr-stone","html5","image-compression","image-resizer","javascript","offline","particlesjs","vanilla-js"],"created_at":"2025-08-16T01:40:00.474Z","updated_at":"2025-08-16T01:40:01.315Z","avatar_url":"https://github.com/Shineii86.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧪 AniResizer\n*Dr. Stone-Inspired Client-Side Image Resizer*\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)\n[![Language](https://img.shields.io/badge/Language-JavaScript-yellow.svg)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n[![Markup](https://img.shields.io/badge/Markup-HTML5-orange.svg)](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)\n[![Style](https://img.shields.io/badge/Style-CSS3-blue.svg)](https://developer.mozilla.org/en-US/docs/Web/CSS)\n[![Deploy-Vercel](https://img.shields.io/badge/Deploy-Vercel-black.svg)](https://vercel.com)\n[![Deploy-Netlify](https://img.shields.io/badge/Deploy-Netlify-brightgreen.svg)](https://netlify.com)\n[![Live Demo](https://img.shields.io/badge/Demo-Available-brightgreen.svg)](#demo)\n\n\u003e ⚗️ **“This is exhilarating! With science and code, we’ll rebuild civilization — one pixel at a time.”**\n\u003e — *Senku Ishigami*\n\n---\n\n## 📌 Table of Contents\n\n* [About](#-about)\n* [Screenshots](#-screenshots)\n* [Features](#-features)\n* [Live Demo](#-live-demo)\n* [Technology Stack](#-technology-stack)\n* [Installation](#-installation)\n* [Usage](#-usage)\n* [Configuration \u0026 Options](#-configuration--options)\n* [Project Structure](#-project-structure)\n* [Contributing](#-contributing)\n* [License](#-license)\n* [Contact](#-contact)\n\n---\n\n## 📖 About\n\n**AniResizer** is a high-performance, privacy-respecting image resizer inspired by the anime *Dr. Stone*. It is built entirely with HTML5, CSS3, and vanilla JavaScript (ES6+) to work seamlessly in the browser without uploading images to any server.\n\nAniResizer allows users to:\n\n* Resize images (JPG, PNG, WebP)\n* Maintain aspect ratio\n* Adjust compression and quality\n* See real-time size and dimension feedback\n* Download resized images instantly\n\nAll operations are done **client-side**, making it fast, secure, and offline-capable.\n\n---\n\n## 🖼️ Screenshots\n\n\u003e Coming soon: include visual previews of the interface (upload panel, resize controls, preview pane, etc.)\n\n---\n\n## 🌟 Features\n\n✅ **Privacy First**\n\n\u003e Images never leave your browser—no server uploads. Your data stays on your device.\n\n✅ **Aspect-Ratio Locking**\n\n\u003e Auto-calculates missing dimension when resizing if the lock is active.\n\n✅ **Quality Slider**\n\n\u003e Adjust compression level for JPEG, PNG, or WebP formats.\n\n✅ **Live Feedback**\n\n\u003e Shows both original and target file sizes \u0026 dimensions instantly.\n\n✅ **Smooth UI Animations**\n\n\u003e Using Anime.js for progress bars, floating particles, and transitions.\n\n✅ **Dr. Stone Themed**\n\n\u003e Styled with a modern yet scientific aesthetic, featuring quotes, green hues, and glow effects.\n\n✅ **Mobile-Optimized**\n\n\u003e Responsive and accessible across devices, including Android/iOS.\n\n✅ **Offline-Ready**\n\n\u003e Works as a fully static app—host on GitHub Pages, Vercel, or Netlify.\n\n---\n\n## 🔗 Live Demo\n\n* 🌐 **GitHub Pages:** [https://Shineii86.github.io/AniResizer](https://Shineii86.github.io/AniResizer)\n* ▲ **Vercel:** [https://aniresizer.vercel.app](https://aniresizer.vercel.app) Soon...\n* 🌍 **Netlify:** [https://aniresizer.netlify.app](https://aniresizer.netlify.app) Soon...\n\n---\n\n## 🛠️ Technology Stack\n\n| Layer     | Technology                                                                              |\n| --------- | --------------------------------------------------------------------------------------- |\n| Markup    | [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)                  |\n| Style     | [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS) w/ Flexbox \u0026 Custom Properties |\n| Logic     | [JavaScript (ES6+)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)            |\n| Animation | [Anime.js](https://animejs.com) for interactivity                                       |\n| Icons     | [Font Awesome 6](https://fontawesome.com)                                               |\n| Hosting   | GitHub Pages, [Vercel](https://vercel.com), [Netlify](https://netlify.com)              |\n\n---\n\n## 🧩 Installation\n\n### 📦 Clone \u0026 Setup\n\n```bash\ngit clone https://github.com/Shineii86/AniResizer.git\ncd AniResizer\n```\n\n### 🖥️ Run Locally\n\n#### Using Live Server (VS Code Extension):\n\n* Right-click `index.html` → `Open with Live Server`\n\n#### Or use http-server:\n\n```bash\nnpm install -g http-server\nhttp-server .\n```\n\n---\n\n## 🚀 Usage\n\n1. **Upload Image**\n\n   * Drag \u0026 drop into the upload panel or click **Browse Files**.\n\n2. **Preview Metadata**\n\n   * Original dimensions and file size are shown.\n\n3. **Resize Image**\n\n   * Enter width/height. Aspect ratio lock optional.\n\n4. **Adjust Compression**\n\n   * Move the quality slider from 10% to 100%.\n\n5. **Preview Changes**\n\n   * Output preview and new file size displayed.\n\n6. **Download**\n\n   * One-click download with timestamped filename.\n\n7. **Reset**\n\n   * Clears all inputs and resets the interface.\n\n---\n\n## ⚙️ Configuration \u0026 Options\n\n| Feature             | Value                            |\n| ------------------- | -------------------------------- |\n| Supported Formats   | `.jpg`, `.jpeg`, `.png`, `.webp` |\n| Max File Size       | 30 MB                            |\n| Min Dimensions      | 1×1 pixels                       |\n| Quality Range       | 10% – 100%                       |\n| Output Naming       | `resized_\u003ctimestamp\u003e.\u003cext\u003e`      |\n| Theme Customization | Via CSS `:root` variables        |\n\nCustomize colors, fonts, and layout by editing `index.html`'s `\u003cstyle\u003e` block.\n\n---\n\n## 📁 Project Structure\n\n```\nAniResizer/\n├── index.html          # Main HTML + inline CSS \u0026 JS\n├── LICENSE             # MIT License\n├── README.md           # This file\n└── assets/             # Optional assets (icons, images, etc.)\n    ├── logo.svg\n    ├── background.jpg\n    └── fonts/\n```\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Feel free to:\n\n* 💡 Suggest features or improvements\n* 🐛 Report bugs or usability issues\n* 🤝 Submit pull requests\n\n### 🚧 How to Contribute\n\n1. Fork this repo\n2. Create your feature branch:\n\n   ```bash\n   git checkout -b feature/amazing-feature\n   ```\n3. Commit your changes:\n\n   ```bash\n   git commit -m \"Add amazing feature\"\n   ```\n4. Push to your branch:\n\n   ```bash\n   git push origin feature/amazing-feature\n   ```\n5. Open a Pull Request\n\nPlease follow the [Contributor Covenant Code of Conduct](https://www.contributor-covenant.org/).\n\n---\n\n## 📜 License\n\nThis project is licensed under the **MIT License**.\nSee the [LICENSE](LICENSE) file for details.\n\n---\n\n## 👤 Contact\n\n**Shinei Nouzen**\n\n* GitHub: [@Shineii86](https://github.com/Shineii86)\n* Twitter: [@Shineii86](https://twitter.com/Shineii86)\n\n---\n\n\u003e 🧬 Rebuild your images with science and precision—just like Senku would!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshineii86%2Faniresizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshineii86%2Faniresizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshineii86%2Faniresizer/lists"}