├── README.md ├── package-lock.json ├── package.json ├── public ├── _redirects ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── lottie │ ├── build.json │ ├── coding.json │ └── webdev.json ├── manifest.json ├── profile.png └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── Particle.js ├── Preloader.js ├── assets │ └── MD_MAFUJUL_HASAN.pdf ├── components │ ├── DisplayLottie.jsx │ ├── aboutme │ │ ├── about │ │ │ └── About.js │ │ ├── aboutmeContainer.js │ │ ├── journey │ │ │ ├── EducationJourney.js │ │ │ ├── ExperienceJourney.js │ │ │ ├── ProjectJourney.js │ │ │ └── TechnicalJourney.js │ │ ├── ranking │ │ │ └── Ranking.js │ │ ├── skills │ │ │ ├── PersonalSkill.js │ │ │ ├── Skills.js │ │ │ ├── TechnicalSkill.js │ │ │ └── Toolkit.js │ │ └── social_media │ │ │ └── SocialMedia.js │ ├── certificate │ │ ├── Certificate.js │ │ └── Certification.js │ ├── contactus │ │ └── Contactus.js │ ├── footer │ │ └── Footer.js │ ├── navbar │ │ └── MyNav.js │ └── projects │ │ └── Projects.js ├── images │ ├── CBT&A.pdf │ ├── CCNA_Certificate.jpg │ ├── Computer_knowledge.jpg │ ├── Graphics_Design.jpg │ ├── IQ_Test.jpg │ ├── Vs.png │ ├── about.png │ ├── about.svg │ ├── academic.png │ ├── age.png │ ├── c-programming.png │ ├── c.jpg │ ├── calculator.png │ ├── calendar.png │ ├── cb.jpg │ ├── cb.png │ ├── chorme.svg │ ├── dc.png │ ├── eco.png │ ├── git.png │ ├── github.png │ ├── h3.jpg │ ├── hd.png │ ├── home-bg.jpg │ ├── home.jpg │ ├── home2.jpg │ ├── meal.png │ ├── nactar.jpg │ ├── nh.jpg │ ├── nyc.png │ ├── onboarding.png │ ├── pc.png │ ├── pg.png │ ├── pm.png │ ├── portfolio.png │ ├── pre.svg │ ├── problem_solving.png │ ├── python.png │ ├── sims.png │ ├── skill.png │ ├── ucsc.png │ └── ufm.png ├── index.css ├── index.js ├── pages │ ├── blogs_page │ │ └── notfound.js │ ├── certificate_page │ │ └── CertificatePage.js │ ├── comingsoon_page │ │ └── comingsoon.js │ ├── home_page │ │ ├── HomePage.js │ │ └── Typing.js │ ├── project_page │ │ └── ProjectPage.js │ └── resume_page │ │ └── ResumePage.js ├── reportWebVitals.js ├── setupTests.js └── style.css └── yarn.lock /README.md: -------------------------------------------------------------------------------- 1 | ![Portfolio](https://github.com/MD-MAFUJUL-HASAN/Personal-Portfolio/blob/main/src/images/portfolio.png) 2 | 3 | # Getting Started with Create React App 4 | 5 | [![Netlify Status](https://api.netlify.com/api/v1/badges/405ac925-c23d-4079-985f-f0b7ceb21ffb/deploy-status)](https://app.netlify.com/sites/tonmoysu/deploys) 6 | ## [Portfolio Live on Netlify and Vercel app🎯](https://tonmoysu.netlify.app/) 7 | 8 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 9 | 10 | ## Available Scripts 11 | 12 | In the project directory, you can run: 13 | 14 | ### `npm start` 15 | 16 | Runs the app in the development mode.\ 17 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 18 | 19 | The page will reload when you make changes.\ 20 | You may also see any lint errors in the console. 21 | 22 | ### `npm test` 23 | 24 | Launches the test runner in the interactive watch mode.\ 25 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 26 | 27 | ### `npm run build` 28 | 29 | Builds the app for production to the `build` folder.\ 30 | It correctly bundles React in production mode and optimizes the build for the best performance. 31 | 32 | The build is minified and the filenames include the hashes.\ 33 | Your app is ready to be deployed! 34 | 35 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 36 | 37 | ### `npm run eject` 38 | 39 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 40 | 41 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 42 | 43 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 44 | 45 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 46 | 47 | ## Learn More 48 | 49 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 50 | 51 | To learn React, check out the [React documentation](https://reactjs.org/). 52 | 53 | ### Code Splitting 54 | 55 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 56 | 57 | ### Analyzing the Bundle Size 58 | 59 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 60 | 61 | ### Making a Progressive Web App 62 | 63 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 64 | 65 | ### Advanced Configuration 66 | 67 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 68 | 69 | ### Deployment 70 | 71 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 72 | 73 | ### `npm run build` fails to minify 74 | 75 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 76 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.8.1", 7 | "@emotion/styled": "^11.8.1", 8 | "@mui/icons-material": "^5.4.4", 9 | "@mui/lab": "^5.0.0-alpha.71", 10 | "@mui/material": "^5.4.4", 11 | "@testing-library/jest-dom": "^5.16.2", 12 | "@testing-library/react": "^12.1.3", 13 | "@testing-library/user-event": "^13.5.0", 14 | "axios": "^0.26.1", 15 | "bootstrap": "^5.1.3", 16 | "react": "^17.0.2", 17 | "react-bootstrap": "^2.1.2", 18 | "react-circle": "^1.1.1", 19 | "react-dom": "^17.0.2", 20 | "react-icons": "^4.3.1", 21 | "react-js-loader": "^0.1.0", 22 | "react-lottie": "^1.2.3", 23 | "react-parallax-tilt": "^1.6.1", 24 | "react-pdf": "^5.7.2", 25 | "react-reveal": "^1.2.2", 26 | "react-router-bootstrap": "^0.26.0", 27 | "react-router-dom": "^6.2.2", 28 | "react-scripts": "5.0.0", 29 | "react-tsparticles": "^1.41.5", 30 | "react-vertical-timeline-component": "^3.5.2", 31 | "typewriter-effect": "^2.18.2", 32 | "web-vitals": "^2.1.4" 33 | }, 34 | "scripts": { 35 | "start": "react-scripts start", 36 | "build": "react-scripts build", 37 | "test": "react-scripts test", 38 | "eject": "react-scripts eject" 39 | }, 40 | "eslintConfig": { 41 | "extends": [ 42 | "react-app", 43 | "react-app/jest" 44 | ] 45 | }, 46 | "browserslist": { 47 | "production": [ 48 | ">0.2%", 49 | "not dead", 50 | "not op_mini all" 51 | ], 52 | "development": [ 53 | "last 1 chrome version", 54 | "last 1 firefox version", 55 | "last 1 safari version" 56 | ] 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MD-MAFUJUL-HASAN/Personal-Portfolio/b6e481fc41244e483393f7270ab21a553924b93a/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 22 | 31 | MD MAFUJUL HASAN | Portfolio Website 32 | 33 | 34 | 35 | 36 |
37 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MD-MAFUJUL-HASAN/Personal-Portfolio/b6e481fc41244e483393f7270ab21a553924b93a/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MD-MAFUJUL-HASAN/Personal-Portfolio/b6e481fc41244e483393f7270ab21a553924b93a/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MD-MAFUJUL-HASAN/Personal-Portfolio/b6e481fc41244e483393f7270ab21a553924b93a/public/profile.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | @keyframes App-logo-spin { 31 | from { 32 | transform: rotate(0deg); 33 | } 34 | to { 35 | transform: rotate(360deg); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import React, { useState, useEffect } from "react"; 3 | import "./style.css"; 4 | import "./App.css"; 5 | import "react-vertical-timeline-component/style.min.css"; 6 | import "bootstrap/dist/css/bootstrap.min.css"; 7 | import Preloader from "./Preloader"; 8 | import MyNav from "./components/navbar/MyNav"; 9 | import { BrowserRouter as Router } from "react-router-dom"; 10 | import Home from "./pages/home_page/HomePage"; 11 | import Resume from "./pages/resume_page/ResumePage"; 12 | import ProjectPage from "./pages/project_page/ProjectPage"; 13 | import { Route, Routes } from "react-router-dom"; 14 | import Footer from "./components/footer/Footer"; 15 | import About from "./components/aboutme/about/About"; 16 | import Ranking from "./components/aboutme/ranking/Ranking"; 17 | import EducationJourney from "./components/aboutme/journey/EducationJourney"; 18 | import ExperienceJourney from "./components/aboutme/journey/ExperienceJourney"; 19 | import CertificatePage from "./pages/certificate_page/CertificatePage"; 20 | import PersonalSkill from "./components/aboutme/skills/PersonalSkill"; 21 | import TechnicalSkill from "./components/aboutme/skills/TechnicalSkill"; 22 | import ComingSoon from "./pages/comingsoon_page/comingsoon"; 23 | import Notfound from "./pages/blogs_page/notfound"; 24 | import TechnicalJourney from "./components/aboutme/journey/TechnicalJourney"; 25 | import ProjectJourney from "./components/aboutme/journey/ProjectJourney"; 26 | import SocialMedia from "./components/aboutme/social_media/SocialMedia"; 27 | // import Zoom from 'react-reveal/Zoom'; 28 | import Toolkit from "./components/aboutme/skills/Toolkit"; 29 | 30 | function App() { 31 | const [load, updateLoad] = useState(true); 32 | 33 | useEffect(() => { 34 | const timer = setTimeout(() => { 35 | updateLoad(false); 36 | }, 4000); 37 | 38 | return () => clearTimeout(timer); 39 | }, []); 40 | 41 | return ( 42 | 43 | 44 |
45 | 46 | 47 | }> 48 | }> 49 | } /> 50 | } /> 51 | } /> 52 | } /> 53 | } 56 | > 57 | } 60 | > 61 | }> 62 | }> 63 | }> 64 | 65 | } /> 66 | } /> 67 | } /> 68 | } /> 69 | } /> 70 | 71 |
73 | 74 | ); 75 | } 76 | 77 | export default App; 78 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/Particle.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Particles from "react-tsparticles"; 3 | 4 | const Particle = () => { 5 | return ( 6 | 51 | ); 52 | } 53 | 54 | export default Particle; 55 | -------------------------------------------------------------------------------- /src/Preloader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function Preloader(props) { 4 | return ( 5 |
6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/MD_MAFUJUL_HASAN.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MD-MAFUJUL-HASAN/Personal-Portfolio/b6e481fc41244e483393f7270ab21a553924b93a/src/assets/MD_MAFUJUL_HASAN.pdf -------------------------------------------------------------------------------- /src/components/DisplayLottie.jsx: -------------------------------------------------------------------------------- 1 | // import React from "react"; 2 | // import Lottie from "react-lottie"; 3 | 4 | // const GreetingLottie = ({ animationPath }) => { 5 | // const defaultOptions = { 6 | // loop: true, 7 | // autoplay: true, 8 | // path: animationPath, 9 | // }; 10 | 11 | // return ( 12 | //
null}> 13 | // 14 | //
15 | // ); 16 | // }; 17 | 18 | // export default GreetingLottie; 19 | -------------------------------------------------------------------------------- /src/components/aboutme/about/About.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container } from "react-bootstrap"; 3 | import { Row } from "react-bootstrap"; 4 | import { Col } from "react-bootstrap"; 5 | import Slide from "react-reveal/Slide"; 6 | import Fade from "react-reveal/Fade"; 7 | const About = () => { 8 | return ( 9 |
10 | 11 | {/* */} 12 | 13 | 14 | {/* */} 15 | 16 | 17 | 25 | 26 | 27 | 28 | 29 | 30 |

31 | My name is MD Mafujul Hasan 32 | and I am a Computer Science and Engineering 33 | student at Sonargaon University 34 | in Dhaka, Bangladesh. 35 |
36 |
37 | I am proficient in various programming languages such as   38 | 39 | {" "} 40 | C, C++, Java, Python, HTML, CSS, PHP, and JavaScript.{" "} 41 | 42 |
43 |
44 | I also have experience working with frameworks and libraries such as   45 | 46 | 47 | {" "} 48 | NodeJS, ReactJS, OpenCV, Pandas, and NumPy.{" "} 49 | 50 |
51 |
52 | Whenever possible, I also apply my passion for developing 53 | products with   54 | 55 | {" "} 56 | Modern Javascript Library and Frameworks. 57 | 58 |
59 |
In my free time, I enjoy learning new technologies and   60 | building new web technologies and products. 61 |

62 | 63 | 64 | 65 | {/* */} 66 | 67 |
68 | ); 69 | }; 70 | 71 | export default About; 72 | -------------------------------------------------------------------------------- /src/components/aboutme/aboutmeContainer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Container, Row, Col,Nav } from "react-bootstrap"; 3 | import { Link,Outlet } from 'react-router-dom'; 4 | import Zoom from 'react-reveal/Zoom'; 5 | 6 | 7 | export default function AboutmeContainer() { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 |

15 | About me 16 |

17 | 18 | 19 | 20 |
21 | 42 |
43 | 44 |
45 |
46 | 47 | 48 | 49 | 50 | ) 51 | } 52 | -------------------------------------------------------------------------------- /src/components/aboutme/journey/EducationJourney.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | VerticalTimeline, 4 | VerticalTimelineElement, 5 | } from "react-vertical-timeline-component"; 6 | import SchoolIcon from "@mui/icons-material/School"; 7 | import { Link } from "react-router-dom"; 8 | import StarIcon from "@mui/icons-material/Star"; 9 | import Flip from "react-reveal/Flip"; 10 | 11 | function EducationJourney() { 12 | return ( 13 |
14 |
15 | 16 | Educational Journey 17 | 18 | 19 | Experience Journey 20 | 21 | 22 | Technical Journey 23 | 24 | 25 | Project Journey 26 | 27 |
28 |
29 | 30 |

Qualification Journey

31 | 32 |
33 | 34 | } 41 | > 42 |

43 | SECONDARY SCHOOL CERTIFICATE 44 |

45 |

46 | BOF High School, Gazipur 47 |

48 |

49 | Studied here from Class 1 to 10th as a part of secondary school 50 | Certificate and gain GPA 5 in my SSC Examination. 51 |

52 | 53 | } 60 | > 61 |

