Updates for Antonio

Author: philwing100

src/components/AboutMeComponents/FullPage.vue

@@ -1,5 +1,3 @@
-/* eslint-disable */
-
 <template>
   <div class="fullpage-container" @wheel="handleScroll">
     <div class="section" v-for="(section, index) in sections" :key="section.id" :ref="`section-${index}`"
@@ -13,9 +11,9 @@
       <p class="content">{{ section.content }}</p>
     </div>
     <div class="scroll-indicator" v-if="showIndicator">
-      <div class="button-container" v-for="(section, index) in sections" :key="index" @click="scrollToSection(index)">
+      <div class="button-container" v-for="(section, index) in sections" :key="index" @click="scrollToSection(index);activeSection=index">
+        <div><div :style="activeSection===0 ? { color: 'white'} : {}" class="pageButtons">{{ section.title }} </div></div>
         <div class="box"></div>
-        {{ section.title }}
       </div>
     </div>
   </div>
@@ -93,7 +91,7 @@ export default {
       setTimeout(() => {
         // This will trigger the actual removal
         el.style.opacity = 0;
-      }, 500); // Delay in milliseconds (500ms in this example)
+      }, 500);
     }
   },
   mounted() {
@@ -106,16 +104,20 @@ export default {
 </script>
 
 <style scoped>
-.box{
+.box {
   border: solid black 5px;
   padding: 5px;
-  background-color:white;
+  background-color: white;
+  margin: 5 px;
 }
 
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition: opacity 0.5s ease;
 }
-.fade-enter, .fade-leave-to {
+
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
 }
 
@@ -131,7 +133,7 @@ export default {
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  flex-direction:column;
+  flex-direction: column;
 }
 
 .section:nth-child(1) .content {
@@ -142,33 +144,42 @@ export default {
   z-index: 2;
 }
 
+.sidescroll-container {
+  background-color: green;
+  color: white;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-wrap: nowrap;
+  width: 80%;
+  margin-right: 5px;
+}
+
 .scroll-indicator {
   position: fixed;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
-  display:inline-block;
   flex-direction: column;
-  margin: 0px;
 }
 
-.scroll-indicator button {
-  margin-bottom: 10px;
+.button-container {
+  flex-direction: row;
+  padding-top: 10px;
+  justify-content: right;
+  padding-right: 5px;
 }
 
-.button-container{
-  display: flex;
-  flex-direction:row;
-  background:red;
+.pageButtons {
+  white-space: nowrap;
+  position: absolute;
+  transition: transform 0.5s ease 0.05s,opacity 0.5s ease 0.05s;
+  opacity: 0;
+  padding-right: 100%;
 }
 
-.sidescroll-container {
-  background-color:green;
-  color:white;
-  align-items: center;
-  justify-content: center;
-  display:flex;
-  flex-wrap: nowrap;
-  width: 80%;
+.pageButtons:hover {
+  transform: translateX(-20%);
+  opacity: 1.0;
 }
 </style>

src/components/AboutMeComponents/SideScrolling.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="scroll-container">
-
+        
         <div id="scroll-text">This is scrolling text.</div>
     </div>
 
@@ -25,38 +25,16 @@ export default {
 }
 
 #scroll-text {
-  /* animation properties */
-  -moz-transform: translateX(100%);
-  -webkit-transform: translateX(100%);
   transform: translateX(100%);
-  
-  -moz-animation: my-animation 15s linear infinite;
-  -webkit-animation: my-animation 15s linear infinite;
-  animation: my-animation 15s linear infinite;
-}
-
-/* for Firefox */
-@-moz-keyframes my-animation {
-  from { -moz-transform: translateX(100%); }
-  to { -moz-transform: translateX(-100%); }
-}
-
-/* for Chrome */
-@-webkit-keyframes my-animation {
-  from { -webkit-transform: translateX(100%); }
-  to { -webkit-transform: translateX(-100%); }
+  animation: my-animation 2s linear infinite;
 }
 
 @keyframes my-animation {
   from {
-    -moz-transform: translateX(100%);
-    -webkit-transform: translateX(100%);
     transform: translateX(100%);
   }
   to {
-    -moz-transform: translateX(-100%);
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
+    transform: translateX(0%);
   }
 }
 </style>

src/views/AboutMe.vue

@@ -17,7 +17,7 @@ export default {
   data() {
     return {
       sections: [
-        { id: 1, title: 'Hi, I\'m Phillip Ring', content: 'I crave efficiency and finding new ways to improve. I\'m an honors senior year computer science student attending UT Tyler.' },
+        { id: 1, title: 'About', content: 'I crave efficiency and finding new ways to improve. I\'m an honors senior year computer science student attending UT Tyler.' },
         { id: 2, title: 'Skills', content: 'Technologies: Javascript, HTML/CSS, MySQL, Vue.js, Node, Express.js, BASH. Familiarity with other systems such as Git, Vscode, Wireshark. Knowledgeable in version control systems like Git.' },
         { id: 3, title: 'Projects', content: 'Details about projects.' },
         { id: 4, title: 'Contact', content: 'Feel free to reach out to me via email at [email protected] or connect with me on <a href="https://www.linkedin.com/in/ring-phillip">LinkedIn</a>. I\'m always open to new connections and collaboration.' }