Skip to content
This repository was archived by the owner on Nov 5, 2023. It is now read-only.

Commit 6ae325e

Browse files
d0richd0rich
authored
Showcase (#31)
1 parent 66853c1 commit 6ae325e

28 files changed

+821
-209
lines changed

‎.playground/app.vue

Lines changed: 3 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,8 @@
1-
<script setup lang="ts">
2-
import type { CharacterPose, ActionFanItem, ActionListItem } from '../types'
3-
4-
const pose = ref<CharacterPose>('action')
5-
const listItems = ref<ActionListItem<CharacterPose>[]>([
6-
{ title: 'Idle', emit: 'idle' },
7-
{ title: 'Action', emit: 'action' },
8-
{ title: 'Profi', emit: 'profi' }
9-
])
10-
11-
const fanItems = ref<ActionFanItem<CharacterPose>[]>([
12-
{ title: 'Idle', emit: 'idle' },
13-
{ title: 'Action', emit: 'action' },
14-
{ title: 'Profi', emit: 'profi' }
15-
])
16-
</script>
17-
181
<template>
192
<Head>
203
<Title>d0rich • Nuxt design system</Title>
214
</Head>
22-
<main class="w-full min-h-screen bg-neutral-300 px-3 py-10">
23-
<div class="prose prose-lg mx-auto">
24-
<h1 class="sharp-shadow ss-red-500 ss-br-1">d0rich Nuxt design system</h1>
25-
<section class="my-7">
26-
<h2 class="sharp-shadow ss-cyan-500 ss-br-1">
27-
FocusHighlight and Buttons
28-
</h2>
29-
<div class="not-prose flex flex-wrap gap-3">
30-
<DBtn>Just Button</DBtn>
31-
<DBtn no-rotate>No Rotate</DBtn>
32-
</div>
33-
<div class="no-prose my-5">
34-
<DBtn highlight="negative-tile" class="!block"
35-
>Default highlight</DBtn
36-
>
37-
<DBtn highlight="list-item" class="!block">List highlight</DBtn>
38-
<DBtn highlight="list-item" color-class="bg-blue-600" class="!block"
39-
>Custom color</DBtn
40-
>
41-
<DBtn highlight="negative-list-item" class="!block"
42-
>List highlight (negative)</DBtn
43-
>
44-
<DBtn
45-
highlight="composite-list-item"
46-
class="!block"
47-
color-class="bg-white"
48-
>List highlight (composite)</DBtn
49-
>
50-
</div>
51-
<div class="no-prose my-5">
52-
<DBtn href="https://d0rich.me" target="_blank">Link Button</DBtn>
53-
<DBtn no-rotate active class="!block">Active Link</DBtn>
54-
<DBtn no-rotate active class="!block" highlight="negative-list-item"
55-
>Active List Link</DBtn
56-
>
57-
<DBtn
58-
no-rotate
59-
no-passive-highlight
60-
active
61-
class="router-link-active !block"
62-
highlight="negative-list-item"
63-
>Active List Link</DBtn
64-
>
65-
<DBtn text-transform="none" class="!block">No Text transform</DBtn>
66-
</div>
67-
</section>
68-
<section class="my-7">
69-
<h2 class="sharp-shadow ss-cyan-500 ss-br-1">Lists</h2>
70-
<div class="grid md:grid-cols-2 not-prose items-center">
71-
<DCharacter :pose="pose" no-image />
72-
<DActionsList
73-
class="text-white"
74-
:actions="listItems"
75-
@action-focus="pose = $event"
76-
/>
77-
</div>
78-
<div class="grid md:grid-cols-3 not-prose items-center">
79-
<DActionsFan
80-
class="text-white py-48"
81-
side="left"
82-
:actions="fanItems"
83-
@action-focus="pose = $event"
84-
/>
85-
<DCharacter :pose="pose" shape-class="fill-red-500" no-image />
86-
<DActionsFan
87-
class="text-white py-48"
88-
side="right"
89-
:actions="fanItems"
90-
@action-focus="pose = $event"
91-
/>
92-
</div>
93-
</section>
94-
<section class="my-7">
95-
<h2 class="sharp-shadow ss-cyan-500 ss-br-1">Animations</h2>
96-
<div class="grid grid-cols-2 items-center">
97-
<DAnimationSpinner />
98-
<DAnimationAccordion />
99-
<DAnimationHypnosis />
100-
<DAnimationFloatingLetter />
101-
</div>
102-
</section>
103-
<section class="my-7">
104-
<h2 class="sharp-shadow ss-cyan-500 ss-br-1">Shapes</h2>
105-
<div class="grid grid-cols-2 items-center">
106-
<DWrapShape
107-
shape-class="bg-white"
108-
:shape-style="{
109-
clipPath: 'var(--shape-bubble--left)'
110-
}"
111-
>
112-
<div style="padding: var(--shape-bubble--left__padding)">
113-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque
114-
quibusdam possimus aliquid earum adipisci tempore quidem molestiae
115-
distinctio quaerat reiciendis.
116-
</div>
117-
</DWrapShape>
118-
<DWrapShape
119-
shape-class="bg-white"
120-
:shape-style="{
121-
clipPath: 'var(--shape-bubble--right)'
122-
}"
123-
>
124-
<div style="padding: var(--shape-bubble--right__padding)">
125-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque
126-
quibusdam possimus aliquid earum adipisci tempore quidem molestiae
127-
distinctio quaerat reiciendis.
128-
</div>
129-
</DWrapShape>
130-
</div>
131-
</section>
132-
<section class="my-7">
133-
<h2 class="sharp-shadow ss-cyan-500 ss-br-1">Content components</h2>
134-
<div class="not-prose">
135-
<ContentProseBlockquote>
136-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque
137-
quibusdam possimus aliquid earum adipisci tempore quidem molestiae
138-
distinctio quaerat reiciendis.
139-
</ContentProseBlockquote>
140-
<ContentAlert>
141-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque
142-
quibusdam possimus aliquid earum adipisci tempore quidem molestiae
143-
distinctio quaerat reiciendis.
144-
</ContentAlert>
145-
<ContentAlert type="question">
146-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque
147-
quibusdam possimus aliquid earum adipisci tempore quidem molestiae
148-
distinctio quaerat reiciendis.
149-
</ContentAlert>
150-
<ContentAlert type="warning">
151-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque
152-
quibusdam possimus aliquid earum adipisci tempore quidem molestiae
153-
distinctio quaerat reiciendis.
154-
</ContentAlert>
155-
</div>
156-
</section>
157-
</div>
158-
</main>
5+
<NuxtPage />
6+
<CustomFooter class="dark text-white" />
7+
<DBigBangButtonAnimation />
1598
</template>

