Added Vuetify and enhanced experience with carousel

indiePeeters · Nov 29, 2023 · a0c676e · a0c676e
1 parent 8c0715b
commit a0c676e
Show file tree

Hide file tree

Showing 14 changed files with 151 additions and 69 deletions.
diff --git a/web/index.html b/web/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.png">
+    <link rel="icon" href="favicon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Indie Peeters</title>
+    <meta name="description" content="Passionate software developer specializing in front-end development. With a user-centric approach, I create impactful solutions that resonate and enhance the end users' experiences. Explore my portfolio for a showcase of innovative and user-friendly projects.">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800%7CInter:100,200,300,400,500,600,700,800" media="all">
     <base href="/">
   </head>

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -16,7 +16,8 @@
     "postcss-plugin": "^1.0.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.4.1",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.4",
+    "vuetify": "^3.4.3"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

diff --git a/web/public/assets/companies/mapcreator.png b/web/public/assets/companies/mapcreator.png
diff --git a/web/public/assets/companies/opencirclesolutions.png b/web/public/assets/companies/opencirclesolutions.png
diff --git a/web/public/assets/favicon.png → web/public/favicon.png b/web/public/assets/favicon.png → web/public/favicon.png
diff --git a/web/public/robots.txt b/web/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/web/src/features/HomeHeader/HomeHeader.vue b/web/src/features/HomeHeader/HomeHeader.vue
@@ -5,8 +5,8 @@
         <span>Hi! I am Indie<span ref="typingJobTitle" class="typing-job-title"></span></span>
       </span>
       <div class="home-header-buttons">
-        <a class="no-underline" href="#about-me"><PrimaryButton buttonText="More about me"/></a>
-        <a class="no-underline" href="#my-projects"><PrimaryButton buttonText="More about my projects"/></a>
+        <a class="no-underline" @click="scrollIntoView('about-me')"><PrimaryButton buttonText="More about me"/></a>
+        <a class="no-underline" @click="scrollIntoView('my-projects')"><PrimaryButton buttonText="More about my projects"/></a>
       </div>
       <div class="home-header-text">I am a passionate software developer in love with everything related front-end development. Guided by a user-centric approach, I craft solutions that not only resonate but also leave a lasting impact on the end users' experiences.</div>
     </div>
@@ -44,6 +44,17 @@ export default defineComponent({
     setInterval(textLoad, 12000);
   },
   methods: {
+    scrollIntoView(scrollTargetName: string) {
+      const scrollTarget = document.getElementById(scrollTargetName);
+      if (scrollTarget) {
+        const offsetTop = scrollTarget.offsetTop;
+ 
+        window.scrollTo({
+          top: offsetTop - 32,
+          behavior: 'smooth',
+        });
+      }
+    }
   }
 })
 </script>

