Document

44 | 45 | 46 |

51 |

52 | 60 |

61 |

62 | 70 |

71 |

72 |

81 |         </div>
82 | 
83 |         <div className="form-control overflow-hidden">
84 |           <input
85 |             type="submit"
86 |             value="send message"
87 |             className="uppercase  border py-16 px-28 rounded-full border-white/20 outline-none hover:bg-cyan-400/20 duration-500 w-full hover:border-cyan-400/20"
88 |             ref={inputRef4}
89 |           />
90 |         </div>
91 |       </form>
92 |     </div>
93 |   );
94 | };
95 | 
96 | export default Contact;
97 |

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | /* fonts */
  2 | @import url("https://fonts.googleapis.com/css2?family=Michroma&display=swap");
  3 | 
  4 | @tailwind base;
  5 | @tailwind components;
  6 | @tailwind utilities;
  7 | 
  8 | @font-face {
  9 |   font-family: "Cosi Azure";
 10 |   src: url(./assets/fonts/CosiAzure-Bold.ttf);
 11 | }
 12 | 
 13 | :root {
 14 |   --color-dark: #050505;
 15 |   --color-light: #f7f7f7;
 16 | }
 17 | 
 18 | ::-webkit-scrollbar {
 19 |   width: 5px;
 20 | }
 21 | 
 22 | ::-webkit-scrollbar-thumb {
 23 |   height: 10px;
 24 |   background-color: rgba(247, 247, 247, 0.5);
 25 |   border-radius: 50px;
 26 | }
 27 | 
 28 | ::-webkit-scrollbar-thumb:hover {
 29 |   background-color: var(--color-light);
 30 | }
 31 | 
 32 | ::-webkit-scrollbar-track {
 33 |   background-color: var(--color-dark);
 34 | }
 35 | 
 36 | ::selection {
 37 |   background-color: #22d3ee;
 38 |   color: var(--color-dark);
 39 | }
 40 | 
 41 | *,
 42 | *::before,
 43 | *::after {
 44 |   cursor: none;
 45 | }
 46 | 
 47 | html,
 48 | body {
 49 |   overflow-x: hidden;
 50 | }
 51 | 
 52 | html {
 53 |   font-size: 62.5%;
 54 | }
 55 | 
 56 | body {
 57 |   background-color: var(--color-dark);
 58 |   color: var(--color-light);
 59 |   font-family: "Michroma", sans-serif;
 60 |   font-size: 1.5rem;
 61 |   line-height: 1.6;
 62 |   letter-spacing: 2px;
 63 |   word-spacing: 3px;
 64 | }
 65 | 
 66 | .inner-cursor {
 67 |   position: fixed;
 68 |   left: 10px;
 69 |   z-index: 9999;
 70 |   width: 10px;
 71 |   height: 10px;
 72 |   border-radius: 50%;
 73 |   background-color: var(--color-light);
 74 |   transform: translate(-50%, -50%);
 75 |   mix-blend-mode: difference;
 76 |   pointer-events: none;
 77 |   transition: width 0.5s, height 0.5s;
 78 | }
 79 | 
 80 | .inner-cursor.grow {
 81 |   width: 25px;
 82 |   height: 25px;
 83 |   transition: width 0.5s, height 0.5s;
 84 | }
 85 | 
 86 | .outer-cursor {
 87 |   position: fixed;
 88 |   left: 10px;
 89 |   z-index: 9999;
 90 |   width: 25px;
 91 |   height: 25px;
 92 |   transform: translate(-50%, -50%);
 93 |   mix-blend-mode: difference;
 94 |   border: 1px solid var(--color-light);
 95 |   border-radius: 50%;
 96 |   pointer-events: none;
 97 |   transition: 0.1s;
 98 | }
 99 | 
