Skip to content

Commit 4697260

Browse files
Miran-FirdausiMiran-Firdausi
committed
feat: add tilt effect
1 parent dc9777d commit 4697260

File tree

3 files changed

+95
-84
lines changed

3 files changed

+95
-84
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"react": "^18.2.0",
2727
"react-dom": "^18.2.0",
2828
"react-fast-marquee": "^1.6.5",
29+
"react-parallax-tilt": "^1.7.268",
2930
"react-router-dom": "^6.22.1",
3031
"react-toastify": "^10.0.4",
3132
"vite": "^5.1.0"

‎src/pages/Contact/index.jsx‎

Lines changed: 45 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState } from "react";
2+
import Tilt from "react-parallax-tilt";
23
import PageTransition from "@/components/PageTransition";
34

45
function Contact() {
@@ -55,49 +56,51 @@ function Contact() {
5556
Contact Us
5657
</span>
5758
</div>
58-
<div className="mx-8 md:mx-10 mt-8">
59-
<form onSubmit={onSubmit}>
60-
<div className="m-auto flex flex-col p-8 bg-background-elevation rounded-lg shadow-lg px-8 md:px-12 py-8 max-w-2xl">
61-
<span className=" text-secondary-light uppercase tracking-widest m-auto mb-3">
62-
Drop us a message
63-
</span>
64-
<input
65-
type="hidden"
66-
name="subject"
67-
value="New message from Codex Website"
68-
/>
69-
<input
70-
type="text"
71-
name="name"
72-
placeholder="Name"
73-
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
74-
required
75-
/>
76-
<input
77-
type="email"
78-
name="email"
79-
placeholder="Email"
80-
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
81-
required
82-
/>
83-
<textarea
84-
placeholder="Enter your message..."
85-
name="message"
86-
rows="4"
87-
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
88-
required
89-
/>
90-
<div className=" flex justify-center md:justify-end mt-4">
91-
<button
92-
type="submit"
93-
className="bg-transparent rounded-full border-2 border-secondary-light px-8 py-2 text-secondary-light cursor-pointer"
94-
>
95-
send
96-
</button>
59+
<Tilt tiltEnable tiltMaxAngleX={2} tiltMaxAngleY={5}>
60+
<div className="mx-8 md:mx-10 mt-8 overflow-hidden">
61+
<form onSubmit={onSubmit}>
62+
<div className="m-auto flex flex-col p-8 bg-background-elevation rounded-lg shadow-lg px-8 md:px-12 py-8 max-w-2xl">
63+
<span className=" text-secondary-light uppercase tracking-widest m-auto mb-3">
64+
Drop us a message
65+
</span>
66+
<input
67+
type="hidden"
68+
name="subject"
69+
value="New message from Codex Website"
70+
/>
71+
<input
72+
type="text"
73+
name="name"
74+
placeholder="Name"
75+
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
76+
required
77+
/>
78+
<input
79+
type="email"
80+
name="email"
81+
placeholder="Email"
82+
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
83+
required
84+
/>
85+
<textarea
86+
placeholder="Enter your message..."
87+
name="message"
88+
rows="4"
89+
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
90+
required
91+
/>
92+
<div className=" flex justify-center md:justify-end mt-4">
93+
<button
94+
type="submit"
95+
className="bg-transparent rounded-full border-2 border-secondary-light px-8 py-2 text-secondary-light cursor-pointer"
96+
>
97+
send
98+
</button>
99+
</div>
97100
</div>
98-
</div>
99-
</form>
100-
</div>
101+
</form>
102+
</div>
103+
</Tilt>
101104
</div>
102105
</PageTransition>
103106
);

‎src/pages/Teams/TeamMember.jsx‎

Lines changed: 49 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import PropTypes from "prop-types";
22
import { Link } from "react-router-dom";
3+
import Tilt from "react-parallax-tilt";
34
import LinkedInIcon from "@/assets/images/Teams/linkedin.svg";
45
import GithubIcon from "@/assets/images/Teams/github.svg";
56
import InstagramIcon from "@/assets/images/Teams/instagram.svg";
@@ -27,50 +28,56 @@ function TeamMember({ member }) {
2728
const image = images[id];
2829

2930
return (
30-
<div className="transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-105 duration-200 hover:drop-shadow-2xl drop-shadow-background cursor-pointer bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl shadow-2xl shadow-background overflow-hidden p-2 align-middle max-w-[350px]">
31-
<div className="py-12 border-8xl border-4 h-full border-secondary-light bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl overflow-hidden p-3 align-middle">
32-
<img
33-
src={image}
34-
alt={name}
35-
className="w-32 h-32 rounded-full mx-auto object-cover"
36-
/>
37-
<h2 className="text-xl mt-8 font-poppins font-thin text-center tracking-wide text-text-light">
38-
{name}
39-
</h2>
40-
<p className="text-sm mt-2 font-poppins text-center font-semibold tracking-wide text-text-light">
41-
{position}
42-
</p>
43-
<p className="text-sm font-poppins my-4 text-center text-wrap text-secondary-light">
44-
{description}
45-
</p>
46-
<div className="flex justify-center space-x-4">
47-
<Link
48-
to={linkedin}
49-
target="_blank"
50-
rel="noreferrer"
51-
className="text-white font-sans"
52-
>
53-
<img src={LinkedInIcon} alt="Linkedin" className="w-10 h-10 p-2" />
54-
</Link>
55-
<Link
56-
to={github}
57-
target="_blank"
58-
rel="noreferrer"
59-
className="text-white font-sans"
60-
>
61-
<img src={GithubIcon} alt="Github" className="w-10 h-10 p-2" />
62-
</Link>
63-
<Link
64-
to={instagram}
65-
target="_blank"
66-
rel="noreferrer"
67-
className="text-white font-sans"
68-
>
69-
<img src={InstagramIcon} alt="GitHub" className="w-10 h-10 p-2" />
70-
</Link>
31+
<Tilt glareEnable glareBorderRadius="1.875rem">
32+
<div className="transition ease-in-out delay-150 duration-200 hover:drop-shadow-2xl drop-shadow-background cursor-pointer bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl shadow-2xl shadow-background overflow-hidden p-2 align-middle max-w-[350px]">
33+
<div className="py-12 border-8xl border-4 h-full border-secondary-light bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl overflow-hidden p-3 align-middle">
34+
<img
35+
src={image}
36+
alt={name}
37+
className="w-32 h-32 rounded-full mx-auto object-cover"
38+
/>
39+
<h2 className="text-xl mt-8 font-poppins font-thin text-center tracking-wide text-text-light">
40+
{name}
41+
</h2>
42+
<p className="text-sm mt-2 font-poppins text-center font-semibold tracking-wide text-text-light">
43+
{position}
44+
</p>
45+
<p className="text-sm font-poppins my-4 text-center text-wrap text-secondary-light">
46+
{description}
47+
</p>
48+
<div className="flex justify-center space-x-4">
49+
<Link
50+
to={linkedin}
51+
target="_blank"
52+
rel="noreferrer"
53+
className="text-white font-sans"
54+
>
55+
<img
56+
src={LinkedInIcon}
57+
alt="Linkedin"
58+
className="w-10 h-10 p-2"
59+
/>
60+
</Link>
61+
<Link
62+
to={github}
63+
target="_blank"
64+
rel="noreferrer"
65+
className="text-white font-sans"
66+
>
67+
<img src={GithubIcon} alt="Github" className="w-10 h-10 p-2" />
68+
</Link>
69+
<Link
70+
to={instagram}
71+
target="_blank"
72+
rel="noreferrer"
73+
className="text-white font-sans"
74+
>
75+
<img src={InstagramIcon} alt="GitHub" className="w-10 h-10 p-2" />
76+
</Link>
77+
</div>
7178
</div>
7279
</div>
73-
</div>
80+
</Tilt>
7481
);
7582
}
7683

0 commit comments

Comments
 (0)