updated readMd

README.md

@@ -1 +1,51 @@
-"# TakeYouOff-FrontEnd" 
+# Job Portal App
+
+## Overview
+
+The **Job Portal App** is a web application built with React and Tailwind CSS, designed to help users search for job opportunities, apply filters, and manage job applications efficiently. The app features a responsive design that adapts to both desktop and mobile devices, ensuring a seamless user experience across different platforms.
+
+## Features
+
+- **Job Listings:** Display job opportunities in a grid or vertical layout.
+- **Dynamic Filters:** Apply various filters to refine search results.
+- **Responsive Design:** Optimized for both desktop and mobile views.
+- **Floating Filter Button:** Access filters easily on mobile screens.
+- **Full-Screen Filter Overlay:** View and apply filters in a full-screen mode on mobile devices.
+
+## Design Patterns and Architecture
+
+- **Component-Based Architecture:** Utilizes reusable components to build a dynamic and responsive UI.
+- **Responsive Design:** Employs Tailwind CSS to handle different screen sizes and layouts efficiently.
+- **State Management:** Uses React hooks for managing state and interactions within the application.
+
+## Screen shots
+
+Include screenshots of different screens here to showcase the app's UI.
+
+<table>
+  <tr>
+    <td style="padding: 10px; text-align: center;">
+      <div style="width: 960px; height: 720px; overflow: hidden; position: relative;">
+        <img src="https://github.com/sudhanshuGt/TakeYouOff-FrontEnd/blob/main/screen_shots/Home.png" alt="Home Screen" style="width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;">
+      </div>
+    </td>
+    <td style="padding: 10px; text-align: center;">
+      <div style="width: 960px; height: 720px; overflow: hidden; position: relative;">
+        <img src="https://github.com/sudhanshuGt/TakeYouOff-FrontEnd/blob/main/screen_shots/Jobs.png" alt="Jobs Screen" style="width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;">
+      </div>
+    </td>
+    <td style="padding: 10px; text-align: center;">
+      <div style="width: 960px; height: 720px; overflow: hidden; position: relative;">
+        <img src="https://github.com/sudhanshuGt/TakeYouOff-FrontEnd/blob/main/screen_shots/profile.png" alt="Profile Screen" style="width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;">
+      </div>
+    </td>
+    <td style="padding: 10px; text-align: center;">
+      <div style="width: 960px; height: 720px; overflow: hidden; position: relative;">
+        <img src="https://github.com/sudhanshuGt/TakeYouOff-FrontEnd/blob/main/screen_shots/employer_dashboard.png" alt="Employer Screen" style="width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;">
+      </div>
+    </td>
+  </tr>
+</table>
+
+
+