‎.playground/assets/img/bg/d-bw.webp

66.8 KB
Binary file not shown.

‎.playground/assets/img/bg/hightech-city.png

1.58 MB
Loading

‎.playground/assets/img/bg/it-office.png

1.23 MB
Loading

‎.playground/assets/img/bg/skills.png

975 KB
Loading

‎.playground/assets/img/bg/timeline.png

1.88 MB
Loading

‎.playground/components/B1Intro.vue

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div class="relative h-screen w-full">
3+
<div
4+
class="absolute inset-0 bg-[url('~/assets/img/bg/d-bw.webp')] bg-cover bg-center z-[2]"
5+
/>
6+
<DWrapShape
7+
class="absolute flex items-center inset-0 w-fit mx-auto z-[3]"
8+
shape-class="intro-shape"
9+
>
10+
<div class="p-10 text-xl font-serif text-center prose prose-invert">
11+
<h1>d0rich design system</h1>
12+
<p>Design system inspired by Persona 5 UI</p>
13+
<p>
14+
References:
15+
<ul>
16+
<li>
17+
<a href="https://ridwankhan.com/the-ui-and-ux-of-persona-5-183180eb7cce">The UI and UX of Persona 5</a>
18+
</li>
19+
<li>
20+
<a href="https://www.reddit.com/r/Persona5/comments/gmw6hz/persona_5_royal_fonts_if_i_find_more_about_the/">Persona 5 Royal Fonts</a>
21+
</li>
22+
</ul>
23+
</p>
24+
<p class="italic">
25+
Authored by <a href="https://d0rich.me">d0rich</a>
26+
</p>
27+
</div>
28+
</DWrapShape>
29+
</div>
30+
</template>
31+
32+
<style>
33+
.intro-shape {
34+
clip-path: polygon(3% 3%, 100% 0%, 95% 95%, 0% 100%);
35+
animation: intro-shape-clip-path 5s linear infinite;
36+
@apply backdrop-invert bg-neutral-900 bg-opacity-60;
37+
}
38+
39+
@keyframes intro-shape-clip-path {
40+
0%,
41+
100% {
42+
clip-path: polygon(3% 3%, 100% 0%, 95% 95%, 0% 100%);
43+
}
44+
25% {
45+
clip-path: polygon(5% 3%, 96% 4%, 96% 97%, 0 99%);
46+
}
47+
50% {
48+
clip-path: polygon(3% 2%, 100% 0, 90% 94%, 1% 91%);
49+
}
50+
75% {
51+
clip-path: polygon(4% 7%, 96% 1%, 99% 99%, 8% 95%);
52+
}
53+
}
54+
</style>

