Skip to content

Commit 3418c8a

Browse files
lablnetlablnet
authored
Merge pull request #476 from lablnet/sleek-design
Sleek design
2 parents 5943673 + 41036c9 commit 3418c8a

File tree

22 files changed

+1048
-1301
lines changed

22 files changed

+1048
-1301
lines changed

‎public/assets/icons/white/twitter.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎public/assets/images/recommendations/luca.jpeg‎

103 KB
Loading

‎public/assets/images/recommendations/manuel.jpeg‎

51.8 KB
Loading

‎public/assets/images/recommendations/saud.jpeg‎

35.3 KB
Loading

‎public/assets/images/recommendations/suman.jpeg‎

20.1 KB
Loading

‎src/components/CollaboratorComp.vue‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,59 @@
11
<template>
2+
<div class="glass-panel w-full">
23
<a
34
:href="link"
45
target="_blank"
56
rel="noopener noreferrer"
67
class="
7-
inline-flex
8+
glass-card
9+
flex
10+
w-full
811
relative
9-
px-3
10-
py-1
12+
px-4
13+
py-2
1114
rounded-full
1215
text-sm
1316
font-medium
14-
bg-gray-200
15-
dark:bg-gray-900
16-
dark:text-gray-400
17-
text-gray-800
17+
text-slate-200
18+
hover:bg-white/10
19+
hover:text-white
20+
transition-all
21+
duration-300
22+
items-center
23+
gap-3
24+
hover:scale-105
1825
"
1926
>
27+
<div v-if="icon" class="w-6 h-6 flex items-center justify-center">
28+
<i :class="[icon, 'text-xl']"></i>
29+
</div>
2030
<img
31+
v-else
2132
class="
2233
h-6
2334
w-6
2435
rounded-full
25-
border border-gray-100
36+
border border-white/20
2637
shadow-sm
27-
absolute
28-
left-0.5
29-
top-0.5
3038
"
3139
:src="picture"
32-
:alt="text"
40+
:alt="name"
3341
/>
34-
<span class="pl-5">{{ name }}</span>
42+
<span>{{ name }}</span>
3543
<span
3644
class="
37-
pl-2
38-
pr-2
39-
mx-3
40-
mr-0
45+
px-2
46+
py-0.5
4147
rounded-full
42-
bg-white
43-
text-black
44-
dark:bg-gray-700 dark:text-gray-300
48+
bg-white/10
49+
text-xs
50+
font-bold
4551
"
4652
v-if="contributionsStatus"
4753
>{{ contributions }}
4854
</span>
4955
</a>
56+
</div>
5057
</template>
5158

