Dynmaic themes, animation, UI and code optimized for better readability

README.md

@@ -1,40 +1,46 @@
-# Stoic-Quotes
+# Stoic Quotes
 
-Welcome to Stoic-Quotes, a simple yet powerful Quote Machine designed to bring daily doses of wisdom from Stoic philosophers. Whether you're seeking inspiration or guidance, this project provides a seamless experience of discovering timeless Stoic quotes with just a click of a button.
+Welcome to Stoic Quotes, your gateway to timeless wisdom from Stoic philosophers. With just a click, discover profound insights and inspiration to navigate life's challenges. Embrace daily doses of Stoic wisdom effortlessly.
+
+Live Site: [Stoic Quotes](https://sushcod3.github.io/stoic-quotes/)
 
 ## Table of contents
 
-- [Overview](#overview)
-  - [Screenshot](#screenshot)
-- [My process](#my-process)
-  - [Built with](#built-with)
-  - [What I learned](#what-i-learned)
-  - [Future Plan](#future-plan)
-- [Credits](#credits)
-- [Author](#author)
+- [Features](#features)
+- [Screenshot](#screenshot)
+- [Technologies Used](#technologies-used)
+- [Lessons Learned](#lessons-learned)
+- [Future Development](#future-development)
+- [Acknowledgments](#acknowledgments)
+
+### Features
 
-## Overview
+- Explore a vast collection of 96 Stoic quotes.
+- Navigate effortlessly through quotes with the next button.
+- Share inspirational quotes with friends on Twitter or Facebook.
+- Enjoy a visually appealing experience with dynamic colors.
+- Switch between light and dark themes seamlessly.
 
 ### Screenshot
 
-![](./src/assets/screenshot.png)
+![](./screenshot-dark.png)
 
-### Built with
+### Technologies Used
 
-- Semantic HTML5 markup
-- Tailwind CSS
-- Bootstrap
 - Vue.js
+- Bootstrap
+- Semantic HTML5 markup
 
-## Credits
+### Lessons Learned
 
-- Stoic quotes sourced from [Orion Philosophy - Stoic Quotes](https://www.orionphilosophy.com/stoic-blog/stoic-quotes)
+- **Data Management with JSON**: I learned how to effectively store data in a JSON file and then access it within my application. Utilizing JSON files for data storage allowed me to organize and manage my quotes data efficiently, making it easily accessible for use in the Vue.js application.
 
+- **Vue.js and Bootstrap**: Through working on this project, I deepened my understanding of Vue.js, a progressive JavaScript framework for building user interfaces. Additionally, I gained hands-on experience with Bootstrap, a popular front-end framework for developing responsive and mobile-first websites. Integrating Vue.js with Bootstrap enabled me to create dynamic and visually appealing user interfaces, enhancing the overall functionality and aesthetics of my application.
 
-### What I learned
+### Future Development
 
-Enhanced my knowledge about the Tailwind CSS, Bootstrap, and Vue.js.
+- Add a drop-down feature to let user explore quotes of only the chosen author of their choice
 
-### Future Plan
-1. Add a drop-down feature to let user explore quotes of only the chosen author of their choice
-2. Replace the colors
+### Acknowledgments
+
+- Stoic quotes sourced from [Orion Philosophy - Stoic Quotes](https://www.orionphilosophy.com/stoic-blog/stoic-quotes)

src/App.vue

@@ -8,35 +8,53 @@ const randomIndex = (length) => Math.floor(Math.random() * length);
 
 // Quotes
 const randomQuoteIndex = ref(randomIndex(quotesData.length));
-const randomNumber = ref(randomIndex(quotesData[randomQuoteIndex.value].length));
-const quote = computed(() => quotesData[randomQuoteIndex.value][randomNumber.value]);
-
+const randomNumber = ref(
+  randomIndex(quotesData[randomQuoteIndex.value].length)
+);
+const quote = computed(
+  () => quotesData[randomQuoteIndex.value][randomNumber.value]
+);
 
 // Colors
-const randomColorNumber = ref(0);
-const colors = ["primary", "secondary", "success", "danger", "info", "warning", "light"];
+const colors = ["primary", "secondary", "success", "danger", "info", "warning"];
+const randomColorNumber = ref(randomIndex(colors.length));
 const randomColor = computed(() => colors[randomColorNumber.value]);
 
+const buttonClicked = ref(false);
+
 // Next Button
 function nextButton() {
-  randomQuoteIndex.value = Math.floor(Math.random() * quotesData.length);
-  randomNumber.value = Math.floor(Math.random() * (quotesData[randomQuoteIndex.value].length));
-  randomColorNumber.value = Math.floor(Math.random() * (colors.length));
+  randomQuoteIndex.value = randomIndex(quotesData.length);
+  randomNumber.value = randomIndex(quotesData[randomQuoteIndex.value].length);
+  randomColorNumber.value = randomIndex(colors.length);
+
+  // animation
+  buttonClicked.value = true;
+
+  // reset buttonClicked after a short delay
+  setTimeout(() => {
+    buttonClicked.value = false;
+  }, 1000);
 }
+// dark mode
+const prefersDarkMode = ref(
+  window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+);
 </script>
 
 <template>
   <header></header>
 
-  <main class="container">
+  <main class="container" :data-bs-theme="prefersDarkMode ? 'dark' : 'light'">
     <div
       class="card p-3 mt-5 shadow"
-      style="max-width: 480px;"
+      :class="{ animate: buttonClicked }"
+      style="max-width: 480px"
     >
       <div>
         <img
           alt="ancient-greece logo"
-          class="logo img-fluid card-img shadow"
+          class="logo img-fluid card-img"
           src="/src/assets/stoic1.1.jpg"
         />
       </div>
@@ -57,15 +75,15 @@ function nextButton() {
               :class="`btn-outline-${randomColor}`"
               :href="`https://twitter.com/intent/tweet?text=${encodeURIComponent(
                 quote.text
-              )}&url=https://stoic-quotes-for-living.netlify.app/`"
+              )}&url=https://sushcod3.github.io/stoic-quotes/`"
               target="_blank"
             >
               <i class="bi bi-twitter-x"></i>
             </a>
             <a
               class="btn"
               :class="`btn-outline-${randomColor}`"
-              :href="`https://www.facebook.com/sharer/sharer.php?u=https://stoic-quotes-for-living.netlify.app/&quote=${encodeURIComponent(
+              :href="`https://www.facebook.com/sharer/sharer.php?u=https://sushcod3.github.io/stoic-quotes/&quote=${encodeURIComponent(
                 quote.text
               )}`"
               target="_blank"
@@ -85,7 +103,7 @@ function nextButton() {
         </div>
       </div>
     </div>
-    <footer class="text-center mt-2">
+    <footer class="text-center mt-4 text-secondary">
       By
       <a
         href="https://github.com/SushCod3"
@@ -98,5 +116,18 @@ function nextButton() {
 </template>
 
 <style scoped>
+.animate {
+  animation: fadeIn 1s ease forwards;
+}
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 </style>

src/assets/base.css

@@ -23,7 +23,7 @@
 
 /* semantic color variables for this project */
 :root {
-  --color-background: var(--vt-c-black);
+  --color-background: var(--vt-c-white);
   --color-background-soft: var(--vt-c-white-soft);
   --color-background-mute: var(--vt-c-white-mute);
 
@@ -79,7 +79,7 @@ body {
     'Droid Sans',
     'Helvetica Neue',
     sans-serif;
-  font-size: 15px;
+  font-size: 1rem;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/assets/main.css

@@ -3,7 +3,7 @@
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0.5rem;
   font-weight: normal;
 }
 
@@ -21,7 +21,8 @@ a,
   }
 }
 
-@media (min-width: 720px) {
+@media (min-width: 36rem) { 
+  /* 36rem == 576px */
   body {
     display: flex;
     place-items: center;