Skip to content

feat: add tilt effect #78

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Miran-Firdausi merged 1 commit into from
Dec 24, 2024
Merged

feat: add tilt effect #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.6.5",
"react-parallax-tilt": "^1.7.268",
"react-router-dom": "^6.22.1",
"react-toastify": "^10.0.4",
"vite": "^5.1.0"
Expand Down
87 changes: 45 additions & 42 deletions src/pages/Contact/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useState } from "react";
import Tilt from "react-parallax-tilt";
import PageTransition from "@/components/PageTransition";

function Contact() {
Expand Down Expand Up @@ -55,49 +56,51 @@ function Contact() {
Contact Us
</span>
</div>
<div className="mx-8 md:mx-10 mt-8">
<form onSubmit={onSubmit}>
<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">
<span className=" text-secondary-light uppercase tracking-widest m-auto mb-3">
Drop us a message
</span>
<input
type="hidden"
name="subject"
value="New message from Codex Website"
/>
<input
type="text"
name="name"
placeholder="Name"
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
required
/>
<input
type="email"
name="email"
placeholder="Email"
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
required
/>
<textarea
placeholder="Enter your message..."
name="message"
rows="4"
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
required
/>
<div className=" flex justify-center md:justify-end mt-4">
<button
type="submit"
className="bg-transparent rounded-full border-2 border-secondary-light px-8 py-2 text-secondary-light cursor-pointer"
>
send
</button>
<Tilt tiltEnable tiltMaxAngleX={2} tiltMaxAngleY={5}>
<div className="mx-8 md:mx-10 mt-8 overflow-hidden">
<form onSubmit={onSubmit}>
<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">
<span className=" text-secondary-light uppercase tracking-widest m-auto mb-3">
Drop us a message
</span>
<input
type="hidden"
name="subject"
value="New message from Codex Website"
/>
<input
type="text"
name="name"
placeholder="Name"
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
required
/>
<input
type="email"
name="email"
placeholder="Email"
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
required
/>
<textarea
placeholder="Enter your message..."
name="message"
rows="4"
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
required
/>
<div className=" flex justify-center md:justify-end mt-4">
<button
type="submit"
className="bg-transparent rounded-full border-2 border-secondary-light px-8 py-2 text-secondary-light cursor-pointer"
>
send
</button>
</div>
</div>
</div>
</form>
</div>
</form>
</div>
</Tilt>
</div>
</PageTransition>
);
Expand Down
91 changes: 49 additions & 42 deletions src/pages/Teams/TeamMember.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import Tilt from "react-parallax-tilt";
import LinkedInIcon from "@/assets/images/Teams/linkedin.svg";
import GithubIcon from "@/assets/images/Teams/github.svg";
import InstagramIcon from "@/assets/images/Teams/instagram.svg";
Expand Down Expand Up @@ -27,50 +28,56 @@ function TeamMember({ member }) {
const image = images[id];

return (
<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]">
<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">
<img
src={image}
alt={name}
className="w-32 h-32 rounded-full mx-auto object-cover"
/>
<h2 className="text-xl mt-8 font-poppins font-thin text-center tracking-wide text-text-light">
{name}
</h2>
<p className="text-sm mt-2 font-poppins text-center font-semibold tracking-wide text-text-light">
{position}
</p>
<p className="text-sm font-poppins my-4 text-center text-wrap text-secondary-light">
{description}
</p>
<div className="flex justify-center space-x-4">
<Link
to={linkedin}
target="_blank"
rel="noreferrer"
className="text-white font-sans"
>
<img src={LinkedInIcon} alt="Linkedin" className="w-10 h-10 p-2" />
</Link>
<Link
to={github}
target="_blank"
rel="noreferrer"
className="text-white font-sans"
>
<img src={GithubIcon} alt="Github" className="w-10 h-10 p-2" />
</Link>
<Link
to={instagram}
target="_blank"
rel="noreferrer"
className="text-white font-sans"
>
<img src={InstagramIcon} alt="GitHub" className="w-10 h-10 p-2" />
</Link>
<Tilt glareEnable glareBorderRadius="1.875rem">
<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]">
<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">
<img
src={image}
alt={name}
className="w-32 h-32 rounded-full mx-auto object-cover"
/>
<h2 className="text-xl mt-8 font-poppins font-thin text-center tracking-wide text-text-light">
{name}
</h2>
<p className="text-sm mt-2 font-poppins text-center font-semibold tracking-wide text-text-light">
{position}
</p>
<p className="text-sm font-poppins my-4 text-center text-wrap text-secondary-light">
{description}
</p>
<div className="flex justify-center space-x-4">
<Link
to={linkedin}
target="_blank"
rel="noreferrer"
className="text-white font-sans"
>
<img
src={LinkedInIcon}
alt="Linkedin"
className="w-10 h-10 p-2"
/>
</Link>
<Link
to={github}
target="_blank"
rel="noreferrer"
className="text-white font-sans"
>
<img src={GithubIcon} alt="Github" className="w-10 h-10 p-2" />
</Link>
<Link
to={instagram}
target="_blank"
rel="noreferrer"
className="text-white font-sans"
>
<img src={InstagramIcon} alt="GitHub" className="w-10 h-10 p-2" />
</Link>
</div>
</div>
</div>
</div>
</Tilt>
);
}

Expand Down
Loading