Masud Rana Shawon - Full Stack Developer

64 | 65 | 66 |

71 | {/* Hidden field for project identifier */} 72 | 73 | 74 |

75 | 83 |

84 |

85 | 93 |

94 |

95 |

104 |         </div>
105 |         <div className="form-control overflow-hidden">
106 |           <input
107 |             ref={input4Ref}
108 |             type="submit"
109 |             value="Send message"
110 |             className="submit uppercase bg-transparent border border-white/20 py-16 px-28 rounded-full outline-none tracking-widest w-full hover:bg-cyan-400/20 hover:border-cyan-400/20  duration-500"
111 |           />
112 |         </div>
113 |       </form>
114 |     </div>
115 |   );
116 | };
117 | 
118 | export default Contact;
119 |

--------------------------------------------------------------------------------
/src/components/Projects.js:
--------------------------------------------------------------------------------
 1 | import Project from "./Project";
 2 | import SectionTitle from "./SectionTitle";
 3 | 
 4 | const data = [
 5 |   {
 6 |     id: 1,
 7 |     title: "Learnify: An Online Learning Platform",
 8 |     image1:
 9 |       "https://res.cloudinary.com/drgxflcsb/image/upload/v1692032065/Personal%20Portfolio/learnify-1_gybje8.png",
10 |     image2:
11 |       "https://res.cloudinary.com/drgxflcsb/image/upload/v1692032065/Personal%20Portfolio/learnify-2_oneneu.png",
12 |     description:
13 |       "Experience a transformative online learning journey with Learnify, The cutting-edge Next.js app! Explore a diverse range of courses, engage with interactive lessons, and embrace a seamless user experience. With Learnify, acquiring new skills and knowledge has never been easier. Join us today and unlock the full potential of your learning endeavors.",
14 |     tools: [
15 |       "Next.js",
16 |       "React.js",
17 |       "MongoDB",
18 |       "Stripe",
19 |       "Prisma",
20 |       "GCP",
21 |       "Tailwind CSS",
22 |       "AOS",
23 |     ],
24 |     liveLink: "https://learnify-pro.vercel.app",
25 |     fullStackLink: "https://github.com/masudranashawon/learnify",
26 |     frontEndLink: "",
27 |     backEndLink: "",
28 |   },
29 |   {
30 |     id: 2,
31 |     title: "Proxima: Project Management Web Application",
32 |     image1:
33 |       "https://res.cloudinary.com/drgxflcsb/image/upload/v1679669817/Personal%20Portfolio/proxima-one_rzufpn.png",
34 |     image2:
35 |       "https://res.cloudinary.com/drgxflcsb/image/upload/v1679669817/Personal%20Portfolio/proxima-two_zrwmos.png",
36 |     description:
37 |       "Proxima is a project management application built using the MERN Stack. The application allows users to create, update, and delete their own projects with ease. Proxima is designed with high-level security in mind, featuring strong JWT authentication and front-end route protection to ensure the safety and privacy of user data.",
38 |     tools: [
39 |       "React.js",
40 |       "Tailwind CSS",
41 |       "Node.js",
42 |       "Express.js",
43 |       "MongoDB",
44 |       "JWT",
45 |     ],
46 |     liveLink: "https://proxima-application.netlify.app",
47 |     fullStackLink: "",
48 |     frontEndLink: "https://github.com/masudranashawon/proxima-client",
49 |     backEndLink: "https://github.com/masudranashawon/proxima-server",
50 |   },
51 |   {
52 |     id: 3,
53 |     title: "Tech Alpha: Online Electronics Accessories Store",
54 |     image1:
55 |       "https://res.cloudinary.com/drgxflcsb/image/upload/v1675615229/Personal%20Portfolio/tech-alpha-1_lgzxvt.png",
56 |     image2:
57 |       "https://res.cloudinary.com/drgxflcsb/image/upload/v1675615227/Personal%20Portfolio/tech-alpha-2_tlagyh.png",
58 |     description:
59 |       "Tech Alpha is an online electronic accessories store that offers the latest and greatest electronic accessories. Our website features a clean, modern design, an easy-to-use interface and a robust shopping functionality built using Redux.js. All the product data has been served via JSON server and fetched using Axios.",
60 |     tools: ["React.js", "Tailwind CSS", "Redux.js", "Redux Toolkit", "Axios"],
61 |     liveLink: "https://tech-alpha-masud.netlify.app",
62 |     fullStackLink: "",
63 |     frontEndLink: "https://github.com/masudranashawon/tech-alpha",
64 |     backEndLink: "https://github.com/masudranashawon/tech-alpha-server",
65 |   },
66 |   {
67 |     id: 4,
68 |     title: "Foodverse: A Recipe Finder Web Application",
69 |     image1:
70 |       "https://res.cloudinary.com/drgxflcsb/image/upload/v1675615230/Personal%20Portfolio/foodverse-1_mkf88w.png",
71 |     image2:
72 |       "https://res.cloudinary.com/drgxflcsb/image/upload/v1675615230/Personal%20Portfolio/foodvarse-2_qekgne.png",
73 |     description:
74 |       "Foodverse is a recipe web application, where a user can search for a variety of recipes and find the ingredients and quantities needed to make each recipe item. Also, favorite recipe items can be saved in the browser's local storage. It is easy to find different recipes for vegetarians and meat eaters, as well as those who want to lose weight.",
75 |     tools: ["React.js", "React Router", "Tailwind CSS"],
76 |     liveLink: "https://food-verse-masud.netlify.app/",
77 |     fullStackLink: "",
78 |     frontEndLink: "https://github.com/masudranashawon/foodverse",
79 |     backEndLink: "",
80 |   },
81 | ];
82 | 
83 | const Projects = () => {
84 |   return (
85 |     <div className="projects container mx-auto mt-40" id="projects">
86 |       <SectionTitle title={"My Projects"} />
87 |       <div className="projects-wrapper mt-40 flex flex-col gap-10">
88 |         {data.map((project) => (
89 |           <Project key={project.id} project={project} />
90 |         ))}
91 |       </div>
92 |     </div>
93 |   );
94 | };
95 | 
96 | export default Projects;
97 |

