init: documentation

README.md

@@ -0,0 +1,134 @@
+<br>
+<div align="center">
+<picture>
+    <source media="(prefers-color-scheme: light)" srcset="https://readme-typing-svg.herokuapp.com?font=Space+Grotesk&weight=600&size=40&pause=&color=000&center=true&vCenter=true&repeat=false&random=false&width=280&height=60&lines=CV%20Application">
+    <img alt="CV Application" src="https://readme-typing-svg.herokuapp.com?font=Space+Grotesk&weight=600&size=40&pause=&color=FFFFFF&center=true&vCenter=true&repeat=false&random=false&width=280&height=60&lines=CV%20Application">
+  </picture>
+<br>
+
+**❝** Get your CV done fast and hassle-free with our intuitive tool **❞**
+
+<br>
+  <p>
+    ❯ &nbsp;
+    <a href="https://cv-application-0xabdulkhalid.vercel.app/">View Demo</a>
+    &nbsp;·&nbsp;
+    <a href="https://github.com/0xabdulkhalid/cv-application/issues">Report Bug</a>
+    &nbsp;·&nbsp;
+    <a href="https://github.com/0xabdulkhalid/cv-application/issues">Request Feature</a>
+     &nbsp; ❮
+  </p>
+</div>
+
+<br>
+
+<div align='center'>
+<img src='./design/preview.webp' alt='Mobile Preview'>
+</div>
+
+<br>
+
+## Project Overview
+
+- The CV Application was primarily developed to gain a better understanding of React fundamentals.
+
+- Building this application enabled me to learn about State Management, React Hooks, and leverage Vite's features for deploying production-ready applications.
+
+- Considered a warm-up project, I focused on the core concepts and did not delve into intricate details, such as the implementation of the Header and Footer.
+
+- Developed as part of the partial completion of the Odin Project's Full-Stack JavaScript Path.
+
+- Since this was my initial experience with React, the code quality may not be optimal. However, I am committed to refining my coding practices through continuous practice and building more applications with React.
+
+
+<br>
+
+## Installation
+
+> [!NOTE]  
+> If you prefer not to install it locally, you can also access the [live demo](https://cv-application-0xabdulkhalid.vercel.app/) version
+
+To set up the CV Application locally, follow these steps:
+
+1. Clone the GitHub repository to your local machine:
+
+   ```bash
+   git clone https://github.com/0xabdulkhalid/cv-application.git
+   ```
+
+2. Navigate to the project's directory:
+
+   ```bash
+   cd cv-application
+   ```
+
+3. Install the project's dependencies using npm:
+
+   ```bash
+   npm install
+   ```
+
+4. Building the source for Production using Vite:
+
+   ```bash
+   npm run build
+   ```
+
+5. The build files can be found on `dist` (distribution) directory.
+
+<br>
+
+## Pagespeed Insights Score
+
+- ||
+  | :-----: |
+  |  <b>Overall Score 99.3%, Average of Mobile and Desktop</b><br>[ Mobile devices score is only shown below ] |
+  | |
+  | <img src='./design/pagespeed-insights-score.svg' alt=''> |
+  | |
+  | Check out [**Pagespeed Insights**](https://pagespeed.web.dev/analysis/https-cv-application-0xabdulkhalid-vercel-app/02v5pjdoui?form_factor=mobile) to get live score |
+  ||
+
+<br>
+
+## Built With
+
+<div align=center>
+
+![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) &nbsp;&nbsp; ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
+
+</div>
+
+<br>
+
+## Tools Used
+
+<div align=center>
+
+![NPM](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white) &nbsp;&nbsp;![Google](https://img.shields.io/badge/google-DA4437?style=for-the-badge&logo=google&logoColor=white) &nbsp;&nbsp;![Visual Studio Code](https://img.shields.io/badge/VS%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white) &nbsp;&nbsp;![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white) &nbsp;&nbsp;![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white)
+
+&nbsp;&nbsp;![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E) &nbsp;&nbsp;![Eslint](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white) &nbsp;&nbsp; ![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)
+
+</div>
+
+<br>
+
+## Let's Connect 👋
+
+<div align=center>
+
+  <a href="https://linkedin.com/in/0xabdulkhalid" >
+    <img src="https://img.shields.io/badge/linkedin%20Profile-%2300acee.svg?color=405DE6&style=for-the-badge&logo=linkedin&logoColor=white" alt="Linkedin Profile">
+  </a>&nbsp;&nbsp;
+
+  <a href="mailto:0xabdulkhalid@gmail.com" target="_blank">
+    <img src="https://img.shields.io/badge/gmail-%23EA4335.svg?style=for-the-badge&logo=gmail&logoColor=white" alt=mail/>
+  </a>&nbsp;&nbsp;
+
+  <a href="https://www.github.com/0xabdulkhalid/" >
+    <img src="https://img.shields.io/badge/Github%20Profile-131313?style=for-the-badge&logo=github&logoColor=white" alt="Github Profile">
+  </a>
+
+</div>
+
+<br>