Skip to content

Commit d11fb93

Browse files
sadn1cksadn1ck
committed
feat: alumni images shadow/hover effects
- removed svg icons and put in fa brand icons - added fb links as well Signed-off-by: Anik Das <anikdas0811@gmail.com>
1 parent f577abb commit d11fb93

File tree

1 file changed

+27
-61
lines changed

1 file changed

+27
-61
lines changed

‎src/pages/alumni.vue‎

Lines changed: 27 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,20 @@ useHead({
77
meta: [
88
{
99
name: 'description',
10-
content: 'Our Seniors, Vidhayak, Senpai',
10+
content: 'Meet the people who carried us to where we are today!',
1111
},
1212
],
1313
});
1414
</script>
1515

1616
<template>
1717
<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-
>
18+
<div class="max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-24">
2119
<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>
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 Alumni</h2>
3022
<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.
23+
Meet the people who carried us to where we are today!
3424
</p>
3525
</div>
3626
<ul
@@ -40,9 +30,9 @@ useHead({
4030
<li v-for="(alumni, index) in alumniMembers" :key="index">
4131
<div class="space-y-4">
4232
<img
43-
class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24"
33+
class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24 filter grayscale ring-2 hover:shadow-red-700 hover:shadow-2xl hover:ring-red-400 hover:grayscale-0 transition duration-300 fade"
4434
:src="alumni.avatar"
45-
alt=""
35+
alt
4636
/>
4737
<div class="space-y-2">
4838
<div class="text-xs font-medium lg:text-sm">
@@ -52,47 +42,23 @@ useHead({
5242
<a
5343
:href="alumni.link.twitter"
5444
target="_blank"
55-
class="text-gray-400 hover:text-gray-500"
45+
class="text-gray-400 hover:text-blue-300"
5646
rel="noreferrer"
5747
>
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>
48+
<span class="sr-only">Twitter</span>
49+
<fa-brands-twitter class="w-5 h-5" />
7150
</a>
7251
</li>
7352

7453
<li v-if="alumni.link.linkedin">
7554
<a
7655
:href="alumni.link.linkedin"
7756
target="_blank"
78-
class="text-gray-400 hover:text-gray-500"
57+
class="text-gray-400 hover:text-blue-400"
7958
rel="noreferrer"
8059
>
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>
60+
<span class="sr-only">LinkedIn</span>
61+
<fa-brands-linkedin class="w-5 h-5" />
9662
</a>
9763
</li>
9864
<li v-if="alumni.link.github">
@@ -102,20 +68,20 @@ useHead({
10268
class="text-gray-400 hover:text-gray-500"
10369
rel="noreferrer"
10470
>
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>
71+
<span class="sr-only">Github</span>
72+
<fa-brands-github class="w-5 h-5" />
73+
</a>
74+
</li>
75+
76+
<li v-if="alumni.link.facebook">
77+
<a
78+
:href="alumni.link.facebook"
79+
target="_blank"
80+
class="text-gray-400 hover:text-blue-600"
81+
rel="noreferrer"
82+
>
83+
<span class="sr-only">Facebook</span>
84+
<fa-brands-facebook class="w-5 h-5" />
11985
</a>
12086
</li>
12187
</ul>

0 commit comments

Comments
 (0)