From fdeae63d7e1c48fa7e3cb2778466a7adf330c18f Mon Sep 17 00:00:00 2001
From: codesandtags <codesandtags@gmail.com>
Date: Sat, 30 Dec 2023 22:51:12 -0500
Subject: [PATCH] chore: updated styles and documentation

---
 README.md       | 15 +++++++++++++++
 index.html      | 32 ++++++++++++++++++++++++++------
 styles/main.css | 21 +++++++++++++++++++--
 3 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 95b889f..f56f115 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,21 @@
 
 This is a list of things I use in my daily life as a Developer and Human.
 
+## How to use
+
+- You can use this list as a reference to find new tools or products.
+- You can use this list to create your own list.
+
+### Steps
+
+1. Fork this repository and edit the README.md file.
+2. Add your own tools or products changing the content of `schema/uses.json` file.
+3. Adapt the `schema/uses.json` file to your own needs.
+4. Deploy your own list using [Vercel](https://vercel.com/) or [Github Pages](https://pages.github.com/).
+5. Optionally you can edit this README.md file to add your own list.
+
+## 📝 Table of Contents
+
 # Software
 
 ## 🧑‍💻 Development
diff --git a/index.html b/index.html
index c0b599f..06baa71 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>What I use? - Codesandtags</title>
+    <title>What I use? - codesandtags</title>
     <meta
       name="description"
       content="A list of the things I use in my daily life as a Software Engineer and Human."
@@ -51,11 +51,31 @@ <h1>What I use?</h1>
           <img src="./public/img/bg-header.png" alt="Edwin Torres" />
         </div>
         <div class="header-text">
-          👋 Hi I'm <span class="hightlight">Edwin Torres</span>, and I want to
-          share the things I use in my daily life as a
-          <span class="hightlight">Software Engineer</span> and Human.
-          
-          I have created a set of scripts to init my laptop or development environment <a href="https://github.com/codesandtags/what-i-use/tree/main/configs" target="_blank">here on Github</a>.
+          <p class="hero">
+            👋 Hi I'm <span class="hightlight">Edwin Torres</span>, and I want
+            to share the things I use in my daily life as a
+            <span class="hightlight">Software Engineer</span> and Human.
+          </p>
+          <div class="announcement">
+            <p>
+              Create your own list and share it with the world. You can find the
+              <a
+                href="https://github.com/codesandtags/what-i-use"
+                target="_blank"
+                >here on Github</a
+              >.
+            </p>
+            <div class="text--center">
+              <iframe
+                src="https://ghbtns.com/github-btn.html?user=codesandtags&repo=what-i-use&type=star&count=true&size=large"
+                width="170"
+                height="30"
+                frameborder="0"
+                scrolling="0"
+                title="GitHub Stars"
+              ></iframe>
+            </div>
+          </div>
         </div>
       </header>
       <main id="main-container"></main>
diff --git a/styles/main.css b/styles/main.css
index e1f0d9a..42d78d9 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -38,7 +38,7 @@ body.dark-mode {
   --color-secondary-text: #cccccc;
   --color-border: #444444;
   --color-link: #fbb51e;
-  --color-card: #444444;
+  --color-card: #333;
   --color-category-title-bg: #222;
   --color-category-title-text: #fbb51e;
   --color-background-header: rgba(10, 10, 10, 0.9);
@@ -246,7 +246,8 @@ nav h1 {
   margin-left: 5px;
 }
 
-a, a:visited {
+a,
+a:visited {
   color: var(--color-link);
   text-decoration: none;
   cursor: pointer;
@@ -255,3 +256,19 @@ a, a:visited {
 a:hover {
   text-decoration: underline;
 }
+
+.text--center {
+  text-align: center;
+}
+
+.announcement {
+  margin-top: 2rem;
+  padding: 10px;
+  color: var(--color-secondary-text);
+  font-size: 1.5rem;
+  text-align: center;
+}
+
+.announcement p {
+  margin-bottom: 2rem;
+}