Skip to content

Commit 5fd8aeb

Browse files
ydahydah
committed
Add community and supporter sections to about page with corresponding images
1 parent 57c7913 commit 5fd8aeb

File tree

13 files changed

+161
-6
lines changed

13 files changed

+161
-6
lines changed

‎pages/about/index.vue‎

Lines changed: 161 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
<h4 align="center" class="text-h4 mb-10">
4747
Organizers
4848
</h4>
49-
<v-row>
49+
<v-row class="mb-10">
5050
<v-col
5151
v-for="(organizer, index) in organizers"
5252
:key="index"
@@ -103,7 +103,7 @@
103103
<h4 align="center" class="text-h4 mb-10">
104104
Designers
105105
</h4>
106-
<v-row>
106+
<v-row class="mb-10">
107107
<v-col
108108
v-for="(designer, index) in designers"
109109
:key="index"
@@ -160,7 +160,7 @@
160160
<h4 align="center" class="text-h4 mb-10">
161161
Wi-Fi and Network Operations
162162
</h4>
163-
<v-row>
163+
<v-row class="mb-10">
164164
<v-col
165165
v-for="(noc, index) in nocMembers"
166166
:key="index"
@@ -214,6 +214,60 @@
214214
</v-card>
215215
</v-col>
216216
</v-row>
217+
<h4 align="center" class="text-h4 mb-10">
218+
Our Communities
219+
</h4>
220+
<v-row class="mb-10">
221+
<v-col
222+
v-for="(community, index) in communities"
223+
:key="index"
224+
md="3"
225+
sm="4"
226+
>
227+
<v-card
228+
class="organizers"
229+
align="center"
230+
flat
231+
>
232+
<a :href="community.link" target="_blank" class="community-link">
233+
<div class="py-2 px-2">
234+
<v-img
235+
:src="community.image"
236+
max-height="145px"
237+
max-width="145px"
238+
cover
239+
class="community-image"
240+
/>
241+
<v-card-title class="text-body-2">{{ community.name }}</v-card-title>
242+
</div>
243+
</a>
244+
</v-card>
245+
</v-col>
246+
</v-row>
247+
<h4 align="center" class="text-h4 mb-10">
248+
Supporter
249+
</h4>
250+
<v-row class="mb-10" justify="center">
251+
<v-col>
252+
<v-card
253+
class="supporters"
254+
align="center"
255+
flat
256+
>
257+
<a :href="supporter.link" target="_blank" class="supporter-link">
258+
<div class="py-2 px-2">
259+
<v-img
260+
:src="supporter.image"
261+
max-height="300px"
262+
max-width="300px"
263+
cover
264+
class="supporter-image"
265+
/>
266+
</div>
267+
</a>
268+
</v-card>
269+
</v-col>
270+
</v-row>
217271
</div>
218272
</v-card-item>
219273
</v-card>
@@ -260,7 +314,7 @@
260314
<h4 align="center" class="text-h4 mb-10">
261315
Organizers
262316
</h4>
263-
<v-row>
317+
<v-row class="mb-10">
264318
<v-col
265319
v-for="(organizer, index) in organizers"
266320
:key="index"
@@ -300,7 +354,7 @@
300354
<h4 align="center" class="text-h4 mb-10">
301355
Designers
302356
</h4>
303-
<v-row>
357+
<v-row class="mb-10">
304358
<v-col
305359
v-for="(designer, index) in designers"
306360
:key="index"
@@ -340,7 +394,7 @@
340394
<h4 align="center" class="text-h4 mb-10">
341395
Wi-Fi and Network Operations
342396
</h4>
343-
<v-row>
397+
<v-row class="mb-10">
344398
<v-col
345399
v-for="(noc, index) in nocMembers"
346400
:key="index"
@@ -377,6 +431,59 @@
377431
</v-card>
378432
</v-col>
379433
</v-row>
434+
<h4 align="center" class="text-h4 mb-10">
435+
Our Communities
436+
</h4>
437+
<v-row class="mb-10">
438+
<v-col
439+
v-for="(community, index) in communities"
440+
:key="index"
441+
cols="6"
442+
>
443+
<v-card
444+
class="organizers"
445+
align="center"
446+
flat
447+
>
448+
<a :href="community.link" target="_blank" class="community-link">
449+
<div class="py-2 px-2">
450+
<v-img
451+
:src="community.image"
452+
max-height="145px"
453+
max-width="145px"
454+
cover
455+
class="community-image"
456+
/>
457+
<v-card-title class="text-body-2">{{ community.name }}</v-card-title>
458+
</div>
459+
</a>
460+
</v-card>
461+
</v-col>
462+
</v-row>
463+
<h4 align="center" class="text-h4 mb-10">
464+
Supporter
465+
</h4>
466+
<v-row class="mb-10" justify="center">
467+
<v-col>
468+
<v-card
469+
class="supporters"
470+
align="center"
471+
flat
472+
>
473+
<a :href="supporter.link" target="_blank" class="supporter-link">
474+
<div class="py-2 px-2">
475+
<v-img
476+
:src="supporter.image"
477+
max-height="250px"
478+
max-width="250px"
479+
cover
480+
class="supporter-image"
481+
/>
482+
</div>
483+
</a>
484+
</v-card>
485+
</v-col>
486+
</v-row>
380487
</div>
381488
</v-card-item>
382489
</v-card>
@@ -577,6 +684,24 @@ export default{
577684
image: 'https://avatars.githubusercontent.com/u/170410265',
578685
},
579686
],
687+
communities: [
688+
{ name: 'AKASHI.rb', link: 'https://akashi-rb.connpass.com/', image: '/kansai08/communities/akashi.png' },
689+
{ name: 'Hirakata.rb', link: 'https://hirakatarb.connpass.com/', image: '/kansai08/communities/default.png' },
690+
{ name: 'KOBE.rb', link: 'https://koberb.doorkeeper.jp/', image: '/kansai08/communities/kobe.png' },
691+
{ name: 'Kyobashi.rb', link: 'https://kyobashirb.connpass.com/', image: '/kansai08/communities/kyobashi.png' },
692+
{ name: 'Kyoto.rb', link: 'https://kyotorb.connpass.com/', image: '/kansai08/communities/kyoto.png' },
693+
{ name: 'naniwa.rb', link: 'https://naniwarb.doorkeeper.jp/', image: '/kansai08/communities/naniwa.png' },
694+
{ name: 'Ruby関西', link: 'https://rubykansai.doorkeeper.jp/', image: '/kansai08/communities/rubykansai.png' },
695+
{ name: 'Ruby舞鶴', link: 'https://ruby-maizuru.connpass.com/', image: '/kansai08/communities/rubymaizuru.png' },
696+
{ name: 'Ruby Tuesday', link: 'https://ruby-tuesday.doorkeeper.jp/', image: '/kansai08/communities/rubytuesday.png' },
697+
{ name: 'Shinosaka.rb', link: 'https://shinosakarb.doorkeeper.jp/', image: '/kansai08/communities/shinosaka.png' },
698+
{ name: 'Wakayama.rb', link: 'https://wakayama-rb.connpass.com/', image: '/kansai08/communities/wakayama.png' },
699+
],
700+
supporter: {
701+
name: '日本Rubyの会',
702+
link: 'https://ruby-no-kai.org/',
703+
image: '/kansai08/communities/rubynokai.png',
704+
},
580705
}),
581706
}
582707
</script>
@@ -637,4 +762,34 @@ useSeoMeta({
637762
font-size: 0.775rem !important;
638763
}
639764
765+
.community-link {
766+
text-decoration: none;
767+
color: inherit;
768+
}
769+
770+
.community-link:hover .community-image {
771+
opacity: 0.8;
772+
transform: scale(1.05);
773+
transition: all 0.3s ease;
774+
}
775+
776+
.community-image {
777+
transition: all 0.3s ease;
778+
}
779+
780+
.supporter-link {
781+
text-decoration: none;
782+
color: inherit;
783+
}
784+
785+
.supporter-link:hover .supporter-image {
786+
opacity: 0.8;
787+
transform: scale(1.05);
788+
transition: all 0.3s ease;
789+
}
790+
791+
.supporter-image {
792+
transition: all 0.3s ease;
793+
}
794+
640795
</style>

‎public/communities/akashi.png‎

14.8 KB
Loading

‎public/communities/default.png‎

30.7 KB
Loading

‎public/communities/kobe.png‎

15.7 KB
Loading

‎public/communities/kyobashi.png‎

33.3 KB
Loading

‎public/communities/kyoto.png‎

32.5 KB
Loading

‎public/communities/naniwa.png‎

5.66 KB
Loading

‎public/communities/rubykansai.png‎

26.8 KB
Loading

‎public/communities/rubymaizuru.png‎

15.3 KB
Loading

‎public/communities/rubynokai.png‎

32.6 KB
Loading

0 commit comments

Comments
 (0)