--------------------------------------------------------------------------------
/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 |     const el = items.map((item) => item.current);
 27 | 
 28 |     gsap.fromTo(
 29 |       el,
 30 |       {
 31 |         y: 500,
 32 |       },
 33 |       {
 34 |         y: 0,
 35 |         duration: 1,
 36 |         delay,
 37 |         ease: "power4.out",
 38 |         stagger: 0.2,
 39 |       }
 40 |     );
 41 |   }, [items, delay]);
 42 | };
 43 | 
 44 | export const useLinkReveal = (items, delay = 0) => {
 45 |   useEffect(() => {
 46 |     const el = items.map((item) => item.current);
 47 | 
 48 |     gsap.fromTo(
 49 |       el,
 50 |       {
 51 |         opacity: 0,
 52 |       },
 53 |       {
 54 |         opacity: 1,
 55 |         duration: 2,
 56 |         delay,
 57 |         ease: "power4.out",
 58 |         stagger: 0.2,
 59 |         scrollTrigger: {
 60 |           trigger: el,
 61 |         },
 62 |       }
 63 |     );
 64 |   }, [items, delay]);
 65 | };
 66 | 
 67 | export const useBioReveal = (el, delay = 0) => {
 68 |   useEffect(() => {
 69 |     gsap.fromTo(
 70 |       el.current,
 71 |       {
 72 |         y: 500,
 73 |       },
 74 |       {
 75 |         y: 0,
 76 |         duration: 1.5,
 77 |         delay,
 78 |         ease: "power4.out",
 79 |       }
 80 |     );
 81 |   }, [el, delay]);
 82 | };
 83 | 
 84 | export const useSocialReveal = (el, delay = 0) => {
 85 |   useEffect(() => {
 86 |     gsap.fromTo(
 87 |       el.current,
 88 |       {
 89 |         x: -500,
 90 |       },
 91 |       {
 92 |         x: 0,
 93 |         duration: 1.5,
 94 |         delay,
 95 |         ease: "power4.out",
 96 |       }
 97 |     );
 98 |   }, [el, delay]);
 99 | };
