Skip to content

Commit d3d39a1

Browse files
missionmikemissionmike
committed
feat: update photo stlyes, refactor.
1 parent 512d8b9 commit d3d39a1

File tree

6 files changed

+308
-324
lines changed

6 files changed

+308
-324
lines changed

‎src/components/PhotoMosaic/PhotoColumn.astro‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
type Photo = {
3+
src: string;
4+
alt: string;
5+
caption: string;
6+
size?: 'small' | 'medium' | 'large';
7+
};
8+
9+
interface Props {
10+
photos: Photo[];
11+
columnIndex: number;
12+
}
13+
14+
const { photos, columnIndex } = Astro.props;
15+
---
16+
17+
<div class="column">
18+
{
19+
photos
20+
.filter((_, i) => i % 3 === columnIndex)
21+
.map((photo) => (
22+
<div
23+
class={`photo-tile ${photo.size || 'small'}`}
24+
data-aos={columnIndex === 0 ? 'fade-right' : columnIndex === 1 ? 'fade-up' : 'fade-left'}
25+
data-aos-delay={columnIndex === 1 ? 100 : columnIndex === 2 ? 200 : 0}
26+
>
27+
<button
28+
class="photo-button"
29+
data-src={photo.src}
30+
data-alt={photo.alt}
31+
data-caption={photo.caption}
32+
>
33+
<img
34+
src={photo.src}
35+
alt={photo.alt}
36+
class="photo"
37+
data-aos={
38+
columnIndex === 0 ? 'fade-right' : columnIndex === 1 ? 'fade-up' : 'fade-left'
39+
}
40+
data-aos-delay={columnIndex === 1 ? 100 : columnIndex === 2 ? 200 : 0}
41+
/>
42+
</button>
43+
</div>
44+
))
45+
}
46+
</div>
47+
48+
<style>
49+
.column {
50+
display: flex;
51+
flex-direction: column;
52+
gap: 1rem;
53+
}
54+
55+
.photo-tile {
56+
position: relative;
57+
overflow: hidden;
58+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
59+
transition: transform 0.3s ease;
60+
width: 100%;
61+
}
62+
63+
.photo-tile.small {
64+
aspect-ratio: 1;
65+
}
66+
67+
.photo-tile.medium {
68+
aspect-ratio: 4/5;
69+
}
70+
71+
.photo-tile.large {
72+
aspect-ratio: 3/4;
73+
}
74+
75+
.photo-button {
76+
width: 100%;
77+
height: 100%;
78+
padding: 0;
79+
border: none;
80+
background: none;
81+
cursor: pointer;
82+
}
83+
84+
.photo {
85+
width: 100%;
86+
height: 100%;
87+
object-fit: cover;
88+
}
89+
</style>

‎src/components/PhotoMosaic.astro‎ renamed to ‎src/components/PhotoMosaic/PhotoMosaic.astro‎

