From 838bce8ae52553a065282099b3502294009a1beb Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Thu, 21 Dec 2023 11:03:59 +0700
Subject: [PATCH] Updated Front-end Logic

---
 README.md               |  6 ++++--
 index.html              |  3 ++-
 packages/css/styles.css | 26 ++++++++++++++++++++++++++
 packages/js/main.js     | 16 ++++++++++++++++
 packages/pdf/test.html  |  1 -
 5 files changed, 48 insertions(+), 4 deletions(-)
 delete mode 100644 packages/pdf/test.html

diff --git a/README.md b/README.md
index b658404..25e464b 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,9 @@ Welcome to the repository of my personal portfolio website! A seamless blend of
 - JavaScript
 - ReactJS
 - VueJS
-- Angular
+- SwiperJS
+- Django
+- REST APIs
 
 ## Installation and Usage
 
@@ -28,7 +30,7 @@ Welcome to the repository of my personal portfolio website! A seamless blend of
     cd My-Portfolio-Website
     ```
 2. **Open with Live Server**
-    - If using VS Code, you can install the Live Server extension and start it to launch the website in your browser.
+    - If you're using VS Code, you can install the Live Server extension and start it to launch the website in your browser.
     - Alternatively, simply open the `index.html` file in your browser.
 
 ## Contributing
diff --git a/index.html b/index.html
index 3421e83..174af2a 100644
--- a/index.html
+++ b/index.html
@@ -1401,7 +1401,8 @@ <h1 class="footer__title">Son Nguyen Hoang</h1>
     </div>
 </a>
 
-<a class="scrollup" id="back-to-top" title="Back to Top"><i class="fa fa-arrow-up"></i></a>
+<!--==================== SCROLL TO TOP ====================-->
+<a class="scrollup" id="back-to-top" title="Back to Top" data-tooltip="Back to Top"><i class="fa fa-arrow-up"></i></a>
 
 <!--==================== SWIPER JS ====================-->
 <script src="./packages/js/swiper-bundle.min.js"></script>
diff --git a/packages/css/styles.css b/packages/css/styles.css
index 6e68f1f..a990543 100644
--- a/packages/css/styles.css
+++ b/packages/css/styles.css
@@ -1480,5 +1480,31 @@ scrollup1:hover {
     #back-to-top {
         display: block;
     }
+}
+
+.scrollup[data-tooltip]:hover::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-39%);
+    white-space: nowrap;
+    background-color: #333;
+    color: white;
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 14px;
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+}
+
+.scrollup[data-tooltip]:hover::after {
+    opacity: 1;
+    visibility: visible;
+}
 
+#back-to-top:hover i.fa {
+    color: #00a4cc;
 }
\ No newline at end of file
diff --git a/packages/js/main.js b/packages/js/main.js
index f4052ea..63a496a 100644
--- a/packages/js/main.js
+++ b/packages/js/main.js
@@ -438,3 +438,19 @@ function checkModalHeight() {
         modalContent.style.overflowY = 'hidden';
     }
 }
+
+document.addEventListener('scroll', function() {
+    var scrollUpButton = document.getElementById('back-to-top');
+    var footer = document.querySelector('footer');
+
+    var footerPosition = footer.getBoundingClientRect().top + window.scrollY;
+    var scrollPosition = window.scrollY + window.innerHeight;
+
+    if (scrollPosition >= footerPosition) {
+        // Change color to white when the scroll-up button reaches the footer
+        scrollUpButton.style.color = 'white';
+    } else {
+        // Revert to original color when not at the footer
+        scrollUpButton.style.color = ''; // replace '' with the original color if needed
+    }
+});
diff --git a/packages/pdf/test.html b/packages/pdf/test.html
deleted file mode 100644
index 8b13789..0000000
--- a/packages/pdf/test.html
+++ /dev/null
@@ -1 +0,0 @@
-