Flycro/Flycro-Me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
Flycro
2022-01-09 00:18:05 +01:00
parent 3d800711d8
commit 9761fc222f
131 changed files with 13270 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Counter.vue Normal file
View File

@@ -0,0 +1,19 @@
<script setup lang="ts">
const props = defineProps<{
initial: number
}>()
const { count, inc, dec } = useCounter(props.initial)
</script>
<template>
<div>
{{ count }}
<button class="inc" @click="inc()">
+
</button>
<button class="dec" @click="dec()">
-
</button>
</div>
</template>

36
src/components/Footer.vue Normal file
View File

@@ -0,0 +1,36 @@
<script setup lang="ts">
import { isDark, toggleDark } from '~/composables'
const { t, availableLocales, locale } = useI18n()
const toggleLocales = () => {
// change to some real logic
const locales = availableLocales
locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
}
</script>
<template>
<nav class="text-xl mt-6">
<router-link class="icon-btn mx-2" to="/" :title="t('button.home')">
<carbon-campsite />
</router-link>
<button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark()">
<carbon-moon v-if="isDark" />
<carbon-sun v-else />
</button>
<a class="icon-btn mx-2" :title="t('button.toggle_langs')" @click="toggleLocales">
<carbon-language />
</a>
<router-link class="icon-btn mx-2" to="/about" :title="t('button.about')">
<carbon-dicom-overlay />
</router-link>
<a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
<carbon-logo-github />
</a>
</nav>
</template>

222
src/components/Navbar.vue Normal file
View File