‎.playground/components/B2Shapes.vue

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<DWrapBackground
3+
class="font-dialog bg-[url('~/assets/img/bg/skills.png')] bg-cover bg-fixed bg-center"
4+
overlay-class="backdrop-saturate-50 bg-opacity-90"
5+
:overlay-style="{
6+
background:
7+
'var(--d-card-x-ray--action__white), rgb(14 116 144 / var(--tw-bg-opacity))'
8+
}"
9+
>
10+
<div class="py-20 px-5 max-w-screen-lg mx-auto">
11+
<h1>Shapes</h1>
12+
<div class="text-xl flex flex-col items-start">
13+
<!-- First replic -->
14+
<DWrapShape
15+
tag="blockquote"
16+
class="font-dialog text-black dark:text-white my-6"
17+
shape-class="bg-white dark:bg-black opacity-80"
18+
:shape-style="{
19+
clipPath: 'var(--shape-bubble--right)'
20+
}"
21+
>
22+
<template #bg-overlay>
23+
<div
24+
class="absolute inset-0 bg-black dark:bg-white"
25+
style="clip-path: var(--shape-bubble--right__outline)"
26+
/>
27+
</template>
28+
<div style="padding: var(--shape-bubble--right__padding)">
29+
Did you know that this design system has shape system?
30+
</div>
31+
</DWrapShape>
32+
<!-- Second replic -->
33+
<DWrapShape
34+
tag="blockquote"
35+
class="font-dialog text-black dark:text-white my-6 self-end max-w-screen-sm"
36+
shape-class="bg-white dark:bg-black opacity-80"
37+
:shape-style="{
38+
clipPath: 'var(--shape-bubble--left)'
39+
}"
40+
>
41+
<template #bg-overlay>
42+
<div
43+
class="absolute inset-0 bg-black dark:bg-white"
44+
style="clip-path: var(--shape-bubble--left__outline)"
45+
/>
46+
</template>
47+
<div style="padding: var(--shape-bubble--left__padding)">
48+
Wow, that's cool! It seems like it's very flexible! There are some
49+
predefined shapes, but you can also create your own!
50+
</div>
51+
</DWrapShape>
52+
</div>
53+
<!-- Card -->
54+
<div class="grid sm:grid-cols-2 gap-20 items-center">
55+
<DCard mode="homepage-skills">
56+
<DCardTitle>XRay Example</DCardTitle>
57+
58+
It also has XRay effect, which displays only main shape from
59+
background!
60+
</DCard>
61+
62+
<DCard mode="homepage-skills" dense>
63+
<DCardTitle>Dense example</DCardTitle>
64+
65+
Cards have densed mode. It's useful for displaying more content in one
66+
place.
67+
</DCard>
68+
</div>
69+
</div>
70+
</DWrapBackground>
71+
</template>
72+
73+
<style scoped>
74+
h1 {
75+
background: var(--d-card-x-ray--action__color),
76+
rgb(255 255 255 / var(--tw-bg-opacity));
77+
-webkit-background-clip: text;
78+
background-clip: text;
79+
color: transparent;
80+
@apply text-center text-7xl sm:text-8xl pt-3 sm:mb-9 mx-2 mb-20 font-bold bg-opacity-100;
81+
}
82+
</style>

‎.playground/components/B3Shadows.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<DWrapBackground
3+
class="font-dialog bg-[url('~/assets/img/bg/hightech-city.png')] bg-cover bg-fixed bg-center dark text-white"
4+
overlay-class="backdrop-saturate-50 bg-opacity-80 bg-black"
5+
>
6+
<div class="py-20 px-5 max-w-screen-lg mx-auto">
7+
<h1>Shadows</h1>
8+
<div class="flex flex-col gap-20 items-start">
9+
<DCard class="max-w-md sharp-shadow ss-br-5 ss-yellow-500">
10+
<DCardTitle>Description</DCardTitle>
11+
12+
Shadows are implemented as TailwindCSS plugin. It's very easy to use.
13+
</DCard>
14+
15+
<DCard
16+
class="max-w-md self-end transition-all sharp-shadow ss-bl-5 ss-violet-500 hover:ss-tl-5 hover:ss-cyan-500"
17+
>
18+
<DCardTitle>Animation (Hover me)</DCardTitle>
19+
20+
These shadows are also animatable! Hover this card to see it in
21+
action.
22+
</DCard>
23+
</div>
24+
</div>
25+
</DWrapBackground>
26+
</template>
27+
28+
<style scoped>
29+
h1 {
30+
@apply sharp-shadow ss-red-700 ss-br-2 text-center text-7xl sm:text-8xl pt-3 sm:mb-9 mx-2 mb-20 font-bold text-white;
31+
}
32+
33+
h1::first-letter {
34+
@apply bg-cyan-700;
35+
}
36+
</style>

0 commit comments

Comments
 (0)