62 | DIPLOMA IN ENGINEERING 63 |

64 |

65 | Dhaka Polytechnic Institute, Dhaka 66 |

67 |

68 | Studied Diploma in Computer Technology from Dhaka Polytechnic 69 | institute and gain CGPA 2.98. 70 |

71 | 72 | } 79 | > 80 |

GRADUATION

81 |

82 | Sonargaon University, Dhaka 83 |

84 |

85 | Studied Bachelor of Science degree in Computer Science and 86 | Engineering field from Sonargaon University and gain CGPA 3.44. 87 |

88 | 89 | 90 | } 93 | /> 94 | 95 |
96 | ); 97 | } 98 | 99 | export default EducationJourney; 100 | -------------------------------------------------------------------------------- /src/components/aboutme/journey/ExperienceJourney.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | VerticalTimeline, 4 | VerticalTimelineElement, 5 | } from "react-vertical-timeline-component"; 6 | import PersonIcon from "@mui/icons-material/Person"; 7 | import { Link } from "react-router-dom"; 8 | import StarIcon from "@mui/icons-material/Star"; 9 | import Flip from "react-reveal/Flip"; 10 | 11 | function ExperienceJourney() { 12 | return ( 13 |
14 |
15 | 16 | Educational Journey 17 | 18 | 19 | Experience Journey 20 | 21 | 22 | Technical Journey 23 | 24 | 25 | Project Journey 26 | 27 |
28 |
29 | 30 |

Experience Journey

31 | 32 |
33 | 34 | } 41 | > 42 |
43 | Study World 44 |
45 |
46 | Branch Manager & Student Counsellor 47 |
48 |

• Provide Education Counselling to students and guardians for study abroad.

49 |

• Providing information about Universities/Colleges, Course/Fees, Admissions, Visa procedures etc.

50 |

• Effective follow-ups with the prospective students/guardians.

51 |

• Provide daily, Weekly, monthly, and yearly reporting about all operational activities.

52 |

• Processing student visa applications based on entry requirements and admissions procedures and 53 | enhance their chances of success in interviews by developing their skills.

54 |

• Preparing applications for admission into different foreign universities.

55 | 56 | } 63 | > 64 |
65 | Excel Telecom (Pvt.) Limited - (National Distributor of SAMSUNG in Bangladesh) 66 |
67 |
68 | Management of Information System 69 |
70 |

