Merge pull request #10 from CalcagnoLoic/develop

update readme

README.md

@@ -1,12 +1,23 @@
-# React + TypeScript + Vite
+# Dictionary WebApp
+
+This dictionary provides definitions and examples by lexical field. Two contexts are included:
+
+- One for darkMode (this adapts to the user's system preferences)
+- One for changing the font (serif, sans-serif and mono)
 
 <p align="center">
   <a href="https://skillicons.dev">
     <img src="https://skillicons.dev/icons?i=ts,react,tailwind,vite" />
   </a>
 </p>
 
-Your users should be able to:
+<p align="center">
+  <img src="./public/assets/img/readme.png" width="70%" /> 
+</p>
+
+## User Stories
+
+Users should be able to:
 
 - [x] Search for words using the input field
 - [x] See the Free Dictionary API's response for the searched word
@@ -16,6 +27,32 @@ Your users should be able to:
 - [x] Switch between light and dark themes
 - [x] View the optimal layout for the interface depending on their device's screen size
 - [x] See hover and focus states for all interactive elements on the page
-- [x] Bonus: Have the correct color scheme chosen for them based on their computer preferences. 
+- [x] Bonus: Have the correct color scheme chosen for them based on their computer preferences.
+
+## View
+
+| Serif font + light mode                | Serif font + dark mode                |
+| -------------------------------------- | ------------------------------------- |
+| ![](./public/assets/img/monoLight.png) | ![](./public/assets/img/monoDark.png) |
+
+| Sans-serif font + light mode                | Sans-serif font + dark mode                |
+| ------------------------------------------- | ------------------------------------------ |
+| ![](./public/assets/img/sansSerifLight.png) | ![](./public/assets/img/sansSerifDark.png) |
+
+| Mono font + light mode                 | Mono font + dark mode                 |
+| -------------------------------------- | ------------------------------------- |
+| ![](./public/assets/img/monoLight.png) | ![](./public/assets/img/monoDark.png) |
+
+## Built with
+
+- Semantic HTML5 markup
+- Mobile-first workflow
+- TailwindCSS
+- React
+- Storybook
+- Chromatic
+
+## Author
 
-![](./public/assets/img/readme.png)
+- Website - [Portfolio](https://calcagno-loic.netlify.app/)
+- Frontend Mentor - [@CalcagnoLoic](https://www.frontendmentor.io/profile/CalcagnoLoic)