5259
<script lang="js">
@@ -61,6 +68,10 @@ export default {
6168
type: String,
6269
default: '../assets/images/avatar.png',
6370
},
71+
icon: {
72+
type: String,
73+
default: null,
74+
},
6475
link: {
6576
type: String,
6677
default: "javascript:void(1)",

‎src/components/Home/Certificate.astro‎

Lines changed: 108 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,128 @@
11
---
22
// @ts-ignore
3-
import { getCollection } from 'astro:content';
4-
import { meta } from '../../utils/const';
5-
import { df, compareByDate } from '../../utils/index.ts';
3+
import { getCollection } from "astro:content";
4+
import { meta } from "../../utils/const";
5+
import { df, compareByDate } from "../../utils/index.ts";
66
7-
const certificates = await getCollection('certificates');
7+
const certificates = await getCollection("certificates");
88
certificates.sort(compareByDate);
99
---
1010

1111
<main>
12-
<section class="py-2" id="certificates">
13-
<div class="mb-8">
14-
<h3 class="text-3xl font-bold mb-4 bg-gradient-to-r from-muf-500 via-muf-blue-500 to-muf-blue-600 bg-clip-text text-transparent flex items-center">
15-
<i class="fa-solid fa-certificate bg-gradient-to-r from-muf-500 to-muf-blue-500 bg-clip-text text-transparent mr-3"></i>
16-
{ meta.certificate.title }
17-
</h3>
18-
<p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed">
19-
{ meta.certificate.description }
20-
</p>
21-
</div>
22-
12+
<section class="py-2" id="certificates">
13+
<div class="mb-8">
14+
<h3
15+
class="text-3xl font-bold mb-4 bg-gradient-to-r from-muf-500 via-muf-blue-500 to-muf-blue-600 bg-clip-text text-transparent flex items-center"
16+
>
17+
<i
18+
class="fa-solid fa-certificate bg-gradient-to-r from-muf-500 to-muf-blue-500 bg-clip-text text-transparent mr-3"
19+
></i>
20+
{meta.certificate.title}
21+
</h3>
22+
<p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed">
23+
{meta.certificate.description}
24+
</p>
25+
</div>
26+
2327
<div class="space-y-4">
24-
{certificates.map((certificate:any, index: number) => (
25-
<div class="glass-card overflow-hidden animate-slide-up" style={`animation-delay: ${index * 0.1}s;`}>
26-
<button
27-
data-id={index}
28-
class="accordion-button flex justify-between items-center w-full p-6 text-left hover:bg-white/10 dark:hover:bg-white/5 transition-all duration-300 group"
29-
>
30-
<div class="flex items-center gap-4">
31-
<div class="w-3 h-3 rounded-full bg-gradient-to-r from-muf-500 to-muf-blue-500"></div>
32-
<div>
33-
<h4 class="font-bold text-gray-800 dark:text-gray-200 text-lg group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-all duration-300">
34-
{certificate.data.title}
35-
</h4>
36-
<p class="text-gray-600 dark:text-gray-400 text-sm">
37-
<i class="fa-solid fa-building mr-2 bg-gradient-to-r from-muf-500 to-muf-blue-500 bg-clip-text text-transparent"></i>
38-
{certificate.data.institute} • {df.format(certificate.data.completed)}
39-
</p>
40-
</div>
41-
</div>
42-
<div class="flex items-center gap-2">
43-
<i class="fa-solid fa-trophy bg-gradient-to-r from-muf-500 to-muf-blue-500 bg-clip-text text-transparent text-xl"></i>
44-
<i class="fa-solid fa-chevron-down text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-all duration-300 transform group-data-[expanded]:rotate-180"></i>
45-
</div>
46-
</button>
47-
48-
<div data-id={index} class="accordion-content overflow-hidden transition-all duration-500 max-h-0">
49-
<div class="p-6 pt-0 border-t border-white/10">
50-
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
51-
<div class="space-y-4">
52-
<div class="flex items-center gap-3">
53-
<i class="fa-solid fa-calendar bg-gradient-to-r from-muf-500 to-muf-blue-500 bg-clip-text text-transparent"></i>
54-
<span class="text-gray-700 dark:text-gray-300">
55-
Completed: {df.format(certificate.data.completed)}
56-
</span>
28+
{
29+
certificates.map((certificate: any, index: number) => (
30+
<div class="glass-panel">
31+
<div
32+
class="glass-card overflow-hidden animate-slide-up"
33+
style={`animation-delay: ${index * 0.1}s;`}
34+
>
35+
<button
36+
data-id={index}
37+
class="accordion-button flex justify-between items-center w-full p-6 text-left hover:bg-white/10 dark:hover:bg-white/5 transition-all duration-300 group"
38+
>
39+
<div class="flex items-center gap-4">
40+
<div class="w-3 h-3 rounded-full bg-gradient-to-r from-muf-500 to-muf-blue-500" />
41+
<div>
42+
<h4 class="font-bold text-gray-800 dark:text-gray-200 text-lg group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-all duration-300">
43+
{certificate.data.title}
44+
</h4>
45+
<p class="text-gray-600 dark:text-gray-400 text-sm">
46+
<i class="fa-solid fa-building mr-2 bg-gradient-to-r from-muf-500 to-muf-blue-500 bg-clip-text text-transparent" />
47+
{certificate.data.institute} •{" "}
48+
{df.format(
49+
certificate.data.completed,
50+
)}
51+
</p>
5752
</div>
58-
<a
59-
href={certificate.data.link}
60-
target="_blank"
61-
class="glass-button inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-gradient-to-r from-muf-500 to-muf-blue-500 bg-clip-text text-transparent hover:text-gray-800 dark:hover:text-gray-200 hover:bg-none font-semibold transition-all duration-300 hover:scale-105"
62-
>
63-
<i class="fa-solid fa-external-link"></i>
64-
View Certificate
65-
</a>
6653
</div>
67-
<div class="glass-card p-4">
68-
<img
69-
src={certificate.data.picture}
70-
alt={certificate.data.title}
71-
class="w-full h-auto rounded-lg shadow-lg hover:scale-105 transition-transform duration-300"
72-
/>
54+
<div class="flex items-center gap-2">
55+
<i class="fa-solid fa-trophy bg-gradient-to-r from-muf-500 to-muf-blue-500 bg-clip-text text-transparent text-xl" />
56+
<i class="fa-solid fa-chevron-down text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-all duration-300 transform group-data-[expanded]:rotate-180" />
57+
</div>
58+
</button>
59+
60+
<div
61+
data-id={index}
62+
class="accordion-content overflow-hidden transition-all duration-500 max-h-0"
63+
>
64+
<div class="p-6 pt-0 border-t border-white/10">
65+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
66+
<div class="space-y-4">
67+
<div class="flex items-center gap-3">
68+
<i class="fa-solid fa-calendar bg-gradient-to-r from-muf-500 to-muf-blue-500 bg-clip-text text-transparent" />
69+
<span class="text-gray-700 dark:text-gray-300">
70+
Completed:{" "}
71+
{df.format(
72+
certificate.data
73+
.completed,
74+
)}
75+
</span>
76+
</div>
77+
<a
78+
href={certificate.data.link}
79+
target="_blank"
80+
class="glass-button inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-gradient-to-r from-muf-500 to-muf-blue-500 bg-clip-text text-transparent hover:text-gray-800 dark:hover:text-gray-200 hover:bg-none font-semibold transition-all duration-300 hover:scale-105"
81+
>
82+
<i class="fa-solid fa-external-link" />
83+
View Certificate
84+
</a>
85+
</div>
86+
<div class="glass-card p-4">
87+
<img
88+
src={certificate.data.picture}
89+
alt={certificate.data.title}
90+
class="w-full h-auto rounded-lg shadow-lg hover:scale-105 transition-transform duration-300"
91+
/>
92+
</div>
93+
</div>
7394
</div>
7495
</div>
7596
</div>
7697
</div>
77-
</div>
78-
))}
98+
))
99+
}
79100
</div>
80101
</section>
81102
</main>
82103

83104
<script lang="js">
84-
document.addEventListener('DOMContentLoaded', function() {
85-
let buttons = document.querySelectorAll('.accordion-button');
86-
for (let i = 0; i < buttons.length; i++) {
87-
buttons[i].addEventListener('click', function () {
88-
let content = document.querySelectorAll('.accordion-content');
89-
let id = this.getAttribute('data-id');
90-
let targetContent = content[id];
91-
let chevron = this.querySelector('.fa-chevron-down');
92-
93-
if (targetContent.style.maxHeight && targetContent.style.maxHeight !== '0px') {
94-
targetContent.style.maxHeight = '0px';
95-
chevron.style.transform = 'rotate(0deg)';
96-
} else {
97-
targetContent.style.maxHeight = targetContent.scrollHeight + 'px';
98-
chevron.style.transform = 'rotate(180deg)';
99-
}
100-
});
101-
}
102-
});
103-
</script>
105+
document.addEventListener("DOMContentLoaded", function () {
106+
let buttons = document.querySelectorAll(".accordion-button");
107+
for (let i = 0; i < buttons.length; i++) {
108+
buttons[i].addEventListener("click", function () {
109+
let content = document.querySelectorAll(".accordion-content");
110+
let id = this.getAttribute("data-id");
111+
let targetContent = content[id];
112+
let chevron = this.querySelector(".fa-chevron-down");
104113

114+
if (
115+
targetContent.style.maxHeight &&
116+
targetContent.style.maxHeight !== "0px"
117+
) {
118+
targetContent.style.maxHeight = "0px";
119+
chevron.style.transform = "rotate(0deg)";
120+
} else {
121+
targetContent.style.maxHeight =
122+
targetContent.scrollHeight + "px";
123+
chevron.style.transform = "rotate(180deg)";
124+
}
125+
});
126+
}
127+
});
128+
</script>

0 commit comments

Comments
 (0)