100 | input[type="submit"] {
101 |   letter-spacing: inherit;
102 |   word-spacing: inherit;
103 | }
104 | 
105 | .app {
106 |   position: relative;
107 | }
108 | 
109 | .link-item {
110 |   position: relative;
111 | }
112 | 
113 | .link-item::after {
114 |   background-color: var(--color-light);
115 |   content: "";
116 |   position: absolute;
117 |   height: 1px;
118 |   left: 50%;
119 |   bottom: -2px;
120 |   width: 0;
121 |   transform: translateX(-50%);
122 |   transition: 0.5s;
123 | }
124 | 
125 | .link-item:hover::after {
126 |   width: 100%;
127 | }
128 | 
129 | .hero {
130 |   position: relative;
131 | }
132 | 
133 | .hero-img,
134 | .project-right,
135 | .about-left {
136 |   height: 500px;
137 |   width: 500px;
138 |   overflow: hidden;
139 | }
140 | 
141 | .shutter {
142 |   position: absolute;
143 |   z-index: 100;
144 |   font-family: "Cosi Azure", sans-serif;
145 |   font-size: 10rem;
146 | }
147 | 
148 | .shutter-left {
149 |   top: 0;
150 |   left: 0;
151 | }
152 | 
153 | .shutter-right {
154 |   bottom: 0;
155 |   right: 0;
156 | }
157 | 
158 | .noise {
159 |   background-image: url("./assets/images/noise.gif");
160 |   height: 100vh;
161 |   width: 100vw;
162 |   position: fixed;
163 |   top: 0;
164 |   left: 0;
165 |   right: 0;
166 |   bottom: 0;
167 |   z-index: -9999;
168 |   opacity: 0.07;
169 | }
170 | 
171 | .circle-left,
172 | .circle-right {
173 |   height: 1000px;
174 |   width: 1000px;
175 |   border: 1px dashed var(--color-light);
176 |   border-radius: 50%;
177 |   opacity: 0.2;
178 |   position: fixed;
179 |   z-index: -9998;
180 |   animation: spin 90s linear infinite;
181 | }
182 | 
183 | @keyframes spin {
184 |   to {
185 |     transform: rotate(360deg);
186 |   }
187 | }
188 | 
189 | .circle-left {
190 |   top: -40%;
191 |   left: -20%;
192 | }
193 | 
194 | .circle-right {
195 |   bottom: -40%;
196 |   right: -20%;
197 | }
198 | 
199 | .section-title {
200 |   font-family: "Cosi Azure", sans-serif;
201 |   font-size: 10rem;
202 |   line-height: 1;
203 | }
204 | 
205 | .skill-item {
206 |   position: relative;
207 | }
208 | 
209 | .skill-item::before,
210 | .skill-item::after {
211 |   content: "";
212 |   height: 1px;
213 |   position: absolute;
214 |   bottom: 0;
215 |   left: 0;
216 |   background-color: var(--color-light);
217 | }
218 | 
219 | .skill-item::before {
220 |   width: 100%;
221 |   opacity: 0.2;
222 | }
223 | 
224 | .skill-item::after {
225 |   width: 0;
226 |   background-color: #22d3ee;
227 |   transition: 0.5s;
228 | }
229 | 
230 | .skill-item:hover::after {
231 |   width: 100%;
232 | }
233 | 
234 | .skill-number {
235 |   font-size: 2rem;
236 | }
237 |

