docs: Update Readme file

README.md

@@ -1,12 +1,75 @@
-# Talk Timer
+<p align="center">
+  <h1 align="center">TALK TIMER</h1>
+</p>
 
-A simple timer for talks, with configurable time for warning and end of talk.
+<h3 align="center">A simple timer for talks, with configurable time for warning and end of talk.</h1>
 
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). It uses [shadcn/ui](https://ui.shadcn.com/) for the UI components.
+<div>
+  <img src="./docs/Images/HomePage.png" alt="talktimer-home" />
+</div>
 
-## Getting Started
+  <h2 id="About-project" align="center">⚡️ About the Project</h2>
 
-First, run the development server:
+<div>
+  <p>
+    This is a simple timer that can be used during speech or competition to mark timings. The default configuration is:
+    <ul>
+      <li>Title: My Lightning Talk ⚡</li>
+      <li>Yellow Threshold: 90</li>
+      <li>Red Threshold: 120</li>
+    </ul>
+  </p>
+  <img src="./docs/Images/Selection.png">
+</div>
+<div>
+  <p>When the timer reaches the Yellow threshold, the color is immediately changed to Yellow</p>
+  <img src="./docs/Images/Yellow.png">
+</div>
+<div>
+  <p>When the timer reaches the Red threshold, it means the time is almost up. Manually uou would need to pause it and refresh it</p>
+  <img src="./docs/Images/Red.png">
+</div>
+<br />
+
+  <h2 id="tech-stack" align="center">⚡️ Tech Stack</h2>
+
+### Frontend Technology
+NextJS + shadcn/ui
+
+### Deployment Platform
+Vercel
+
+
+  <h2 id="quick-setup" align="center">⚡️ Quick Setup</h2>
+
+### Fork the project
+
+Fork the project in github
+
+### Clone the forked repo
+1. Copy the SSH link
+2. Run the following command to clone from your forked repository.
+
+```bash
+git clone git@github.com:your-username/talk-timer.git
+```
+Note: replace `your-username` with your actual Username
+
+### Install Dependencies
+
+Since this application is built using NextJS, install the npm dependencies:
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+# or
+bun install
+```
+
+### Run the code
 
 ```bash
 npm run dev
@@ -18,23 +81,9 @@ pnpm dev
 bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+The code will run in the default port 3000.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+  <h2 id="contributing-guidelines" align="center">⚡️ Contributing Guidelines</h2>
+<p>
+  Please refer the CONTRIBUTING.md file for contribution guidelines
+</p>