100 | 
101 | export const useSectionTitleReveal = (el, delay = 0) => {
102 |   useEffect(() => {
103 |     gsap.fromTo(
104 |       el.current,
105 |       {
106 |         y: 200,
107 |       },
108 |       {
109 |         y: 0,
110 |         duration: 1.5,
111 |         delay,
112 |         ease: "power4.out",
113 |         scrollTrigger: {
114 |           trigger: el.current,
115 |         },
116 |       }
117 |     );
118 |   }, [el, delay]);
119 | };
120 | 
121 | export const useProjectLeftRightReveal = (items, delay = 0) => {
122 |   useEffect(() => {
123 |     const el = items.map((item) => item.current);
124 | 
125 |     gsap.fromTo(
126 |       el,
127 |       {
128 |         y: 500,
129 |       },
130 |       {
131 |         y: 0,
132 |         duration: 2,
133 |         delay,
134 |         ease: "power4.out",
135 |         stagger: 0.3,
136 |         scrollTrigger: {
137 |           trigger: el,
138 |         },
139 |       }
140 |     );
141 |   }, [items, delay]);
142 | };
143 | 
144 | export const useSkillLineReveal = (items) => {
145 |   useEffect(() => {
146 |     items.forEach((el) =>
147 |       gsap.to(el, {
148 |         scrollTrigger: {
149 |           trigger: el,
150 |           onEnter() {
151 |             el.classList.add("reveal");
152 |           },
153 |         },
154 |       })
155 |     );
156 |   }, [items]);
157 | };
158 | 
159 | export const useSkillTextReveal = (el) => {
160 |   useEffect(() => {
161 |     gsap.fromTo(
162 |       el,
163 |       {
164 |         y: 200,
165 |       },
166 |       {
167 |         y: 0,
168 |         duration: 1,
169 |         ease: "power4.out",
170 |         stagger: 0.3,
171 |         scrollTrigger: {
172 |           trigger: el,
173 |         },
174 |       }
175 |     );
176 |   }, [el]);
177 | };
178 | 
179 | export const useFooterReveal = (el) => {
180 |   useEffect(() => {
181 |     gsap.fromTo(
182 |       el.current,
183 |       {
184 |         y: -100,
185 |       },
186 |       {
187 |         y: 0,
188 |         duration: 1,
189 |         ease: "power4.out",
190 |         stagger: 0.3,
191 |         scrollTrigger: {
192 |           trigger: el.current,
193 |         },
194 |       }
195 |     );
196 |   }, [el]);
197 | };
198 | 
199 | export const useInputReveal = (items, delay = 0) => {
200 |   useEffect(() => {
201 |     const el = items.map((item) => item.current);
202 | 
203 |     gsap.fromTo(
204 |       el,
205 |       {
206 |         y: 200,
207 |       },
208 |       {
209 |         y: 0,
210 |         duration: 2,
211 |         delay,
212 |         ease: "power4.out",
213 |         stagger: 0.2,
214 |         scrollTrigger: {
215 |           trigger: el,
216 |         },
217 |       }
218 |     );
219 |   }, [items, delay]);
220 | };
221 | 
222 | export const useGsapDownStagger = (arr, delay = 0) => {
223 |   useEffect(() => {
224 |     const el = arr.map((item) => item.current);
225 | 
226 |     gsap.fromTo(
227 |       el,
228 |       {
229 |         y: "-100%",
230 |         opacity: 0,
231 |       },
232 |       {
233 |         y: 0,
234 |         opacity: 1,
235 |         duration: 1.5,
236 |         stagger: 0.1,
237 |         ease: "power4.out",
238 |         delay: delay,
239 |         scrollTrigger: {
240 |           trigger: el,
241 |         },
242 |       }
243 |     );
244 |   }, [arr, delay]);
245 | };
246 |

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
  2 | 
  3 | @tailwind base;
  4 | @tailwind components;
  5 | @tailwind utilities;
  6 | 
  7 | @font-face {
  8 |   font-family: "Moonhouse";
  9 |   src: url("./fonts/moonhouse.woff2") format("woff2");
 10 | }
 11 | 
 12 | :root {
 13 |   --color-dark: #050505;
 14 |   --color-light: #f7f7f7;
 15 | }
 16 | 
 17 | ::-webkit-scrollbar {
 18 |   width: 5px;
 19 | }
 20 | 
 21 | ::-webkit-scrollbar-thumb {
 22 |   height: 10%;
 23 |   background-color: rgba(247, 247, 247, 0.5);
 24 |   border-radius: 50px;
 25 | }
 26 | 
 27 | ::-webkit-scrollbar-thumb:hover {
 28 |   background-color: var(--color-light);
 29 | }
 30 | 
 31 | ::-webkit-scrollbar-track {
 32 |   background-color: var(--color-dark);
 33 | }
 34 | 
 35 | ::selection {
 36 |   background-color: #22d3ee;
 37 |   color: var(--color-dark);
 38 | }
 39 | 
 40 | *,
 41 | *::after,
 42 | *::before {
 43 |   cursor: none;
 44 | }
 45 | 
 46 | html,
 47 | body {
 48 |   overflow-x: none;
 49 | }
 50 | 
 51 | html {
 52 |   font-size: 62.5%;
 53 | }
 54 | 
 55 | body {
 56 |   background-color: var(--color-dark);
 57 |   color: var(--color-light);
 58 |   font-family: "Space Grotesk", sans-serif;
 59 |   font-size: 1.6rem;
 60 |   line-height: 1.6;
 61 | }
 62 | 
 63 | .inner-cursor {
 64 |   background-color: var(--color-light);
 65 |   width: 10px;
 66 |   height: 10px;
 67 |   position: fixed;
 68 |   left: 10px;
 69 |   z-index: 9999;
 70 |   border-radius: 50%;
 71 |   transform: translate(-50%, -50%);
 72 |   mix-blend-mode: difference;
 73 |   pointer-events: none;
 74 |   transition: width 0.5s, height 0.5s;
 75 | }
 76 | 
 77 | .inner-cursor.grow {
 78 |   width: 25px;
 79 |   height: 25px;
 80 | }
 81 | 
 82 | .outer-cursor {
 83 |   position: fixed;
 84 |   left: 10px;
 85 |   width: 25px;
 86 |   height: 25px;
 87 |   z-index: 9999;
 88 |   border-radius: 50%;
 89 |   transform: translate(-50%, -50%);
 90 |   mix-blend-mode: difference;
 91 |   pointer-events: none;
 92 |   border: 1px solid var(--color-light);
 93 |   transition: 0.1s;
 94 | }
 95 | 
 96 | .app {
 97 |   position: relative;
 98 | }
 99 | 
