(null);
25 | const [isLoading, setIsLoading] = useState(false);
26 | const [error, setError] = useState("");
27 | const [isSuccess, setIsSuccess] = useState(false);
28 |
29 | const isInView = useInView(ref, { margin: "-100px" });
30 |
31 | const handleSubmit = async (e: FormEvent) => {
32 | e.preventDefault();
33 | setIsLoading(true);
34 |
35 | try {
36 | await sendEmail(formRef.current!);
37 | setIsSuccess(true);
38 | formRef.current?.reset();
39 | } catch (err) {
40 | if (err instanceof Error) {
41 | setError(err.message);
42 | } else {
43 | setError("Something went wrong.");
44 | }
45 | } finally {
46 | setIsLoading(false);
47 | }
48 | };
49 |
50 | return (
51 |
58 |
62 |
63 | Let's work together
64 |
65 | {contactInfo.map(item => (
66 |
67 |
68 | {item.title}
69 |
70 | {item.info}
71 |
72 | ))}
73 |
74 |
75 |
81 |
85 |
86 |
94 |
101 |
108 |
115 |
122 | {!!error && {error}
}
123 | {isSuccess && Email sent
}
124 |
125 |
126 |
127 | );
128 | };
129 |
--------------------------------------------------------------------------------
/src/components/home/Hero.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import Link from "next/link";
3 |
4 | const textVariants = {
5 | initial: {
6 | x: -500,
7 | opacity: 0,
8 | },
9 | animate: {
10 | x: 0,
11 | opacity: 1,
12 | transition: {
13 | duration: 1,
14 | staggerChildren: 0.1,
15 | },
16 | },
17 | scrollButton: {
18 | opacity: 0,
19 | y: 10,
20 | transition: {
21 | duration: 2,
22 | repeat: Infinity,
23 | },
24 | },
25 | };
26 | const sliderVariants = {
27 | initial: {
28 | x: 0,
29 | },
30 | animate: {
31 | x: -220,
32 | transition: {
33 | repeat: Infinity,
34 | duration: 20,
35 | },
36 | },
37 | };
38 |
39 | export const Hero = () => {
40 | return (
41 |
42 |
48 |
52 | Ikram Ul Haq
53 |
54 |
58 | Full Stack Developer
59 |
60 |
64 |
65 |
70 | See the Latest Works
71 |
72 |
73 |
74 |
78 | Contact Me
79 |
80 |
81 |
82 |
91 |
92 |
98 | Programmer, Developer, Problem Solver
99 |
100 | {/*
101 |
108 | */}
109 |
110 | );
111 | };
112 |
--------------------------------------------------------------------------------
/src/components/home/Parallax.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 | import { cn } from "@/utils";
3 | import { useScroll, useTransform, motion } from "framer-motion";
4 |
5 | interface ParallaxProps {
6 | type: "services" | "portfolio";
7 | }
8 |
9 | export const Parallax = ({ type }: ParallaxProps) => {
10 | const ref = useRef(null);
11 |
12 | const { scrollYProgress } = useScroll({
13 | target: ref,
14 | offset: ["start start", "end start"],
15 | });
16 |
17 | const yText = useTransform(scrollYProgress, [0, 1], ["0%", "500%"]);
18 | const yBg = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
19 |
20 | return (
21 |
31 |
35 | {type === "services" ? "What We Do?" : "What We did?"}
36 |
37 |
42 |
54 |
60 |
61 | );
62 | };
63 |
--------------------------------------------------------------------------------
/src/components/home/Services.tsx:
--------------------------------------------------------------------------------
1 | import { servicesData } from "@/data";
2 | import { motion, useInView } from "framer-motion";
3 | import Image from "next/image";
4 | import { useRef } from "react";
5 |
6 | const variants = {
7 | initial: {
8 | x: -500,
9 | y: 100,
10 | opacity: 0,
11 | },
12 | animate: {
13 | x: 0,
14 | opacity: 1,
15 | y: 0,
16 | transition: {
17 | duration: 1,
18 | staggerChildren: 0.1,
19 | },
20 | },
21 | };
22 |
23 | export const Services = () => {
24 | const ref = useRef(null);
25 |
26 | const isInView = useInView(ref, { margin: "-100px" });
27 |
28 | return (
29 |
36 |
40 |
41 | I focus on helping your brand grow and move forward
42 |
43 |
44 |
45 |
49 |
50 |
57 |
58 |
59 | Unique
60 | {" "}
61 | Ideas
62 |
63 |
64 |
65 |
66 |
67 | For Your
68 | {" "}
69 | Business
70 |
71 |
77 |
78 |
79 |
83 | {servicesData.map(item => (
84 |
88 | {item.title}
89 | {item.description}
90 |
96 |
97 | ))}
98 |
99 |
100 | );
101 | };
102 |
--------------------------------------------------------------------------------
/src/components/home/index.ts:
--------------------------------------------------------------------------------
1 | export { Hero } from "./Hero";
2 | export { Parallax } from "./Parallax";
3 | export { Services } from "./Services";
4 | export { Portfolio } from "./portfolio/Portfolio";
5 | export { Contact } from "./Contact";
6 |
--------------------------------------------------------------------------------
/src/components/home/portfolio/Portfolio.tsx:
--------------------------------------------------------------------------------
1 | import { motion, useScroll, useSpring } from "framer-motion";
2 | import { useRef } from "react";
3 | import { ProjectDetails } from "./ProjectDetails";
4 | import { portfolioData } from "@/data";
5 |
6 | export const Portfolio = () => {
7 | const ref = useRef(null);
8 |
9 | const { scrollYProgress } = useScroll({
10 | target: ref,
11 | offset: ["end end", "start start"],
12 | });
13 |
14 | const scaleX = useSpring(scrollYProgress, {
15 | stiffness: 100,
16 | damping: 30,
17 | });
18 | return (
19 |
20 |
21 |
22 | Featured works
23 |
24 |
25 |
26 | {portfolioData.map(item => (
27 |
28 | ))}
29 |
24 |
25 |
26 |
33 |
34 |
35 |
36 | {title}
37 |
38 | {description}
39 |
40 |
46 |
47 |
48 |
49 |