• Proficient in developing, deploying and managing computerized systems that gather, retain, evaluate and exhibit 71 | data to facilitate the achievement of organizational aims and objectives.

72 |

• Proficient in collecting and organizing data from diverse sources, utilizing statistical techniques and software 73 | tools for data analysis and creating comprehensive reports and presentations that showcase significant insights and trends.

74 |

• Consistently completed assigned tasks in a timely and efficient manner as directed by management, while maintaining 75 | effective communication between the company and employees.

76 |

• Proficient in monitoring daily business operation costs, verifying and evaluating accounting transactions updates, 77 | and providing corresponding reports to top management.

78 |

• Skilled in collecting and compiling monthly reports, conducting inventory analysis for month-end, quarterly, 79 | and year-end closing, and submitting reports in accordance with management requirements.

80 |

• Proficient in developing and maintaining various reporting dashboard, technical support to end-users, 81 | diagnosing hardware and software issues, and collaborating with IT teams to promptly resolve system-related problems.

82 | 83 | 84 | } 87 | /> 88 | 89 |
90 | ); 91 | } 92 | 93 | export default ExperienceJourney; 94 | -------------------------------------------------------------------------------- /src/components/aboutme/journey/ProjectJourney.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | VerticalTimeline, 4 | VerticalTimelineElement, 5 | } from "react-vertical-timeline-component"; 6 | import { Link } from "react-router-dom"; 7 | import StarIcon from "@mui/icons-material/Star"; 8 | import JavascriptIcon from '@mui/icons-material/Javascript'; 9 | import CssIcon from '@mui/icons-material/Css'; 10 | import HtmlIcon from '@mui/icons-material/Html'; 11 | import CodeIcon from '@mui/icons-material/Code'; 12 | import Flip from "react-reveal/Flip"; 13 | 14 | function ProjectJourney() { 15 | return ( 16 |
17 |
18 | 19 | Educational Journey 20 | 21 | 22 | Experience Journey 23 | 24 | 25 | Technical Journey 26 | 27 | 28 | Project Journey 29 | 30 |
31 |
32 | 33 |

Project Journey

34 | 35 |
36 | 37 | } 44 | > 45 |

46 | Shoppy Ecommerce Website 47 |

48 | 49 | } 56 | > 57 |

