Feat/tailwind migration

package.json

@@ -17,12 +17,18 @@
   },
   "homepage": "https://github.com/webceyhan/webceyhan.github.io#readme",
   "dependencies": {
-    "bootstrap": "^5.2.3",
     "bootstrap-icons": "^1.10.3",
-    "vue": "^3.2.47"
+    "tsparticles-slim": "^2.12.0",
+    "vue": "^3.2.47",
+    "vue-writer": "^1.2.0",
+    "vue3-particles": "^2.12.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.4",
+    "autoprefixer": "^10.4.14",
+    "daisyui": "^3.5.1",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.3",
     "vite": "^2.9.14"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.vue

@@ -1,15 +1,32 @@
 <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";
 
-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);
+};
 </script>
 
 <template>
-    <app-header class="py-5 px-md-5" />
+  <div class="space-y-10">
+    <AppHeader />
 
-    <app-projects class="py-3 px-md-5" />
+    <vue-particles
+      id="tsparticles"
+      :particlesInit="particlesInit"
+      :particlesLoaded="particlesLoaded"
+      :options="options"
+    />
 
-    <app-footer class="py-5 px-md-5" />
-</template>
+    <AppProjects />
+    <AppFooter />
+  </div>
+</template>

src/api/github.js

@@ -1,5 +1,5 @@
-import { purgeExpiredCaches } from '../cache';
-import { fetchJson, IS_DEV } from '../utils';
+import { purgeExpiredCaches } from '@/cache';
+import { fetchJson, IS_DEV } from '@/utils';
 import LANGUAGES from './languages.json';
 
 // define vars

src/components/Avatar.vue

@@ -1,13 +1,13 @@
 <script setup>
-
 defineProps({
-    url: String
-})
-
+  url: String,
+});
 </script>
 
 <template>
-    <div class="bg-light bg-opacity-25 rounded-circle p-2 mb-3 w-75">
-        <img class="img-fluid rounded-circle" :src="url" alt="avatar" />
+  <div class="avatar">
+    <div class="ring-8 ring-primary/20 ring-offset-base-100 ring-offset-2 rounded-full">
+      <img :src="url" alt="avatar" />
     </div>
-</template>
+  </div>
+</template>

src/components/Badge.vue

@@ -0,0 +1,23 @@
+<script setup>
+defineProps({
+  label: String,
+  variant: String,
+  outlined: Boolean,
+});
+</script>
+
+<template>
+  <span
+    :class="{
+      badge: true,
+      'badge-primary': variant === 'primary',
+      'badge-secondary': variant === 'secondary',
+      'badge-neutral': variant === 'neutral',
+      'badge-accent': variant === 'accent',
+      'badge-ghost': variant === 'ghost',
+      'badge-outline': outlined,    
+    }"
+  >
+    <slot> {{ label }} </slot>
+  </span>
+</template>

src/components/Button.vue

@@ -0,0 +1,34 @@
+<script setup>
+defineEmits(["click"]);
+
+defineProps({
+  label: String,
+  variant: String,
+  outline: Boolean,
+  active: Boolean,
+  large: Boolean,
+  small: Boolean,
+  tiny: Boolean,
+});
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="{
+      btn: true,
+      'btn-primary': variant === 'primary',
+      'btn-secondary': variant === 'secondary',
+      'btn-accent': variant === 'accent',
+      'btn-ghost': variant === 'ghost',
+      'btn-outline': outline,
+      'btn-active': active,
+      'btn-lg': large,
+      'btn-sm': small,
+      'btn-xs': tiny,
+    }"
+    @click="$emit('click')"
+  >
+    <slot> {{ label }} </slot>
+  </button>
+</template>

src/components/Card.vue

@@ -0,0 +1,36 @@
+<script setup>
+defineProps({
+  title: String,
+  compact: Boolean,
+  imageAside: Boolean,
+  imageOverlay: Boolean,
+});
+</script>
+
+<template>
+  <div
+    :class="{
+      card: true,
+      compact: compact,
+      'card-side': imageAside,
+      'image-full': imageOverlay,
+    }"
+  >
+    <figure v-if="$slots.image">
+      <slot name="image" />
+    </figure>
+
+    <div class="w-full card-body">
+      <!-- title -->
+      <h2 v-if="title" class="card-title">{{ title }}</h2>
+
+      <!-- content -->
+      <slot />
+
+      <!-- actions -->
+      <div v-if="$slots.actions" class="card-actions">
+        <slot name="actions" />
+      </div>
+    </div>
+  </div>
+</template>

src/components/Divider.vue

@@ -0,0 +1,17 @@
+<script setup>
+defineProps({
+  label: String,
+  horizontal: Boolean,
+});
+</script>
+
+<template>
+  <div
+    :class="{
+      divider: true,
+      'divider-horizontal': horizontal,
+    }"
+  >
+    <slot> {{ label }} </slot>
+  </div>
+</template>

src/components/Drawer.vue

@@ -0,0 +1,50 @@
+<script>
+let count = 0;
+</script>
+
+<script setup>
+import { ref } from "vue";
+import Icon from "./Icon.vue";
+
+defineProps({});
+
+const isOpen = ref(false);
+const id = `drawer-${count++}`;
+
+const toggle = () => {
+  isOpen.value = !isOpen.value;
+};
+</script>
+
+<template>
+  <div class="drawer lg:drawer-open">
+    <!-- toggle state -->
+    <input :id="id" type="checkbox" class="drawer-toggle" v-model="isOpen" />
+
+    <div class="drawer-content flex flex-col">
+      <!-- toggle trigger button -->
+      <slot name="trigger" v-bind="{ toggle }">
+        <label :for="id" class="drawer-button btn btn-outline lg:hidden">
+          <Icon name="list" />
+        </label>
+      </slot>
+
+      <!-- Page content here -->
+      <slot />
+    </div>
+
+    <div class="drawer-side">
+      <label :for="id" class="drawer-overlay" />
+
+      <aside
+        :class="[
+          'w-80 lg:w-96 h-full overflow-scroll p-4 lg:p-0 lg:mr-8 space-y-8',
+          'bg-base-300 text-base-content lg:bg-opacity-50',
+        ]"
+      >
+        <slot name="sidebar" />
+        <!-- Sidebar content here -->
+      </aside>
+    </div>
+  </div>
+</template>

src/components/Heading.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  large: Boolean,
+  //   medium: Boolean, // default
+  small: Boolean,
+});
+</script>
+
+<template>
+  <h1
+    :class="{
+      'text-5xl': large,
+      'text-2xl': !large && !small,
+      'text-xl': small,
+    }"
+  >
+    <slot />
+  </h1>
+</template>

src/components/Icon.vue

@@ -0,0 +1,9 @@
+<script setup>
+defineProps({
+  name: String,
+});
+</script>
+
+<template>
+  <span :class="`bi bi-${name}`" />
+</template>

src/components/Link.vue

@@ -0,0 +1,24 @@
+<script setup>
+defineProps({
+  label: String,
+  hover: Boolean,
+  active: Boolean,
+  variant: String, // primary, secondary, neutral, accent
+});
+</script>
+
+<template>
+  <a
+    href="#"
+    :class="{
+      link: true,
+      'link-primary': variant === 'primary' && !active,
+      'link-secondary': variant === 'secondary' && !active,
+      'link-neutral': variant === 'neutral' && !active,
+      'link-accent': variant === 'accent' && !active,
+      'link-hover': hover,
+    }"
+  >
+    <slot> {{ label }} </slot>
+  </a>
+</template>