feature: New Readme

README.md

@@ -1,7 +1,82 @@
-# Vue 3 + Vite
+<a name="readme-top"></a>
+<br />
+<div align="center">
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+[![LinkedIn][linkedin-logo]][linkedin-url]
 
-## Recommended IDE Setup
+  <a href="https://github.com/xyvs/pokedex">
+    <img src="images/logo.png" alt="Logo" width="80" height="80">
+  </a>
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+  <h3 align="center">pokedexyvs</h3>
+
+[![Vue][vue-logo]][vue-url]
+[![Tailwind][tailwind-logo]][tailwind-url]
+[![Vercel][vercel-logo]][vercel-url]
+
+
+  <p align="center">
+    And very stylish pokedex web app made with Vue.js and TailwindCSS.
+    <br />
+    <a href="https://pokedex.xyvs.io"><strong>View Demo »</strong></a>
+  </p>
+</div>
+
+<!-- ABOUT THE PROJECT -->
+## About The Project
+
+[![pokedexyvs][product-screenshot]](https://example.com)
+
+This a pokedex web app made with Vue.js, it's using the [PokeApi](https://pokeapi.co/) to get the data, it's inspired this design on [Dribbble](https://dribbble.com/shots/2859891--025-Pikachu) and it's also deployed on [Vercel](https://vercel.com/).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- GETTING STARTED -->
+## Getting Started
+
+This is an example of how you may give instructions on setting up your project locally.
+To get a local copy up and running follow these simple example steps.
+
+
+### Installation
+
+
+1. Clone the repo
+   ```sh
+   git clone https://github.com/xyvs/pokedex
+   ```
+2. Install NPM packages
+   ```sh
+   npm install
+   ```
+4. Run the dev enviroment
+   ```js
+   npm run dev
+   ```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- LICENSE -->
+## License
+
+Distributed under the MIT License.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+
+[product-screenshot]: images/screenshot.png
+
+[linkedin-logo]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin
+[linkedin-url]: https://www.linkedin.com/in/jofranmtz/
+
+[vue-logo]: https://img.shields.io/badge/Vue-black?style=for-the-badge&logo=vuedotjs&logoColor=fff
+[vue-url]: https://vuejs.org
+
+[tailwind-logo]: https://img.shields.io/badge/Tailwind-black?style=for-the-badge&logo=tailwindcss&logoColor=fff
+[tailwind-url]: https://tailwindcss.com
+
+[vercel-logo]: https://img.shields.io/badge/Vercel-black?style=for-the-badge&logo=vercel&logoColor=fff
+[vercel-url]: https://vercel.com