Lines changed: 17 additions & 243 deletions
Original file line numberDiff line numberDiff line change
@@ -1,210 +1,28 @@
11
---
2-
type Photo = {
3-
src: string;
4-
alt: string;
5-
caption: string;
6-
size?: 'small' | 'medium' | 'large'; // Controls the grid span
7-
};
8-
9-
const photos: Photo[] = [
10-
{
11-
src: '/static/images/mosaic/family-gaming.jpg',
12-
alt: 'Family gaming setup and entertainment area',
13-
caption:
14-
'We love playing games together! We share videos of our games on our YouTube channels, ' +
15-
'"Sleepy Slawth Gaming" and "Michael & Dad Gaming & Stuff"',
16-
size: 'large',
17-
},
18-
{
19-
src: '/static/images/mosaic/family-breakfast.jpg',
20-
alt: 'Family breakfast time',
21-
caption: 'Family is my motivation.',
22-
size: 'medium',
23-
},
24-
{
25-
src: '/static/images/mosaic/family-gaming-photo-with-memphis.jpg',
26-
alt: 'Gaming session with Memphis',
27-
caption: 'Playing "Hello Neighbor" with the whole fam!',
28-
size: 'medium',
29-
},
30-
{
31-
src: '/static/images/mosaic/office-dogs.jpg',
32-
alt: 'Office dogs keeping me company while working',
33-
caption: 'Office dogs keeping me company while working.',
34-
size: 'small',
35-
},
36-
{
37-
src: '/static/images/mosaic/dark-mode.jpg',
38-
alt: 'Dark mode development setup',
39-
caption: 'Dark mode.',
40-
size: 'medium',
41-
},
42-
{
43-
src: '/static/images/mosaic/sound-board.jpg',
44-
alt: 'Audio mixing and sound board setup',
45-
caption: 'I love mixing sound at South Beach Church.',
46-
size: 'medium',
47-
},
48-
{
49-
src: '/static/images/mosaic/video-editing.jpg',
50-
alt: 'Video editing workspace',
51-
caption: 'Working on my YouTube videos.',
52-
size: 'large',
53-
},
54-
{
55-
src: '/static/images/mosaic/sound-booth-volunteering.jpg',
56-
alt: 'Volunteering at the sound booth',
57-
caption: 'Volunteering at the sound booth, training Memphis to be a sound engineer.',
58-
size: 'medium',
59-
},
60-
{
61-
src: '/static/images/mosaic/old-office-space.jpg',
62-
alt: 'Previous office setup',
63-
caption: 'This was our office space before we moved to the new office.',
64-
size: 'medium',
65-
},
66-
{
67-
src: '/static/images/mosaic/michael-and-memphis.jpg',
68-
alt: 'Michael and Memphis',
69-
caption: 'Michael and Memphis',
70-
size: 'small',
71-
},
72-
{
73-
src: '/static/images/mosaic/office-rearrange.jpg',
74-
alt: 'Office space rearrangement',
75-
caption: 'Occasionally, we rearrange the office space.',
76-
size: 'large',
77-
},
78-
{
79-
src: '/static/images/mosaic/family-photo-shoot.jpg',
80-
alt: 'Family photo shoot',
81-
caption: 'Family photo shoot',
82-
size: 'medium',
83-
},
84-
{
85-
src: '/static/images/mosaic/playing-wrecked.jpg',
86-
alt: 'Playing Wrecked game',
87-
caption: 'Playing "Wrecked" with the fam!',
88-
size: 'medium',
89-
},
90-
{
91-
src: '/static/images/mosaic/melody-fishing.jpg',
92-
alt: 'Melody fishing',
93-
caption: 'Fishing with Melody and the family.',
94-
size: 'small',
95-
},
96-
{
97-
src: '/static/images/mosaic/dad-and-memphis.jpg',
98-
alt: 'Dad and Memphis together',
99-
caption: 'Grandpa and baby Memphis.',
100-
size: 'medium',
101-
},
102-
{
103-
src: '/static/images/mosaic/remote-control-gummy.jpg',
104-
alt: 'Remote control gummy',
105-
caption: 'Michael eats a remote control gummy.',
106-
size: 'medium',
107-
},
108-
{
109-
src: '/static/images/mosaic/cleaning-max-mouth.jpg',
110-
alt: "Cleaning Max's mouth",
111-
caption: "Memphis cleaning Max's mouth.",
112-
size: 'small',
113-
},
114-
{
115-
src: '/static/images/mosaic/youtube-thumbnail-sleepy-slawths.jpg',
116-
alt: 'YouTube thumbnail for Sleepy Slawths',
117-
caption: 'YouTube profile photo for Sleepy Slawths',
118-
size: 'medium',
119-
},
120-
{
121-
src: '/static/images/mosaic/happy-memphis-with-grandma.jpg',
122-
alt: 'Happy Memphis with Grandma',
123-
caption: 'Happy Memphis with Grandma',
124-
size: 'small',
125-
},
126-
];
2+
import PhotoColumn from './PhotoColumn.astro';
3+
import { photos } from '../../data/photos';
1274
---
1285

