├── .gitignore ├── CONTRIBUTING.md ├── LICENCE ├── README.md ├── package-lock.json ├── package.json ├── public ├── index.html ├── manifest.json ├── robots.txt └── sFav.png └── src ├── App.css ├── App.js ├── assets ├── about.png ├── home-bg.jpg ├── home-main.svg ├── pre.svg ├── projects │ ├── kickstart.png │ ├── krypto.png │ ├── lift.png │ ├── pg.png │ └── project.jpeg ├── s.png ├── sLogo.png └── sajib.pdf ├── components ├── Contact │ ├── Contact.css │ ├── Contact.jsx │ ├── Social.css │ └── Social.jsx ├── Footer │ └── Footer.jsx ├── Home │ ├── About.jsx │ └── Type.jsx ├── Navbar │ └── Navbar.jsx ├── Particle.js ├── PreLoader.js ├── Projects │ └── ProjectCard.jsx ├── ScrollToTop.js └── Skillset │ ├── Github.jsx │ ├── Leetcode.jsx │ ├── Techstack.jsx │ └── Toolstack.jsx ├── index.css ├── index.js ├── pages ├── Contact.jsx ├── Home.jsx ├── Projects.jsx ├── Resume.jsx └── Skillset.jsx └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Hacktoberfest 2023 2 | 3 | [🔗Live Demo🔗](https://sajib.vercel.app/) 4 | 5 | ![Protfolio Website](https://i.ibb.co/N7xKjdQ/Screenshot-17.png) 6 | 7 | ## Feel free to contribute to this repo 8 | **👉 Open a issue if you want to do any contribution, will assign you that** 9 | 10 | # Kind Of Pull Request Expecting 11 | 12 | **👉 📖 Convert this from React to Next JS** 13 | 14 | **👉 🎨 Change Style, Give some elegant colors** 15 | 16 | **👉 📱 Funtional Update or Changes (like add Experience, Achivement Section)** 17 | 18 | **👉 🗺️ Implement viewTransitionAPI** 19 | 20 | **👉 📖 Write Documetion For This Repo** 21 | 22 |
23 | 24 | ## 🚀 How to get started? 25 | 26 | Clone down this repository. You will need `node.js` and `git` installed globally on your machine. 27 | 28 | ## 🛠 Installation and Setup Instructions 29 | 30 | 1. Installation: `npm install` 31 | 32 | 2. In the project directory, you can run: `npm start` 33 | 34 | Runs the app in the development mode.\ 35 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 36 | The page will reload if you make edits. 37 | 38 |
39 | 40 | ## Open your first pull request for the Hacktoberfest 2023 challenge. 41 | 42 | HF2023 43 | 44 |
45 | 46 | ![GitHub repo size](https://img.shields.io/github/repo-size/19sajib/JS-Project-Vault?color=yellow) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Open Source Love svg2](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/) 47 |
48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
Project Stats🌟 Stars🍴 Forks🐛 Issues🔔 Open PRs🔕 Close PRs
ProjectStarsForksIssuesOpen Pull RequestsClose Pull Requests
71 | 72 | # 🚀 How to get started? 73 | 74 | You can refer to the following steps on the basics of Git and Github and also contact the Project Mentors, in case you are stuck: 75 | 76 | fork this repository 77 | 78 | #### If you don't have git on your machine, [install it](https://help.github.com/articles/set-up-git/). 79 | 80 | 81 | ## Fork this repository 82 | 83 | Fork this repository by clicking on the fork button on the top of this page. 84 | This will create a copy of this repository in your account. 85 | 86 | ## Clone the repository 87 | 88 | clone this repository 89 | 90 | Now clone the forked repository to your machine. Go to your GitHub account, open the forked repository, click on the code button and then click the _copy to clipboard_ icon. 91 | 92 | Open a terminal and run the following git command: 93 | 94 | ``` 95 | git clone "url you just copied" 96 | ``` 97 | 98 | where "url you just copied" (without the quotation marks) is the url to this repository (your fork of this project). See the previous steps to obtain the url. 99 | 100 | copy URL to clipboard 101 | 102 | For example: 103 | 104 | ``` 105 | git clone https://github.com/your-github-username/portfolio.git 106 | ``` 107 | 108 | where `your-github-username` is your GitHub username. Here you're copying the contents of the portfolio repository on GitHub to your computer. 109 | 110 | ## Create a branch 111 | 112 | Change to the repository directory on your computer (if you are not already there): 113 | 114 | ``` 115 | cd portfolio 116 | ``` 117 | 118 | Now create a branch using the `git switch` command: 119 | 120 | ``` 121 | git switch -c your-new-branch-name 122 | ``` 123 | 124 | For example: 125 | 126 | ``` 127 | git switch -c add-portfolio-project 128 | ``` 129 | 130 | ## Make necessary changes and commit those changes 131 | 132 | Now open file in a code editor, add your changes to it. And, save the file. 133 | 134 | If you go to the project directory and execute the command `git status`, you'll see there are changes. 135 | 136 | Add those changes to the branch you just created using the `git add` command: 137 | 138 | ``` 139 | git add . 140 | ``` 141 | 142 | Now commit those changes using the `git commit` command: 143 | 144 | ``` 145 | git commit -m "write about the changes you made" 146 | ``` 147 | 148 | ## Push changes to GitHub 149 | 150 | Push your changes using the command `git push`: 151 | 152 | ``` 153 | git push origin -u your-branch-name 154 | ``` 155 | 156 | replacing `your-branch-name` with the name of the branch you created earlier. 157 | 158 | ## Submit your changes for review 159 | 160 | If you go to your repository on GitHub, you'll see a `Compare & pull request` button. Click on that button. 161 | 162 | create a pull request 163 | 164 | Now submit the pull request. 165 | 166 | submit pull request 167 | 168 | 169 | **Woo Hoo Yes** ! You have done it , You will get a notification email once the changes have been merged by maintainer. 170 | 171 | ## CONTRIBUTING A NEW PROJECT ? 172 | 173 | ### Please make sure you have followed to these guidelines 174 | 175 | 1. Create a Pull Request with the a proper comment of what have you done 176 | 177 | 2. Better if you share live url of your work. 178 | 179 |

✨ Contributors ✨

180 | 181 | 🚀 **Contributions** of any kind are welcome : Thanks go to these **Awesome People** 👨🏻‍💻 182 | 183 | 184 | 185 | 190 | 191 |
186 | 187 | 188 | 189 |
192 | 193 |
194 | 195 | Feel free to contribute to this repo. 196 | 197 | ### Show some ❤️  by giving the star :star: to this repository!! 198 |

🧠 Happy Hacking 🧠

199 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Md Abu Bakkar Siddiqe Sajib 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JS Portfolio Website 2 | 3 | [🔗Live Demo🔗](https://sajib.vercel.app/) 4 | 5 | ![Protfolio Website](https://i.ibb.co/N7xKjdQ/Screenshot-17.png) 6 | 7 |
8 | 9 | ![GitHub repo size](https://img.shields.io/github/repo-size/19sajib/portfolio?color=yellow) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Open Source Love svg2](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/) 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
Project Stats🌟 Stars🍴 Forks🐛 Issues🔔 Open PRs🔕 Close PRs
ProjectStarsForksIssuesOpen Pull RequestsClose Pull Requests
34 | 35 |
36 | 37 | ## Features 38 | 39 | **📖 Multi-Page Layout** 40 | 41 | **🎨 Styled with React-Bootstrap and CSS with easy to customize colors** 42 | 43 | **📱 Fully Responsive** 44 | 45 |
46 | 47 | ## 🚀 How to get started? 48 | 49 | Clone down this repository. You will need `node.js` and `git` installed globally on your machine. 50 | 51 | ## 🛠 Installation and Setup Instructions 52 | 53 | 1. Installation: `npm install` 54 | 55 | 2. In the project directory, you can run: `npm start` 56 | 57 | Runs the app in the development mode.\ 58 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 59 | The page will reload if you make edits. 60 | 61 |
62 | Feel free to contribute to this repo. 63 | 64 | ### Show some ❤️  by giving the star :star: to this repository!! 65 |

🧠 Happy Hacking 🧠

-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emailjs/browser": "^3.10.0", 7 | "@testing-library/jest-dom": "^5.16.5", 8 | "@testing-library/react": "^13.4.0", 9 | "@testing-library/user-event": "^13.5.0", 10 | "bootstrap": "^5.2.3", 11 | "react": "^18.2.0", 12 | "react-bootstrap": "^2.7.0", 13 | "react-dom": "^18.2.0", 14 | "react-github-calendar": "^3.4.0", 15 | "react-icons": "^4.7.1", 16 | "react-markdown": "^8.0.5", 17 | "react-parallax-tilt": "^1.7.90", 18 | "react-pdf": "^6.2.2", 19 | "react-router-dom": "^6.7.0", 20 | "react-scripts": "5.0.1", 21 | "react-tsparticles": "^1.42.2", 22 | "typewriter-effect": "^2.19.0", 23 | "web-vitals": "^2.1.4" 24 | }, 25 | "scripts": { 26 | "start": "react-scripts start", 27 | "build": "react-scripts build", 28 | "test": "react-scripts test", 29 | "eject": "react-scripts eject" 30 | }, 31 | "eslintConfig": { 32 | "extends": [ 33 | "react-app", 34 | "react-app/jest" 35 | ] 36 | }, 37 | "browserslist": { 38 | "production": [ 39 | ">0.2%", 40 | "not dead", 41 | "not op_mini all" 42 | ], 43 | "development": [ 44 | "last 1 chrome version", 45 | "last 1 firefox version", 46 | "last 1 safari version" 47 | ] 48 | }, 49 | "devDependencies": { 50 | "pdfjs-dist": "^3.2.146" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | Sajib || Portfolio 14 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /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/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/sFav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/19sajib/portfolio/b2b7dd59b59f35ae5e33188069ce07260bde4527/public/sFav.png -------------------------------------------------------------------------------- /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 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { 3 | BrowserRouter as Router, 4 | Route, 5 | Routes, 6 | Navigate 7 | } from "react-router-dom"; 8 | 9 | import Home from './pages/Home' 10 | import Skill from './pages/Skillset' 11 | import Project from './pages/Projects' 12 | import Resume from './pages/Resume' 13 | import Contact from './pages/Contact' 14 | 15 | import Navbar from "./components/Navbar/Navbar"; 16 | import Footer from "./components/Footer/Footer"; 17 | import Preloader from "./components/PreLoader" 18 | import ScrollToTop from "./components/ScrollToTop" 19 | 20 | import "./App.css"; 21 | import "./style.css"; 22 | import "bootstrap/dist/css/bootstrap.min.css"; 23 | 24 | function App() { 25 | const [load, upadateLoad] = useState(true); 26 | 27 | useEffect(() => { 28 | const timer = setTimeout(() => { 29 | upadateLoad(false); 30 | }, 1200); 31 | 32 | return () => clearTimeout(timer); 33 | }, []); 34 | 35 | return ( 36 | 37 | 38 |
39 | 40 | 41 | 42 | } /> 43 | } /> 44 | } /> 45 | } /> 46 | } /> 47 | } /> 48 | 49 |
51 | 52 | ); 53 | } 54 | 55 | export default App; 56 | -------------------------------------------------------------------------------- /src/assets/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/19sajib/portfolio/b2b7dd59b59f35ae5e33188069ce07260bde4527/src/assets/about.png -------------------------------------------------------------------------------- /src/assets/home-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/19sajib/portfolio/b2b7dd59b59f35ae5e33188069ce07260bde4527/src/assets/home-bg.jpg -------------------------------------------------------------------------------- /src/assets/home-main.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/pre.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 17 | 18 | 19 | 25 | 31 | 32 | 33 | 38 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/assets/projects/kickstart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/19sajib/portfolio/b2b7dd59b59f35ae5e33188069ce07260bde4527/src/assets/projects/kickstart.png -------------------------------------------------------------------------------- /src/assets/projects/krypto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/19sajib/portfolio/b2b7dd59b59f35ae5e33188069ce07260bde4527/src/assets/projects/krypto.png -------------------------------------------------------------------------------- /src/assets/projects/lift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/19sajib/portfolio/b2b7dd59b59f35ae5e33188069ce07260bde4527/src/assets/projects/lift.png -------------------------------------------------------------------------------- /src/assets/projects/pg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/19sajib/portfolio/b2b7dd59b59f35ae5e33188069ce07260bde4527/src/assets/projects/pg.png -------------------------------------------------------------------------------- /src/assets/projects/project.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/19sajib/portfolio/b2b7dd59b59f35ae5e33188069ce07260bde4527/src/assets/projects/project.jpeg -------------------------------------------------------------------------------- /src/assets/s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/19sajib/portfolio/b2b7dd59b59f35ae5e33188069ce07260bde4527/src/assets/s.png -------------------------------------------------------------------------------- /src/assets/sLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/19sajib/portfolio/b2b7dd59b59f35ae5e33188069ce07260bde4527/src/assets/sLogo.png -------------------------------------------------------------------------------- /src/assets/sajib.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/19sajib/portfolio/b2b7dd59b59f35ae5e33188069ce07260bde4527/src/assets/sajib.pdf -------------------------------------------------------------------------------- /src/components/Contact/Contact.css: -------------------------------------------------------------------------------- 1 | .contact-form{ 2 | padding: 0 3rem 0 3rem; 3 | display: flex; 4 | height: 80vh; 5 | margin-top: 4rem; 6 | /* scroll */ 7 | padding-top: 3rem; 8 | } 9 | 10 | .c-left{ 11 | text-align: center !important; 12 | padding-top: 25px; 13 | color: white !important; 14 | } 15 | 16 | .c-right{ 17 | display: flex; 18 | justify-content: center; 19 | position: relative; 20 | flex: 1; 21 | } 22 | 23 | .c-right>form 24 | { 25 | display: flex; 26 | flex-direction: column; 27 | gap: 2rem; 28 | align-items: center; 29 | 30 | } 31 | 32 | .c-right .user{ 33 | width: 24rem; 34 | height: 3rem; 35 | padding: 0.3em; 36 | outline: none; 37 | border: 2px solid #40008a; 38 | border-radius: 8px; 39 | font-size: 19px; 40 | color: white 41 | } 42 | 43 | .c-right .user:hover{ 44 | box-shadow: 0 0 9px #7500fa; 45 | } 46 | 47 | input{ 48 | background-color: var(--purple) 49 | } 50 | textarea{ 51 | height: 5rem!important; 52 | background-color: var(--purple) 53 | } 54 | 55 | .done{ 56 | font-size: 19px; 57 | color: green; 58 | } 59 | .not-done{ 60 | font-size: 19px; 61 | color: red; 62 | } 63 | 64 | .c-blur1{ 65 | top: 1rem; 66 | left: 8rem; 67 | } 68 | 69 | @media screen and (max-width: 480px) { 70 | .contact-form{ 71 | padding: 0; 72 | flex-direction: column; 73 | gap: 5rem; 74 | height: 40rem; 75 | } 76 | .c-right .user{ 77 | width: 16rem; 78 | } 79 | 80 | } -------------------------------------------------------------------------------- /src/components/Contact/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React,{useState, useRef} from 'react' 2 | import emailjs from "@emailjs/browser"; 3 | import { Container, Row, Col } from "react-bootstrap"; 4 | import Button from 'react-bootstrap/Button'; 5 | import './Contact.css' 6 | 7 | const Contact = () => { 8 | const form = useRef(); 9 | const [done, setDone] = useState(false) 10 | const [notDone, setNotDone] = useState(false) 11 | const [formData, setFormData] = useState({}); 12 | 13 | const handleChange = (e) => { 14 | setFormData({...formData, [e.target.name] : e.target.value}) 15 | setDone(false) 16 | setNotDone(false) 17 | } 18 | 19 | const sendEmail = (e) => { 20 | e.preventDefault(); 21 | 22 | if(!formData.from_name || !formData.reply_to ||!formData.message){ 23 | setNotDone(true) 24 | } else { 25 | 26 | // Please use your own credentials from emailjs or i will recive your email 27 | 28 | emailjs 29 | .sendForm( 30 | "service_niilndo", 31 | "template_6z5idye", 32 | form.current, 33 | "VOBt6Akm1LhI5CZG-" 34 | ) 35 | .then( 36 | (result) => { 37 | console.log(result.text); 38 | setDone(true); 39 | }, 40 | (error) => { 41 | console.log(error.text); 42 | } 43 | ); 44 | } 45 | }; 46 | 47 | 48 | return( 49 | 50 | 51 | 52 |

Get in Touch

53 |

Contact me

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