diff --git a/web/src/features/MyExperience/ExperienceItem.vue b/web/src/features/MyExperience/ExperienceItem.vue
@@ -49,7 +49,7 @@ export default defineComponent({
 
     .company-icon-mobile {
       display: inline  !important;
-      height: 40px !important;
+      height: 58px !important;
     }
 
     .experience-header-container {

diff --git a/web/src/features/MyExperience/ExperienceTimeline.vue b/web/src/features/MyExperience/ExperienceTimeline.vue
@@ -29,47 +29,48 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 
 export default defineComponent({
-  setup() {
-    var currentExperienceIndex = ref(0)
+  props: {
+    currentExperienceIndex: { type: Number },
+  },
+  setup(props) {
+    const currentExperienceIndex = ref(props.currentExperienceIndex || 0);
+    watch(
+      () => props.currentExperienceIndex,
+      (newValue) => {
+        currentExperienceIndex.value = newValue ?? 0;
+      },
+      { immediate: true }
+    );
     return {
       currentExperienceIndex,
       maxExperienceIndex: 2,
       isSlideShowEnabled: true,
       intervalId: 0
     }
   },
-  mounted() {
-    this.startSlideShow()
-  },
+  // watch: {
+  //   currentExperienceIndex: {
+  //     handler(newValue) {
+  //       debugger
+  //       this.currentExperienceIndex = newValue;
+  //     },
+  //     deep: true,
+  //     immediate:true,
+  //   }
+  // },
   emits: {
     onCurrentExperienceIndexChanged(currentExperienceIndex : number) {
       return currentExperienceIndex
     }
   },
   methods: {
     onCurrentExperienceIndexChanged(currentExperienceIndex : number) {
-      this.stopSlideShow()
       this.currentExperienceIndex = currentExperienceIndex
       this.$emit('onCurrentExperienceIndexChanged', currentExperienceIndex)
-    },
-    startSlideShow() {
-      this.intervalId = setInterval(() => {
-        if (this.isSlideShowEnabled) {
-          this.currentExperienceIndex++;
-          this.$emit('onCurrentExperienceIndexChanged', this.currentExperienceIndex)
-          if (this.currentExperienceIndex > this.maxExperienceIndex) {
-            this.currentExperienceIndex = 0;
-            this.$emit('onCurrentExperienceIndexChanged', this.currentExperienceIndex)
-          }
-      }
-      }, 5000);
-    },
-    stopSlideShow() {
-      this.isSlideShowEnabled = false
-    },
+    }
   }
 })
 

diff --git a/web/src/features/MyExperience/MyExperience.vue b/web/src/features/MyExperience/MyExperience.vue
@@ -6,21 +6,29 @@
     </div>
 
     <div class="experience-list">
-      <ExperienceItem
-        v-for="experience in experiences"
-        v-show="experience.id === selectedExperience.id"
-        :class="{'visible': experience.id === selectedExperience.id}"
-        :key="experience.id"
-        :experienceIndex="experience.id"
-        :roleTitle="selectedExperience.roleTitle"
-        :roleDescription="selectedExperience.roleDescription"
-        :company="selectedExperience.company"
-        :companyLogo="selectedExperience.companyLogo"
-        :startYear="selectedExperience.startYear"
-        :endYear="selectedExperience.endYear"
-      />
+      <v-carousel
+        class="carousel"
+        v-model="currentExperienceIndex"
+        :touch="true"
+        :cycle="isCycleEnabled"
+        :continues="true"
+        :hide-delimiters="true"
+        :show-arrows="false"
+        @touch="">
+        <v-carousel-item  v-for="experience in experiences">
+          <ExperienceItem
+            :key="experience.id"
+            :experienceIndex="experience.id"
+            :roleTitle="experience.roleTitle"
+            :roleDescription="experience.roleDescription"
+            :company="experience.company"
+            :companyLogo="experience.companyLogo"
+            :startYear="experience.startYear"
+            :endYear="experience.endYear"/>
+        </v-carousel-item> 
+      </v-carousel>
     </div>
-    <ExperienceTimeline @onCurrentExperienceIndexChanged="setCurrentItemIndex"/>
+    <ExperienceTimeline :currentExperienceIndex="currentExperienceIndex" @onCurrentExperienceIndexChanged="setCurrentItemIndex"/>
   </div>
 </template>
 
@@ -74,6 +82,11 @@ export default defineComponent({
       show
     }
   },
+  data() {
+    return {
+      isCycleEnabled: true
+    };
+  },
   computed: {
     globalTranslations() {
       return globalTranslations
@@ -85,18 +98,30 @@ export default defineComponent({
   methods: {
     setCurrentItemIndex(currentItemIndex: number) {
       this.currentExperienceIndex = currentItemIndex
+      this.isCycleEnabled = false
+    },
+    disableCycle() {
+      this.isCycleEnabled = false
     }
   }
 })
 </script>
 
 <style lang="scss" scoped>
+.carousel {
+  height: fit-content !important;
+  min-height: 320px !important;
+}
 
 @media only screen and (max-width: 600px) {
   .company-icon {
     display: none !important;
   }
 
+ .carousel {
+    min-height: 440px !important;
+  }
+
   .company-icon-mobile {
     display: inline  !important;
   }
@@ -148,19 +173,4 @@ export default defineComponent({
 }
 
 
-.experience-list {
-  display: flex;
-  flex-direction: column;
-  transition: 0.6s all ease;
-}
-
-.experience-list .visible {
-  opacity: 1;
-  transition: opacity 1s;
-}
-
-.experience-list .visible + .visible {
-  transition-delay: 1s;
-}
-
 </style>
diff --git a/web/src/features/Projects/MyProjects.vue b/web/src/features/Projects/MyProjects.vue
@@ -25,7 +25,14 @@ export default defineComponent({
 }) 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+@media only screen and (max-width: 600px) {
+  .projects {
+    img {
+      width: calc(100vw -16px);
+    }
+  }
+}
 
 .projects {
   display: flex;

diff --git a/web/src/main.ts b/web/src/main.ts
@@ -3,13 +3,22 @@ import App from './App.vue'
 import router from './router'
 import i18n from './locales/i18n'
 import { globalTranslations } from '@/locales/i18n'
-import type { Translations } from './locales/Translations'
+import type { Translations } from '@/locales/Translations'
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
 
-const app = createApp(App);
+const vuetify = createVuetify({
+    components,
+    directives,
+  })
 
-app.use(router)
+const app = createApp(App)
+  .use(router)
+  .use(vuetify)
+  .use(i18n)
 
-app.use(i18n)
 app.config.globalProperties.$globalTranslations = globalTranslations.value as Translations
 
 app.mount('#app')
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
@@ -21,8 +21,8 @@ import MyProjects from '@/features/Projects/MyProjects.vue';
 <style lang="scss">
 @media only screen and (max-width: 600px) {
   .content {
-    padding-left: 16px;
-    padding-right: 16px;
+    padding-left: 8px;
+    padding-right: 8px;
     width: calc(100% - 32px) !important
   }
 }