added basic header to readme

README.md

@@ -1,7 +1,65 @@
-# Rpg-Dice-Js
+# IN DEVELOPMENT
 
-Npm package that allows users to roll dice with all math and various forms of response
+<a name="readme-top"></a>
 
-## Settings
+<!-- SHIELDS -->
 
-`isBoldCrit, defaultDie, boldWrapper`
+[![npm Downloads Shield](https://img.shields.io/npm/dm/rpg-dice-js?style=flat-square&logo=npm)]()
+[![Stars Shield](https://img.shields.io/github/stars/Mateo-Wallace/rpg-dice-js.svg?style=flat-square&color=blue&logo=github)](https://github.com/Mateo-Wallace/rpg-dice-js/stargazers)
+[![Forks Shield](https://img.shields.io/github/forks/Mateo-Wallace/rpg-dice-js.svg?style=flat-square&logo=github)](https://github.com/Mateo-Wallace/rpg-dice-js/network/members)
+[![Contributors Shield](https://img.shields.io/github/contributors/Mateo-Wallace/rpg-dice-js.svg?style=flat-square&color=success&logo=github)](https://github.com/Mateo-Wallace/rpg-dice-js/graphs/contributors)
+[![License Shield](https://img.shields.io/github/license/Mateo-Wallace/rpg-dice-js.svg?style=flat-square)](https://github.com/Mateo-Wallace/rpg-dice-js/blob/main/LICENSE)
+[![LinkedIn Shield](https://img.shields.io/badge/LinkedIn-555555?style=flat-square&logo=linkedin)](https://www.linkedin.com/in/mateo-wallace/)
+
+<!-- PROJECT LOGO & HEADER -->
+<br />
+<div align="center">
+<img src="./img/rpg-dice-js-400.png" alt="rpg dice logo" width="80" height="80" style="border-radius: 50%">
+
+  <h3 align="center" style="font-size: 30px"><strong>rpg-dice-js</strong></h3>
+
+  <p align="center">
+    <strong>A dice roller for the modern javascript dev</strong>
+    <br />
+    With many settings options and response types for full customization
+    <br />
+    <br />
+    <a href="https://mateo-wallace.github.io/rpg-dice-js/">View Docs</a>
+    ·
+    <a href="https://github.com/Mateo-Wallace/rpg-dice-js">View GitHub</a>
+    ·
+    <a href="">View npm</a>
+    ·
+    <a href="https://github.com/Mateo-Wallace/rpg-dice-js/issues">Report Bug</a>
+  </p>
+</div>
+
+<!-- TABLE OF CONTENTS -->
+
+<details>
+  <summary style="cursor: pointer;"><strong>Table of Contents</strong></summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+      <ul>
+        <li><a href="#built-with">Built With</a></li>
+      </ul>
+    </li>
+    <li><a href="#documentation">Documentation</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#license">License</a></li>
+    <li><a href="#contact">Contact</a></li>
+    <li><a href="#acknowledgments">Acknowledgments</a></li>
+  </ol>
+</details>
+
+<!-- ABOUT THE PROJECT -->
+
+## About The Project
+
+<div align="center">
+  <br />
+  <img src="./src/img/dumbot-full-use-example.gif" alt="Example of Working Discord App">
+  <br />
+  <br />
+</div>