summaryrefslogtreecommitdiff
path: root/docs/showcases
diff options
context:
space:
mode:
Diffstat (limited to 'docs/showcases')
-rw-r--r--docs/showcases/Showcase.vue162
-rw-r--r--docs/showcases/Showcases.vue20
-rw-r--r--docs/showcases/showcases.ts17
3 files changed, 142 insertions, 57 deletions
diff --git a/docs/showcases/Showcase.vue b/docs/showcases/Showcase.vue
index 8ee7b5e..a300974 100644
--- a/docs/showcases/Showcase.vue
+++ b/docs/showcases/Showcase.vue
@@ -1,92 +1,158 @@
<script setup>
defineProps({
src: { type: String, required: true },
- label: { type: String, required: true },
url: { type: String, required: true },
icon: { type: String, required: false, default: "" },
+ title: { type: String, required: false, default: "" },
+ description: { type: String, required: false, default: "" },
+ author: { type: String, required: true },
})
</script>
<template>
- <figure class="showcase">
- <div>
- <a :href="url" target="_blank">
- <img :src="src" :alt="label">
- </a>
- <i :class="icon" class="language-icon" />
+ <figure>
+ <div class="image-wrapper">
+ <img :src="src" :alt="title">
+ <div class="overlay">
+ <div class="text-content">
+ <h3 v-if="title.length">
+ {{ title }}
+ </h3>
+ <h3 v-else>
+ {{ author }}'s dotfiles
+ </h3>
+ <p v-if="description">
+ {{ description }}
+ </p>
+ <span class="author">— {{ author }}</span>
+ <a
+ :href="url"
+ target="_blank"
+ class="setup-button"
+ >View Setup</a>
+ </div>
+ </div>
+ <i
+ v-if="icon"
+ :class="icon"
+ class="language-icon"
+ />
</div>
- <figcaption>
- <a
- :href="url"
- class="label-link"
- target="_blank"
- >
- {{ label }}
- </a>
- </figcaption>
</figure>
</template>
<style scoped>
-.showcase {
+figure {
display: flex;
flex-direction: column;
- align-items: center;
+ align-items: flex-start;
padding: 1rem;
- border-radius: 15px;
+ border-radius: 1rem;
background-color: var(--vp-c-bg-soft);
transition:
- transform 0.3s ease,
- box-shadow 0.3s ease;
-}
-
-.showcase:hover {
- transform: translateY(-5px);
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+ box-shadow 0.3s ease,
+ transform 0.3s ease;
}
-.showcase:hover img {
- transform: scale(1.05);
+figure:hover {
+ box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
+ transform: translateY(-1rem);
}
-.showcase div {
+.image-wrapper {
position: relative;
- display: inline-block;
width: 100%;
- border-radius: 5px;
+ border-radius: 0.5rem;
overflow: hidden;
}
-.showcase img {
+figure img {
width: 100%;
- border-radius: 5px;
- transition: transform 0.3s ease;
+ transition: filter 0.3s ease;
}
-.showcase i {
+figure .overlay {
position: absolute;
- bottom: 5px;
- right: 5px;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ padding: 1rem;
+ opacity: 0;
+ transition:
+ opacity 0.3s ease,
+ backdrop-filter 0.01s ease;
+}
+
+figure:hover .overlay {
+ opacity: 1;
+ backdrop-filter: blur(1rem);
+}
+
+.text-content {
+ color: white;
+ text-align: left;
+ opacity: 0;
+ transform: translateX(-5rem);
+ transition:
+ transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
+ opacity 0.6s ease;
+}
+
+figure:hover .text-content {
+ transform: translateX(2.5rem);
+ opacity: 1;
+}
+
+.text-content h3 {
+ margin: 0;
+ font-size: 2rem;
+}
+
+.text-content p {
+ margin: 0.5rem 0;
+ font-size: 1.1rem;
+}
+
+.text-content .author {
+ margin-top: 0.5rem;
+ text-align: left;
+ display: block;
+ position: relative;
+ font-style: italic;
+ font-size: 1rem;
+ color: #f0f0f0;
+}
+
+figure .language-icon {
+ position: absolute;
+ bottom: 0.5rem;
+ right: 0.5rem;
padding: 0.5rem;
background: var(--vp-c-bg-soft);
border-radius: 100%;
font-size: 1rem;
+ z-index: 1;
}
-figcaption {
- margin-top: 0.8rem;
- text-align: center;
-}
-
-.label-link {
+.setup-button {
+ margin-top: 2rem;
+ padding: 0.5rem 1rem;
+ background-color: var(--vp-c-brand);
+ color: white;
text-decoration: none;
- color: var(--vp-c-text-primary);
- font-weight: semibold;
+ border-radius: 0.5rem;
+ font-weight: bold;
+ display: inline-block;
font-size: 1rem;
- transition: color 0.3s ease;
+ transition: background-color 0.3s ease;
}
-.label-link:hover {
- color: var(--vp-c-brand);
+.setup-button:hover {
+ background-color: darken(var(--vp-c-brand), 10%);
}
</style>
diff --git a/docs/showcases/Showcases.vue b/docs/showcases/Showcases.vue
index acdf601..34960d2 100644
--- a/docs/showcases/Showcases.vue
+++ b/docs/showcases/Showcases.vue
@@ -2,7 +2,6 @@
import showcases from "./showcases"
import Showcase from "./Showcase.vue"
</script>
-
<template>
<div class="Showcases">
<template v-for="(showcase, index) in showcases" :key="index">
@@ -13,10 +12,25 @@ import Showcase from "./Showcase.vue"
class="item"
:class="`grid-${showcase.length}`"
>
- <Showcase v-bind="elem" />
+ <Showcase
+ :src="elem.src"
+ :url="elem.url"
+ :icon="elem.icon"
+ :title="elem.title"
+ :description="elem.description"
+ :author="elem.author"
+ />
</div>
</div>
- <Showcase v-else v-bind="showcase" />
+ <Showcase
+ v-else
+ :src="showcase.src"
+ :url="showcase.url"
+ :icon="showcase.icon"
+ :title="showcase.title"
+ :description="showcase.description"
+ :author="showcase.author"
+ />
</template>
</div>
</template>
diff --git a/docs/showcases/showcases.ts b/docs/showcases/showcases.ts
index 053b628..8354cd8 100644
--- a/docs/showcases/showcases.ts
+++ b/docs/showcases/showcases.ts
@@ -1,24 +1,29 @@
type Showcase = {
- label: string
src: string
url: string
- icon: string // https://devicon.dev/
+ icon?: string // https://devicon.dev/
+ title?: string
+ description?: string
+ author: string
}
type Grid<T> = T | [T, T] | [T, T, T] | [T, T, T, T]
export default [
{
- label: "Placeholder (this is an ags v1 screenshot)",
src: "/astal/showcase/aylur.png",
url: "https://github.com/Aylur/dotfiles",
icon: "devicon-javascript-plain",
+ description: "Placeholder (this is an ags v1 screenshot)",
+ author: "Aylur",
},
{
- label: "Idk I just love oxocarbon",
- src: "/astal/showcase/contrib1.webp",
+ src: "/astal/showcase/tokyob0t-super-duper-hiper-mega-ultra-contribution.webp",
url: "https://github.com/tokyob0t/dotfiles",
icon: "devicon-lua-plain",
+ title: "Tokyob0t's Desktop",
+ description: "Abandonad toda esperanza, vosotros que entráis aquí.",
+ author: "tokyob0t",
},
- // add mowe shuwucases hewe~
+ // add more showcases here~
] satisfies Array<Grid<Showcase>>
generated by cgit v1.2.3 (git 2.25.1) at 2025-07-01 16:43:04 +0000