Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/madhurimarawat/nameblock-designer
NameBlock-Designer is a web-based tool for creating personalized name blocks with customizable colors and dynamic themes. Users can download their designs as images, and the tool is fully responsive, providing a seamless experience on all devices.
https://github.com/madhurimarawat/nameblock-designer
beautiful-themes css deployement documentation dynamic-update easy-to-use-autoclicker fancy-design html html-css-javascript illustrations interactive-visualizations intermediate-project logo name-blocks name-designer portfolio-website square-block-design themes user-friendly-interface web-development
Last synced: 25 days ago
JSON representation
NameBlock-Designer is a web-based tool for creating personalized name blocks with customizable colors and dynamic themes. Users can download their designs as images, and the tool is fully responsive, providing a seamless experience on all devices.
- Host: GitHub
- URL: https://github.com/madhurimarawat/nameblock-designer
- Owner: madhurimarawat
- License: mit
- Created: 2024-12-07T07:52:11.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-07T08:23:54.000Z (about 1 month ago)
- Last Synced: 2024-12-07T08:26:16.578Z (about 1 month ago)
- Topics: beautiful-themes, css, deployement, documentation, dynamic-update, easy-to-use-autoclicker, fancy-design, html, html-css-javascript, illustrations, interactive-visualizations, intermediate-project, logo, name-blocks, name-designer, portfolio-website, square-block-design, themes, user-friendly-interface, web-development
- Language: CSS
- Homepage: https://madhurimarawat.github.io/NameBlock-Designer/
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NameBlock-Designer
NameBlock-Designer is a web-based tool for creating personalized name blocks with customizable colors and dynamic themes. Users can download their designs as images, and the tool is fully responsive, providing a seamless experience on all devices.
---
## Features
- **Dynamic Block Creation**: Converts each character of the entered name into a colorful block.
- **Customizable Colors**: Allows individual color selection for each block.
- **Automatic Coloring**: Provides a one-click option to apply a preset color palette.
- **Image Download**: Lets users save their creations as PNG images.
- **Gradient Background**: Users can apply gradient background effects for enhanced visuals.
- **Multiple Themes**: Includes various themes for an engaging user experience, such as:
- **🌅 Sunset Vibes**
- **🌊 Ocean Breeze**
- **🌙 Lavender Dream**
- **🍃 Green Freshness**
- **🔥 Fiery Passion**
- **🌇 Golden Hour**
- **🚢 Calm Seas**
- **💖 Peachy Pink**
- **🍂 Autumn Leaves**
- **🌌 Mysterious Night**
- **☁️ Pastel Dream**
- **🌴 Tropical Paradise**
- **🌫️ Purple Haze**
- **🍓 Berry Blast**
- **🌤️ Silver Lining**
- **🌬️ Cool Breeze**
---
## Directory Structure
```plaintext
NameBlock-Designer/
|
├── index.html # Main HTML structure of the application
├── css/
│ └── index.css # CSS file for styling the webpage
├── js/
│ └── index.js # JavaScript file for interactivity and functionality
└── images/
├── Logo.png # Application logo
├── NAMEBLOCK DESIGNER_NameBlock.png # Main illustration created using the tool
└── Designed Name_Transparent.png # Example with transparent background
```
---
## Usage
1. Open `index.html` in a browser.
2. Enter your desired name in the input field.
3. Use the color pickers to customize individual block colors or apply the preset palette using the **Auto Colors** button.
4. Optionally, choose a theme from the available options, such as **Sunset Vibes** or **Ocean Breeze**. This step does not affect the result; the output will be a transparent PNG image with name blocks in the selected colors and white letters inside the blocks.
5. Download your design as a transparent PNG image by clicking **Download Image**.
6. Use the generated name blocks in your portfolio, personal cards, or other projects. For inspiration and examples, visit [my portfolio](https://madhurimarawat.github.io/Portfolio-Website/) and [my GitHub profile](https://github.com/madhurimarawat). The project is deployed at [NameBlock-Designer Live](https://madhurimarawat.github.io/NameBlock-Designer/), or you can download and run it locally.
---
## Preview of Creations
**Design Examples:** *Main illustration created using the tool.*
**Design Examples Transparent:** *Example with transparent background.*
---
## Technologies Used
- **HTML5**: For structuring the web application.
- **CSS3**: For styling and responsive design.
- **JavaScript**: For interactivity and dynamic content.
- **html2canvas**: For capturing the design and saving it as an image.
---
## Website Design
---
## Additional Notes
- For more Frontend Development codes, visit my repository: [Website-Frontend-Development](https://github.com/madhurimarawat/Website-Frontend-Developement).
- The [NameBlock-Designer](https://github.com/madhurimarawat/NameBlock-Designer) project contains the tool I used to create my name in blocks and make it transparent using [Remove.bg](https://www.remove.bg/). This tool generates a transparent PNG image from the given text, where the letters are initially white. If you want the letters to be transparent as well, you can use any background removal tool like Remove.bg for further customization. Explore the live demo here: [NameBlock-Designer Live Demo](https://madhurimarawat.github.io/NameBlock-Designer/).
---
## Contributing
Contributions are welcome! Feel free to fork the repository and submit a pull request.
## License
This project is licensed under the [MIT License](LICENSE).
---
## Thanks for Visiting 😄
- Drop a 🌟 if you find this repository useful.
- If you have any doubts or suggestions, feel free to reach me.
📫 How to reach me: [](https://www.linkedin.com/in/madhurima-rawat/)
- **Contribute and Discuss:** Feel free to open issues 🐛, submit pull requests 🛠️, or start discussions 💬 to help improve this repository!