58 | Amazing Meal System 59 |

60 | 61 | } 68 | > 69 |

70 | Academia Learning Website 71 |

72 | 73 | } 80 | > 81 |

82 | Personal Portfolio 83 |

84 | 85 | } 92 | > 93 |

94 | Online Payroll management System 95 |

96 | 97 | } 104 | > 105 |

106 | New Year CountDown 107 |

108 | 109 | } 116 | > 117 |

118 | Heart Disease Prediction 119 |

120 | 121 | } 128 | > 129 |

130 | Dual Mode Calendar 131 |

132 | 133 | } 140 | > 141 |

142 | Dual Mode Calculator 143 |

144 | 145 | } 152 | > 153 |

154 | Digital Clock 155 |

156 | 157 | } 164 | > 165 |

166 | Age Calculator 167 |

168 | 169 | } 176 | > 177 |

178 | Student Information Management System 179 |

180 | 181 | } 184 | /> 185 | 186 |
187 | ); 188 | } 189 | 190 | export default ProjectJourney; 191 | -------------------------------------------------------------------------------- /src/components/aboutme/journey/TechnicalJourney.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | VerticalTimeline, 4 | VerticalTimelineElement, 5 | } from "react-vertical-timeline-component"; 6 | import { Link } from "react-router-dom"; 7 | import StarIcon from "@mui/icons-material/Star"; 8 | import ComputerIcon from "@mui/icons-material/Computer"; 9 | import { 10 | DiHtml5, 11 | DiPython, 12 | DiReact, 13 | DiPhp, 14 | DiJava, 15 | DiCss3, 16 | DiJavascript1, 17 | DiMysql, 18 | DiNodejs, 19 | } from "react-icons/di"; 20 | import Flip from "react-reveal/Flip"; 21 | 22 | function TechnicalJourney() { 23 | return ( 24 |
25 |
26 | 27 | Educational Journey 28 | 29 | 30 | Experience Journey 31 | 32 | 33 | Technical Journey 34 | 35 | 36 | Project Journey 37 | 38 |
39 |
40 | 41 |

Technical Journey

42 | 43 |
44 | 45 | } 52 | > 53 |

54 | C PROGRAMMING LANGUAGE 55 |

56 | 57 | } 64 | > 65 |

