Update README.md

Author: Luk4x

README.md

@@ -1,11 +1,102 @@
-# React + IMask
+<table align="right">
+  <tr>
+    <td>
+      <a href="readme-en.md">🇺🇸 English</a>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <a href="README.md">🇧🇷 Português</a>
+    </td>
+  </tr>
+</table>
 
+![luk4x-repo-status](https://img.shields.io/badge/Status-Finished-lightgrey?style=for-the-badge&logo=headspace&logoColor=green&color=lightgrey)
+![luk4x-repo-license](https://img.shields.io/github/license/Luk4x/react-imask?style=for-the-badge&logo=unlicense&logoColor=lightgrey)
+# IMask in React
+
+<br>
+<p align="center">
+  <a href="#-apresentação-em-gif-do-projeto">Gif</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-tecnologias-utilizadas">Tecnologias</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-sobre">Sobre</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-clonando-o-projeto">Clone</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-contato-dos-contribuintes">Contato</a>
+</p>
+<br>
+
+## 📹 Apresentação em Gif do Projeto
 <div align="center">
   <img src="https://user-images.githubusercontent.com/86276393/206425046-6cf7122d-f5e4-40fd-82f3-df27fea62cfc.gif" />
 </div>
 
-Originating from GenCard, this was a simple project developed with the aim of showing how to use IMask in React with regex to a friend who needed help with his work.<br>
-The MasterCard regex was used as an example - If the number entered in the input is from MasterCard, the border of the input turns green, otherwise it turns red.<br>
-MasterCard numbers example: `5349 0234 9207 3492`, `2329 7329 4792 3759`.
-<br><br>
-Access project [HERE](https://luk4x-react-imask.netlify.app/)
+> Acesse o projeto online **[AQUI](https://luk4x-react-imask.netlify.app/)**
+
+## 🚀 Tecnologias Utilizadas
+
+- [ReactJS](https://pt-br.reactjs.org)
+- [iMask](https://imask.js.org)
+- [Styled-Components](https://styled-components.com)
+- [Regex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
+- [ViteJS](https://vitejs.dev/)
+- [NodeJS](https://nodejs.org)
+- [npm](https://www.npmjs.com/)
+- [Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
+- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
+
+## 📝 Sobre
+
+Originado do meu projeto [GenCard](https://github.com/Luk4x/gencard), este foi um projeto simples desenvolvido com o objetivo de mostrar como usar IMask em React com regex para um amigo que precisava de ajuda com seu trabalho.<br>
+O regex da MasterCard foi usado como exemplo: Se o número digitado no input for da MasterCard, a borda do input fica verde, caso contrário, fica vermelha.<br>
+Exemplo de números da MasterCard: `5349 0234 9207 3492`, `2329 7329 4792 3759`.
+
+## 📖 Clonando o Projeto
+
+Para clonar e executar este projeto em seu computador, você precisará do [Git](https://git-scm.com/) e [Node.js v18.12.1](https://nodejs.org/en/) ou superior previamente instalados.<br>
+Feito isso, no terminal:
+
+```bash
+# Clone esse repositório com:
+> git clone https://github.com/Luk4x/react-imask.git
+
+# Entre no repositório com:
+> cd react-imask
+
+# Instale as dependências com:
+> npm install
+
+# Execute o projeto com:
+> npm run dev
+
+# Feito isso, você já poderá acessar o projeto pelo link que aparecerá no terminal! (algo como http://localhost:3000/ ou http://127.0.0.1:5173/)
+```
+
+## 🤝 Contato dos Contribuintes
+
+<table border="2">
+  <tr>
+    <td align="center">
+      <b><a href="https://cursos.alura.com.br/vitrinedev/lucasmacielf">Vitrine.Dev</a> 🪟</b>
+      <table>
+        <tr>
+          <td align="center">
+            <a href="https://github.com/Luk4x">
+              <img src="https://avatars.githubusercontent.com/Luk4x" width="150px;" alt="Luk4x Github Photo"/>
+            </a>
+            <br>
+            <a href="https://www.linkedin.com/in/lucasmacielf/">
+              <sub>
+                <b>Lucas Maciel</b>
+              </sub>
+            </a>
+          </td>
+        </tr>
+      </table>
+  </td>
+</tr>
+</table>
+
+<p align="right">
+  <a href="#imask-in-react">Voltar ao Topo</a>
+</p>