@@ -0,0 +1,222 @@
<template>
<div class="h-28 bg-light-100 flex flex-row content-center dark:bg-dark-900">
<div class="w-1/5 m-auto flex">
<a href="/">
<svg
id="logo"
class="w-64 h-20"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 790.8 303.3"
xml:space="preserve"
>
<g id="logo-group">
<g id="logo-path-group">
<g>
<path
id="logo-f"
ref="logoF"
class="fill-none stroke-fly-600 dark:stroke-fly-500 stroke-width-5"
d="M20.2,263.9c0.1-1,0.2-2.1,0.5-3.1c2.5-10.2,10.6-17,17.3-24.5c4.5-5,8.6-10.4,10.1-17.1
c1.3-5.5,0.4-10.7-3.2-15c-6.5-8-10.8-17.1-10.1-27.7c1.5-20.5,19.4-35.9,22.3-56.3c0.7-5.3,0.1-10.7,0-16
c-0.2-7.8,0.9-15.7,4.6-22.7c3.2-6.1,8.6-11.2,15.2-13c7.2-1.9,14.9,0.3,21.9,2.9c4.9,1.8,9.7,4.5,14.9,5.3
c5.6,0.9,11.2-1.1,16.2-3.5c3.4-1.6,6.6-3.3,9.8-5.2c1.2-0.7,8.1-4.5,6.8,0c-3.5,11.8-10.8,22.2-21.4,28.7
c-3.8,2.3-8.1,4.1-12.6,4.2c-4.7,0.2-9.3-1.4-14-2c-12.6-1.3-22.6,12.2-23.2,23.8c-0.7,12.2,17.5,8.6,24.5,6.5
c7-2.2,13.6-5.4,19.6-9.5c3.1-2,7.1-5.3,11-5.1c3.5,0.1,6.4,2.4,9.3,4.2c2.7,1.7,6.3,1.2,8.9,3c5.4,3.7-1.9,14.6-4.8,18.1
c-4.5,5.4-11,8.8-18.1,8.5c-5.7-0.2-11.1-2.6-16.7-3.6c-12.7-2.2-40.4,7.8-35.9,24.7c1.2,4.6,4.1,8.4,6.2,12.6
c3.8,7.5,4.8,16.1,2.9,24.2c-2.1,8-7.2,12.4-13.4,17.1c-6.6,5-12.9,10.6-17.6,17.5c-5.1,7.6-7.9,16.4-10.2,25.1
c-1.2,4.7-2.1,11.3-8.5,11.1c-4.7-0.4-8.9-3.1-11.2-7.2C20.4,268.2,20,266,20.2,263.9z"
/>
<path
id="logo-l"
ref="logoL"
class="fill-none stroke-fly-600 dark:stroke-fly-500 stroke-width-5"
d="M150.5,253.5c0.8-8.1,4.1-15.8,8.2-22.9c3.8-6.7,8.4-12.8,12.7-19.1c3.8-5.6,7.6-11.4,9.5-18
c2-7.1,2.7-14.8,3.8-22c1.2-8-0.9-15.6-3.6-22.9c-2.1-5.7-5.3-11-7.2-16.8c-1.9-5.8-2.7-11.9-2.4-18c0.3-7,1.9-13.9,3.6-20.7
c1-4.7,2.4-9.2,4.3-13.6c1.4-2.9,3.2-5.5,5.3-7.9c1.8-2.2,3.8-5.5,7.1-4.7c1.2,0.3,2.4,0.9,3.4,1.8c6.6,5.3,8.4,13.9,5.9,21.7
c-2.8,8.7-9.7,15.9-11.6,24.8c-1.2,5.8-0.2,11.8,1.2,17.6c1.1,4.8,2.8,9.4,5.1,13.6c1.3,2,2.7,4,4.3,5.8c1.4,2.1,2.6,4.4,3.5,6.8
c2.1,5.4,1.2,10.1,0.2,15.6c-0.6,3.5-1.3,7-2.3,10.5c-0.9,3.2-2.6,6-4.3,8.9c-5.2,8.9-10.9,16.7-11.2,27.5
c-0.1,4.4,1.2,8.3,5.3,10.5c3.9,2.3,8.8,2,12.5-0.6c3.2-2.1,5.1-5.1,6.9-8.2c2.9-5.2,7.5-9.3,13.1-11.7c2.8-1.2,5.9-1.5,8.9-0.8
c4.1,0.7,8.7,1,9.2,6.1c0.5,4.6-1.6,8.4-2.7,12.6c-1.1,4.4-3.3,8.4-6.4,11.6c-4.3,4.4-10.3,6.8-16.2,8c-5.9,1.2-12.2,1.4-17.2,5
c-5.5,3.9-7.8,11-13.9,14.2c-8,4.1-19.9,7.4-28.6,3.7c-1.5-0.6-2.9-1.6-4-2.8c-0.9-1.3-1.5-2.7-1.8-4.2
C150.3,261.2,150,257.3,150.5,253.5z"
/>
<path
id="logo-y"
ref="logoY"
class="fill-none stroke-fly-600 dark:stroke-fly-500 stroke-width-5"
d="M275.5,141.1c0.4,0.9,0.6,1.9,0.6,2.9c0.5,6.2-0.8,12.5-0.6,18.7c0,0.4,0,0.7,0,1.1
c0.3,5.6,1.3,11.1,4.8,15.9c3.1,4.2,6.4,8.3,8.2,13.5c1.9,5.6,3.2,11.6,2.5,17.5c-0.7,5.8-3.5,11-6,16.2c-2.3,4.8-4,9.8-3.4,15.1
c0.5,4.8,2.4,9.2,5.6,12.8c2.6,2.7,6.4,3.7,10,2.9c3.9-1.1,5.7-4.3,7.7-7.5c2.3-3.8,4.4-7.7,6.2-11.7c2.4-5.3,4.7-11,5.7-16.8
c1-5.8,0.6-11.5,0.3-17.2c-0.3-6.2-0.7-12.6-2.2-18.7c-1.5-6.3-4.6-12.2-6.7-18.4c-1.9-5.7-4.4-11.1-2.6-17.7
c1.5-5.8,4.8-10.1,8.8-13.9c4.3-4.1,7.2-8.5,8.2-14.4c1.1-5.7,0.7-11.6-1.3-17c-1.1-3.2-2-6.3-1.5-9.8c1-6.8,4.3-12.6,7.3-18.5
c2.3-4.6,4.7-9.2,6.6-14c1.1-2.7-0.3-5.9-1.9-8.1c-2.6-3.6-8.5-5.1-12.3-2.5c-2.8,1.8-5.2,6.3-5.8,9.5c-0.6,3.6,0.5,7.1-1,10.6
c-1.4,3.5-4,6.1-6.5,8.7c-1.9,1.8-3.6,3.6-5.1,5.6c-1.4,2-2.5,4.2-3.4,6.5c-2.1,4.7-2.8,9.8-2.2,14.9c0.4,2.5,1.2,5,1.4,7.5
c0.4,3-0.5,6.1-2.6,8.4c-0.8,1-1.9,1.6-3.2,1.9c-1,0.2-2.1,0-3-0.6c-1.4-1-1.6-3-1.5-4.8c0.2-4.6,1.3-10.5-2.4-14
c-4-3.7-8.4-6.9-12.5-10.4c-2.7-2.3-5.8-4.9-4.8-8.6c1.2-5.4,1.1-11-0.4-16.3c-0.4-1.7-1.2-3.3-2.4-4.6c-4.3-4.3-11.1-4.3-16-1.2
c-4.9,3.1-7.3,9.6-7.1,15.2c0.2,4.4,2.4,6.6,5.4,9.5c2.2,2.1,4.5,3.9,7,5.6c2.8,1.9,4.6,4.9,5.2,8.2c0.8,4.8-1,9.1-1.7,13.7
c-0.6,4.3-0.7,8.2,1.2,12.1c2,4.2,6.6,10.2,11.8,9.9c1.2-0.2,2.4-0.1,3.5,0.3C274.5,139.4,275.2,140.2,275.5,141.1z"
/>
<path
id="logo-c"
ref="logoC"
class="fill-none stroke-fly-600 dark:stroke-fly-500 stroke-width-5"
d="M386.6,156.2c-1.1,5.2-1.6,10.5-0.2,15.7c1.1,4.5,3.7,8.5,6.1,12.4c2.3,3.9,5,7.6,8,10.9
c5.6,5.9,15.3,10.7,23.5,10.6c3.4,0,6.8-0.9,10.2-1.1c4.8-0.3,9.5,1.6,12.7,5.3c3.8,4.3,2.3,10.1-0.6,14.4c-1.8,2.6-4,5-5.4,7.9
c-1.8,3.6-2.3,7.8-1.5,11.7c0.4,1.8,1.3,3.2,0.9,5c-0.9,4.4-6.3,5.4-10.1,5.5c-5.9,0.2-11.6-1.3-16.8-4.1
c-7.1-4.1-10.8-10.9-12.4-18.8c-0.8-4.2-2.6-8.2-5.2-11.7c-7.2-9.6-19.5-12.9-27.6-21.5c-4.2-4.5-7-10-8.2-16
c-2.4-12,2.6-24.8,8.1-35.2c4.1-7.7,8.2-15.7,9.2-24.5c1.1-9.4-1.6-18.9-1.1-28.4c0.1-2.2,0.4-4.3,0.8-6.5
c1.9-10.7,7.4-20.7,16.6-26.9c2.6-1.7,5.6-3.2,8.7-3.2c2.6,0.1,5.1,0.9,7.3,2.3c4.1,2.6,9.1,3.4,13.8,2.3
c5.5-1.1,10.8-3.2,16-5.1c6.8-2.5,13.9-4.7,21.1-3.9c4.5,0.5,9.3,2.5,10.4,7.3c0.4,2.3,0.2,4.6-0.7,6.7c-1.4,4-3.8,7.4-6.3,10.8
c-1.6,2.2-3.3,4.4-4.9,6.6c-0.6,0.9-1.4,1.7-2.3,2.3c-1.2,0.6-2.7,0.7-3.9,0.1c-4.8-1.8-10.2-1.5-15.1-0.1
c-4.9,1.6-9.5,3.8-13.8,6.6c-5.6,3.5-11,7.3-15.3,12.1c-3.8,4.2-6.7,9.2-10.1,13.8c-3.1,4.3-4.6,9.5-6.1,14.6l-3.6,12.9
C388.1,150.2,387.2,153.2,386.6,156.2z"
/>
<path
id="logo-r"
ref="logoR"
class="fill-none stroke-fly-600 dark:stroke-fly-500 stroke-width-5"
d="M540.7,270c0.3-1.2,0.5-2.5,0.4-3.8c-0.1-3.8,0.6-7.5,2-11.1c3-8,9.7-13.3,14.1-20.4
c4.1-6.7,5.6-14.7,5.9-22.6c0.2-6.7-0.4-13.4-0.7-20c-0.2-6.3-1.2-12.6-3-18.7c-1.7-5.8-5.8-9.9-8.2-15.3
c-3.7-8.3-7.3-20.8-0.2-28.1c2.4-2.4,5.3-4.2,8.6-5.3c4.5-1.6,9.2-2.2,13.9-1.6c1.8,0.1,3.6,0.7,5.2,1.6
c5.1,3.1,3.3,11.9,2.8,16.8c-0.7,7-2.1,13.9-2.9,20.9c-0.6,5.9,2.9,12.5,8.6,14.8c3.2,1.3,7,0.6,10.1-1c4.2-2.2,9.2-6.5,10.5-11.2
c0.5-2.1,0.7-4.2,0.6-6.4c-0.1-6.1-0.8-12.2-2.2-18.1c-1.3-5.6-4.8-10.4-6.1-16c-1.4-6.2,0-12.6,1.6-18.8c1.3-5,2.9-10,4.8-14.8
c1.1-2.5,2.2-5.1,2-7.8c-0.3-3.6-3-6.6-6.2-8.1c-19.2-9.2-33.7,12.9-40.3,27.6c0,0.1,0,0.1-0.1,0.2c-1.6,4-5.3,6.8-9.6,7.1
c-7.3,0.7-7.8-9.7-8-14.6c-0.1-3.7,1.5-6.5,2.7-9.9c1.1-3,2.1-6.1,2.8-9.2c1.4-6.3,2.4-14-1.1-19.8c-1.7-2.8-4.4-4.8-7.5-5.7
c-11.9-3.8-22.4,3.7-28.5,13.5c-5.7,9.2-3.1,22.4,5.9,28.6c1.4,0.8,2.7,1.8,3.8,2.9c1.7,2.2,1.7,5.2,1.2,8
c-1.2,6.8-4.5,12.8-8,18.5c-3.2,5.2-7.9,9.8-9.7,15.7c-1.8,5.9-0.9,13.3,0,19.3c0.5,4,1.7,8,3.5,11.6c2,3.8,5.4,6.6,8.5,9.5
c0.9,0.8,1.7,1.6,2.5,2.5c3.6,3.8,5.9,8.6,6.8,13.7c1,6.2-1,11.2-3.7,16.6c-2.5,5-4.8,10.2-6.9,15.4c-2.9,7.4-5.4,15.1-5.1,23
c0.2,7.9,3.7,16.1,10.5,20.3c3.1,1.8,6.6,3,10.2,3.5c1.6,0.4,3.3,0.4,5,0.1C538.9,273,540.2,271.7,540.7,270z"
/>
<path
id="logo-o"
ref="logoO"
class="fill-none stroke-fly-600 dark:stroke-fly-500 stroke-width-5"
d="M755.5,91.5c-0.3-6-2.3-11.7-7.1-15.9c-3.6-3.1-8.3-4.2-12.5-6.3c-8.7-4.3-13.3-12.1-19.4-19.1
c-5.6-6.4-13.3-12.4-21.7-14.4c-3.4-0.7-7-1-10.5-0.7c-19.7,1-43.6,14.3-41.8,37c0.4,4.8,1.7,9.5,2.6,14.3
c2.7,14.4,1.7,29.2-3,43c-4.6,13.5-7.8,29.1-6.5,43.4c0.7,8.3,2.6,16.5,3.1,24.8c0.7,13-2.5,25.6-1.6,38.5
c0.2,4.3,1,8.5,2.3,12.6c2.2,6.4,5.6,12.3,10.2,17.3c2.6,2.8,5.4,5.3,9.1,6.8c14.6,5.8,34.9,9.1,49.8,2.6
c16.8-7.4,20.7-26.1,23.2-42.4c2.9-18.5,16.1-34.3,16.1-53.2c0-17.5-4.2-33.7-0.1-51.1c1.8-7.5,4.5-14.7,6.2-22.2
C755.1,101.5,755.6,96.5,755.5,91.5z M735.7,115.9c-0.3,0.7-0.6,1.4-1,2.1c-3.2,6.5-7.5,12.5-10.7,19c-3.6,7.5-5.7,15.9-4.9,24.2
c0.8,8.3,4.3,16,6,24.1c3.5,16.9-1.4,35.1-12.3,48.4c-10.8,13.1-27.3,19.4-43,11c-2.7-1.4-5.4-2.9-7.2-5.3
c-1.9-2.5-2.6-5.8-2.8-8.9c-0.6-12.6,9.4-24.3,4.4-36.7c-1.9-4.8-5.5-8.7-8-13.2c-5.2-9.1-6-20.1-2.3-29.9
c2.8-7.4,8.1-13.6,12.3-20.4s7.4-14.9,5.4-22.6c-2.1-8.4-9.8-14.4-12.4-22.6c-3.5-10.9,3.5-23.3,13.8-28.5
c7.2-3.6,16.9-3.9,22.7,1.7c6.3,6,5.4,16,15.1,18.3c8.5,2,18.2,3.8,23.9,11.1C740.9,95.5,739.6,106.7,735.7,115.9L735.7,115.9z"
/>
</g>
</g>
</g>
</svg>
</a>
</div>
<div class="flex justify-end w-full m-5 align-middle self-center">
<router-link class="text-gray-400 mx-4 hover:text-gray-900 dark:hover:text-light-100 <sm:mx-1" to="/posts">
<clarity-note-solid class="md:hidden" /><span class="<md:hidden">Blog</span>
</router-link>
<router-link class="text-gray-400 mx-4 hover:text-gray-900 dark:hover:text-light-100 <sm:mx-1" to="/projects">
<bi-gear-fill class="md:hidden" /><span class="<md:hidden">Projects</span>
</router-link>
<a class="text-gray-400 mx-4 hover:text-gray-900 dark:hover:text-light-100 <sm:hidden <sm:mx-1" href="https://twitter.com/Flycro74" target="_blank" rel="noopener noreferrer">
<bi-twitter />
</a>
<a class="text-gray-400 mx-4 hover:text-gray-900 dark:hover:text-light-100 <sm:mx-1" href="https://github.com/Flycro" target="_blank" rel="noopener noreferrer">
<bi-github />
</a>
<a class="text-gray-400 mx-4 hover:text-gray-900 dark:hover:text-light-100 <sm:mx-1" href="https://www.instagram.com/flycro/" target="_blank" rel="noopener noreferrer">
<bi-instagram />
</a>
<a class="text-gray-400 mx-4 hover:text-gray-900 dark:hover:text-light-100 <sm:hidden <sm:mx-1" href="https://discordapp.com/users/431506802635440128" target="_blank" rel="noopener noreferrer">
<bi-discord />
</a>
<a class="text-gray-400 mx-4 hover:text-gray-900 dark:hover:text-light-100 <sm:mx-1" href="mailto:hi@flycro.me" target="_blank" rel="noopener noreferrer">
<entypo-mail />
</a>
<a class="text-gray-400 mx-4 my-auto hover:text-gray-900 dark:hover:text-light-100 <sm:mx-1" title="toogle-dark-mode" @click="toggleDark()">
<akar-icons-moon-fill v-if="isDark" />
<ion-bulb v-else />
</a>
</div>
</div>
</template>
<script setup lang="ts">
import { isDark, toggleDark } from '~/composables'
const animatedLogo = useSessionStorage('animated-logo', false)
const logoF = ref<HTMLDivElement>()
const logoL = ref<HTMLDivElement>()
const logoY = ref<HTMLDivElement>()
const logoC = ref<HTMLDivElement>()
const logoR = ref<HTMLDivElement>()
const logoO = ref<HTMLDivElement>()
onMounted(() => {
if (animatedLogo.value === false) {
logoF?.value?.classList.add('gENfTICK_0')
logoL?.value?.classList.add('gENfTICK_1')
logoY?.value?.classList.add('gENfTICK_2')
logoC?.value?.classList.add('gENfTICK_3')
logoR?.value?.classList.add('gENfTICK_4')
logoO?.value?.classList.add('gENfTICK_5')
animatedLogo.value = true
}
})
</script>
<style scoped>
.router-link-active{
@apply text-gray-900 dark:text-light-100 dark:hover:text-light-100
}
.st0 {
@apply stroke-fly-600 dark:stroke-fly-500
fill: none;
stroke-width: 5;
stroke-miterlimit: 10;
}
.gENfTICK_0 {
stroke-dasharray: 739 741;
stroke-dashoffset: 740;
animation: gENfTICK_draw 1500ms linear 0ms forwards;
}
.gENfTICK_1 {
stroke-dasharray: 612 614;
stroke-dashoffset: 613;
animation: gENfTICK_draw 1500ms linear 0ms forwards;
}
.gENfTICK_2 {
stroke-dasharray: 636 638;
stroke-dashoffset: 637;
animation: gENfTICK_draw 1500ms linear 0ms forwards;
}
.gENfTICK_3 {
stroke-dasharray: 583 585;
stroke-dashoffset: 584;
animation: gENfTICK_draw 1500ms linear 0ms forwards;
}
.gENfTICK_4 {
stroke-dasharray: 1106 1108;
stroke-dashoffset: 1107;
animation: gENfTICK_draw 1500ms linear 0ms forwards;
}
.gENfTICK_5 {
stroke-dasharray: 780 782;
stroke-dashoffset: 781;
animation: gENfTICK_draw 1500ms linear 0ms forwards;
}
@keyframes gENfTICK_draw {
100% {
stroke-dashoffset: 0;
}
}
@keyframes gENfTICK_fade {
0% {
stroke-opacity: 1;
}
93.54838709677419% {
stroke-opacity: 1;
}
100% {
stroke-opacity: 0;
}
}
</style>

10
src/components/README.md Normal file
View File

@@ -0,0 +1,10 @@
## Components
Components in this dir will be auto-registered and on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components).
### Icons
You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
It will only bundle the icons you use. Check out [`unplugin-icons`](https://github.com/antfu/unplugin-icons) for more details.