Mobile-first w/ Vue 3 + Composition API, Tailwind, TypeScript, Vite

Feedback is appreciated :)

A Mobile-First project featuring Vue 3 + Composition API, Tailwind, Vite, TypeScript.

The "start" text was changed to "resume" but it can be easily changed back to "start" if needed. Typically this would be something to discuss with the stockholder/project manager.

A few "advanced features" have been added (they can be easily hidden from the final implementation if not wanted). This is something to discuss with the stockholder/project manager.

Advanced features: Auto transition from pomodoro to short/long breaks. Option to show/hide the seconds (the seconds' constant flickering is somewhat distracting). Option to show the current amount of pomodoros completed. Reset option.

Comments for the stockholder/project manager.

The "restart" text/functionality needs to be revisited.

The intention seems to be that as soon as the pomodoro time is over, the "restart" option is presented.

Is the "restart" option needed for short/long breaks? If the restart option is not included in the short/long breaks, is the user experience inconsistent between pomodors and breaks?

The advanced features section allows automatic transition from pomodoro to short/long breaks. This seems to be a better UX and it does not require the above-mentioned "restart" treatment.

Other - To be discussed with stockholder/project manager.

The pomodoro progress bar is shown as a favicon. This allows the user to pin the page or move to other tabs and still see the pomodoro's activity.

The state of the application is saved so the user can reopen the application at any time and continue where they left off.

Missing / Todo: Unit Testing, Accessibility Check

Thanks!