100 | input[type="submit"] {
101 |   letter-spacing: inherit;
102 |   word-spacing: inherit;
103 | }
104 | 
105 | input,
106 | textarea,
107 | button {
108 |   letter-spacing: 2px;
109 |   word-spacing: 3px;
110 | }
111 | 
112 | .link-item {
113 |   position: relative;
114 | }
115 | 
116 | .link-item::before {
117 |   content: "";
118 |   position: absolute;
119 |   width: 0%;
120 |   height: 1px;
121 |   background-color: var(--color-light);
122 |   left: 50%;
123 |   bottom: -2px;
124 |   transform: translateX(-50%);
125 |   transition: all 0.3s;
126 | }
127 | 
128 | .link-item:hover::before {
129 |   width: 100%;
130 | }
131 | 
132 | .hero {
133 |   position: relative;
134 | }
135 | 
136 | .hero-image,
137 | .project-right,
138 | .about-left {
139 |   width: 500px;
140 |   height: 500px;
141 |   overflow: hidden;
142 | }
143 | 
144 | .noise {
145 |   background-image: url("./assets/images/noise.gif");
146 |   position: fixed;
147 |   width: 100vw;
148 |   height: 100vh;
149 |   z-index: -9999;
150 |   top: 0;
151 |   left: 0;
152 |   bottom: 0;
153 |   right: 0;
154 |   opacity: 0.07;
155 | }
156 | 
157 | .circle-left,
158 | .circle-right {
159 |   width: 60vw;
160 |   aspect-ratio: 1/1;
161 |   position: fixed;
162 |   border: 1px dashed var(--color-light);
163 |   border-radius: 50%;
164 |   opacity: 0.2;
165 |   z-index: -9998;
166 |   animation: spin 90s infinite linear;
167 | }
168 | 
169 | .circle-left {
170 |   top: -40%;
171 |   left: -20%;
172 | }
173 | 
174 | .circle-right {
175 |   bottom: -40%;
176 |   right: -20%;
177 | }
178 | 
179 | 
180 | 
181 | .shutter {
182 |   position: absolute;
183 |   z-index: 100;
184 |   font-family: Moonhouse, serif;
185 | }
186 | 
187 | .shutter h1 {
188 |   font-size: 13rem;
189 | }
190 | 
191 | .shutter-left {
192 |   top: 0;
193 |   left: 0;
194 | }
195 | 
196 | .shutter-right {
197 |   bottom: 0;
198 |   right: 0;
199 | }
200 | 
201 | .section-title {
202 |   font-size: 10vw;
203 |   line-height: 1;
204 |   font-family: Moonhouse, serif;
205 | }
206 | 
207 | .skill-item {
208 |   position: relative;
209 | }
210 | 
211 | .skill-item::after,
212 | .skill-item::before {
213 |   content: "";
214 |   position: absolute;
215 |   height: 1px;
216 |   bottom: 0;
217 |   left: 0;
218 |   background-color: var(--color-light);
219 | }
220 | 
221 | .skill-item::before {
222 |   width: 0%;
223 |   opacity: 0.2;
224 |   transition: 1.5s;
225 | }
226 | 
227 | .skill-item.reveal::before {
228 |   width: 100%;
229 | }
230 | 
231 | .skill-item::after {
232 |   width: 0%;
233 |   transition: all 0.5s;
234 |   background-color: #22d3ee;
235 | }
236 | 
237 | .skill-item:hover::after {
238 |   width: 100%;
239 | }
240 | 
241 | .skill-number {
242 |   font-size: 5rem;
243 | }
244 | 
245 | .skill-title {
246 |   font-size: 2rem;
247 | }
248 | 
249 | .shutter h1 {
250 |   font-size: 12rem;
251 | }
252 | 
253 | .section-title {
254 |   font-size: 12rem;
255 | }
256 | 
257 | @keyframes spin {
258 |   to {
259 |     transform: rotate(360deg);
260 |   }
261 | }
262 | 
263 | @media screen and (max-width: 1366px) {
264 |   .shutter h1 {
265 |     font-size: 10rem;
266 |   }
267 | 
268 |   .section-title {
269 |     font-size: 9rem;
270 |   }
271 | }
272 | 
273 | @media screen and (max-width: 768px) {
274 | 
275 |   .hero::before,
276 |   .hero::after {
277 |     font-size: 8rem;
278 |   }
279 | 
280 |   .section-title {
281 |     font-size: 8rem;
282 |   }
283 | 
284 |   .shutter h1 {
285 |     font-size: 8rem;
286 |   }
287 | }
288 | 
289 | @media screen and (max-width: 640px) {
290 | 
291 |   .circle-left,
292 |   .circle-right {
293 |     width: 80vw;
294 |   }
295 | 
296 |   html {
297 |     font-size: 50%;
298 |   }
299 | 
300 |   .container {
301 |     padding: 0 2rem;
302 |   }
303 | 
304 |   .hero::before,
305 |   .hero::after {
306 |     font-size: 6rem;
307 |   }
308 | 
309 |   .hero-image,
310 |   .about-left {
311 |     width: 100%;
312 |     height: 500px;
313 |   }
314 | 
315 |   .project-right {
316 |     width: 100%;
317 |     height: 300px;
318 |   }
319 | 
320 |   .shutter h1 {
321 |     font-size: 12vw;
322 |   }
323 | }
324 | 
325 | @media screen and (max-width: 500px) {
326 |   html {
327 |     font-size: 40%;
328 |   }
329 | 
330 |   .circle-left,
331 |   .circle-right {
332 |     width: 90vw;
333 |   }
334 | 
335 |   .hero::before,
336 |   .hero::after {
337 |     font-size: 5rem;
338 |   }
339 | 
340 |   .section-title {
341 |     font-size: 6.5rem;
342 |   }
343 | 
344 |   .shutter h1 {
345 |     font-size: 14vw;
346 |   }
347 | }

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

12 | {title} 13 |

18 | 4 19 | 20 | 26 | 4 27 |

Full Stack

Developer

24 | {project.title} 25 |