Skip to content

Commit f577abb

Browse files
arnabsen1729arnabsen1729
committed
Add frontend logic
1 parent d9cdc52 commit f577abb

File tree

1 file changed

+122
-32
lines changed

1 file changed

+122
-32
lines changed

‎src/pages/alumni.vue‎

Lines changed: 122 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,130 @@
11
<script setup lang="ts">
2-
import { useHead } from '@vueuse/head'
3-
import { alumniMembers } from '~/logic'
2+
import { useHead } from '@vueuse/head';
3+
import { alumniMembers } from '~/logic';
44
useHead({
5-
// Can be static or computed
6-
title: 'Alumni | CodeIIEST',
7-
meta: [
8-
{
9-
name: 'description',
10-
content: 'Our Seniors, Vidhayak, Senpai',
11-
},
12-
],
13-
})
5+
// Can be static or computed
6+
title: 'Alumni | CodeIIEST',
7+
meta: [
8+
{
9+
name: 'description',
10+
content: 'Our Seniors, Vidhayak, Senpai',
11+
},
12+
],
13+
});
1414
</script>
1515

1616
<template>
17-
<div>
18-
<div class="max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-24">
19-
<div class="space-y-8 sm:space-y-12">
20-
<div class="space-y-5 sm:mx-auto sm:max-w-xl sm:space-y-4 lg:max-w-5xl">
21-
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">Our Seniors, Vidhayak, Senpai</h2>
22-
<p class="text-xl text-gray-500">Risus velit condimentum vitae tincidunt tincidunt. Mauris ridiculus fusce amet urna nunc. Ut nisl ornare diam in.</p>
23-
</div>
24-
<ul class="mx-auto grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4 md:gap-x-6 lg:max-w-5xl lg:gap-x-8 lg:gap-y-12 xl:grid-cols-6" x-max="1">
25-
<li v-for="(alumni, index) in alumniMembers" :key="index" >
26-
<div class="space-y-4">
27-
<img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" :src="alumni.avatar" alt="">
28-
<div class="space-y-2">
29-
<div class="text-xs font-medium lg:text-sm">
30-
<h3>{{ alumni.name }}</h3>
31-
<p class="dark:text-red-400 text-red-700">{{ alumni.desc }}</p>
32-
</div>
17+
<div>
18+
<div
19+
class="max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-24"
20+
>
21+
<div class="space-y-8 sm:space-y-12">
22+
<div
23+
class="space-y-5 sm:mx-auto sm:max-w-xl sm:space-y-4 lg:max-w-5xl"
24+
>
25+
<h2
26+
class="text-3xl font-extrabold tracking-tight sm:text-4xl"
27+
>
28+
Our Alumnis
29+
</h2>
30+
<p class="text-xl text-gray-500">
31+
Risus velit condimentum vitae tincidunt tincidunt.
32+
Mauris ridiculus fusce amet urna nunc. Ut nisl ornare
33+
diam in.
34+
</p>
3335
</div>
34-
</div>
35-
</li>
36-
</ul>
37-
</div>
36+
<ul
37+
class="mx-auto grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4 md:gap-x-6 lg:max-w-5xl lg:gap-x-8 lg:gap-y-12 xl:grid-cols-6"
38+
x-max="1"
39+
>
40+
<li v-for="(alumni, index) in alumniMembers" :key="index">
41+
<div class="space-y-4">
42+
<img
43+
class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24"
44+
:src="alumni.avatar"
45+
alt=""
46+
/>
47+
<div class="space-y-2">
48+
<div class="text-xs font-medium lg:text-sm">
49+
<h3>{{ alumni.name }}</h3>
50+
<ul class="flex justify-center space-x-5">
51+
<li v-if="alumni.link.twitter">
52+
<a
53+
:href="alumni.link.twitter"
54+
target="_blank"
55+
class="text-gray-400 hover:text-gray-500"
56+
rel="noreferrer"
57+
>
58+
<span class="sr-only"
59+
>Twitter</span
60+
>
61+
<svg
62+
class="w-5 h-5"
63+
fill="currentColor"
64+
viewBox="0 0 20 20"
65+
aria-hidden="true"
66+
>
67+
<path
68+
d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"
69+
></path>
70+
</svg>
71+
</a>
72+
</li>
73+
74+
<li v-if="alumni.link.linkedin">
75+
<a
76+
:href="alumni.link.linkedin"
77+
target="_blank"
78+
class="text-gray-400 hover:text-gray-500"
79+
rel="noreferrer"
80+
>
81+
<span class="sr-only"
82+
>LinkedIn</span
83+
>
84+
<svg
85+
class="w-5 h-5"
86+
fill="currentColor"
87+
viewBox="0 0 20 20"
88+
aria-hidden="true"
89+
>
90+
<path
91+
fill-rule="evenodd"
92+
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
93+
clip-rule="evenodd"
94+
></path>
95+
</svg>
96+
</a>
97+
</li>
98+
<li v-if="alumni.link.github">
99+
<a
100+
:href="alumni.link.github"
101+
target="_blank"
102+
class="text-gray-400 hover:text-gray-500"
103+
rel="noreferrer"
104+
>
105+
<span class="sr-only"
106+
>Github</span
107+
>
108+
<svg
109+
class="w-5 h-5"
110+
fill="currentColor"
111+
viewBox="0 0 24 24"
112+
aria-hidden="true"
113+
>
114+
<path
115+
d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"
116+
fill="currentColor"
117+
></path>
118+
</svg>
119+
</a>
120+
</li>
121+
</ul>
122+
</div>
123+
</div>
124+
</div>
125+
</li>
126+
</ul>
127+
</div>
128+
</div>
38129
</div>
39-
</div>
40130
</template>

0 commit comments

Comments
 (0)