feat: add personal projects
This commit is contained in:
1
app.vue
1
app.vue
@@ -21,5 +21,6 @@ useHead({
|
|||||||
<template>
|
<template>
|
||||||
<Introduction />
|
<Introduction />
|
||||||
<BeenWorkingWith />
|
<BeenWorkingWith />
|
||||||
|
<PersonalProjects />
|
||||||
<Connect />
|
<Connect />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
66
components/personal-projects.vue
Normal file
66
components/personal-projects.vue
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<UContainer class="flex flex-col gap-5">
|
||||||
|
<div class="text-sm text-gray-500">Personal projects</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-3 gap-5">
|
||||||
|
<Project
|
||||||
|
title="Places for Zendesk"
|
||||||
|
image="https://990141.apps.zdusercontent.com/990141/assets/1701544308-8c83d0f02afd0b3d7342e5f19304c4b4/logo.png"
|
||||||
|
url="https://www.zendesk.com/marketplace/apps/support/990141/places/?queryID=93faef4132875b9aac529bce8ae24570"
|
||||||
|
>
|
||||||
|
<template v-slot:description>
|
||||||
|
Drive leads and customers straight to your business.
|
||||||
|
</template>
|
||||||
|
<template v-slot:subtitle> Built for Zendesk marketplace </template>
|
||||||
|
</Project>
|
||||||
|
|
||||||
|
<Project
|
||||||
|
title="SneakPeek"
|
||||||
|
image="https://cdn.livechat-files.com/api/file/developers/img/applications/449B6QFGg/icons/AecAyk1Gg-960x960.png"
|
||||||
|
url="https://www.livechat.com/marketplace/apps/sneakpeek"
|
||||||
|
marketplace="LiveChat"
|
||||||
|
>
|
||||||
|
<template v-slot:description
|
||||||
|
>Turn URLs into visual chat-friendly previews</template
|
||||||
|
>
|
||||||
|
<template v-slot:subtitle> Built for LiveChat marketplace </template>
|
||||||
|
</Project>
|
||||||
|
|
||||||
|
<Project
|
||||||
|
title="Currencies"
|
||||||
|
image="https://cdn.livechat-files.com/api/file/developers/img/applications/WA1l7z4Gg/stCs0iVMg-icon-960x960.png"
|
||||||
|
url="https://www.livechat.com/marketplace/apps/currencies"
|
||||||
|
marketplace="LiveChat"
|
||||||
|
>
|
||||||
|
<template v-slot:description
|
||||||
|
>The quickest way to convert currencies.</template
|
||||||
|
>
|
||||||
|
<template v-slot:subtitle> Built for LiveChat marketplace </template>
|
||||||
|
</Project>
|
||||||
|
|
||||||
|
<Project
|
||||||
|
title="Skirthooks"
|
||||||
|
image="https://cdn.livechat-files.com/api/file/developers/img/applications/yn4GN3-7g/icons/37aysFLng-960x960.png"
|
||||||
|
url="https://www.livechat.com/marketplace/apps/skirthooks"
|
||||||
|
marketplace="LiveChat"
|
||||||
|
>
|
||||||
|
<template v-slot:description
|
||||||
|
>Build webhook based apps, without the web servers.</template
|
||||||
|
>
|
||||||
|
<template v-slot:subtitle> Built for LiveChat marketplace </template>
|
||||||
|
</Project>
|
||||||
|
|
||||||
|
<Project
|
||||||
|
title="Places for LiveChat"
|
||||||
|
image="https://cdn.livechat-files.com/api/file/developers/img/applications/vHcaOp3Mg/icons/pPrAdfeGR-960x960.png"
|
||||||
|
url="https://www.livechat.com/marketplace/apps/skirthooks"
|
||||||
|
marketplace="LiveChat"
|
||||||
|
>
|
||||||
|
<template v-slot:description>
|
||||||
|
Guide customers & leads straight to your business.
|
||||||
|
</template>
|
||||||
|
<template v-slot:subtitle> Built for LiveChat marketplace </template>
|
||||||
|
</Project>
|
||||||
|
</div>
|
||||||
|
</UContainer>
|
||||||
|
</template>
|
||||||
33
components/project.vue
Normal file
33
components/project.vue
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
image: string;
|
||||||
|
url: string;
|
||||||
|
marketplace?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex overflow-auto gap-2 flex-col border rounded-lg p-4">
|
||||||
|
<NuxtImg
|
||||||
|
placeholder
|
||||||
|
:src="props.image"
|
||||||
|
:alt="props.title"
|
||||||
|
class="block w-16 h-16"
|
||||||
|
/>
|
||||||
|
<ULink
|
||||||
|
class="font-semibold hover:underline hover:underline-offset-4"
|
||||||
|
:to="props.url"
|
||||||
|
target="_blank"
|
||||||
|
>{{ props.title }}</ULink
|
||||||
|
>
|
||||||
|
<div class="text-xs text-slate-600">
|
||||||
|
<slot name="subtitle"></slot>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm">
|
||||||
|
<slot name="description">Lorem ipsum dorcet sit amet</slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Reference in New Issue
Block a user