1296
<div class="photo-mosaic">
130-
<div class="column">
131-
{
132-
photos
133-
.filter((_, i) => i % 3 === 0)
134-
.map((photo) => (
135-
<div class={`photo-tile ${photo.size || 'small'}`} data-aos="fade-right">
136-
<button
137-
class="photo-button"
138-
data-src={photo.src}
139-
data-alt={photo.alt}
140-
data-caption={photo.caption}
141-
>
142-
<img src={photo.src} alt={photo.alt} class="photo" data-aos="fade-right" />
143-
</button>
144-
</div>
145-
))
146-
}
147-
</div>
148-
<div class="column">
149-
{
150-
photos
151-
.filter((_, i) => i % 3 === 1)
152-
.map((photo) => (
153-
<div
154-
class={`photo-tile ${photo.size || 'small'}`}
155-
data-aos="fade-up"
156-
data-aos-delay={100}
157-
>
158-
<button
159-
class="photo-button"
160-
data-src={photo.src}
161-
data-alt={photo.alt}
162-
data-caption={photo.caption}
163-
>
164-
<img
165-
src={photo.src}
166-
alt={photo.alt}
167-
class="photo"
168-
data-aos="fade-up"
169-
data-aos-delay={100}
170-
/>
171-
</button>
172-
</div>
173-
))
174-
}
175-
</div>
176-
<div class="column">
177-
{
178-
photos
179-
.filter((_, i) => i % 3 === 2)
180-
.map((photo) => (
181-
<div class={`photo-tile ${photo.size || 'small'}`} data-aos="fade-left">
182-
<button
183-
class="photo-button"
184-
data-src={photo.src}
185-
data-alt={photo.alt}
186-
data-caption={photo.caption}
187-
>
188-
<img
189-
src={photo.src}
190-
alt={photo.alt}
191-
class="photo"
192-
data-aos="fade-left"
193-
data-aos-delay={200}
194-
/>
195-
</button>
196-
</div>
197-
))
198-
}
199-
</div>
7+
<PhotoColumn photos={photos} columnIndex={0} />
8+
<PhotoColumn photos={photos} columnIndex={1} />
9+
<PhotoColumn photos={photos} columnIndex={2} />
20010
</div>
20111

20212
<!-- Modal -->
20313
<div id="photoModal" class="modal">
20414
<div class="modal-content">
20515
<span class="close-button">&times;</span>
206-
<button class="nav-button prev">&lt;</button>
207-
<button class="nav-button next">&gt;</button>
16+
<button class="nav-button prev">
17+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
18+
<path fill="currentColor" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
19+
</svg>
20+
</button>
21+
<button class="nav-button next">
22+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
23+
<path fill="currentColor" d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"></path>
24+
</svg>
25+
</button>
20826
<div class="slide-container">
20927
<img id="modalBlurBackground" class="blur-background" src="" alt="" />
21028
<img id="modalImage" src="" alt="" />
@@ -369,56 +187,12 @@ const photos: Photo[] = [
369187
grid-template-columns: repeat(3, 1fr);
370188
gap: 1rem;
371189
width: 100%;
372-
}
373-
374-
.column {
375-
display: flex;
376-
flex-direction: column;
377-
gap: 1rem;
378-
}
379-
380-
.photo-tile {
381-
position: relative;
382-
overflow: hidden;
383-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
384-
transition: transform 0.3s ease;
385-
width: 100%;
386-
}
387190

388-
.photo-tile.small {
389-
aspect-ratio: 1;
390-
}
391-
392-
.photo-tile.medium {
393-
aspect-ratio: 4/5;
394-
}
395-
396-
.photo-tile.large {
397-
aspect-ratio: 3/4;
398-
}
399-
400-
@media (max-width: 1024px) {
401-
.photo-mosaic {
402-
grid-template-columns: 1fr 1fr;
403-
gap: 0.5rem;
191+
@media (max-width: 1024px) {
192+
gap: 0.25rem;
404193
}
405194
}
406195

407-
.photo-button {
408-
width: 100%;
409-
height: 100%;
410-
padding: 0;
411-
border: none;
412-
background: none;
413-
cursor: pointer;
414-
}
415-
416-
.photo {
417-
width: 100%;
418-
height: 100%;
419-
object-fit: cover;
420-
}
421-
422196
.modal {
423197
display: none;
424198
position: fixed;

0 commit comments

Comments
 (0)