--------------------------------------------------------------------------------
/src/hooks/gsap.js:
--------------------------------------------------------------------------------
  1 | import { useEffect } from "react";
  2 | import gsap from "gsap";
  3 | 
  4 | import { ScrollTrigger } from "gsap/ScrollTrigger";
  5 | 
  6 | gsap.registerPlugin(ScrollTrigger);
  7 | 
  8 | export const useImageReveal = (el, delay = 0) => {
  9 |   useEffect(() => {
 10 |     gsap.fromTo(
 11 |       el.current,
 12 |       {
 13 |         y: "-100vh",
 14 |       },
 15 |       {
 16 |         y: 0,
 17 |         duration: 4,
 18 |         delay,
 19 |         ease: "power4.out",
 20 |       }
 21 |     );
 22 |   }, [el, delay]);
 23 | };
 24 | 
 25 | export const useHeadlineReveal = (items, delay = 0) => {
 26 |   useEffect(() => {
 27 |     const el = items.map((item) => item.current);
 28 | 
 29 |     gsap.fromTo(
 30 |       el,
 31 |       {
 32 |         y: 500,
 33 |       },
 34 |       {
 35 |         y: 0,
 36 |         duration: 1,
 37 |         delay,
 38 |         ease: "power4.out",
 39 |         stagger: 0.2,
 40 |       }
 41 |     );
 42 |   }, [items, delay]);
 43 | };
 44 | 
 45 | export const useLinkReveal = (items, delay = 0) => {
 46 |   useEffect(() => {
 47 |     const el = items.map((item) => item.current);
 48 | 
 49 |     gsap.fromTo(
 50 |       el,
 51 |       {
 52 |         opacity: 0,
 53 |       },
 54 |       {
 55 |         opacity: 1,
 56 |         duration: 2,
 57 |         delay,
 58 |         ease: "power4.out",
 59 |         stagger: 0.2,
 60 |         scrollTrigger: {
 61 |           trigger: el,
 62 |         },
 63 |       }
 64 |     );
 65 |   }, [items, delay]);
 66 | };
 67 | 
 68 | export const useBioReveal = (el, delay = 0) => {
 69 |   useEffect(() => {
 70 |     gsap.fromTo(
 71 |       el.current,
 72 |       {
 73 |         y: 500,
 74 |       },
 75 |       {
 76 |         y: 0,
 77 |         duration: 1.5,
 78 |         delay,
 79 |         ease: "power4.out",
 80 |       }
 81 |     );
 82 |   }, [el, delay]);
 83 | };
 84 | 
 85 | export const useSocialReveal = (el, delay = 0) => {
 86 |   useEffect(() => {
 87 |     gsap.fromTo(
 88 |       el.current,
 89 |       {
 90 |         x: -500,
 91 |       },
 92 |       {
 93 |         x: 0,
 94 |         duration: 1.5,
 95 |         delay,
 96 |         ease: "power4.out",
 97 |       }
 98 |     );
 99 |   }, [el, delay]);
100 | };
101 | 
102 | export const useSectionTitleReveal = (el, delay = 0) => {
103 |   useEffect(() => {
104 |     gsap.fromTo(
105 |       el.current,
106 |       {
107 |         y: 200,
108 |       },
109 |       {
110 |         y: 0,
111 |         duration: 1.5,
112 |         delay,
113 |         ease: "power4.out",
114 |         scrollTrigger: {
115 |           trigger: el.current,
116 |         },
117 |       }
118 |     );
119 |   }, [el, delay]);
120 | };
121 | 
122 | export const useProjectLeftRightReveal = (items, delay = 0) => {
123 |   useEffect(() => {
124 |     const el = items.map((item) => item.current);
125 | 
126 |     gsap.fromTo(
127 |       el,
128 |       {
129 |         y: 500,
130 |       },
131 |       {
132 |         y: 0,
133 |         duration: 2,
134 |         delay,
135 |         ease: "power4.out",
136 |         stagger: 0.3,
137 |         scrollTrigger: {
138 |           trigger: el,
139 |         },
140 |       }
141 |     );
142 |   }, [items, delay]);
143 | };
144 | 
145 | export const useSkillLineReveal = (items) => {
146 |   useEffect(() => {
147 |     items.forEach((el) =>
148 |       gsap.to(el, {
149 |         scrollTrigger: {
150 |           trigger: el,
151 |           onEnter() {
152 |             el.classList.add("reveal");
153 |           },
154 |         },
155 |       })
156 |     );
157 |   }, [items]);
158 | };
159 | 
160 | export const useSkillTextReveal = (el) => {
161 |   useEffect(() => {
162 |     gsap.fromTo(
163 |       el,
164 |       {
165 |         y: 200,
166 |       },
167 |       {
168 |         y: 0,
169 |         duration: 1,
170 |         ease: "power4.out",
171 |         stagger: 0.3,
172 |         scrollTrigger: {
173 |           trigger: el,
174 |         },
175 |       }
176 |     );
177 |   }, [el]);
178 | };
179 | 
180 | export const useFooterReveal = (el) => {
181 |   useEffect(() => {
182 |     gsap.fromTo(
183 |       el.current,
184 |       {
185 |         y: -100,
186 |       },
187 |       {
188 |         y: 0,
189 |         duration: 1,
190 |         ease: "power4.out",
191 |         stagger: 0.3,
192 |         scrollTrigger: {
193 |           trigger: el.current,
194 |         },
195 |       }
196 |     );
197 |   }, [el]);
198 | };
199 | 
200 | export const useContactReveal = (items, delay = 0) => {
201 |   useEffect(() => {
202 |     const el = items.map((item) => item.current);
203 | 
204 |     gsap.fromTo(
205 |       el,
206 |       {
207 |         y: 200,
208 |       },
209 |       {
210 |         y: 0,
211 |         duration: 2,
212 |         delay,
213 |         ease: "power4.out",
214 |         stagger: 0.3,
215 |         scrollTrigger: {
216 |           trigger: el,
217 |         },
218 |       }
219 |     );
220 |   }, [items, delay]);
221 | };
222 |

--------------------------------------------------------------------------------

11 | {title} 12 |

ReactJS

Developer

24 | {project.title} 25 |