Updated Front-end Logic

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

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>

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;
 }

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
+    }
+});