Skip to content

Commit dba1d24

Browse files
MarkVN2MarkVN2
committed
[feat]: cards now flip
- Members cards now flip to reveal more info. - Addition of missing members
1 parent dcd02b8 commit dba1d24

File tree

9 files changed

+355
-27
lines changed

9 files changed

+355
-27
lines changed

‎app/components/backdrop/index.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
"use client";
2+
import { motion } from "framer-motion";
3+
4+
const Backdrop = ({children,onClick }) => {
5+
return (
6+
<motion.div
7+
className="backdrop"
8+
onClick={onClick}
9+
initial={{opacity:0}}
10+
animate={{opacity:1}}
11+
>
12+
{children}
13+
</motion.div>
14+
)
15+
}
16+
17+
export default Backdrop;

‎app/components/main/index.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
"use client";
2+
import { motion } from "framer-motion";
3+
4+
const dropIn ={
5+
hidden:{
6+
y:"-100vh",
7+
opacity:0,
8+
},
9+
visible:{
10+
y:0,
11+
opacity:1,
12+
transition:{
13+
duration:0.1,
14+
type:"spring",
15+
damping:25,
16+
stiffness:500,
17+
}
18+
},
19+
exit:{
20+
y:"100vh",
21+
opacity:0
22+
},
23+
};
24+
25+
const Main = ({children}) =>{
26+
return(
27+
<motion.main initial="pageInitial" animate="pageAnimate" variants={{
28+
pageInitial: {
29+
opacity: 0
30+
},
31+
pageAnimate: {
32+
opacity: 1
33+
}}
34+
}
35+
className="flex min-h-screen flex-col relative overflow-hidden">
36+
{children}
37+
</motion.main>
38+
)
39+
}
40+
41+
export default Main;

‎app/components/modal/index.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
"use client";
2+
import { motion } from "framer-motion";
3+
import Backdrop from "../backdrop";
4+
5+
const dropIn ={
6+
hidden:{
7+
y:"-100vh",
8+
opacity:0,
9+
},
10+
visible:{
11+
y:0,
12+
opacity:1,
13+
transition:{
14+
duration:0.1,
15+
type:"spring",
16+
damping:25,
17+
stiffness:500,
18+
}
19+
},
20+
exit:{
21+
y:"100vh",
22+
opacity:0
23+
},
24+
};
25+
26+
const Modal = ({handleClose}) =>{
27+
return(
28+
<Backdrop onClick={handleClose}>
29+
<motion.div
30+
onClick={(e) => e.stopPropagation()}
31+
className="modal"
32+
animate={{
33+
scale: [1, 2, 2, 1, 1],
34+
rotate: [0, 0, 180, 180, 0],
35+
borderRadius: ["0%", "0%", "50%", "50%", "0%"]
36+
}}
37+
transition={{
38+
duration: 2,
39+
ease: "easeInOut",
40+
times: [0, 0.2, 0.5, 0.8, 1],
41+
repeat: Infinity,
42+
repeatDelay: 1
43+
}}
44+
>
45+
<div className="bg-white"><p>A </p></div>
46+
<button onClick={handleClose}>Close</button>
47+
</motion.div>
48+
</Backdrop>
49+
)
50+
}
51+
52+
export default Modal;

‎app/globals.css‎

Lines changed: 160 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,122 @@
11
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;800&display=swap');
2-
2+
@import-normalize;
33
@tailwind base;
44
@tailwind components;
55
@tailwind utilities;
66

77

8+
:root{
9+
--card-title-color:#22DDA2;
10+
--bg-gradient-color1:#6B3580;
11+
--bg-gradient-color2:#169970;
12+
}
13+
814
@property --gradient-angle{
915
syntax: "<angle>";
1016
initial-value: 0deg;
1117
inherits: false;
1218
}
1319

20+
p{
21+
text-wrap: balance;
22+
}
23+
.team-header{
24+
border-color: transparent;
25+
position: relative;
26+
inset: 0;
27+
isolation: isolate;
28+
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
29+
}
30+
.team-header:hover{
31+
border-color: #FF005C;
32+
border-right-width: 0.5rem;
33+
transform:
34+
perspective(6000px)
35+
rotateY(90deg)
36+
rotateX(90deg)
37+
scale(1.2);
38+
}
1439

