update Readme

README.md

@@ -1,28 +1,55 @@
-# Focus Fox 🦊
-![Alt Text](https://raw.githubusercontent.com/marinoffDev/Focus-Fox/refs/heads/main/public/screenshot.jpg)
-## Your Go-To Online Timer for Enhanced Productivity
-Focus Fox is an open-source Pomodoro timer web app built with React and Vite to help boost productivity through structured work and break sessions. It supports customizable timer lengths for Pomodoro sessions, short breaks, and long breaks.
 
-## Live Demo 🌐
-Check out the live version here: [Focus Fox](https://marinoffdev.github.io/Focus-Fox/)
+<div align="center">
+  <h1>Focus Fox</h1>
+  <p>Your Go-To Online Timer for Enhanced Productivity</p>
+  <img alt="Focus Fox web app screenshot" src="https://raw.githubusercontent.com/marinoffDev/Focus-Fox/refs/heads/main/public/screenshot.jpg" width="470px">
+</div>
 
-## Features 🚀
+---
+## Table of Contents
+- [🔍 Overview](#-overview)
+- [🌐 Live Demo](#-live-demo)
+- [🚀 Features](#-features)
+- [🤔 How to Use the Focus Fox Timer](#-how-to-use-the-focus-fox-timer)
+- [🛠 Technologies Used](#-technologies-used)
+- [💻 Installation](#-installation)
+- [🗺️ Roadmap](#-roadmap)
+- [🤝 Contributing](#-contributing)
+- [📄 License](#-license)
+---
+
+## 🔍 Overview 
+**Focus Fox** is an open-source Pomodoro timer web app designed to help boost productivity through structured work and break sessions. It supports customizable timer lengths for Pomodoro sessions, short breaks, and long breaks.
+This project is still in its early stages, so feedback and contributions are welcome and appreciated!
+
+## 🌐 Live Demo 
+Check out the live version here: **[Focus Fox](https://marinoffdev.github.io/Focus-Fox/)**
+
+## 🚀 Features
 - Pomodoro Timer: Focus on tasks in timed intervals (work/break cycles).
-- Customizable Timers: Adjust durations for Pomodoro, short breaks, and long breaks to suit your preferences.
+- Customizable Timers: Adjust durations for Pomodoro, Short Breaks, and Long Breaks to suit your preferences.
 - Mobile Responsive: Works smoothly across desktop and mobile devices.
-- Dark/Light Mode: Toggle between dark and light themes
+- Dark/Light Mode: Toggle between dark and light themes.
 - Accessible & Minimalist Design: Simple UI that helps you stay focused.
 
-## How to Use the Focus Fox Timer:
+## 🤔 How to Use the Focus Fox Timer
 1. Customize the timer settings to fit your preferences.
 2. Choose a task to focus on.
 3. Start the Pomodoro timer and concentrate solely on your task for the set duration (default: 25 minutes).
 4. Take a short break after each Pomodoro (default: 5 minutes).
 5. After several Pomodoros, opt for a longer break (default: 15 minutes after every 4 cycles).
 6. Repeat steps 3-5 until all your tasks are completed.
 
-## Installation 💻
+If you would like to learn more about the Pomodoro technique you can read about it [here](https://en.wikipedia.org/wiki/Pomodoro_Technique).
+
+## 🛠 Technologies Used
+- React for building dynamic UI components.
+- React Router for page navigation.
+- Vite for fast development and build tooling.
+- Tailwind CSS (with ShadCN/UI) for utility-first styling and component library.
+- FontAwesome for icons.
 
+## 💻 Installation
 To run this project locally:
 
 1. Clone the repository:
@@ -45,8 +72,25 @@ npm install
 npm run dev
 ```
 
-## Contributing 🤝
-Contributions are welcome! Feel free to fork this repository and submit a pull request.
+## 🗺️ Roadmap
+Future plans for enhancements and development:
+- [ ] Add page routes for Privacy Policy, Terms and Conditions, and 404 Page Not Found
+- [ ] Add customization option for number of pomodoro cycles before a long break (currently default is 4)
+- [ ] Add more theme options
+- [ ] Add more notification sound options
+- [ ] Add cookies to store customization preferences
+- [ ] Add option to start subsequent timers automatically
+- [ ] Add option to enable browser notifications
+- [ ] Add toggle for "super dark mode" while a timer is active
+
+## 🤝 Contributing
+Contributions are welcome!
+
+Here's how you can contribute:
+
+1. **Submit an Issue**: If you encounter a bug or have a feature request, please submit a [GitHub issue](https://github.com/marinoffDev/Focus-Fox/issues) first. This helps us discuss your suggestions before you begin working on it.
+2. **Fork the Repository**: After an issue has been submitted, feel free to fork this repository and work on a fix or enhancement.
+3. **Open a Pull Request**: Once your changes are ready, open a pull request (PR). Please reference the issue number and describe the changes you made.
 
-## License 📄
-This project is licensed under the CC BY-NC 4.0 License - see the [LICENSE](https://github.com/marinoffDev/Focus-Fox/blob/main/LICENSE) file for details.
+## 📄 License
+Focus Fox is licensed under the CC BY-NC 4.0 License - see the [LICENSE](https://github.com/marinoffDev/Focus-Fox/blob/main/LICENSE) file for details.