https://github.com/shinniuwu/hrt-bday-counter

A site that shows my current time how much days till my birthday and how much days till or on hrt <3
https://github.com/shinniuwu/hrt-bday-counter

bday hrt perosnal-website

Last synced: about 1 month ago
JSON representation

A site that shows my current time how much days till my birthday and how much days till or on hrt <3

• Host: GitHub
• URL: https://github.com/shinniuwu/hrt-bday-counter
• Owner: ShinniUwU
• License: mit
• Created: 2022-12-03T16:14:04.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-08T08:12:09.000Z (4 months ago)
• Last Synced: 2024-09-08T09:27:30.278Z (4 months ago)
• Topics: bday, hrt, perosnal-website
• Language: TypeScript
• Homepage: https://shinniuwu.github.io/HRT-BDAY-COUNTER/
• Size: 329 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Hana's Personal Tracker

Welcome to Hana's Personal Tracker! This React-based web application provides a fun and interactive way to keep track of important dates, milestones, and events in Hana's life.

You can visit the site [here](https://hrt-bday-counter-a5devo3l5-shinniuwus-projects.vercel.app).

## Features

### Bulgaria Time Display

- Shows the current time and date in Bulgaria.

### Birthday Countdown

- Displays a countdown to Hana's next birthday, showing days, hours, minutes, and seconds.

### HRT Progress Tracker

- Tracks and displays the duration Hana has been on Hormone Replacement Therapy (HRT).

### Dating Anniversary Tracker

- Keeps track of the number of days since Hana started dating.

### Interactive GIF Display

- Features a clickable GIF that changes on each click.

- After 5 clicks, it briefly displays a grid of all available GIFs.

### Sound Effect

- Plays a "honk" sound when the GIF is clicked.

## Technologies Used

- React

- Next.js

- TypeScript

- Luxon (for date and time manipulation)

- Framer Motion (for animations)

- Tailwind CSS (for styling)

## How It Works

1. The app initializes with the current time and calculates various durations.

2. It updates the countdown, HRT progress, and dating anniversary information every second.

3. The GIF display allows for user interaction, changing the displayed GIF on each click.

4. After 5 clicks, it shows a brief animation displaying all available GIFs.

## Setup and Running

1. Clone the repository

2. Install dependencies: `yarn install`

3. Run the development server: `yarn run dev`

4. Open [http://localhost:3000](http://localhost:3000) in your browser

## Customization

You can easily customize this tracker by modifying the following in the `BirthdayCountdown` component:

- `eventDate`: Set your birthday

- `hrtStartDate`: Set the date you started HRT

- `datingStartDate`: Set the date you started dating

- `presetGifs`: Add or modify the list of GIFs

## Contributing

Feel free to fork this project and make your own versions or improvements. Pull requests are welcome!

## License

This project is open source and available under the [MIT License](LICENSE).