15-
.teamcard{
16-
background:#291a3575;
40+
.team-card{
41+
background:hsl(273, 34%, 15%, 0.26);
42+
border-color: transparent;
1743
position: relative;
44+
z-index: 1;
1845
inset: 0;
1946
isolation: isolate;
2047
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
2148
}
22-
.teamcard:hover{
49+
.team-card-front{
50+
51+
}
52+
.team-card-back{
53+
z-index: -1;
54+
border-color: transparent;
55+
border-radius: inherit;
56+
display: grid;
57+
&before{
58+
content: "";
59+
position: absolute;
60+
width: 100%;
61+
height: 100%;
62+
z-index: -50;
63+
background-size:100% 100%;
64+
background-color: #169970;
65+
}
66+
inset: 0;
67+
isolation: isolate;
68+
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
69+
}
70+
71+
.team-card:hover{
72+
border-color: #FF005C;
73+
border-right-width: 0.5rem;
2374
transform:
2475
perspective(3000px)
2576
rotateY(-20deg)
2677
rotateX(0)
2778
scale(1.2);
79+
--card-title-color: #FF005C;
80+
color: transparent;
81+
}
82+
83+
.team-card::before{
84+
content: "";
85+
display: block;
86+
position: absolute;
87+
top: 0;
88+
left: 0;
89+
right: 0;
90+
bottom: 0;
91+
z-index: -1;
92+
border-radius: inherit;
93+
backdrop-filter: brightness(90%) blur(20px);
94+
-webkit-backdrop-filter: brightness(90%) blur(20px);
95+
-moz-backdrop-filter: brightness(90%) blur(20px);
96+
mask-image: repeating-radial-gradient(
97+
circle at 50% 50% center,
98+
var(--bg-gradient-color1),
99+
var(--bg-gradient-color1) 20px,
100+
rgba(255, 255, 255, 0.3) 20.5px,
101+
rgba(255, 255, 255, 0.3) 21px
102+
);
103+
-webkit-mask-image: repeating-radial-gradient(
104+
circle at 50% 50%,
105+
var(--bg-gradient-color1),
106+
var(--bg-gradient-color1) 20px,
107+
rgba(255, 255, 255, 0.3) 20.5px,
108+
rgba(255, 255, 255, 0.3) 21px
109+
);
110+
}
111+
112+
.card-title{
113+
color: var(--card-title-color);
114+
background-image: var(--card-title-bg);
115+
background-clip: text;
28116
}
29117

30118
.bg-default{
31-
background:linear-gradient(to right,#6B3580,#169970);
119+
background:linear-gradient(to right,var(--bg-gradient-color1),var(--bg-gradient-color2));
32120
}
33121
.grid-1{
34122
animation: grid-move 5s linear infinite ;
@@ -39,10 +127,75 @@
39127
.grid-3{
40128
animation: pulse 5s forwards infinite ;
41129
}
130+
.backdrop{
131+
position: absolute;
132+
top: 0;
133+
left: 0;
134+
height: 100%;
135+
width: 100%;
136+
background:#00000062;
137+
display: flex;
138+
align-items: center;
139+
justify-content: center;
140+
}
141+
142+
footer::before {
143+
content: "";
144+
display: block;
145+
position: absolute;
146+
z-index: -2;
147+
top: 0;
148+
left: 0;
149+
right: 0;
150+
bottom: 0;
151+
background-size: 15px 15px;
152+
backdrop-filter: brightness(90%) blur(20px);
153+
-webkit-backdrop-filter: brightness(90%) blur(20px);
154+
-moz-backdrop-filter: brightness(90%) blur(20px);
155+
mask-image: repeating-radial-gradient(
156+
circle at 50% 50% center,
157+
var(--bg-gradient-color1),
158+
var(--bg-gradient-color1) 20px,
159+
rgba(255, 255, 255, 0.3) 20.5px,
160+
rgba(255, 255, 255, 0.3) 21px
161+
);
162+
-webkit-mask-image: repeating-radial-gradient(
163+
circle at 50% 50%,
164+
var(--bg-gradient-color1),
165+
var(--bg-gradient-color1) 20px,
166+
rgba(255, 255, 255, 0.3) 20.5px,
167+
rgba(255, 255, 255, 0.3) 21px
168+
);
169+
}
170+
footer {
171+
background: hsl(273, 34%, 15%, 0.26);
172+
position: absolute;
173+
bottom: 0;
174+
left: 0;
175+
right: 0;
176+
display: flex;
177+
justify-content: flex-start;
178+
align-items: center;
179+
padding: 20px;
180+
font-size: 14px;
181+
line-height: 14px;
182+
}
42183

184+
.modal{
185+
width: clamp(50%,700px, 90%);
186+
height: min(50%, 300px);
187+
188+
position: sticky;
189+
margin: auto;
190+
padding: 0 2rem;
191+
border-radius: 12px;
192+
display: flex;
193+
flex-direction: column;
194+
align-items: center;
195+
}
43196
@keyframes pulse {
44197
0%{opacity: 0%;}
45-
25%{opacity: 20%;}
198+
25%{opacity: 35%;}
46199
100%{opacity: 0%;}
47200
}
48201
@keyframes grid-move {
@@ -52,7 +205,7 @@
52205

53206
translate3d(0,0,0);
54207
}
55-
25%{opacity: 20%;}
208+
25%{opacity: 35%;}
56209
100%{
57210
opacity: 0%;
58211
transform:
@@ -62,8 +215,6 @@
62215
translate3d(50px,20px,0);
63216
}
64217
}
65-
66-
67218
@keyframes gradient-rotation {
68219
0%{
69220
--gradient-angle: 0deg;

0 commit comments

Comments
 (0)