Slight cleanup in files, minor adjustments to about view, adjusted sl…

…ot animations
Kahera · Dec 22, 2023 · 918ffcd · 918ffcd
1 parent 9ac4b8a
commit 918ffcd
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 65 deletions.
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -5,36 +5,6 @@
 @tailwind utilities;
 
 @layer base {
-  /* 'primary': {
-    'lightest': '#f9fbee',
-    'lighter': '#f7e8de',
-    'light': '#E592A6',
-    DEFAULT: '#D23C6E',
-    'darker': '#913654',
-    'darkest': '#261c1f',
-    'dusty': {
-      'light': '#d08e80',
-      'dark': '#d08e80'
-    }
-  },
-  'secondary': {
-    'lightest': '#e5f3dd',
-    'lighter': '#d6f5db',
-    DEFAULT: '#C5ECB1',
-    '600': '#75cc84',
-    'darkest': '#297058',
-    'deep': '#1e3932',
-  },
-  'accent': {
-    'lightest': '#d1eff4',
-    'lighter': '#6ebac9',
-    DEFAULT: '#41557C',
-    'dusty': '#525c6f',
-    'darker': '#2F3E5B',
-    'darkest': '#1E2739',
-    'deep': '#0c1018',
-  } */
-
   :root {
     --color-primary-lightest: 249 251 238;
     --color-primary-lighter: 247 232 222;

diff --git a/src/components/DropdownComponent.vue b/src/components/DropdownComponent.vue
@@ -2,10 +2,6 @@
 import { ref, type PropType, onUnmounted } from 'vue';
 import Button from './ButtonComponent.vue';
 
-// Animations
-import gsap from 'gsap';
-import { usePrefersReducedMotion } from '@/utilities/prefers-reduced-motion';
-
 defineProps({
     position: {
         type: String as PropType<'left' | 'right'>,
@@ -18,31 +14,9 @@ defineProps({
 });
 
 const dropdownOpen = ref(false);
-
-// Animations
-const reducedMotion = usePrefersReducedMotion();
-
 function toggleDropdown(closeDropdown: boolean = false) {
   if (closeDropdown) dropdownOpen.value = false;
   else dropdownOpen.value = !dropdownOpen.value;
-
-  if (dropdownOpen.value) {
-    gsap.fromTo('.dropdown-parent', {
-      opacity: 0,
-      height: 0
-    }, {
-      opacity: 1,
-      height: 'auto',
-      duration: reducedMotion.value ? 0 : 0.2,
-      delay: reducedMotion.value ? 0 : 0.08,
-    });
-  } else {
-    gsap.to('.dropdown-parent', {
-      opacity: 0,
-      height: 0,
-      duration: reducedMotion.value ? 0 : 0.2,
-    });
-  }
 }
 
 // Close dropdown when clicking outside of it
@@ -53,9 +27,7 @@ const handleOutsideClick = (e: MouseEvent) => {
 };
 
 window.addEventListener('click', handleOutsideClick);
-onUnmounted(() => {
-  window.removeEventListener('click', handleOutsideClick);
-});
+onUnmounted(() => window.removeEventListener('click', handleOutsideClick));
 
 </script>
 

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -141,7 +141,7 @@
     ],
     "reachMe": {
       "heading": "Reach me",
-      "body": "I'm always open to new opportunities, and would love to hear from you! You can reach me at any of these platforms:"
+      "body": "I'm always open to talk about new opportunities, and I'm reachable on multiple platforms. Please reach out!"
     },
     "links": {
       "linkedIn": "https://www.linkedin.com/in/juneveh/?locale=en_US"

diff --git a/src/views/About/AboutView.vue b/src/views/About/AboutView.vue
@@ -64,7 +64,7 @@ function updateData() {
       >
         <Icon
           name="linkedin"
-          classes="inline-block text-[#0e76a8]"
+          classes="w-10 h-10 inline-block text-[#0e76a8]"
         />
 
       </a>
@@ -75,7 +75,7 @@ function updateData() {
         <Icon
           aria-label="GitHub"
           name="github"
-          class="w-12 h-12 p-1 inline-block text-[#24292e] dark:text-[#fafbfc]"
+          class="w-10 h-10 p-1 inline-block text-[#24292e] dark:text-[#fafbfc]"
         />
       </a>
       <a
@@ -85,16 +85,16 @@ function updateData() {
         <Icon
           aria-label="Instagram"
           name="instagram"
-          class="w-12 h-12 inline-block text-[#8a3ab9]"
+          class="w-10 h-10 inline-block text-[#8a3ab9]"
         />
       </a>
     </div>
 
     <!-- About this page -->
-    <h2 class="text-secondary-darker mt-8">
+    <h2 class="text-secondary-darker mt-10">
       {{ $t('about.thisPage.heading') }}
     </h2>
-    <p>
+    <p class="mt-4">
       {{ $t('about.thisPage.intro') }}
       <a
         href="https://github.com/Kahera/Kahera.github.io/issues"