Md Rafiul Islam | Font end Developer

62 | 63 | 64 |

67 |

68 | 75 |

76 |

77 | 84 |

85 |

86 |

94 |         </div>
 95 | 
 96 |         <div className="from-control overflow-hidden" ref={btnRef}>
 97 |           <input
 98 |             type="submit"
 99 |             value="Send message"
100 |             className="uppercase cursor-pointer  bg-transparent border py-16 px-28 rounded-full border-white/20 outline-none
101 |             hover:bg-cyan-400/20  hover:border-cyan-400/20 focus:border-cyan-400 duration-300 w-full tracking-widest"
102 |           />
103 |         </div>
104 |       </form>
105 |     </div>
106 |   );
107 | };
108 | 
109 | export default Contact;
110 |

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

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

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

{title}

Font-End

Developer

25 | {project.title} 26 |