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: about 2 months 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 (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-12-30T15:37:17.000Z (6 months ago)
- Last Synced: 2026-01-03T09:54:20.569Z (6 months 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: 11.6 MB
- 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**: Apply gradient effects to the website’s background, without affecting the saved transparent PNG image.
- **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
- Explore more frontend development projects in my repository: [Website-Frontend-Development](https://github.com/madhurimarawat/Website-Frontend-Developement).
- [NameBlock-Designer](https://madhurimarawat.github.io/NameBlock-Designer/) is a tool to create vibrant, personalized name blocks. I used it to design blocks, made them transparent using [Remove.bg](https://www.remove.bg/), and added them to my [portfolio website](https://madhurimarawat.github.io/Portfolio-Website/).
---
## 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!