Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AnshumanMahato/Happy-Birthday-Card
This is a web based interactive birthday card.
https://github.com/AnshumanMahato/Happy-Birthday-Card
animation-css birthday birthday-card birthday-message birthday-reminder birthday-wishes celebration friend greetings happy-birthday happybirthday html-css-javascript
Last synced: about 2 months ago
JSON representation
This is a web based interactive birthday card.
- Host: GitHub
- URL: https://github.com/AnshumanMahato/Happy-Birthday-Card
- Owner: AnshumanMahato
- Created: 2020-08-27T03:46:38.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-15T23:56:51.000Z (3 months ago)
- Last Synced: 2024-06-16T00:36:51.373Z (3 months ago)
- Topics: animation-css, birthday, birthday-card, birthday-message, birthday-reminder, birthday-wishes, celebration, friend, greetings, happy-birthday, happybirthday, html-css-javascript
- Language: JavaScript
- Homepage: https://hbd-card.netlify.app/
- Size: 7.65 MB
- Stars: 247
- Watchers: 5
- Forks: 133
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome - AnshumanMahato/Happy-Birthday-Card - This is a web based interactive birthday card. (JavaScript)
README
# Happy Birthday Card
A Customizable Web-based birthday card to wish your friends and family in a unique way.
Check out the Previews -
- [Without Scroll Message](https://happy-birthday-card.vercel.app/)
- [With Scroll Message](https://hbd-card.netlify.app/)
If you liked it, please consider giving it star a 🤩⭐. You can also support me by sponsoring.
---
## How to setup
Here are the methods to set it up for yourself.
### Remote Deployment
- Vercel Deploy
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FAnshumanMahato%2FHappy-Birthday-Card&env=NAME,PIC&envDescription=NAME%20-%3E%20Name%20of%20the%20Receiver%20%7C%20PIC%20-%3E%20web%20url%20of%20a%20picture%20of%20the%20receiver&envLink=https%3A%2F%2Fgithub.com%2FAnshumanMahato%2FHappy-Birthday-Card%2Fblob%2Fmain%2Fdocs%2Fvariables.md&project-name=happy-birthday-card&repo-name=happy-birthday-card&demo-title=Happy%20Birthday%20Card&demo-description=This%20is%20a%20web%20based%20interactive%20birthday%20card.&demo-url=https%3A%2F%2Fhappy-birthday-card.vercel.app%2F&demo-image=https%3A%2F%2Ftelegra.ph%2Ffile%2Fac886529ccc3843552f81.png)
- Netlify Deploy
[](https://app.netlify.com/start/deploy?repository=https://github.com/AnshumanMahato/Happy-Birthday-Card)
Remote deployment will require you to specify some mandatory environmental variables,
- NAME: Name of the receiver.
- PIC: Url of the pic to be loaded in the card. If don't have the image hosted somewhere, you may publish a [telegra.ph article](https://telegra.ph) with your image and copy the image address from there.
To know more about the environment variables, check [References](#references).
### For Local Building
1. Clone the repository
```sh
git clone https://github.com/AnshumanMahato/Happy-Birthday-Card
```
2. Install dependencies
```sh
npm install
```
3. Add a pic of the receiver, in the `./local` directory. Ensure that the image is of a 1:1 ratio or it might get cropped and squished.
4. Create a `.env` file in the root directory, and add the following lines.
```env
NAME='Name of the Receiever'
PIC='name-of-image.extension'
```
5. Execute the following commands in order.
```sh
npm run init-index-local
npm run build:parcel
```
6. Upon Successful execution, your built files will be ready in the `./dist` directory. Serve this directory using `live-server` or similar tools to see your card.
For further customization, check out [here](./docs/customizations.md).
---
## References
- [Environment Variables](./docs/variables.md)
- [Attributions](./docs/attributions.md)
---
## Support
If you have any queries or need some help in deployment, you may contact me here
- [Telegram](https://t.me/AnshumanMahato)
- [Email](mailto:[email protected])
Made with 💖 by Anshuman Mahato