Develop

package.json

@@ -2,9 +2,9 @@
   "name": "ceyhan-io",
   "version": "2.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview --host"
   },
   "author": "Evren Ceyhan",
   "license": "MIT",
@@ -17,7 +17,7 @@
   },
   "homepage": "https://github.com/webceyhan/webceyhan.github.io#readme",
   "dependencies": {
-    "bootstrap-icons": "^1.10.3",
+    "bootstrap-icons": "^1.10.5",
     "tsparticles-slim": "^2.12.0",
     "vue": "^3.2.47",
     "vue-writer": "^1.2.0",
@@ -29,6 +29,6 @@
     "daisyui": "^3.5.1",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
-    "vite": "^2.9.14"
+    "vite": "^2.9.16"
   }
 }

src/App.vue

@@ -1,31 +1,14 @@
 <script setup>
-import { loadSlim } from "tsparticles-slim";
-import { options } from "./particles";
 import AppFooter from "./sections/AppFooter.vue";
 import AppHeader from "./sections/AppHeader.vue";
 import AppProjects from "./sections/AppProjects.vue";
-
-const particlesInit = async (engine) => {
-  //await loadFull(engine);
-  await loadSlim(engine);
-};
-
-const particlesLoaded = async (container) => {
-  console.log("Particles container loaded", container);
-};
+import AppParticles from "./sections/AppParticles.vue";
 </script>
 
 <template>
   <div class="space-y-10">
     <AppHeader />
-
-    <vue-particles
-      id="tsparticles"
-      :particlesInit="particlesInit"
-      :particlesLoaded="particlesLoaded"
-      :options="options"
-    />
-
+    <AppParticles />
     <AppProjects />
     <AppFooter />
   </div>

src/cache.js

@@ -14,6 +14,13 @@ const NAME = `${PREFIX}${VERSION}`;
  * Fetch response from cache or fetch fresh one.
  */
 export async function fetchResponse(url) {
+    // check if caches are supported
+    // bugfix: caches not defined when using unsecure connection
+    if (!window.caches) {
+        console.log('Caches not supported');
+        return await fetch(url);
+    }
+
     // try to get response from the cache
     let cachedResponse = await getCachedResponse(url);
 
@@ -44,6 +51,11 @@ async function getCachedResponse(url) {
  * Purge expired caches to force a refresh.
  */
 export async function purgeExpiredCaches(all = false) {
+    // bugfix: @see fetchResponse()
+    if (!window.caches) {
+        return console.log('Caches not supported');
+    }
+
     // get all cache keys
     const cacheNames = await caches.keys();
 

src/main.js

@@ -1,8 +1,7 @@
 import { createApp } from 'vue';
-import Particles from 'vue3-particles';
 import App from './App.vue';
 
 import 'bootstrap-icons/font/bootstrap-icons.css';
 import './style.css';
 
-createApp(App).use(Particles).mount('#app');
+createApp(App).mount('#app');

src/sections/AppHeader.vue

@@ -4,6 +4,7 @@ import VueWriter from "vue-writer";
 import { useProfile } from "@/store/profile";
 import Loader from "@/components/Loader.vue";
 import Avatar from "@/components/Avatar.vue";
+import CoverUrl from "@/assets/bg-header.jpg";
 
 const showLogo = ref(true);
 
@@ -15,7 +16,10 @@ const titles = computed(() => {
 </script>
 
 <template>
-  <header class="hero min-h-screen" :class="$style.cover">
+  <header
+    class="hero min-h-screen overflow-hidden bg-bottom"
+    :style="{ backgroundImage: `url(${CoverUrl})` }"
+  >
     <!-- <div class="hero-overlay bg-opacity-60"></div> -->
     <div class="hero-content text-center md:text-left text-neutral-content">
       <Loader v-if="loading" ring class="w-52" />
@@ -48,8 +52,8 @@ const titles = computed(() => {
             working at
             <img
               v-if="showLogo"
-              src="../assets/company-logo.png"
               class="w-36 h-auto inline-block"
+              src="@/assets/company-logo.png"
               @error="showLogo = false"
             />
             <span v-else class="text-nowrap">{{ profile.company }}</span>
@@ -59,12 +63,3 @@ const titles = computed(() => {
     </div>
   </header>
 </template>
-
-<style module>
-.cover {
-  background-image: url("../assets/bg-header.jpg");
-  background-position: bottom !important;
-  background-repeat: no-repeat !important;
-  overflow: hidden;
-}
-</style>

src/sections/AppParticles.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { ParticlesComponent } from "vue3-particles";
+import { loadSlim } from "tsparticles-slim";
+
+const particlesInit = async (engine) => {
+  //await loadFull(engine);
+  await loadSlim(engine);
+};
+
+const particlesLoaded = async (container) => {
+  console.log("Particles container loaded", container);
+};
+
+const options = {
+  // background: {
+  //     color: {
+  //         value: '#0d47a1',
+  //     },
+  // },
+  fpsLimit: 120,
+  interactivity: {
+    events: {
+      // onClick: {
+      //     enable: true,
+      //     mode: 'push',
+      // },
+      onHover: {
+        enable: true,
+        mode: "repulse",
+      },
+      resize: true,
+    },
+    modes: {
+      bubble: {
+        distance: 400,
+        duration: 2,
+        opacity: 0.8,
+        size: 40,
+      },
+      push: {
+        quantity: 4,
+      },
+      repulse: {
+        distance: 200,
+        duration: 0.4,
+      },
+    },
+  },
+  particles: {
+    color: {
+      value: "#ffffff",
+    },
+    links: {
+      color: "#ffffff",
+      distance: 150,
+      enable: true,
+      opacity: 0.5,
+      width: 1,
+    },
+    move: {
+      direction: "none",
+      enable: true,
+      outMode: "bounce",
+      random: true,
+      speed: 3,
+      straight: false,
+    },
+    number: {
+      density: {
+        enable: true,
+        area: 800,
+      },
+      value: 60,
+    },
+    opacity: {
+      value: 0.5,
+    },
+    shape: {
+      type: "circle",
+    },
+    size: {
+      random: true,
+      value: 5,
+    },
+  },
+  detectRetina: true,
+};
+</script>
+
+<template>
+  <ParticlesComponent
+    id="tsparticles"
+    :particlesInit="particlesInit"
+    :particlesLoaded="particlesLoaded"
+    :options="options"
+  />
+</template>