72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
'use client';
|
|
import { motion } from 'framer-motion';
|
|
import { personal } from '@/content/personal';
|
|
import { SiGithub } from 'react-icons/si';
|
|
import styles from './Contact.module.scss';
|
|
|
|
export default function Contact() {
|
|
return (
|
|
<section className={styles.section} id="contact">
|
|
<div className={styles.container}>
|
|
<motion.div
|
|
className={styles.inner}
|
|
initial={{ opacity: 0, y: 28 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, ease: [0.22, 0.61, 0.36, 1] }}
|
|
>
|
|
<motion.h2
|
|
className={styles.heading}
|
|
initial={{ opacity: 0, y: 12 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.4 }}
|
|
>
|
|
Let's work together<span className={styles.dot}>.</span>
|
|
</motion.h2>
|
|
<motion.p
|
|
className={styles.sub}
|
|
initial={{ opacity: 0, y: 8 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.4, delay: 0.06 }}
|
|
>
|
|
Have a project in mind or just want to chat? My inbox is always open.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 8 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.4, delay: 0.12 }}
|
|
>
|
|
<a href={`mailto:${personal.email}`} className={styles.email}>
|
|
{personal.email}
|
|
</a>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className={styles.socials}
|
|
initial={{ opacity: 0, y: 12 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.4, delay: 0.18 }}
|
|
>
|
|
<motion.a
|
|
href={personal.social.github}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="GitHub"
|
|
whileHover={{ scale: 1.1, y: -2 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<SiGithub />
|
|
</motion.a>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|