66 | C++ PROGRAMMING LANGUAGE 67 |

68 | 69 | } 76 | > 77 |

JAVA

78 | 79 | } 86 | > 87 |

PYTHON

88 | 89 | } 96 | > 97 |

HTML

98 | 99 | } 106 | > 107 |

CSS

108 | 109 | } 116 | > 117 |

JAVASCRIPT

118 | 119 | } 126 | > 127 |

PHP

128 | 129 | } 136 | > 137 |

MySQL

138 | 139 | } 146 | > 147 |

NODE JS

148 | 149 | } 156 | > 157 |

REACT

158 | 159 | 160 | } 163 | /> 164 | 165 |
166 | ); 167 | } 168 | 169 | export default TechnicalJourney; 170 | -------------------------------------------------------------------------------- /src/components/aboutme/ranking/Ranking.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaHackerrank } from "react-icons/fa"; 3 | import { 4 | SiLeetcode, 5 | SiHackerearth, 6 | SiCodechef, 7 | SiCodeforces, 8 | } from "react-icons/si"; 9 | import { Container, Row } from "react-bootstrap"; 10 | import { Col } from "react-bootstrap"; 11 | import Zoom from "react-reveal/Zoom"; 12 | 13 | export default function Ranking() { 14 | return ( 15 |
16 | 17 |

See my rank

18 | 19 | 20 | 21 | 22 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 76 | 77 | 78 | 79 | 80 | {" "} 81 | 82 | 83 |
84 | ); 85 | } 86 | -------------------------------------------------------------------------------- /src/components/aboutme/skills/PersonalSkill.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom'; 3 | import { Container,Row,Col } from 'react-bootstrap'; 4 | import LightSpeed from 'react-reveal/LightSpeed'; 5 | 6 | export default function PersonalSkill() { 7 | return ( 8 |
9 |
10 | Technical Skill 11 | Personal Skill 12 | Toolkit 13 |
14 | 15 |

