flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/flo-bit.github.io. my personal website, w/ astro, svelte, tailwind, typescript, threlte
flo-bit.dev/
portfolio
portfolio-website
svelte
sveltekit
tailwind
threejs
threlte
typescript
4.9 kB
151 lines
1---
2import Image from "astro/components/Image.astro";
3import Badge from "../Helper/Badge.astro";
4import ProjectBreadcrumb from "./ProjectBreadcrumb.astro";
5import ProjectButtons from "./ProjectButtons.astro";
6import ProseWrapper from "$layouts/ProseWrapper.astro";
7
8const { project } = Astro.props;
9
10const images = import.meta.glob(
11 "/src/assets/projects/**/*.{png,webp,jpg,jpeg}"
12);
13const projectImages = await Promise.all(
14 (project.images || []).map(async (image: string) => images[image])
15);
16---
17
18<div class="text-white">
19 <div class="pt-6 sm:pt-24">
20 <ProjectBreadcrumb name={project.name} />
21
22 <!-- Image gallery -->
23 {
24 project.images ? (
25 <div class="mx-auto mt-6 max-w-2xl sm:px-6 md:grid md:max-w-5xl md:grid-cols-3 md:gap-x-8 md:px-8">
26 <div class="aspect-h-4 aspect-w-3 hidden overflow-hidden rounded-3xl md:block border border-white/10">
27 <Image
28 src={projectImages[0]()}
29 alt=""
30 height={2400}
31 width={2000}
32 class="h-full w-full object-cover object-center"
33 />
34 </div>
35 <div class="hidden md:grid md:grid-cols-1 md:gap-y-8">
36 <div class="aspect-h-2 aspect-w-3 overflow-hidden rounded-3xl border border-white/10">
37 <Image
38 src={projectImages[1]()}
39 alt=""
40 height={1200}
41 width={1800}
42 class="h-full w-full object-cover object-center"
43 />
44 </div>
45 <div class="aspect-h-2 aspect-w-3 overflow-hidden rounded-3xl border border-white/10">
46 <Image
47 src={projectImages[2]()}
48 alt=""
49 height={1200}
50 width={1800}
51 class="h-full w-full object-cover object-center"
52 />
53 </div>
54 </div>
55 <div class="aspect-h-5 aspect-w-4 md:aspect-h-4 md:aspect-w-3 sm:overflow-hidden sm:rounded-3xl border-y sm:border border-white/10">
56 <Image
57 src={projectImages[3]()}
58 alt=""
59 height={2400}
60 width={2000}
61 class="h-full w-full object-cover object-center"
62 />
63 </div>
64 </div>
65 ) : (
66 <slot name="demo" />
67 )
68 }
69
70 <!-- Product info -->
71 <div
72 class="mx-auto max-w-2xl px-4 pb-0 pt-10 sm:px-6 md:grid md:max-w-5xl md:grid-cols-3 md:grid-rows-[auto,auto,1fr] md:gap-x-8 md:px-8 md:pb-24 md:pt-16"
73 >
74 <div
75 class="md:col-span-2 md:border-r md:border-neutral-200 dark:border-neutral-900 md:pr-8"
76 >
77 <h1
78 class="text-2xl font-bold tracking-tight text-neutral-900 dark:text-white sm:text-3xl"
79 >
80 {project.name}
81 </h1>
82 </div>
83
84 <!-- Options -->
85 <div class="mt-4 md:row-span-3 md:mt-0">
86 <div class="mt-0">
87 {
88 project.tags && (
89 <div class="mt-0 sm:mt-4">
90 <div class="flex flex-wrap gap-3">
91 {project.tags.map((tag: string) => (
92 <Badge size="lg">{tag}</Badge>
93 ))}
94 </div>
95 </div>
96 )
97 }
98
99 <div class="mt-8 flex flex-col gap-4">
100 <ProjectButtons
101 codeUrl={project.codeUrl}
102 projectUrl={project.projectUrl}
103 />
104 </div>
105 </div>
106 </div>
107
108 <div
109 class="py-10 md:col-span-2 md:col-start-1 md:border-r md:border-neutral-200 dark:border-neutral-900 md:pb-16 md:pr-8 md:pt-6"
110 >
111 <ProseWrapper>
112 <slot />
113 </ProseWrapper>
114 </div>
115 </div>
116
117 {
118 project.images ? (
119 <div class="mx-auto mt-6 max-w-2xl sm:px-6 md:hidden pb-24">
120 <div class="aspect-h-2 aspect-w-3 overflow-hidden sm:rounded-3xl mt-4 border-y sm:border border-white/10">
121 <Image
122 src={projectImages[1]()}
123 height={1200}
124 width={1800}
125 alt=""
126 class="h-full w-full object-cover object-center"
127 />
128 </div>
129 <div class="aspect-h-4 aspect-w-3 overflow-hidden sm:rounded-3xl mt-4 border-y sm:border border-white/10">
130 <Image
131 src={projectImages[0]()}
132 height={2400}
133 width={2000}
134 alt=""
135 class="h-full w-full object-cover object-center"
136 />
137 </div>
138 <div class="aspect-h-2 aspect-w-3 overflow-hidden sm:rounded-3xl mt-4 border-y sm:border border-white/10">
139 <Image
140 src={projectImages[2]()}
141 alt=""
142 height={1200}
143 width={1800}
144 class="h-full w-full object-cover object-center"
145 />
146 </div>
147 </div>
148 ) : null
149 }
150 </div>
151</div>