fixes

components/ContactMe.tsx

@@ -1,9 +1,23 @@
 import React from 'react'
 import { EnvelopeIcon, MapPinIcon, PhoneIcon } from '@heroicons/react/24/solid'
+import { useForm, SubmitHandler } from "react-hook-form";
 
 type Props = {}
+type Inputs = {
+ name: string,
+ email: string,
+ subject: string,
+ message: string,
+};
 
 export const ContactMe = (props: Props) => {
+
+ const { register, handleSubmit } = useForm<Inputs>();
+ const onSubmit: SubmitHandler<Inputs> = data => {
+ window.location.href = `mailto:[email protected]?subject=${data.subject}&body=Hi, I'm ${data.name}. ${data.message}
+ (${data.email})`
+ };
+
  return (
  <div className='h-screen flex relative text-center md:text-left flex-col md:flex-row
  justify-evenly mx-auto items-center px-10'>
@@ -29,13 +43,13 @@ export const ContactMe = (props: Props) => {
  <p className='text-[20px]'>Lucknow, India</p>
  </div>
  </div>
- <form className='flex flex-col space-y-2 w-full mx-auto'>
+ <form onSubmit={handleSubmit(onSubmit)} className='flex flex-col space-y-2 w-full mx-auto'>
  <div className='flex md:space-x-2 flex-col md:flex-row'>
- <input placeholder='Name' className='contactInput mb-2 md:mb-0' type="text"/>
- <input placeholder='Email' className='contactInput' type="text" />
+ <input {...register('name')} placeholder='Name' className='contactInput mb-2 md:mb-0' type="text"/>
+ <input {...register('email')} placeholder='Email' className='contactInput' type="email" />
  </div>
- <input placeholder='Subject' className='contactInput' type="text" />
- <textarea placeholder='Message' className='contactInput' />
+ <input {...register('subject')} placeholder='Subject' className='contactInput' type="text" />
+ <textarea {...register('message')} placeholder='Message' className='contactInput' />
  <button type='submit' className='bg-[#F7AB0A] py-4 px-10 rounded-md text-black font-bold'>Submit</button>
  </form>
  </div>

components/ExperienceCard.tsx

@@ -5,8 +5,8 @@ type Props = {}
 
 const ExperienceCard = (props: Props) => {
  return (
- <article className='flex flex-col rounded-lg items-center space-y-7 flex-shrink-0
- w-[330px] md:w-[600px] xl:[900px] snap-center bg-[#292929] p-[20px] md:opacity-40 hover:opacity-100 cursor-pointer transition-opacity duration-200 overflow-hidden'>
+ <article className='flex flex-col self-end rounded-lg items-center space-y-7 flex-shrink-0
+ w-[330px] h-fit md:w-[600px] snap-center bg-[#292929] p-[20px] md:opacity-40 hover:opacity-100 cursor-pointer transition-opacity duration-200 overflow-hidden'>
  <motion.img
  initial={{
  y: -100,

components/Projects.tsx

@@ -15,7 +15,7 @@ export const Projects = (props: Props) => {
  justify-evenly mx-auto items-center z-0'
  >
  <h3 className='absolute top-20 ml-5 uppercase tracking-[20px] text-gray-500 text-2xl'>Projects</h3>
- <div className='relative w-full flex overflow-x-scroll overflow-y-hidden
+ <div className='h-full relative w-full flex overflow-x-scroll overflow-y-hidden
  snap-x snap-mandatory z-20 scrollbar-thin scrollbar-track-gray-400/20 scrollbar-thumb-[#F7AB0A]/80 p-10'>
  {
  projects.map((project, index) => (

components/WorkEx.tsx

@@ -13,7 +13,7 @@ export const WorkEx = (props: Props) => {
  className='h-screen flex relative overflow-hidden flex-col text-left md:flex-row
  max-w-full px-10 justify-evenly mx-auto items-center'>
  <h3 className='absolute top-[20px] md:top-[50px] ml-5 uppercase tracking-[20px] text-gray-500 text-2xl'>Experience</h3>
- <div className='w-full flex space-x-5 overflow-x-scroll scrollbar-thin scrollbar-track-gray-400/20 scrollbar-thumb-[#F7AB0A]/80 p-10 snap-x snap-mandatory'>
+ <div className='w-full md:h-full flex space-x-5 overflow-x-scroll scrollbar-thin scrollbar-track-gray-400/20 scrollbar-thumb-[#F7AB0A]/80 p-10 snap-x snap-mandatory'>
  <ExperienceCard />
  <ExperienceCard />
  <ExperienceCard />

package.json

@@ -20,6 +20,7 @@
  "next": "13.1.1",
  "react": "18.2.0",
  "react-dom": "18.2.0",
+ "react-hook-form": "^7.42.0",
  "react-simple-typewriter": "^5.0.1",
  "react-social-icons": "^5.15.0",
  "typescript": "4.9.4"