Personal Skills

16 | 17 |
18 | 19 | 20 | 21 |

75%

22 |
23 |
24 |
25 | 26 |
27 |
28 |

Communication Skills

29 |
30 | 31 | 32 |

85%

33 |
34 |
35 |
36 |
37 |
38 |

Project Management

39 |
40 | 41 | 42 |

81%

43 |
44 |
45 |
46 | 47 |
48 |
49 |

Problem Solving

50 |
51 | 52 | 53 |

77%

54 |
55 |
56 |
57 |
58 |
59 |

Analytical Abilities

60 |
61 | 62 | 63 |

87%

64 |
65 |
66 |
67 | 68 |
69 |
70 |

Organization

71 |
72 | 73 | 74 |

79%

75 |
76 |
77 |
78 |
79 |
80 |

Creativity

81 |
82 | 83 | 84 | 85 | 86 |
87 | 88 |
89 | ) 90 | } 91 | -------------------------------------------------------------------------------- /src/components/aboutme/skills/Skills.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export default function Skills() { 5 | return ( 6 |
7 |
8 | 9 | Personal Skill 10 | 11 | 12 | Technical Skill 13 | 14 |
15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/components/aboutme/skills/TechnicalSkill.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { Container, Row, Col } from "react-bootstrap"; 4 | import Tada from "react-reveal/Tada"; 5 | 6 | export default function TechnicalSkill() { 7 | return ( 8 |
9 |
10 | 11 | Technical Skill 12 | 13 | 14 | Personal Skill 15 | 16 | 17 | Toolkit 18 | 19 |
20 | 21 |

Technical Skills

22 | 23 |
24 | 25 | 26 | 27 |

30 | 75% 31 |

32 |
33 |
34 |
42 |
43 |

51 | C 52 |

53 |
54 | 55 | 56 |

59 | 75% 60 |

61 |
62 |
63 |
71 |
72 |

80 | C++ 81 |

82 |
83 | 84 | 85 |

88 | 80% 89 |

90 |
91 |
92 |
100 |
101 |

109 | Python 110 |

111 |
112 | 113 | 114 |

117 | 71% 118 |

119 |
120 |
121 |
129 |
130 |

138 | Javascript 139 |

140 |
141 | 142 | 143 |

146 | 68% 147 |

148 |
149 |
150 |
158 |
159 |

167 | MySQL 168 |

169 |
170 | 171 | 172 |

175 | 66% 176 |

177 |
178 |
179 |
187 |
188 |

196 | NodeJS 197 |

198 |
199 | 200 | 201 |

204 | 78% 205 |

206 |
207 |
208 |
216 |
217 |

225 | React js 226 |

227 |
228 | 229 | 230 |

233 | 75% 234 |

235 |
236 |
237 |
245 |
246 |

254 | PHP 255 |

256 |
257 | 258 | 259 |

262 | 75% 263 |

264 |
265 |
266 |
274 |
275 |

283 | JAVA 284 |

285 |
286 | 287 | 288 | 289 |
290 |
291 | ); 292 | } 293 | -------------------------------------------------------------------------------- /src/components/aboutme/skills/Toolkit.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Col, Container, Row } from "react-bootstrap"; 3 | import vs from "../../../images/Vs.png"; 4 | import pc from "../../../images/pc.png"; 5 | import git from "../../../images/git.png"; 6 | import github from "../../../images/github.png"; 7 | import cb from "../../../images/cb.png"; 8 | import pg from "../../../images/pg.png"; 9 | import pm from "../../../images/pm.png"; 10 | import chrome from "../../../images/chorme.svg"; 11 | import { Link } from "react-router-dom"; 12 | import Zoom from "react-reveal/Zoom"; 13 | 14 | export default function Toolkit() { 15 | return ( 16 |
17 |
18 | 19 | Technical Skill 20 | 21 | 22 | Personal Skill 23 | 24 | 25 | Toolkit 26 | 27 |
28 | 29 |

Tools I Use

30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 | ); 69 | } 70 | -------------------------------------------------------------------------------- /src/components/aboutme/social_media/SocialMedia.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | AiOutlineInstagram, 4 | AiFillFacebook, 5 | AiFillGithub, 6 | AiFillLinkedin, 7 | } from "react-icons/ai"; 8 | import { Container, Row } from "react-bootstrap"; 9 | import { Col } from "react-bootstrap"; 10 | import Zoom from "react-reveal/Zoom"; 11 | 12 | export default function SocialMedia() { 13 | return ( 14 |
15 | 16 |

Connect with me

17 | 18 | 19 | 20 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /src/components/certificate/Certificate.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import Graphics_Design from "../../images/Graphics_Design.jpg"; 4 | import CCNA_Certificate from "../../images/CCNA_Certificate.jpg"; 5 | import cbta from "../../images/CBT&A.pdf"; 6 | import c from "../../images/c.jpg"; 7 | import skill from "../../images/skill.png"; 8 | import problem_solving from "../../images/problem_solving.png"; 9 | import python from "../../images/python.png"; 10 | import iq from "../../images/IQ_Test.jpg"; 11 | import computer from "../../images/Computer_knowledge.jpg"; 12 | import Fade from "react-reveal/Fade"; 13 | 14 | export default function Certificate() { 15 | return ( 16 |
17 | 18 | {/* */} 19 | 20 | 21 | 22 | 27 | 28 | 29 | 34 | 35 | 36 | 41 | 42 | 43 | 48 | 49 | 50 | 55 | 56 | 57 | 58 | 59 | 60 | 65 | 66 | 67 | 68 | 69 | 70 | 75 | 76 | 77 | {/* */} 78 | 79 | 80 |
81 | ); 82 | } 83 | -------------------------------------------------------------------------------- /src/components/certificate/Certification.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import Zoom from "react-reveal/Zoom"; 4 | import { Fade } from "react-reveal"; 5 | import ucsc from "../../images/ucsc.png"; 6 | import ufm from "../../images/ufm.png"; 7 | import cbta from "../../images/CBT&A.pdf"; 8 | import { Link } from "react-router-dom"; 9 | import { HiArrowRight } from "react-icons/hi"; 10 | 11 | export default function Certification() { 12 | return ( 13 |
14 | 15 | 16 | 17 | 21 | 22 |

Certification

23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 53 |
54 |

58 | Problem Solving Basic : Programming Fundamentals 59 |

60 |

64 | - HackerRank 65 |

66 |
67 |
68 | 69 | 70 | 71 | 72 |
73 | 96 |
97 |

101 | Basic Computer Application for Everyone: IT Support 102 | Technician level-1 103 |

104 |

108 | - Bangladesh Technical Education Board 109 |

110 |
111 |
112 | 113 | 114 | 115 | 116 |
117 | 140 |
141 |

145 | Python Basic for : Programming Fundamentals 146 |

147 |

151 | - HackerRank 152 |

153 |
154 |
155 | 156 | 157 | 158 | 159 | 160 |
161 | 162 | 166 | 167 |
168 | 169 | 170 |
171 | ); 172 | } 173 | -------------------------------------------------------------------------------- /src/components/contactus/Contactus.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import Zoom from "react-reveal/Zoom"; 4 | import axios from "axios"; 5 | import { useState } from "react"; 6 | import { AiOutlineSend } from "react-icons/ai"; 7 | import { FiPhone, FiAtSign } from "react-icons/fi"; 8 | import { HiOutlineLocationMarker } from "react-icons/hi"; 9 | 10 | export default function Contactus() { 11 | const [formData, setFormData] = useState(new FormData()); 12 | 13 | const handleChange = (e) => { 14 | setFormData({ ...formData, [e.target.name]: e.target.value }); 15 | }; 16 | 17 | const handleSubmit = async (e) => { 18 | e.preventDefault(); 19 | 20 | if (!(formData.name && formData.email && formData.message)) { 21 | alert("Something went wrong!"); 22 | return; 23 | } 24 | 25 | try { 26 | const response = await axios.post( 27 | "http://localhost:5000/api/submitForm", 28 | formData 29 | ); 30 | console.log(response.data.message); // Log the response from the backend 31 | 32 | alert(`Thanks ${formData.name}, I will shortly connect with you!`); 33 | } catch (error) { 34 | console.error("Error submitting the form:", error); 35 | 36 | alert("Backend Server was not Running while submitting the form."); 37 | } 38 | 39 | setFormData({}); 40 | }; 41 | 42 | return ( 43 |
44 | 45 | 46 | 47 | 51 | 52 |

Contact me

53 | 54 | 55 | 56 | 57 | 58 |
59 |
60 |
61 | 64 | 74 |
75 |
76 | 79 | 89 |
90 |
91 | 94 |