Skip to content

Commit 84311b4

Browse files
Jacky040124ThatNerdSquared
Jacky040124
and
ThatNerdSquared
authored
feat: add gallery page (#45)
* feat: contact us page * feat: address pr feedback * fix: update implementation accroding to feedback * fix[contact-us]: update design according to review * fix: update contact base on request * feat: gallery page first version * feat(gallery): update styling as request * feat(gallery): update ui according to feedback * feat(gallery): minor fix --------- Co-authored-by: ThatNerdSquared <[email protected]>
1 parent 19b4996 commit 84311b4

File tree

2 files changed

+208
-0
lines changed

2 files changed

+208
-0
lines changed

‎src/data/gallery/images.json‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
[
2+
{
3+
"src": "https://picsum.photos/400/600?random=21",
4+
"alt": "Team members conducting laboratory experiments"
5+
},
6+
{
7+
"src": "https://picsum.photos/400/300?random=22",
8+
"alt": "Team presenting research findings"
9+
},
10+
{
11+
"src": "https://picsum.photos/400/500?random=23",
12+
"alt": "iGEM team collaboration session"
13+
},
14+
{
15+
"src": "https://picsum.photos/400/400?random=24",
16+
"alt": "Attending synthetic biology conference"
17+
},
18+
{
19+
"src": "https://picsum.photos/400/350?random=25",
20+
"alt": "Microscopy and cell culture work"
21+
},
22+
{
23+
"src": "https://picsum.photos/400/650?random=26",
24+
"alt": "Community outreach and education event"
25+
},
26+
{
27+
"src": "https://picsum.photos/400/450?random=27",
28+
"alt": "UBC iGEM team group photo"
29+
},
30+
{
31+
"src": "https://picsum.photos/400/280?random=28",
32+
"alt": "Laboratory research and data analysis"
33+
},
34+
{
35+
"src": "https://picsum.photos/400/520?random=29",
36+
"alt": "Project presentation at competition"
37+
},
38+
{
39+
"src": "https://picsum.photos/400/480?random=30",
40+
"alt": "iGEM competition presentation"
41+
},
42+
{
43+
"src": "https://picsum.photos/400/320?random=31",
44+
"alt": "Genetic engineering and cloning work"
45+
},
46+
{
47+
"src": "https://picsum.photos/400/580?random=32",
48+
"alt": "STEM education and public engagement"
49+
},
50+
{
51+
"src": "https://picsum.photos/400/420?random=33",
52+
"alt": "Project planning and brainstorming"
53+
},
54+
{
55+
"src": "https://picsum.photos/400/380?random=14",
56+
"alt": "Team receiving recognition and awards"
57+
},
58+
{
59+
"src": "https://picsum.photos/400/550?random=15",
60+
"alt": "Advanced laboratory techniques"
61+
},
62+
{
63+
"src": "https://picsum.photos/400/360?random=16",
64+
"alt": "Networking with other iGEM teams"
65+
}
66+
]

‎src/pages/gallery.astro‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
import Layout from "../layouts/Layout.astro";
3+
import galleryImages from "../data/gallery/images.json";
4+
5+
const pageTitle = "Gallery - UBC iGEM";
6+
7+
function distributeImagesIntoColumns(images: any[], numColumns = 4) {
8+
const columns = Array.from({ length: numColumns }, (_, index) => ({
9+
id: `column-${index + 1}`,
10+
images: [] as any[]
11+
}));
12+
13+
images.forEach((image: any, index: number) => {
14+
const columnIndex = index % numColumns;
15+
columns[columnIndex].images.push(image);
16+
});
17+
18+
return { columns };
19+
}
20+
21+
const galleryData = distributeImagesIntoColumns(galleryImages);
22+
console.log(galleryData);
23+
---
24+
25+
<Layout title={pageTitle}>
26+
<section class="gallery-hero-section">
27+
<h1>Gallery</h1>
28+
</section>
29+
30+
<section class="gallery-content-section">
31+
<div class="wrapper masonry">
32+
<div class="switcher">
33+
{galleryData.columns.map((column) => (
34+
<div class="flow">
35+
{column.images.map((image) => (
36+
<div class="image-container" data-alt={image.alt}>
37+
<img src={image.src} alt={image.alt} />
38+
</div>
39+
))}
40+
</div>
41+
))}
42+
</div>
43+
</div>
44+
</section>
45+
</Layout>
46+
47+
<style>
48+
h1 {
49+
font-size: 4.5em;
50+
font-weight: 900;
51+
margin-top: 0.5em;
52+
margin-bottom: 0.5em;
53+
color: var(--color-primary-black);
54+
}
55+
56+
.gallery-hero-section {
57+
background-color: var(--color-primary-green);
58+
padding: 5% max(10%, min(110px, 15vw));
59+
text-align: left;
60+
border-bottom: solid var(--border-width) var(--border-color);
61+
outline: var(--border-color);
62+
}
63+
64+
.gallery-content-section {
65+
padding: 5% max(2%, min(60px, 5vw));
66+
min-height: 400px;
67+
}
68+
69+
.masonry {
70+
--gutter: 0.75rem;
71+
max-width: var(--max-width);
72+
margin: 0 auto;
73+
}
74+
75+
.switcher {
76+
display: flex;
77+
flex-wrap: wrap;
78+
gap: var(--gutter);
79+
align-items: flex-start;
80+
}
81+
82+
.switcher > * {
83+
flex: 1 1;
84+
left: 0;
85+
right: 0;
86+
}
87+
88+
.flow > * + * {
89+
margin-top: var(--gutter);
90+
}
91+
92+
.image-container {
93+
position: relative;
94+
border-radius: var(--border-radius-sm);
95+
overflow: hidden;
96+
transition: transform 0.2s ease;
97+
}
98+
99+
.image-container:hover {
100+
transform: translateY(-2px);
101+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
102+
}
103+
104+
.image-container img {
105+
width: 100%;
106+
height: auto;
107+
display: block;
108+
background: var(--color-secondary-green);
109+
min-height: 200px;
110+
object-fit: cover;
111+
}
112+
113+
.image-container::after {
114+
content: attr(data-alt);
115+
position: absolute;
116+
bottom: 0;
117+
width: 100%;
118+
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
119+
color: white;
120+
padding: 2rem 1rem 1rem;
121+
font-size: 0.9rem;
122+
font-weight: 500;
123+
line-height: 1.3;
124+
opacity: 0;
125+
transition: opacity 0.3s ease;
126+
pointer-events: none;
127+
}
128+
129+
.image-container:hover::after {
130+
opacity: 1;
131+
}
132+
133+
@media (max-width: 768px) {
134+
.switcher > * {
135+
flex-basis: calc((25rem - 100%) * 999);
136+
}
137+
138+
.gallery-content-section {
139+
padding: 5% max(1.5%, min(20px, 3vw));
140+
}
141+
}
142+
</style>

0 commit comments

Comments
 (0)