├── 404.html ├── README.md ├── assets ├── css │ ├── 404.css │ └── style.css ├── images │ ├── android.jpg │ ├── cmsoon.png │ ├── contact.png │ ├── contact1.png │ ├── educat │ │ ├── college.jpg │ │ └── school.jpg │ ├── favhand.png │ ├── favicon.png │ ├── hero.png │ ├── hero1.png │ ├── lapy.jpg │ ├── loader.gif │ ├── preloader.gif │ ├── profile.png │ ├── profile2.jpg │ ├── projects │ │ ├── basicbank.PNG │ │ ├── bootstrapportfolio.png │ │ ├── bootstraptemplate.png │ │ ├── burgerweb.PNG │ │ ├── composey.png │ │ ├── cryptotracker.png │ │ ├── flipkartmern.png │ │ ├── flipkartphp.png │ │ ├── foodicious.png │ │ ├── foodwebsite.png │ │ ├── hulu.png │ │ ├── instagrammern.png │ │ ├── issuetrack.PNG │ │ ├── jspro.PNG │ │ ├── kiaweb.PNG │ │ ├── linklist.PNG │ │ ├── newsboxandroid.png │ │ ├── notystackandroid.png │ │ ├── oldsites.png │ │ ├── phppblform.png │ │ ├── portfolio.PNG │ │ ├── portfolio1.PNG │ │ ├── reactprojects.png │ │ ├── resistercolor.PNG │ │ ├── resumegen.png │ │ ├── saas.PNG │ │ ├── sppuprepandroid.png │ │ ├── templeweb.PNG │ │ ├── tsfbank.png │ │ ├── weatherlyandroid.png │ │ ├── webchat.PNG │ │ ├── webuiclones.png │ │ └── webviewapp.PNG │ ├── react.png │ └── skills │ │ └── TailwindCSS.png └── js │ ├── 404.js │ ├── app.js │ ├── particles.min.js │ └── script.js ├── experience ├── index.html ├── script.js └── style.css ├── index.html ├── projects ├── index.html ├── projects.json ├── script.js └── style.css └── skills.json /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Got Lost! Page Not Found 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 32 |
33 | 34 | 35 | 36 |
37 |
38 |
39 |

404

40 |
41 | 42 |
43 |

Looks like you're lost

44 |

The page you are looking for is not available!

45 | 46 |
47 | 48 | 49 | Back to Home 50 | 51 |
52 | 53 |
54 |
55 |
56 | 57 | 58 | 59 |
60 | 61 |
62 | 63 |
64 |

Jigar's Portfolio

65 |

Thank you for visiting my personal portfolio website. Connect with me over socials.

Keep Rising 🚀. Connect with me over live chat!

66 |
67 | 68 |
69 |

quick links

70 | home 71 | about 72 | skills 73 | education 74 | work 75 | experience 76 |
77 | 78 |
79 |

contact info

80 |

+91 704-302-4736

81 |

jigarsable21@gmail.com

82 |

Pune, India-412206

83 | 91 |
92 |
93 | 94 |

Designed with by jigar sable

95 | 96 |
97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Portfolio-Website 2 | Portfolio website built using HTML5, CSS3, JavaScript, and jQuery. 3 | 4 | **Visit Now** 🚀 5 | 6 | 7 | ## 📌 Tech Stack 8 | [![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)](https://github.com/jigar-sable/Portfolio-Website/search?l=html)  9 | [![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)](https://github.com/jigar-sable/Portfolio-Website/search?l=css)  10 | [![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)](https://github.com/jigar-sable/Portfolio-Website/search?l=javascript) 11 | jQuery 12 | 13 | ### Extras : 14 | Particle.js, Typed.js, Tilt.js, Scroll Reveal, Tawk.to, Font Awesome and JSON 15 | 16 | ## 📌 Sneak Peek of Main Page 🙈 : 17 | ![mockup720](https://user-images.githubusercontent.com/64949957/124947013-1f682080-e02d-11eb-977e-df3bbd4fa838.png) 18 | ![ss](https://user-images.githubusercontent.com/64949957/159113640-d92665a8-f614-42b3-8456-66b97fc2e651.png) 19 | 20 | 21 |

📬 Contact

22 | 23 | Feel free to reach me through the below handles if you'd like to contact me. 24 | 25 | [![linkedin](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/jigar-sablee) 26 | [![instagram](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://www.instagram.com/jigarsable.dev) 27 | -------------------------------------------------------------------------------- /assets/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"); 2 | @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap'); 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | text-decoration: none; 9 | outline: none; border: none; 10 | text-transform:capitalize; 11 | transition: all .2s linear; 12 | } 13 | html{ 14 | font-size: 62.5%; 15 | overflow-x: hidden; 16 | scroll-behavior: smooth; 17 | } 18 | body{ 19 | background: #f7f7f7; 20 | font-family: 'Poppins', sans-serif; 21 | } 22 | 23 | *::selection{ 24 | background: #2b3dda; 25 | color: #fff; 26 | } 27 | html{ 28 | font-size: 62.5%; 29 | overflow-x: hidden; 30 | } 31 | html::-webkit-scrollbar{ 32 | width: .8rem; 33 | } 34 | html::-webkit-scrollbar-track{ 35 | background: rgb(235, 202, 245); 36 | } 37 | html::-webkit-scrollbar-thumb{ 38 | background: #420177; 39 | } 40 | /* navbar starts */ 41 | header{ 42 | position: fixed; 43 | top: 0; left: 0; right: 0; 44 | z-index: 1000; 45 | display: flex; 46 | align-items: center; 47 | justify-content: space-between; 48 | padding: 1.7rem 10%; 49 | height: 6.5rem; 50 | background-color: #fff; 51 | box-shadow: 0 1px 4px rgba(146,161,176,.3); 52 | } 53 | section{ 54 | min-height: 100vh; 55 | padding: 2rem 9%; 56 | } 57 | header .logo{ 58 | font-size: 1.9rem; 59 | font-weight: 800; 60 | text-decoration: none; 61 | color: #0E2431; 62 | } 63 | header .logo i { 64 | font-size: 2.2rem; 65 | } 66 | header .logo:hover { 67 | color: #fc8c05; 68 | } 69 | header .navbar ul{ 70 | list-style: none; 71 | display: flex; 72 | justify-content: center; 73 | align-items: center; 74 | } 75 | header .navbar li{ 76 | margin-left: 2.5rem; 77 | } 78 | header .navbar ul li a{ 79 | font-size: 1.57rem; 80 | color: #0E2431; 81 | font-weight: 600; 82 | text-decoration: none; 83 | letter-spacing: 0.04rem; 84 | } 85 | header .navbar ul li a.active, 86 | header .navbar ul li a:hover{ 87 | color: #011aff; 88 | border-bottom: .2rem solid #011aff; 89 | padding: .5rem 0; 90 | } 91 | /* navbar ends */ 92 | 93 | /* hamburger icon starts*/ 94 | #menu{ 95 | font-size: 3rem; 96 | cursor: pointer; 97 | color: rgb(24, 2, 63); 98 | display: none; 99 | } 100 | @media(max-width:768px){ 101 | #menu{ 102 | display: block; 103 | } 104 | header .navbar{ 105 | position: fixed; 106 | top: 6.5rem; right: -120%; 107 | width: 75%; 108 | height: 100%; 109 | text-align: left; 110 | align-items: flex-start; 111 | background-color: #0e0f31; 112 | } 113 | header .navbar ul{ 114 | flex-flow: column; 115 | padding: 1rem; 116 | } 117 | header .navbar ul li{ 118 | text-align: center; 119 | width: 100%; 120 | margin: 1rem 0; 121 | border-radius: .5rem; 122 | width: 26rem; 123 | } 124 | header .navbar ul li a{ 125 | display: block; 126 | padding: 1rem; 127 | text-align: left; 128 | color: #fff; 129 | font-size: 2rem; 130 | } 131 | header .navbar ul li a.active, 132 | header .navbar ul li a:hover{ 133 | padding: 1rem; 134 | color: #fff; 135 | border-radius: .5rem; 136 | border-bottom: .5rem solid #011aff; 137 | } 138 | .fa-times{ 139 | transform: rotate(180deg); 140 | } 141 | header .navbar.nav-toggle{ 142 | right: 0; 143 | } 144 | } 145 | /* hamburger icon ends */ 146 | 147 | /* 404 section start */ 148 | .page_404{ 149 | padding:40px 0; 150 | background:rgb(255, 255, 255); 151 | margin-top: 6rem; 152 | min-height: 60vh; 153 | } 154 | .wrapper{ 155 | background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif); 156 | height: 400px; 157 | background-position: center; 158 | } 159 | .msg { 160 | display: flex; 161 | flex-direction: column; 162 | justify-content: center; 163 | align-items: center; 164 | flex-wrap: wrap; 165 | } 166 | .msg h3{ 167 | font-size: 4rem; 168 | font-weight: 700; 169 | } 170 | .msg p{ 171 | font-size: 1.5rem; 172 | font-weight: 600; 173 | } 174 | .wrapper h1{ 175 | font-size:80px; 176 | text-align: center; 177 | } 178 | 179 | /* back button */ 180 | .backbtn{ 181 | display: flex; 182 | justify-content: center; 183 | margin-top: 2rem; 184 | } 185 | .backbtn .btn { 186 | position: relative; 187 | line-height: 0; 188 | padding: 1.6rem 3rem; 189 | border-radius: .5em; 190 | transition: 0.5s; 191 | color: #fff; 192 | background: #2506ad; 193 | box-shadow: 0px 5px 10px rgba(48, 68, 247, .6); 194 | text-align: center; 195 | } 196 | .backbtn .btn span { 197 | font-weight: 600; 198 | font-size: 1.7rem; 199 | font-family: 'Nunito', sans-serif; 200 | } 201 | .backbtn .btn i { 202 | margin-right: 0.5rem; 203 | font-size: 1.5rem; 204 | transition: 0.3s; 205 | } 206 | .backbtn .btn:hover{ 207 | background: #1a047e; 208 | } 209 | .backbtn .btn:hover i { 210 | transform: translateX(-8px); 211 | } 212 | /* 404 section end */ 213 | 214 | /* footer section starts */ 215 | .footer{ 216 | min-height: auto; 217 | padding-top: 0; 218 | background: rgb(0, 1, 43); 219 | } 220 | .footer .box-container{ 221 | display: flex; 222 | justify-content: center; 223 | flex-wrap: wrap; 224 | } 225 | .footer .box-container .box{ 226 | flex: 1 1 25rem; 227 | margin: 2rem; 228 | } 229 | .footer .box-container .box h3{ 230 | font-size: 2.5rem; 231 | color: #fff; 232 | padding-bottom: 1rem; 233 | font-weight: normal; 234 | } 235 | .footer .box-container .box p{ 236 | font-size: 1.5rem; 237 | color: #ccc; 238 | padding: .7rem 0; 239 | text-transform: none; 240 | } 241 | .footer .box-container .box p i{ 242 | padding-right: 1rem; 243 | color: #ffae00; 244 | } 245 | .footer .box-container .box a{ 246 | font-size: 1.5rem; 247 | color: rgb(238, 238, 238); 248 | padding: .3rem 0; 249 | display: block; 250 | } 251 | .footer .box-container .box a:hover{ 252 | color: #ffae00; 253 | } 254 | .footer .box-container .box .share{ 255 | display: flex; 256 | flex-wrap: wrap; 257 | padding: 1rem 0; 258 | } 259 | .footer .box-container .box .share a{ 260 | height: 4rem; 261 | width: 4rem; 262 | padding: 1rem; 263 | text-align: center; 264 | border-radius: 5rem; 265 | font-size: 1.7rem; 266 | margin-right: 1rem; 267 | transition: .2s; 268 | background: rgb(230, 230, 230); 269 | color: #02094b; 270 | border: none; 271 | } 272 | .footer .box-container .box .share a:hover{ 273 | background: transparent; 274 | transform: scale(0.98); 275 | border: .1rem solid rgb(180, 178, 178); 276 | color: #ffae00; 277 | } 278 | .footer .credit{ 279 | padding: 1rem 0 0 0; 280 | text-align: center; 281 | font-size: 1.5rem; 282 | font-family: 'Nunito',sans-serif; 283 | font-weight: 600; 284 | color: #fff; 285 | border-top: .1rem solid #fff3; 286 | } 287 | .footer .credit a{ 288 | color: #ffae00; 289 | } 290 | .footer .fa{ 291 | color: #E90606; 292 | margin: 0 .3rem; 293 | font-size: 1.5rem; 294 | animation: pound .35s infinite alternate; 295 | } 296 | @-webkit-keyframes pound{ 297 | to{ 298 | transform: scale(1.1); 299 | } 300 | } 301 | @keyframes pound{ 302 | to{ 303 | transform: scale(1.1); 304 | } 305 | } 306 | @media(max-width:450px){ 307 | .footer .box-container .box{ 308 | margin: 2rem; 309 | } 310 | .footer .box-container .box p{ 311 | padding: 0.7rem; 312 | } 313 | .footer .box-container .box .share a{ 314 | padding: 1.1rem; 315 | } 316 | } 317 | /* footer section ends */ 318 | 319 | /* common media queries starts*/ 320 | @media(max-width:450px){ 321 | html{ 322 | font-size: 55%; 323 | } 324 | body{ 325 | padding-right: 0; 326 | } 327 | section{ 328 | padding: 2rem; 329 | } 330 | } 331 | /* common media queries ends*/ 332 | 333 | 334 | /* scroll top starts */ 335 | #scroll-top{ 336 | position: fixed; 337 | top: -140%; 338 | right: 2rem; 339 | padding: 1rem 1.5rem; 340 | font-size: 2rem; 341 | background: #ffae00; 342 | color: rgb(13, 0, 44); 343 | border-radius: 5rem; 344 | transition: 1s linear; 345 | z-index: 1000; 346 | } 347 | #scroll-top.active{ 348 | top: calc(100% - 12rem); 349 | } 350 | /* scroll top ends */ -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap"); 3 | 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | text-decoration: none; 9 | outline: none; 10 | border: none; 11 | text-transform: capitalize; 12 | transition: all 0.2s linear; 13 | } 14 | html { 15 | font-size: 62.5%; 16 | overflow-x: hidden; 17 | scroll-behavior: smooth; 18 | } 19 | body { 20 | background: #f7f7f7; 21 | font-family: "Poppins", sans-serif; 22 | } 23 | 24 | *::selection { 25 | background: #2b3dda; 26 | color: #fff; 27 | } 28 | 29 | html { 30 | font-size: 62.5%; 31 | overflow-x: hidden; 32 | } 33 | html::-webkit-scrollbar { 34 | width: 0.8rem; 35 | } 36 | html::-webkit-scrollbar-track { 37 | background: rgb(235, 202, 245); 38 | } 39 | html::-webkit-scrollbar-thumb { 40 | background: #420177; 41 | } 42 | 43 | /* pre loader start */ 44 | .loader-container { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | z-index: 10000; 49 | background: #e6eff1; 50 | display: flex; 51 | align-items: center; 52 | justify-content: center; 53 | height: 100%; 54 | width: 100%; 55 | } 56 | .loader-container.fade-out { 57 | top: -120%; 58 | } 59 | /* pre loader end */ 60 | 61 | /* navbar starts */ 62 | header { 63 | position: fixed; 64 | top: 0; 65 | left: 0; 66 | right: 0; 67 | z-index: 1000; 68 | display: flex; 69 | align-items: center; 70 | justify-content: space-between; 71 | padding: 1.7rem 10%; 72 | height: 6.5rem; 73 | background-color: #fff; 74 | box-shadow: 0 1px 4px rgba(146, 161, 176, 0.3); 75 | } 76 | section { 77 | min-height: 100vh; 78 | padding: 2rem 9%; 79 | } 80 | .heading { 81 | font-size: 3.5rem; 82 | color: rgb(32, 32, 32); 83 | font-weight: 800; 84 | text-align: center; 85 | } 86 | .heading span { 87 | color: rgb(115, 3, 167); 88 | } 89 | header .logo { 90 | font-size: 1.9rem; 91 | font-weight: 800; 92 | text-decoration: none; 93 | color: #0e2431; 94 | } 95 | header .logo i { 96 | font-size: 2.2rem; 97 | } 98 | header .logo:hover { 99 | color: #fc8c05; 100 | } 101 | header .navbar ul { 102 | list-style: none; 103 | display: flex; 104 | justify-content: center; 105 | align-items: center; 106 | } 107 | header .navbar li { 108 | margin-left: 2.5rem; 109 | } 110 | header .navbar ul li a { 111 | font-size: 1.57rem; 112 | color: #0e2431; 113 | font-weight: 600; 114 | text-decoration: none; 115 | letter-spacing: 0.04rem; 116 | transition: 0.2s; 117 | } 118 | header .navbar ul li a.active, 119 | header .navbar ul li a:hover { 120 | color: #011aff; 121 | border-bottom: 0.2rem solid #011aff; 122 | padding: 0.5rem 0; 123 | } 124 | /* navbar ends */ 125 | 126 | /* hamburger icon starts*/ 127 | #menu { 128 | font-size: 3rem; 129 | cursor: pointer; 130 | color: rgb(24, 2, 63); 131 | display: none; 132 | } 133 | @media (max-width: 768px) { 134 | #menu { 135 | display: block; 136 | } 137 | header .navbar { 138 | position: fixed; 139 | top: 6.5rem; 140 | right: -120%; 141 | width: 75%; 142 | height: 100%; 143 | text-align: left; 144 | align-items: flex-start; 145 | background-color: #0e0f31; 146 | } 147 | header .navbar ul { 148 | flex-flow: column; 149 | padding: 1rem; 150 | } 151 | header .navbar ul li { 152 | text-align: center; 153 | width: 100%; 154 | margin: 1rem 0; 155 | border-radius: 0.5rem; 156 | width: 26rem; 157 | } 158 | header .navbar ul li a { 159 | display: block; 160 | padding: 1rem; 161 | text-align: left; 162 | color: #fff; 163 | font-size: 2rem; 164 | } 165 | header .navbar ul li a.active, 166 | header .navbar ul li a:hover { 167 | padding: 1rem; 168 | color: #fff; 169 | border-radius: 0.5rem; 170 | border-bottom: 0.5rem solid #011aff; 171 | } 172 | .fa-times { 173 | transform: rotate(180deg); 174 | } 175 | header .navbar.nav-toggle { 176 | right: 0; 177 | } 178 | } 179 | /* hamburger icon ends */ 180 | 181 | /* hero section starts*/ 182 | .home { 183 | position: relative; 184 | display: flex; 185 | flex-wrap: wrap; 186 | gap: 1.5rem; 187 | min-height: 100vh; 188 | align-items: center; 189 | } 190 | .home #particles-js { 191 | position: absolute; 192 | top: 0; 193 | left: 0; 194 | height: 100%; 195 | width: 100%; 196 | } 197 | .home::before { 198 | content: ""; 199 | position: absolute; 200 | top: 0; 201 | left: 0; 202 | height: 100%; 203 | width: 100%; 204 | } 205 | .home .content { 206 | flex: 1 1 40rem; 207 | padding-top: 1rem; 208 | z-index: 1; 209 | } 210 | .home .image { 211 | flex: 1 1 40rem; 212 | z-index: 1; 213 | } 214 | .home .image img { 215 | width: 70%; 216 | margin-left: 6rem; 217 | border-radius: 50%; 218 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); 219 | cursor: pointer; 220 | } 221 | .home .image img:hover { 222 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); 223 | } 224 | .home .content h2 { 225 | font-size: 5rem; 226 | font-weight: 800; 227 | color: #002057; 228 | } 229 | .home .content h2 span { 230 | font-size: 5rem; 231 | font-weight: 800; 232 | color: #ff7b00; 233 | } 234 | .home .content p { 235 | font-size: 2.5rem; 236 | color: #000; 237 | font-weight: 600; 238 | padding: 1rem 0; 239 | } 240 | .home .content p span { 241 | font-size: 2.5rem; 242 | color: rgb(148, 8, 8); 243 | font-weight: 600; 244 | padding: 1rem 0; 245 | } 246 | .home .btn { 247 | margin-top: 1rem; 248 | position: absolute; 249 | line-height: 0; 250 | padding: 1.6rem 3rem; 251 | border-radius: 4em; 252 | transition: 0.5s; 253 | color: #fff; 254 | background: #2506ad; 255 | box-shadow: 0px 5px 18px rgba(48, 68, 247, 0.6); 256 | font-family: "Nunito", sans-serif; 257 | } 258 | .home .btn span { 259 | font-weight: 700; 260 | font-size: 1.7rem; 261 | letter-spacing: 0.1rem; 262 | } 263 | .home .btn i { 264 | margin-left: 0.3rem; 265 | font-size: 1.5rem; 266 | transition: 0.3s; 267 | } 268 | .home .btn:hover { 269 | background: #1a047e; 270 | } 271 | .home .btn:hover i { 272 | transform: translateX(5px); 273 | } 274 | /* social icons start */ 275 | .socials { 276 | position: relative; 277 | margin-top: 9rem; 278 | } 279 | .socials .social-icons { 280 | padding-left: 0; 281 | margin-bottom: 0; 282 | list-style: none; 283 | } 284 | .socials .social-icons li { 285 | display: inline-block; 286 | margin-bottom: 14px; 287 | } 288 | .social-icons a { 289 | font-size: 2rem; 290 | display: inline-block; 291 | line-height: 44px; 292 | color: #00d9ff; 293 | background-color: #09011b; 294 | width: 44px; 295 | height: 44px; 296 | text-align: center; 297 | margin-right: 8px; 298 | border-radius: 100%; 299 | -webkit-transition: all 0.2s linear; 300 | -o-transition: all 0.2s linear; 301 | transition: all 0.2s linear; 302 | } 303 | .social-icons a:active, 304 | .social-icons a:focus, 305 | .social-icons a:hover { 306 | color: #fff; 307 | background-color: #0685da; 308 | } 309 | .social-icons a.github:hover { 310 | background-color: #0e0e0e; 311 | } 312 | .social-icons a.twitter:hover { 313 | background-color: #00aced; 314 | } 315 | .social-icons a.linkedin:hover { 316 | background-color: #007bb6; 317 | } 318 | .social-icons a.dev:hover { 319 | background-color: #070707; 320 | } 321 | .social-icons a.instagram:hover { 322 | background-color: #ee00da; 323 | } 324 | /* social icons end */ 325 | 326 | /* hero media queries starts*/ 327 | @media (max-width: 450px) { 328 | .home .btn { 329 | margin: 4rem 0; 330 | } 331 | .socials { 332 | margin-top: 12rem; 333 | } 334 | .home .image img { 335 | margin-top: -12rem; 336 | } 337 | .home .content p { 338 | font-size: 2.2rem; 339 | } 340 | .home .content p span { 341 | font-size: 2.2rem; 342 | } 343 | } 344 | /* hero media queries ends*/ 345 | /* hero section end */ 346 | 347 | /* about section starts */ 348 | .about { 349 | background: rgb(255, 255, 255); 350 | } 351 | .about .row { 352 | display: flex; 353 | flex-direction: row; 354 | gap: 2rem; 355 | flex-wrap: wrap; 356 | padding: 4rem; 357 | } 358 | .about .row .image { 359 | text-align: center; 360 | flex: 1 1 35rem; 361 | } 362 | .about .row .image img { 363 | margin: 4rem; 364 | width: 30rem; 365 | height: auto; 366 | border-radius: 5%; 367 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6); 368 | mix-blend-mode: luminosity; 369 | transition: 0.3s; 370 | cursor: pointer; 371 | } 372 | .about .row .image img:hover { 373 | mix-blend-mode: normal; 374 | } 375 | .about .row .content { 376 | flex: 1 1 45rem; 377 | padding: 3rem; 378 | } 379 | .about .row .content h3 { 380 | color: rgb(27, 27, 27); 381 | font-size: 2.5rem; 382 | } 383 | .about .row .content .tag { 384 | font-size: 1.4rem; 385 | color: #020133; 386 | font-weight: 600; 387 | margin-top: 1rem; 388 | } 389 | .about .row .content p { 390 | font-size: 1.5rem; 391 | margin-top: 1.5rem; 392 | font-family: "Nunito"; 393 | font-weight: 600; 394 | text-transform: none; 395 | } 396 | .about .row .content .box-container { 397 | display: flex; 398 | flex-wrap: wrap; 399 | gap: 1.5rem; 400 | font-family: "Nunito"; 401 | font-weight: 600; 402 | } 403 | .about .row .content .box-container .box p { 404 | text-transform: none; 405 | } 406 | .about .row .content .box-container .box p span { 407 | color: #011aff; 408 | } 409 | .resumebtn { 410 | margin-top: 6rem; 411 | } 412 | .resumebtn .btn { 413 | padding: 1.7rem 3rem; 414 | border-radius: 0.5em; 415 | transition: 0.3s; 416 | color: #fff; 417 | background: #2506ad; 418 | box-shadow: 0px 5px 10px rgba(48, 68, 247, 0.6); 419 | font-family: "Nunito", sans-serif; 420 | } 421 | .resumebtn .btn span { 422 | font-weight: 600; 423 | font-size: 1.8rem; 424 | letter-spacing: 0.1rem; 425 | } 426 | .resumebtn .btn i { 427 | margin-left: 0.3rem; 428 | font-size: 1.2rem; 429 | transition: 0.3s; 430 | } 431 | .resumebtn .btn:hover { 432 | background: #1a047e; 433 | } 434 | .resumebtn .btn:hover i { 435 | transform: translateX(5px); 436 | } 437 | /* about media queries starts*/ 438 | @media screen and (max-width: 600px) { 439 | .about .row .image { 440 | margin-top: 2rem; 441 | } 442 | .about .row .image img { 443 | margin: 0 auto; 444 | width: 80%; 445 | mix-blend-mode: normal; 446 | } 447 | .about .row { 448 | padding: 0.5rem; 449 | margin-bottom: 7rem; 450 | } 451 | .about .row .content { 452 | padding: 1rem; 453 | } 454 | .about .row .content .box-container { 455 | gap: 0; 456 | } 457 | } 458 | /* about media queries ends*/ 459 | /* about section ends */ 460 | 461 | /* skills section starts */ 462 | .skills { 463 | min-height: 90vh; 464 | background: linear-gradient(to bottom, #57059e, #4a00e0); 465 | } 466 | .skills h2 { 467 | color: #fff; 468 | } 469 | .skills .heading span { 470 | color: rgb(255, 230, 0); 471 | } 472 | .skills .container { 473 | background: rgba(0, 0, 22, 0.4); 474 | color: #fff; 475 | border-radius: 1rem; 476 | padding: 2rem; 477 | width: 90%; 478 | margin: auto; 479 | margin-top: 2rem; 480 | } 481 | .skills .container .row { 482 | display: grid; 483 | grid-template-columns: repeat(6, 1fr); 484 | flex-wrap: wrap; 485 | gap: 1.8rem; 486 | } 487 | .skills .container .bar { 488 | margin-bottom: 15px; 489 | padding: 10px; 490 | border-radius: 1rem; 491 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 492 | background: rgba(0, 0, 22, 0.9); 493 | transition: 0.2s; 494 | } 495 | .skills .container .bar:hover { 496 | box-shadow: 0 8px 10px rgba(0, 2, 68, 0.8) !important; 497 | background-color: rgba(0, 0, 0, 0.9) !important; 498 | } 499 | .skills .container .bar .info { 500 | display: flex; 501 | flex-direction: column; 502 | align-items: center; 503 | gap: 1rem; 504 | margin-top: 1rem; 505 | } 506 | .skills .container .bar .info i { 507 | font-size: 4rem; 508 | } 509 | .skills .container .bar .info span { 510 | font-size: 2rem; 511 | font-weight: 500; 512 | font-family: "Poppins"; 513 | margin-left: 0.5rem; 514 | } 515 | /* skills media queries starts*/ 516 | @media screen and (max-width: 600px) { 517 | .skills .container { 518 | padding: 0; 519 | margin: 0; 520 | } 521 | .skills .container .row { 522 | grid-template-columns: repeat(2, 1fr); 523 | margin: 1rem; 524 | padding: 2rem 0.2rem 2rem 0.2rem; 525 | gap: 1rem; 526 | } 527 | .skills .container { 528 | margin-top: 5px; 529 | width: 100%; 530 | } 531 | } 532 | /* skills media queries ends*/ 533 | /* skills section ends */ 534 | 535 | /* education section starts */ 536 | .education { 537 | background: #e5ecfb; 538 | min-height: 80vh; 539 | } 540 | .education .qoute { 541 | font-size: 1.5rem; 542 | text-align: center; 543 | font-family: "Nunito", sans-serif; 544 | font-weight: 600; 545 | margin-top: 0.5rem; 546 | } 547 | .education .box-container { 548 | display: flex; 549 | flex-wrap: wrap; 550 | justify-content: center; 551 | align-items: center; 552 | flex-direction: column; 553 | } 554 | .education .box-container .box { 555 | display: flex; 556 | flex-direction: row; 557 | width: 80%; 558 | border-radius: 0.5rem; 559 | box-shadow: 0.2rem 0.5rem 1rem rgba(0, 0, 0, 0.2); 560 | text-align: center; 561 | position: relative; 562 | margin-top: 2rem; 563 | overflow: hidden; 564 | transition: 0.3s; 565 | background: rgb(252, 252, 252); 566 | } 567 | .education .box-container .box:hover { 568 | transform: scale(1.03); 569 | box-shadow: 1rem 0.5rem 1.2rem rgba(0, 0, 0, 0.3); 570 | } 571 | .education .box-container .box .image { 572 | flex: 1 1 20rem; 573 | width: 100%; 574 | } 575 | .education .box-container .box img { 576 | object-fit: cover; 577 | position: relative; 578 | width: 100%; 579 | height: 100%; 580 | } 581 | .education .box-container .box .content { 582 | position: relative; 583 | display: flex; 584 | flex-direction: column; 585 | padding: 1rem; 586 | flex-wrap: wrap; 587 | flex: 1 1 70rem; 588 | } 589 | .education .box-container .box .content h3 { 590 | font-size: 2.5rem; 591 | color: #012970; 592 | padding: 0.5rem 0; 593 | font-weight: 600; 594 | text-align: left; 595 | margin-left: 1rem; 596 | } 597 | .education .box-container .box .content p { 598 | font-size: 1.5rem; 599 | margin-left: 1rem; 600 | text-align: left; 601 | } 602 | .education h4 { 603 | font-size: 2rem; 604 | color: rgb(34, 109, 0); 605 | text-align: left; 606 | margin: 1rem; 607 | font-family: "Nunito", sans-serif; 608 | font-weight: 700; 609 | } 610 | 611 | /* education media queries starts*/ 612 | @media screen and (max-width: 600px) { 613 | .education .box-container .box { 614 | flex-direction: column; 615 | width: 100%; 616 | } 617 | .education .box-container .box .image { 618 | width: 100%; 619 | height: 25rem; 620 | } 621 | .education .box-container .box img { 622 | width: 100%; 623 | } 624 | .education .box-container .box .content { 625 | position: relative; 626 | display: flex; 627 | flex-direction: column; 628 | padding: 1rem; 629 | flex-wrap: wrap; 630 | flex: 0; 631 | } 632 | .education .btns { 633 | margin-top: 2rem; 634 | margin-left: 1rem; 635 | margin-right: 1rem; 636 | flex-wrap: wrap; 637 | } 638 | } 639 | /* education media queries ends*/ 640 | /* education section ends */ 641 | 642 | /* work section starts */ 643 | .work { 644 | /* background: #010124; */ 645 | background: linear-gradient(to bottom, #000031, #00002c); 646 | } 647 | .work h2 { 648 | color: #fff; 649 | padding: 1rem; 650 | } 651 | .work .heading span { 652 | color: rgb(255, 230, 0); 653 | } 654 | .work .box-container { 655 | display: flex; 656 | flex-wrap: wrap; 657 | gap: 1.5rem; 658 | margin: 2rem; 659 | } 660 | .work .box-container .box { 661 | flex: 1 1 30rem; 662 | border-radius: 0.5rem; 663 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 664 | position: relative; 665 | overflow: hidden; 666 | height: 30rem; 667 | } 668 | .work .box-container .box img { 669 | height: 100%; 670 | width: 100%; 671 | object-fit: cover; 672 | } 673 | .work .box-container .box .content { 674 | height: 100%; 675 | width: 100%; 676 | position: absolute; 677 | top: 85%; 678 | left: 0; 679 | background: rgba(255, 255, 255, 0.9); 680 | display: flex; 681 | flex-direction: column; 682 | } 683 | .work .box-container .box .content .tag { 684 | display: flex; 685 | flex-direction: row; 686 | justify-content: space-between; 687 | align-items: center; 688 | height: 4.5rem; 689 | width: 100%; 690 | padding-left: 1rem; 691 | background: #ffd900; 692 | } 693 | .work .box-container .box .content .tag h3 { 694 | font-size: 2rem; 695 | } 696 | .work .box-container .box:hover .content { 697 | top: 25%; 698 | } 699 | .work .desc { 700 | margin: 2rem; 701 | display: flex; 702 | flex-direction: column; 703 | justify-content: center; 704 | } 705 | .work .desc p { 706 | font-size: 1.5rem; 707 | } 708 | .work .desc .btns { 709 | display: flex; 710 | justify-content: space-between; 711 | width: 100%; 712 | margin-top: 2rem; 713 | } 714 | .work .desc .btns .btn { 715 | line-height: 0; 716 | display: inline; 717 | padding: 1.5rem 2.5rem; 718 | border-radius: 0.5rem; 719 | font-size: 1.5rem; 720 | color: #fff; 721 | background: rgb(12, 12, 12); 722 | margin-right: 2rem; 723 | } 724 | .work .desc .btns .btn:hover { 725 | background: #310ae0f5; 726 | } 727 | .work .viewall { 728 | display: flex; 729 | justify-content: center; 730 | } 731 | .work .viewall .btn { 732 | position: relative; 733 | line-height: 0; 734 | padding: 1.6rem 3rem; 735 | border-radius: 0.5em; 736 | transition: 0.5s; 737 | color: rgb(255, 255, 255); 738 | font-weight: 700; 739 | border: 2px solid #fff; 740 | box-shadow: 0px 5px 10px rgba(65, 84, 241, 0.4); 741 | text-align: center; 742 | } 743 | .work .viewall .btn span { 744 | font-weight: 600; 745 | font-size: 1.7rem; 746 | font-family: "Nunito", sans-serif; 747 | } 748 | .work .viewall .btn i { 749 | margin-left: 0.3rem; 750 | font-size: 1.5rem; 751 | transition: 0.3s; 752 | } 753 | .work .viewall .btn:hover { 754 | background: #fff; 755 | color: #000; 756 | } 757 | .work .viewall .btn:hover i { 758 | transform: translateX(5px); 759 | } 760 | /* work section ends */ 761 | 762 | /* experience section starts */ 763 | .experience .timeline { 764 | position: relative; 765 | max-width: 1200px; 766 | margin: 0 auto; 767 | } 768 | .experience .timeline::after { 769 | content: ""; 770 | position: absolute; 771 | width: 6px; 772 | background: #020133; 773 | top: 0; 774 | bottom: 0; 775 | left: 50%; 776 | margin-left: -3px; 777 | z-index: -2; 778 | } 779 | .experience .container { 780 | padding: 10px 40px; 781 | position: relative; 782 | background-color: inherit; 783 | width: 50%; 784 | } 785 | /*circles on timeline*/ 786 | .experience .container::after { 787 | content: "\f0b1"; 788 | position: absolute; 789 | width: 25px; 790 | height: 25px; 791 | right: -17px; 792 | background-color: rgb(255, 255, 255); 793 | border: 4px solid #ff9f55; 794 | top: 15px; 795 | border-radius: 50%; 796 | z-index: 100; 797 | font-size: 1.89rem; 798 | text-align: center; 799 | font-weight: 600; 800 | color: #02094b; 801 | font-family: "Font Awesome\ 5 Free"; 802 | } 803 | .experience .left { 804 | left: 0; 805 | } 806 | .experience .right { 807 | left: 50%; 808 | } 809 | /* arrows pointing right */ 810 | .experience .left::before { 811 | content: " "; 812 | height: 0; 813 | position: absolute; 814 | top: 22px; 815 | width: 0; 816 | z-index: 1; 817 | right: 30px; 818 | border: medium solid #f68c09; 819 | border-width: 10px 0 10px 10px; 820 | border-color: transparent transparent transparent #f68c09; 821 | } 822 | /* arrows pointing left */ 823 | .experience .right::before { 824 | content: " "; 825 | height: 0; 826 | position: absolute; 827 | top: 22px; 828 | width: 0; 829 | z-index: 1; 830 | left: 30px; 831 | border: medium solid #f68c09; 832 | border-width: 10px 10px 10px 0; 833 | border-color: transparent #f68c09 transparent transparent; 834 | } 835 | .experience .right::after { 836 | left: -16px; 837 | } 838 | .experience .content { 839 | background-color: #f68c09; 840 | position: relative; 841 | border-radius: 6px; 842 | } 843 | .experience .content .tag { 844 | font-size: 1.3rem; 845 | padding-top: 1.5rem; 846 | padding-left: 1.5rem; 847 | } 848 | .experience .content .desc { 849 | margin-left: 1.5rem; 850 | padding-bottom: 1rem; 851 | } 852 | .experience .content .desc h3 { 853 | font-size: 1.5rem; 854 | font-weight: 600; 855 | } 856 | .experience .content .desc p { 857 | font-size: 1.2rem; 858 | } 859 | /* view all button */ 860 | .morebtn { 861 | display: flex; 862 | justify-content: center; 863 | } 864 | .morebtn .btn { 865 | position: relative; 866 | line-height: 0; 867 | padding: 1.6rem 3rem; 868 | border-radius: 0.5em; 869 | transition: 0.5s; 870 | color: #fff; 871 | background: #2506ad; 872 | box-shadow: 0px 5px 10px rgba(48, 68, 247, 0.6); 873 | text-align: center; 874 | } 875 | .morebtn .btn span { 876 | font-weight: 600; 877 | font-size: 1.7rem; 878 | font-family: "Nunito", sans-serif; 879 | } 880 | .morebtn .btn i { 881 | margin-left: 0.3rem; 882 | font-size: 1.5rem; 883 | transition: 0.3s; 884 | } 885 | .morebtn .btn:hover { 886 | background: #1a047e; 887 | } 888 | .morebtn .btn:hover i { 889 | transform: translateX(5px); 890 | } 891 | 892 | /* Media queries - Responsive timeline on screens less than 600px wide */ 893 | @media screen and (max-width: 600px) { 894 | .experience { 895 | min-height: 80vh; 896 | } 897 | .experience .timeline { 898 | margin-top: 2rem; 899 | } 900 | .experience .timeline::after { 901 | left: 31px; 902 | } 903 | .experience .container { 904 | width: 100%; 905 | padding-left: 8rem; 906 | padding-right: 2rem; 907 | } 908 | .experience .container::after { 909 | font-size: 2.2rem; 910 | } 911 | .experience .container::before { 912 | left: 61px; 913 | border: medium solid #f68c09; 914 | border-width: 10px 10px 10px 0; 915 | border-color: transparent #f68c09 transparent transparent; 916 | } 917 | .experience .left::after { 918 | left: 15px; 919 | } 920 | .experience .right::after { 921 | left: 15px; 922 | } 923 | .experience .right { 924 | left: 0%; 925 | } 926 | .morebtn { 927 | margin-top: 3rem; 928 | } 929 | } 930 | /* experience media queries ends */ 931 | /* experience section ends */ 932 | 933 | /* contact section starts */ 934 | .contact { 935 | background: #e5ecfb; 936 | min-height: 60vh; 937 | } 938 | .contact .container { 939 | max-width: 1050px; 940 | width: 100%; 941 | background: #fff; 942 | border-radius: 1.5rem; 943 | margin: 2rem 5rem; 944 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); 945 | } 946 | .contact .container .content { 947 | display: flex; 948 | align-items: center; 949 | justify-content: space-between; 950 | padding: 2.5rem 2rem; 951 | } 952 | .contact .content .image-box { 953 | max-width: 60%; 954 | margin-left: 4rem; 955 | } 956 | .contact .content .image-box img { 957 | width: 100%; 958 | height: 40rem; 959 | position: relative; 960 | } 961 | .contact .content form { 962 | width: 45%; 963 | margin-right: 3.5rem; 964 | } 965 | form .form-group { 966 | display: flex; 967 | flex-direction: column; 968 | justify-content: center; 969 | } 970 | .form-group .field { 971 | height: 50px; 972 | display: flex; 973 | position: relative; 974 | margin: 1rem; 975 | width: 100%; 976 | } 977 | form i { 978 | position: absolute; 979 | top: 50%; 980 | left: 18px; 981 | color: rgb(51, 51, 51); 982 | font-size: 17px; 983 | pointer-events: none; 984 | transform: translateY(-50%); 985 | } 986 | form .field input, 987 | form .message textarea { 988 | width: 100%; 989 | height: 100%; 990 | outline: none; 991 | padding: 0 16px 0 48px; 992 | font-size: 16px; 993 | font-family: "Poppins", sans-serif; 994 | border-radius: 5px; 995 | border: 1px solid rgb(51, 51, 51); 996 | background: #e5ecfb; 997 | } 998 | .field input::placeholder, 999 | .message textarea::placeholder { 1000 | color: rgb(51, 51, 51); 1001 | } 1002 | .field input:focus, 1003 | .message textarea:focus { 1004 | padding-left: 47px; 1005 | border: 2px solid rgb(115, 3, 167); 1006 | } 1007 | .field input:focus ~ i, 1008 | .message textarea:focus ~ i { 1009 | color: rgb(115, 3, 167); 1010 | } 1011 | form .message { 1012 | position: relative; 1013 | margin: 1rem; 1014 | width: 100%; 1015 | } 1016 | form .message i { 1017 | top: 25px; 1018 | font-size: 20px; 1019 | left: 15px; 1020 | } 1021 | form .message textarea { 1022 | min-height: 130px; 1023 | max-height: 230px; 1024 | max-width: 100%; 1025 | min-width: 100%; 1026 | padding: 12px 20px 0 48px; 1027 | } 1028 | form .message textarea::-webkit-scrollbar { 1029 | width: 0px; 1030 | } 1031 | form .button-area { 1032 | display: flex; 1033 | float: right; 1034 | flex-direction: row-reverse; 1035 | } 1036 | .button-area button { 1037 | color: #fff; 1038 | border: none; 1039 | outline: none; 1040 | font-size: 1.8rem; 1041 | cursor: pointer; 1042 | border-radius: 5px; 1043 | padding: 13px 25px; 1044 | background: #2506ad; 1045 | box-shadow: 0px 5px 10px rgba(48, 68, 247, 0.6); 1046 | transition: 0.3s ease; 1047 | font-family: "Nunito", sans-serif; 1048 | } 1049 | .button-area button:hover { 1050 | background: #421cecf5; 1051 | } 1052 | .button-area span { 1053 | font-size: 17px; 1054 | padding: 1rem; 1055 | display: none; 1056 | } 1057 | .button-area button i { 1058 | position: relative; 1059 | top: 6px; 1060 | left: 2px; 1061 | font-size: 1.5rem; 1062 | transition: 0.3s; 1063 | color: #fff; 1064 | } 1065 | .button-area button:hover i { 1066 | left: 8px; 1067 | } 1068 | /* contact section media queries starts */ 1069 | @media (max-width: 900px) { 1070 | .contact { 1071 | min-height: 70vh; 1072 | } 1073 | .contact .container { 1074 | margin: 3rem 0 2rem 0; 1075 | } 1076 | .contact .container .content { 1077 | padding: 18px 12px; 1078 | } 1079 | .contact .content .image-box { 1080 | display: none; 1081 | } 1082 | .contact .content form { 1083 | width: 100%; 1084 | margin-right: 2rem; 1085 | } 1086 | } 1087 | /* contact section media queries ends */ 1088 | /* contact section ends */ 1089 | 1090 | /* footer section starts */ 1091 | .footer { 1092 | min-height: auto; 1093 | padding-top: 0; 1094 | background: rgb(0, 1, 43); 1095 | } 1096 | .footer .box-container { 1097 | display: flex; 1098 | justify-content: center; 1099 | flex-wrap: wrap; 1100 | } 1101 | .footer .box-container .box { 1102 | flex: 1 1 25rem; 1103 | margin: 2.5rem; 1104 | } 1105 | .footer .box-container .box h3 { 1106 | font-size: 2.5rem; 1107 | color: #fff; 1108 | padding-bottom: 1rem; 1109 | font-weight: normal; 1110 | } 1111 | .footer .box-container .box p { 1112 | font-size: 1.5rem; 1113 | color: #ccc; 1114 | padding: 0.7rem 0; 1115 | text-transform: none; 1116 | } 1117 | .footer .box-container .box p i { 1118 | padding-right: 1rem; 1119 | color: #ffae00; 1120 | } 1121 | .footer .box-container .box a { 1122 | font-size: 1.5rem; 1123 | color: rgb(238, 238, 238); 1124 | padding: 0.3rem 0; 1125 | display: block; 1126 | } 1127 | .footer .box-container .box a:hover { 1128 | color: #ffae00; 1129 | } 1130 | .footer .box-container .box .share { 1131 | display: flex; 1132 | flex-wrap: wrap; 1133 | padding: 1rem 0; 1134 | } 1135 | .footer .box-container .box .share a { 1136 | height: 4rem; 1137 | width: 4rem; 1138 | padding: 1rem; 1139 | text-align: center; 1140 | border-radius: 5rem; 1141 | font-size: 1.7rem; 1142 | margin-right: 1rem; 1143 | transition: 0.2s; 1144 | background: rgb(230, 230, 230); 1145 | color: #02094b; 1146 | border: none; 1147 | } 1148 | .footer .box-container .box .share a:hover { 1149 | background: transparent; 1150 | transform: scale(0.98); 1151 | border: 0.1rem solid rgb(180, 178, 178); 1152 | color: #ffae00; 1153 | } 1154 | .footer .credit { 1155 | padding: 1rem 0 0 0; 1156 | text-align: center; 1157 | font-size: 1.5rem; 1158 | font-family: "Nunito", sans-serif; 1159 | font-weight: 600; 1160 | color: #fff; 1161 | border-top: 0.1rem solid #fff3; 1162 | } 1163 | .footer .credit a { 1164 | color: #ffae00; 1165 | } 1166 | .footer .fa { 1167 | color: #e90606; 1168 | margin: 0 0.3rem; 1169 | font-size: 1.5rem; 1170 | animation: pound 0.35s infinite alternate; 1171 | } 1172 | @-webkit-keyframes pound { 1173 | to { 1174 | transform: scale(1.1); 1175 | } 1176 | } 1177 | @keyframes pound { 1178 | to { 1179 | transform: scale(1.1); 1180 | } 1181 | } 1182 | @media (max-width: 450px) { 1183 | .footer .box-container .box { 1184 | margin: 1.5rem; 1185 | } 1186 | .footer .box-container .box p { 1187 | padding: 0.7rem; 1188 | } 1189 | .footer .box-container .box .share a { 1190 | padding: 1.2rem; 1191 | } 1192 | } 1193 | /* footer section ends */ 1194 | 1195 | /* common media queries starts*/ 1196 | @media (max-width: 450px) { 1197 | html { 1198 | font-size: 55%; 1199 | } 1200 | body { 1201 | padding-right: 0; 1202 | } 1203 | section { 1204 | padding: 2rem; 1205 | } 1206 | } 1207 | /* common media queries ends*/ 1208 | 1209 | /* scroll top starts */ 1210 | #scroll-top { 1211 | position: fixed; 1212 | top: -140%; 1213 | right: 2rem; 1214 | padding: 1rem 1.5rem; 1215 | font-size: 2rem; 1216 | background: #ffae00; 1217 | color: rgb(13, 0, 44); 1218 | border-radius: 50%; 1219 | transition: 1s linear; 1220 | z-index: 1000; 1221 | } 1222 | #scroll-top.active { 1223 | top: calc(100% - 12rem); 1224 | } 1225 | /* scroll top ends */ 1226 | -------------------------------------------------------------------------------- /assets/images/android.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/android.jpg -------------------------------------------------------------------------------- /assets/images/cmsoon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/cmsoon.png -------------------------------------------------------------------------------- /assets/images/contact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/contact.png -------------------------------------------------------------------------------- /assets/images/contact1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/contact1.png -------------------------------------------------------------------------------- /assets/images/educat/college.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/educat/college.jpg -------------------------------------------------------------------------------- /assets/images/educat/school.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/educat/school.jpg -------------------------------------------------------------------------------- /assets/images/favhand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/favhand.png -------------------------------------------------------------------------------- /assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/favicon.png -------------------------------------------------------------------------------- /assets/images/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/hero.png -------------------------------------------------------------------------------- /assets/images/hero1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/hero1.png -------------------------------------------------------------------------------- /assets/images/lapy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/lapy.jpg -------------------------------------------------------------------------------- /assets/images/loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/loader.gif -------------------------------------------------------------------------------- /assets/images/preloader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/preloader.gif -------------------------------------------------------------------------------- /assets/images/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/profile.png -------------------------------------------------------------------------------- /assets/images/profile2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/profile2.jpg -------------------------------------------------------------------------------- /assets/images/projects/basicbank.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/basicbank.PNG -------------------------------------------------------------------------------- /assets/images/projects/bootstrapportfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/bootstrapportfolio.png -------------------------------------------------------------------------------- /assets/images/projects/bootstraptemplate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/bootstraptemplate.png -------------------------------------------------------------------------------- /assets/images/projects/burgerweb.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/burgerweb.PNG -------------------------------------------------------------------------------- /assets/images/projects/composey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/composey.png -------------------------------------------------------------------------------- /assets/images/projects/cryptotracker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/cryptotracker.png -------------------------------------------------------------------------------- /assets/images/projects/flipkartmern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/flipkartmern.png -------------------------------------------------------------------------------- /assets/images/projects/flipkartphp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/flipkartphp.png -------------------------------------------------------------------------------- /assets/images/projects/foodicious.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/foodicious.png -------------------------------------------------------------------------------- /assets/images/projects/foodwebsite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/foodwebsite.png -------------------------------------------------------------------------------- /assets/images/projects/hulu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/hulu.png -------------------------------------------------------------------------------- /assets/images/projects/instagrammern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/instagrammern.png -------------------------------------------------------------------------------- /assets/images/projects/issuetrack.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/issuetrack.PNG -------------------------------------------------------------------------------- /assets/images/projects/jspro.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/jspro.PNG -------------------------------------------------------------------------------- /assets/images/projects/kiaweb.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/kiaweb.PNG -------------------------------------------------------------------------------- /assets/images/projects/linklist.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/linklist.PNG -------------------------------------------------------------------------------- /assets/images/projects/newsboxandroid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/newsboxandroid.png -------------------------------------------------------------------------------- /assets/images/projects/notystackandroid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/notystackandroid.png -------------------------------------------------------------------------------- /assets/images/projects/oldsites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/oldsites.png -------------------------------------------------------------------------------- /assets/images/projects/phppblform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/phppblform.png -------------------------------------------------------------------------------- /assets/images/projects/portfolio.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/portfolio.PNG -------------------------------------------------------------------------------- /assets/images/projects/portfolio1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/portfolio1.PNG -------------------------------------------------------------------------------- /assets/images/projects/reactprojects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/reactprojects.png -------------------------------------------------------------------------------- /assets/images/projects/resistercolor.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/resistercolor.PNG -------------------------------------------------------------------------------- /assets/images/projects/resumegen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/resumegen.png -------------------------------------------------------------------------------- /assets/images/projects/saas.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/saas.PNG -------------------------------------------------------------------------------- /assets/images/projects/sppuprepandroid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/sppuprepandroid.png -------------------------------------------------------------------------------- /assets/images/projects/templeweb.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/templeweb.PNG -------------------------------------------------------------------------------- /assets/images/projects/tsfbank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/tsfbank.png -------------------------------------------------------------------------------- /assets/images/projects/weatherlyandroid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/weatherlyandroid.png -------------------------------------------------------------------------------- /assets/images/projects/webchat.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/webchat.PNG -------------------------------------------------------------------------------- /assets/images/projects/webuiclones.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/webuiclones.png -------------------------------------------------------------------------------- /assets/images/projects/webviewapp.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/projects/webviewapp.PNG -------------------------------------------------------------------------------- /assets/images/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/react.png -------------------------------------------------------------------------------- /assets/images/skills/TailwindCSS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jigar-sable/Portfolio-Website/4f23f7c2f26a605a7bf66231331884caa6df6e1c/assets/images/skills/TailwindCSS.png -------------------------------------------------------------------------------- /assets/js/404.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | $('#menu').click(function(){ 4 | $(this).toggleClass('fa-times'); 5 | $('.navbar').toggleClass('nav-toggle'); 6 | }); 7 | }); 8 | 9 | // disable developer mode 10 | document.onkeydown = function(e) { 11 | if(e.keyCode == 123) { 12 | return false; 13 | } 14 | if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) { 15 | return false; 16 | } 17 | if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) { 18 | return false; 19 | } 20 | if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) { 21 | return false; 22 | } 23 | if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) { 24 | return false; 25 | } 26 | } -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | /* ----------------------------------------------- 2 | /* How to use? : Check the GitHub README 3 | /* ----------------------------------------------- */ 4 | 5 | /* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */ 6 | /* 7 | particlesJS.load('particles-js', 'particles.json', function() { 8 | console.log('particles.js loaded - callback'); 9 | }); 10 | */ 11 | 12 | /* Otherwise just put the config content (json): */ 13 | 14 | particlesJS('particles-js', 15 | 16 | { 17 | "particles": { 18 | "number": { 19 | "value": 80, 20 | "density": { 21 | "enable": true, 22 | "value_area": 800 23 | } 24 | }, 25 | "color": { 26 | "value": "#000000" 27 | }, 28 | "shape": { 29 | "type": "circle", 30 | "stroke": { 31 | "width": 0, 32 | "color": "#000000" 33 | }, 34 | "polygon": { 35 | "nb_sides": 5 36 | }, 37 | "image": { 38 | "src": "img/github.svg", 39 | "width": 100, 40 | "height": 100 41 | } 42 | }, 43 | "opacity": { 44 | "value": 0.5, 45 | "random": false, 46 | "anim": { 47 | "enable": false, 48 | "speed": 1, 49 | "opacity_min": 0.1, 50 | "sync": false 51 | } 52 | }, 53 | "size": { 54 | "value": 5, 55 | "random": true, 56 | "anim": { 57 | "enable": false, 58 | "speed": 40, 59 | "size_min": 0.1, 60 | "sync": false 61 | } 62 | }, 63 | "line_linked": { 64 | "enable": true, 65 | "distance": 150, 66 | "color": "#000000", 67 | "opacity": 0.4, 68 | "width": 1 69 | }, 70 | "move": { 71 | "enable": true, 72 | "speed": 6, 73 | "direction": "none", 74 | "random": false, 75 | "straight": false, 76 | "out_mode": "out", 77 | "attract": { 78 | "enable": false, 79 | "rotateX": 600, 80 | "rotateY": 1200 81 | } 82 | } 83 | }, 84 | "interactivity": { 85 | "detect_on": "canvas", 86 | "events": { 87 | "onhover": { 88 | "enable": true, 89 | "mode": "repulse" 90 | }, 91 | "onclick": { 92 | "enable": true, 93 | "mode": "push" 94 | }, 95 | "resize": true 96 | }, 97 | "modes": { 98 | "grab": { 99 | "distance": 400, 100 | "line_linked": { 101 | "opacity": 1 102 | } 103 | }, 104 | "bubble": { 105 | "distance": 400, 106 | "size": 40, 107 | "duration": 2, 108 | "opacity": 8, 109 | "speed": 3 110 | }, 111 | "repulse": { 112 | "distance": 200 113 | }, 114 | "push": { 115 | "particles_nb": 4 116 | }, 117 | "remove": { 118 | "particles_nb": 2 119 | } 120 | } 121 | }, 122 | "retina_detect": true, 123 | "config_demo": { 124 | "hide_card": false, 125 | "background_color": "#000000", 126 | "background_image": "", 127 | "background_position": "50% 50%", 128 | "background_repeat": "no-repeat", 129 | "background_size": "cover" 130 | } 131 | } 132 | 133 | ); -------------------------------------------------------------------------------- /assets/js/particles.min.js: -------------------------------------------------------------------------------- 1 | /* ----------------------------------------------- 2 | /* Author : Vincent Garreau - vincentgarreau.com 3 | /* MIT license: http://opensource.org/licenses/MIT 4 | /* Demo / Generator : vincentgarreau.com/particles.js 5 | /* GitHub : github.com/VincentGarreau/particles.js 6 | /* How to use? : Check the GitHub README 7 | /* v2.0.0 8 | /* ----------------------------------------------- */ 9 | function hexToRgb(e){var a=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;e=e.replace(a,function(e,a,t,i){return a+a+t+t+i+i});var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}function clamp(e,a,t){return Math.min(Math.max(e,a),t)}function isInArray(e,a){return a.indexOf(e)>-1}var pJS=function(e,a){var t=document.querySelector("#"+e+" > .particles-js-canvas-el");this.pJS={canvas:{el:t,w:t.offsetWidth,h:t.offsetHeight},particles:{number:{value:400,density:{enable:!0,value_area:800}},color:{value:"#fff"},shape:{type:"circle",stroke:{width:0,color:"#ff0000"},polygon:{nb_sides:5},image:{src:"",width:100,height:100}},opacity:{value:1,random:!1,anim:{enable:!1,speed:2,opacity_min:0,sync:!1}},size:{value:20,random:!1,anim:{enable:!1,speed:20,size_min:0,sync:!1}},line_linked:{enable:!0,distance:100,color:"#fff",opacity:1,width:1},move:{enable:!0,speed:2,direction:"none",random:!1,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:3e3,rotateY:3e3}},array:[]},interactivity:{detect_on:"canvas",events:{onhover:{enable:!0,mode:"grab"},onclick:{enable:!0,mode:"push"},resize:!0},modes:{grab:{distance:100,line_linked:{opacity:1}},bubble:{distance:200,size:80,duration:.4},repulse:{distance:200,duration:.4},push:{particles_nb:4},remove:{particles_nb:2}},mouse:{}},retina_detect:!1,fn:{interact:{},modes:{},vendors:{}},tmp:{}};var i=this.pJS;a&&Object.deepExtend(i,a),i.tmp.obj={size_value:i.particles.size.value,size_anim_speed:i.particles.size.anim.speed,move_speed:i.particles.move.speed,line_linked_distance:i.particles.line_linked.distance,line_linked_width:i.particles.line_linked.width,mode_grab_distance:i.interactivity.modes.grab.distance,mode_bubble_distance:i.interactivity.modes.bubble.distance,mode_bubble_size:i.interactivity.modes.bubble.size,mode_repulse_distance:i.interactivity.modes.repulse.distance},i.fn.retinaInit=function(){i.retina_detect&&window.devicePixelRatio>1?(i.canvas.pxratio=window.devicePixelRatio,i.tmp.retina=!0):(i.canvas.pxratio=1,i.tmp.retina=!1),i.canvas.w=i.canvas.el.offsetWidth*i.canvas.pxratio,i.canvas.h=i.canvas.el.offsetHeight*i.canvas.pxratio,i.particles.size.value=i.tmp.obj.size_value*i.canvas.pxratio,i.particles.size.anim.speed=i.tmp.obj.size_anim_speed*i.canvas.pxratio,i.particles.move.speed=i.tmp.obj.move_speed*i.canvas.pxratio,i.particles.line_linked.distance=i.tmp.obj.line_linked_distance*i.canvas.pxratio,i.interactivity.modes.grab.distance=i.tmp.obj.mode_grab_distance*i.canvas.pxratio,i.interactivity.modes.bubble.distance=i.tmp.obj.mode_bubble_distance*i.canvas.pxratio,i.particles.line_linked.width=i.tmp.obj.line_linked_width*i.canvas.pxratio,i.interactivity.modes.bubble.size=i.tmp.obj.mode_bubble_size*i.canvas.pxratio,i.interactivity.modes.repulse.distance=i.tmp.obj.mode_repulse_distance*i.canvas.pxratio},i.fn.canvasInit=function(){i.canvas.ctx=i.canvas.el.getContext("2d")},i.fn.canvasSize=function(){i.canvas.el.width=i.canvas.w,i.canvas.el.height=i.canvas.h,i&&i.interactivity.events.resize&&window.addEventListener("resize",function(){i.canvas.w=i.canvas.el.offsetWidth,i.canvas.h=i.canvas.el.offsetHeight,i.tmp.retina&&(i.canvas.w*=i.canvas.pxratio,i.canvas.h*=i.canvas.pxratio),i.canvas.el.width=i.canvas.w,i.canvas.el.height=i.canvas.h,i.particles.move.enable||(i.fn.particlesEmpty(),i.fn.particlesCreate(),i.fn.particlesDraw(),i.fn.vendors.densityAutoParticles()),i.fn.vendors.densityAutoParticles()})},i.fn.canvasPaint=function(){i.canvas.ctx.fillRect(0,0,i.canvas.w,i.canvas.h)},i.fn.canvasClear=function(){i.canvas.ctx.clearRect(0,0,i.canvas.w,i.canvas.h)},i.fn.particle=function(e,a,t){if(this.radius=(i.particles.size.random?Math.random():1)*i.particles.size.value,i.particles.size.anim.enable&&(this.size_status=!1,this.vs=i.particles.size.anim.speed/100,i.particles.size.anim.sync||(this.vs=this.vs*Math.random())),this.x=t?t.x:Math.random()*i.canvas.w,this.y=t?t.y:Math.random()*i.canvas.h,this.x>i.canvas.w-2*this.radius?this.x=this.x-this.radius:this.x<2*this.radius&&(this.x=this.x+this.radius),this.y>i.canvas.h-2*this.radius?this.y=this.y-this.radius:this.y<2*this.radius&&(this.y=this.y+this.radius),i.particles.move.bounce&&i.fn.vendors.checkOverlap(this,t),this.color={},"object"==typeof e.value)if(e.value instanceof Array){var s=e.value[Math.floor(Math.random()*i.particles.color.value.length)];this.color.rgb=hexToRgb(s)}else void 0!=e.value.r&&void 0!=e.value.g&&void 0!=e.value.b&&(this.color.rgb={r:e.value.r,g:e.value.g,b:e.value.b}),void 0!=e.value.h&&void 0!=e.value.s&&void 0!=e.value.l&&(this.color.hsl={h:e.value.h,s:e.value.s,l:e.value.l});else"random"==e.value?this.color.rgb={r:Math.floor(256*Math.random())+0,g:Math.floor(256*Math.random())+0,b:Math.floor(256*Math.random())+0}:"string"==typeof e.value&&(this.color=e,this.color.rgb=hexToRgb(this.color.value));this.opacity=(i.particles.opacity.random?Math.random():1)*i.particles.opacity.value,i.particles.opacity.anim.enable&&(this.opacity_status=!1,this.vo=i.particles.opacity.anim.speed/100,i.particles.opacity.anim.sync||(this.vo=this.vo*Math.random()));var n={};switch(i.particles.move.direction){case"top":n={x:0,y:-1};break;case"top-right":n={x:.5,y:-.5};break;case"right":n={x:1,y:-0};break;case"bottom-right":n={x:.5,y:.5};break;case"bottom":n={x:0,y:1};break;case"bottom-left":n={x:-.5,y:1};break;case"left":n={x:-1,y:0};break;case"top-left":n={x:-.5,y:-.5};break;default:n={x:0,y:0}}i.particles.move.straight?(this.vx=n.x,this.vy=n.y,i.particles.move.random&&(this.vx=this.vx*Math.random(),this.vy=this.vy*Math.random())):(this.vx=n.x+Math.random()-.5,this.vy=n.y+Math.random()-.5),this.vx_i=this.vx,this.vy_i=this.vy;var r=i.particles.shape.type;if("object"==typeof r){if(r instanceof Array){var c=r[Math.floor(Math.random()*r.length)];this.shape=c}}else this.shape=r;if("image"==this.shape){var o=i.particles.shape;this.img={src:o.image.src,ratio:o.image.width/o.image.height},this.img.ratio||(this.img.ratio=1),"svg"==i.tmp.img_type&&void 0!=i.tmp.source_svg&&(i.fn.vendors.createSvgImg(this),i.tmp.pushing&&(this.img.loaded=!1))}},i.fn.particle.prototype.draw=function(){function e(){i.canvas.ctx.drawImage(r,a.x-t,a.y-t,2*t,2*t/a.img.ratio)}var a=this;if(void 0!=a.radius_bubble)var t=a.radius_bubble;else var t=a.radius;if(void 0!=a.opacity_bubble)var s=a.opacity_bubble;else var s=a.opacity;if(a.color.rgb)var n="rgba("+a.color.rgb.r+","+a.color.rgb.g+","+a.color.rgb.b+","+s+")";else var n="hsla("+a.color.hsl.h+","+a.color.hsl.s+"%,"+a.color.hsl.l+"%,"+s+")";switch(i.canvas.ctx.fillStyle=n,i.canvas.ctx.beginPath(),a.shape){case"circle":i.canvas.ctx.arc(a.x,a.y,t,0,2*Math.PI,!1);break;case"edge":i.canvas.ctx.rect(a.x-t,a.y-t,2*t,2*t);break;case"triangle":i.fn.vendors.drawShape(i.canvas.ctx,a.x-t,a.y+t/1.66,2*t,3,2);break;case"polygon":i.fn.vendors.drawShape(i.canvas.ctx,a.x-t/(i.particles.shape.polygon.nb_sides/3.5),a.y-t/.76,2.66*t/(i.particles.shape.polygon.nb_sides/3),i.particles.shape.polygon.nb_sides,1);break;case"star":i.fn.vendors.drawShape(i.canvas.ctx,a.x-2*t/(i.particles.shape.polygon.nb_sides/4),a.y-t/1.52,2*t*2.66/(i.particles.shape.polygon.nb_sides/3),i.particles.shape.polygon.nb_sides,2);break;case"image":if("svg"==i.tmp.img_type)var r=a.img.obj;else var r=i.tmp.img_obj;r&&e()}i.canvas.ctx.closePath(),i.particles.shape.stroke.width>0&&(i.canvas.ctx.strokeStyle=i.particles.shape.stroke.color,i.canvas.ctx.lineWidth=i.particles.shape.stroke.width,i.canvas.ctx.stroke()),i.canvas.ctx.fill()},i.fn.particlesCreate=function(){for(var e=0;e=i.particles.opacity.value&&(a.opacity_status=!1),a.opacity+=a.vo):(a.opacity<=i.particles.opacity.anim.opacity_min&&(a.opacity_status=!0),a.opacity-=a.vo),a.opacity<0&&(a.opacity=0)),i.particles.size.anim.enable&&(1==a.size_status?(a.radius>=i.particles.size.value&&(a.size_status=!1),a.radius+=a.vs):(a.radius<=i.particles.size.anim.size_min&&(a.size_status=!0),a.radius-=a.vs),a.radius<0&&(a.radius=0)),"bounce"==i.particles.move.out_mode)var s={x_left:a.radius,x_right:i.canvas.w,y_top:a.radius,y_bottom:i.canvas.h};else var s={x_left:-a.radius,x_right:i.canvas.w+a.radius,y_top:-a.radius,y_bottom:i.canvas.h+a.radius};switch(a.x-a.radius>i.canvas.w?(a.x=s.x_left,a.y=Math.random()*i.canvas.h):a.x+a.radius<0&&(a.x=s.x_right,a.y=Math.random()*i.canvas.h),a.y-a.radius>i.canvas.h?(a.y=s.y_top,a.x=Math.random()*i.canvas.w):a.y+a.radius<0&&(a.y=s.y_bottom,a.x=Math.random()*i.canvas.w),i.particles.move.out_mode){case"bounce":a.x+a.radius>i.canvas.w?a.vx=-a.vx:a.x-a.radius<0&&(a.vx=-a.vx),a.y+a.radius>i.canvas.h?a.vy=-a.vy:a.y-a.radius<0&&(a.vy=-a.vy)}if(isInArray("grab",i.interactivity.events.onhover.mode)&&i.fn.modes.grabParticle(a),(isInArray("bubble",i.interactivity.events.onhover.mode)||isInArray("bubble",i.interactivity.events.onclick.mode))&&i.fn.modes.bubbleParticle(a),(isInArray("repulse",i.interactivity.events.onhover.mode)||isInArray("repulse",i.interactivity.events.onclick.mode))&&i.fn.modes.repulseParticle(a),i.particles.line_linked.enable||i.particles.move.attract.enable)for(var n=e+1;n0){var c=i.particles.line_linked.color_rgb_line;i.canvas.ctx.strokeStyle="rgba("+c.r+","+c.g+","+c.b+","+r+")",i.canvas.ctx.lineWidth=i.particles.line_linked.width,i.canvas.ctx.beginPath(),i.canvas.ctx.moveTo(e.x,e.y),i.canvas.ctx.lineTo(a.x,a.y),i.canvas.ctx.stroke(),i.canvas.ctx.closePath()}}},i.fn.interact.attractParticles=function(e,a){var t=e.x-a.x,s=e.y-a.y,n=Math.sqrt(t*t+s*s);if(n<=i.particles.line_linked.distance){var r=t/(1e3*i.particles.move.attract.rotateX),c=s/(1e3*i.particles.move.attract.rotateY);e.vx-=r,e.vy-=c,a.vx+=r,a.vy+=c}},i.fn.interact.bounceParticles=function(e,a){var t=e.x-a.x,i=e.y-a.y,s=Math.sqrt(t*t+i*i),n=e.radius+a.radius;n>=s&&(e.vx=-e.vx,e.vy=-e.vy,a.vx=-a.vx,a.vy=-a.vy)},i.fn.modes.pushParticles=function(e,a){i.tmp.pushing=!0;for(var t=0;e>t;t++)i.particles.array.push(new i.fn.particle(i.particles.color,i.particles.opacity.value,{x:a?a.pos_x:Math.random()*i.canvas.w,y:a?a.pos_y:Math.random()*i.canvas.h})),t==e-1&&(i.particles.move.enable||i.fn.particlesDraw(),i.tmp.pushing=!1)},i.fn.modes.removeParticles=function(e){i.particles.array.splice(0,e),i.particles.move.enable||i.fn.particlesDraw()},i.fn.modes.bubbleParticle=function(e){function a(){e.opacity_bubble=e.opacity,e.radius_bubble=e.radius}function t(a,t,s,n,c){if(a!=t)if(i.tmp.bubble_duration_end){if(void 0!=s){var o=n-p*(n-a)/i.interactivity.modes.bubble.duration,l=a-o;d=a+l,"size"==c&&(e.radius_bubble=d),"opacity"==c&&(e.opacity_bubble=d)}}else if(r<=i.interactivity.modes.bubble.distance){if(void 0!=s)var v=s;else var v=n;if(v!=a){var d=n-p*(n-a)/i.interactivity.modes.bubble.duration;"size"==c&&(e.radius_bubble=d),"opacity"==c&&(e.opacity_bubble=d)}}else"size"==c&&(e.radius_bubble=void 0),"opacity"==c&&(e.opacity_bubble=void 0)}if(i.interactivity.events.onhover.enable&&isInArray("bubble",i.interactivity.events.onhover.mode)){var s=e.x-i.interactivity.mouse.pos_x,n=e.y-i.interactivity.mouse.pos_y,r=Math.sqrt(s*s+n*n),c=1-r/i.interactivity.modes.bubble.distance;if(r<=i.interactivity.modes.bubble.distance){if(c>=0&&"mousemove"==i.interactivity.status){if(i.interactivity.modes.bubble.size!=i.particles.size.value)if(i.interactivity.modes.bubble.size>i.particles.size.value){var o=e.radius+i.interactivity.modes.bubble.size*c;o>=0&&(e.radius_bubble=o)}else{var l=e.radius-i.interactivity.modes.bubble.size,o=e.radius-l*c;o>0?e.radius_bubble=o:e.radius_bubble=0}if(i.interactivity.modes.bubble.opacity!=i.particles.opacity.value)if(i.interactivity.modes.bubble.opacity>i.particles.opacity.value){var v=i.interactivity.modes.bubble.opacity*c;v>e.opacity&&v<=i.interactivity.modes.bubble.opacity&&(e.opacity_bubble=v)}else{var v=e.opacity-(i.particles.opacity.value-i.interactivity.modes.bubble.opacity)*c;v=i.interactivity.modes.bubble.opacity&&(e.opacity_bubble=v)}}}else a();"mouseleave"==i.interactivity.status&&a()}else if(i.interactivity.events.onclick.enable&&isInArray("bubble",i.interactivity.events.onclick.mode)){if(i.tmp.bubble_clicking){var s=e.x-i.interactivity.mouse.click_pos_x,n=e.y-i.interactivity.mouse.click_pos_y,r=Math.sqrt(s*s+n*n),p=((new Date).getTime()-i.interactivity.mouse.click_time)/1e3;p>i.interactivity.modes.bubble.duration&&(i.tmp.bubble_duration_end=!0),p>2*i.interactivity.modes.bubble.duration&&(i.tmp.bubble_clicking=!1,i.tmp.bubble_duration_end=!1)}i.tmp.bubble_clicking&&(t(i.interactivity.modes.bubble.size,i.particles.size.value,e.radius_bubble,e.radius,"size"),t(i.interactivity.modes.bubble.opacity,i.particles.opacity.value,e.opacity_bubble,e.opacity,"opacity"))}},i.fn.modes.repulseParticle=function(e){function a(){var a=Math.atan2(d,p);if(e.vx=u*Math.cos(a),e.vy=u*Math.sin(a),"bounce"==i.particles.move.out_mode){var t={x:e.x+e.vx,y:e.y+e.vy};t.x+e.radius>i.canvas.w?e.vx=-e.vx:t.x-e.radius<0&&(e.vx=-e.vx),t.y+e.radius>i.canvas.h?e.vy=-e.vy:t.y-e.radius<0&&(e.vy=-e.vy)}}if(i.interactivity.events.onhover.enable&&isInArray("repulse",i.interactivity.events.onhover.mode)&&"mousemove"==i.interactivity.status){var t=e.x-i.interactivity.mouse.pos_x,s=e.y-i.interactivity.mouse.pos_y,n=Math.sqrt(t*t+s*s),r={x:t/n,y:s/n},c=i.interactivity.modes.repulse.distance,o=100,l=clamp(1/c*(-1*Math.pow(n/c,2)+1)*c*o,0,50),v={x:e.x+r.x*l,y:e.y+r.y*l};"bounce"==i.particles.move.out_mode?(v.x-e.radius>0&&v.x+e.radius0&&v.y+e.radius=m&&a()}else 0==i.tmp.repulse_clicking&&(e.vx=e.vx_i,e.vy=e.vy_i)},i.fn.modes.grabParticle=function(e){if(i.interactivity.events.onhover.enable&&"mousemove"==i.interactivity.status){var a=e.x-i.interactivity.mouse.pos_x,t=e.y-i.interactivity.mouse.pos_y,s=Math.sqrt(a*a+t*t);if(s<=i.interactivity.modes.grab.distance){var n=i.interactivity.modes.grab.line_linked.opacity-s/(1/i.interactivity.modes.grab.line_linked.opacity)/i.interactivity.modes.grab.distance;if(n>0){var r=i.particles.line_linked.color_rgb_line;i.canvas.ctx.strokeStyle="rgba("+r.r+","+r.g+","+r.b+","+n+")",i.canvas.ctx.lineWidth=i.particles.line_linked.width,i.canvas.ctx.beginPath(),i.canvas.ctx.moveTo(e.x,e.y),i.canvas.ctx.lineTo(i.interactivity.mouse.pos_x,i.interactivity.mouse.pos_y),i.canvas.ctx.stroke(),i.canvas.ctx.closePath()}}}},i.fn.vendors.eventsListeners=function(){"window"==i.interactivity.detect_on?i.interactivity.el=window:i.interactivity.el=i.canvas.el,(i.interactivity.events.onhover.enable||i.interactivity.events.onclick.enable)&&(i.interactivity.el.addEventListener("mousemove",function(e){if(i.interactivity.el==window)var a=e.clientX,t=e.clientY;else var a=e.offsetX||e.clientX,t=e.offsetY||e.clientY;i.interactivity.mouse.pos_x=a,i.interactivity.mouse.pos_y=t,i.tmp.retina&&(i.interactivity.mouse.pos_x*=i.canvas.pxratio,i.interactivity.mouse.pos_y*=i.canvas.pxratio),i.interactivity.status="mousemove"}),i.interactivity.el.addEventListener("mouseleave",function(e){i.interactivity.mouse.pos_x=null,i.interactivity.mouse.pos_y=null,i.interactivity.status="mouseleave"})),i.interactivity.events.onclick.enable&&i.interactivity.el.addEventListener("click",function(){if(i.interactivity.mouse.click_pos_x=i.interactivity.mouse.pos_x,i.interactivity.mouse.click_pos_y=i.interactivity.mouse.pos_y,i.interactivity.mouse.click_time=(new Date).getTime(),i.interactivity.events.onclick.enable)switch(i.interactivity.events.onclick.mode){case"push":i.particles.move.enable?i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb,i.interactivity.mouse):1==i.interactivity.modes.push.particles_nb?i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb,i.interactivity.mouse):i.interactivity.modes.push.particles_nb>1&&i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb);break;case"remove":i.fn.modes.removeParticles(i.interactivity.modes.remove.particles_nb);break;case"bubble":i.tmp.bubble_clicking=!0;break;case"repulse":i.tmp.repulse_clicking=!0,i.tmp.repulse_count=0,i.tmp.repulse_finish=!1,setTimeout(function(){i.tmp.repulse_clicking=!1},1e3*i.interactivity.modes.repulse.duration)}})},i.fn.vendors.densityAutoParticles=function(){if(i.particles.number.density.enable){var e=i.canvas.el.width*i.canvas.el.height/1e3;i.tmp.retina&&(e/=2*i.canvas.pxratio);var a=e*i.particles.number.value/i.particles.number.density.value_area,t=i.particles.array.length-a;0>t?i.fn.modes.pushParticles(Math.abs(t)):i.fn.modes.removeParticles(t)}},i.fn.vendors.checkOverlap=function(e,a){for(var t=0;tv;v++)e.lineTo(i,0),e.translate(i,0),e.rotate(l);e.fill(),e.restore()},i.fn.vendors.exportImg=function(){window.open(i.canvas.el.toDataURL("image/png"),"_blank")},i.fn.vendors.loadImg=function(e){if(i.tmp.img_error=void 0,""!=i.particles.shape.image.src)if("svg"==e){var a=new XMLHttpRequest;a.open("GET",i.particles.shape.image.src),a.onreadystatechange=function(e){4==a.readyState&&(200==a.status?(i.tmp.source_svg=e.currentTarget.response,i.fn.vendors.checkBeforeDraw()):(console.log("Error pJS - Image not found"),i.tmp.img_error=!0))},a.send()}else{var t=new Image;t.addEventListener("load",function(){i.tmp.img_obj=t,i.fn.vendors.checkBeforeDraw()}),t.src=i.particles.shape.image.src}else console.log("Error pJS - No image.src"),i.tmp.img_error=!0},i.fn.vendors.draw=function(){"image"==i.particles.shape.type?"svg"==i.tmp.img_type?i.tmp.count_svg>=i.particles.number.value?(i.fn.particlesDraw(),i.particles.move.enable?i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw):cancelRequestAnimFrame(i.fn.drawAnimFrame)):i.tmp.img_error||(i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw)):void 0!=i.tmp.img_obj?(i.fn.particlesDraw(),i.particles.move.enable?i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw):cancelRequestAnimFrame(i.fn.drawAnimFrame)):i.tmp.img_error||(i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw)):(i.fn.particlesDraw(),i.particles.move.enable?i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw):cancelRequestAnimFrame(i.fn.drawAnimFrame))},i.fn.vendors.checkBeforeDraw=function(){"image"==i.particles.shape.type?"svg"==i.tmp.img_type&&void 0==i.tmp.source_svg?i.tmp.checkAnimFrame=requestAnimFrame(check):(cancelRequestAnimFrame(i.tmp.checkAnimFrame),i.tmp.img_error||(i.fn.vendors.init(),i.fn.vendors.draw())):(i.fn.vendors.init(),i.fn.vendors.draw())},i.fn.vendors.init=function(){i.fn.retinaInit(),i.fn.canvasInit(),i.fn.canvasSize(),i.fn.canvasPaint(),i.fn.particlesCreate(),i.fn.vendors.densityAutoParticles(),i.particles.line_linked.color_rgb_line=hexToRgb(i.particles.line_linked.color)},i.fn.vendors.start=function(){isInArray("image",i.particles.shape.type)?(i.tmp.img_type=i.particles.shape.image.src.substr(i.particles.shape.image.src.length-3),i.fn.vendors.loadImg(i.tmp.img_type)):i.fn.vendors.checkBeforeDraw()},i.fn.vendors.eventsListeners(),i.fn.vendors.start()};Object.deepExtend=function(e,a){for(var t in a)a[t]&&a[t].constructor&&a[t].constructor===Object?(e[t]=e[t]||{},arguments.callee(e[t],a[t])):e[t]=a[t];return e},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}(),window.cancelRequestAnimFrame=function(){return window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||clearTimeout}(),window.pJSDom=[],window.particlesJS=function(e,a){"string"!=typeof e&&(a=e,e="particles-js"),e||(e="particles-js");var t=document.getElementById(e),i="particles-js-canvas-el",s=t.getElementsByClassName(i);if(s.length)for(;s.length>0;)t.removeChild(s[0]);var n=document.createElement("canvas");n.className=i,n.style.width="100%",n.style.height="100%";var r=document.getElementById(e).appendChild(n);null!=r&&pJSDom.push(new pJS(e,a))},window.particlesJS.load=function(e,a,t){var i=new XMLHttpRequest;i.open("GET",a),i.onreadystatechange=function(a){if(4==i.readyState)if(200==i.status){var s=JSON.parse(a.currentTarget.response);window.particlesJS(e,s),t&&t()}else console.log("Error pJS - XMLHttpRequest status: "+i.status),console.log("Error pJS - File config not found")},i.send()}; -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | 3 | $('#menu').click(function () { 4 | $(this).toggleClass('fa-times'); 5 | $('.navbar').toggleClass('nav-toggle'); 6 | }); 7 | 8 | $(window).on('scroll load', function () { 9 | $('#menu').removeClass('fa-times'); 10 | $('.navbar').removeClass('nav-toggle'); 11 | 12 | if (window.scrollY > 60) { 13 | document.querySelector('#scroll-top').classList.add('active'); 14 | } else { 15 | document.querySelector('#scroll-top').classList.remove('active'); 16 | } 17 | 18 | // scroll spy 19 | $('section').each(function () { 20 | let height = $(this).height(); 21 | let offset = $(this).offset().top - 200; 22 | let top = $(window).scrollTop(); 23 | let id = $(this).attr('id'); 24 | 25 | if (top > offset && top < offset + height) { 26 | $('.navbar ul li a').removeClass('active'); 27 | $('.navbar').find(`[href="#${id}"]`).addClass('active'); 28 | } 29 | }); 30 | }); 31 | 32 | // smooth scrolling 33 | $('a[href*="#"]').on('click', function (e) { 34 | e.preventDefault(); 35 | $('html, body').animate({ 36 | scrollTop: $($(this).attr('href')).offset().top, 37 | }, 500, 'linear') 38 | }); 39 | 40 | // 41 | $("#contact-form").submit(function (event) { 42 | emailjs.init("user_TTDmetQLYgWCLzHTDgqxm"); 43 | 44 | emailjs.sendForm('contact_service', 'template_contact', '#contact-form') 45 | .then(function (response) { 46 | console.log('SUCCESS!', response.status, response.text); 47 | document.getElementById("contact-form").reset(); 48 | alert("Form Submitted Successfully"); 49 | }, function (error) { 50 | console.log('FAILED...', error); 51 | alert("Form Submission Failed! Try Again"); 52 | }); 53 | event.preventDefault(); 54 | }); 55 | // 56 | 57 | }); 58 | 59 | document.addEventListener('visibilitychange', 60 | function () { 61 | if (document.visibilityState === "visible") { 62 | document.title = "Portfolio | Jigar Sable"; 63 | $("#favicon").attr("href", "assets/images/favicon.png"); 64 | } 65 | else { 66 | document.title = "Come Back To Portfolio"; 67 | $("#favicon").attr("href", "assets/images/favhand.png"); 68 | } 69 | }); 70 | 71 | 72 | // 73 | var typed = new Typed(".typing-text", { 74 | strings: ["frontend development", "backend development", "web designing", "android development", "web development"], 75 | loop: true, 76 | typeSpeed: 50, 77 | backSpeed: 25, 78 | backDelay: 500, 79 | }); 80 | // 81 | 82 | async function fetchData(type = "skills") { 83 | let response 84 | type === "skills" ? 85 | response = await fetch("skills.json") 86 | : 87 | response = await fetch("./projects/projects.json") 88 | const data = await response.json(); 89 | return data; 90 | } 91 | 92 | function showSkills(skills) { 93 | let skillsContainer = document.getElementById("skillsContainer"); 94 | let skillHTML = ""; 95 | skills.forEach(skill => { 96 | skillHTML += ` 97 |
98 |
99 | skill 100 | ${skill.name} 101 |
102 |
` 103 | }); 104 | skillsContainer.innerHTML = skillHTML; 105 | } 106 | 107 | function showProjects(projects) { 108 | let projectsContainer = document.querySelector("#work .box-container"); 109 | let projectHTML = ""; 110 | projects.slice(0, 10).filter(project => project.category != "android").forEach(project => { 111 | projectHTML += ` 112 |
113 | project 114 |
115 |
116 |

${project.name}

117 |
118 |
119 |

${project.desc}

120 |
121 | View 122 | Code 123 |
124 |
125 |
126 |
` 127 | }); 128 | projectsContainer.innerHTML = projectHTML; 129 | 130 | // 131 | VanillaTilt.init(document.querySelectorAll(".tilt"), { 132 | max: 15, 133 | }); 134 | // 135 | 136 | /* ===== SCROLL REVEAL ANIMATION ===== */ 137 | const srtop = ScrollReveal({ 138 | origin: 'top', 139 | distance: '80px', 140 | duration: 1000, 141 | reset: true 142 | }); 143 | 144 | /* SCROLL PROJECTS */ 145 | srtop.reveal('.work .box', { interval: 200 }); 146 | 147 | } 148 | 149 | fetchData().then(data => { 150 | showSkills(data); 151 | }); 152 | 153 | fetchData("projects").then(data => { 154 | showProjects(data); 155 | }); 156 | 157 | // 158 | VanillaTilt.init(document.querySelectorAll(".tilt"), { 159 | max: 15, 160 | }); 161 | // 162 | 163 | 164 | // pre loader start 165 | // function loader() { 166 | // document.querySelector('.loader-container').classList.add('fade-out'); 167 | // } 168 | // function fadeOut() { 169 | // setInterval(loader, 500); 170 | // } 171 | // window.onload = fadeOut; 172 | // pre loader end 173 | 174 | // disable developer mode 175 | document.onkeydown = function (e) { 176 | if (e.keyCode == 123) { 177 | return false; 178 | } 179 | if (e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) { 180 | return false; 181 | } 182 | if (e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) { 183 | return false; 184 | } 185 | if (e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) { 186 | return false; 187 | } 188 | if (e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) { 189 | return false; 190 | } 191 | } 192 | 193 | // Start of Tawk.to Live Chat 194 | var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date(); 195 | (function () { 196 | var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0]; 197 | s1.async = true; 198 | s1.src = 'https://embed.tawk.to/60df10bf7f4b000ac03ab6a8/1f9jlirg6'; 199 | s1.charset = 'UTF-8'; 200 | s1.setAttribute('crossorigin', '*'); 201 | s0.parentNode.insertBefore(s1, s0); 202 | })(); 203 | // End of Tawk.to Live Chat 204 | 205 | 206 | /* ===== SCROLL REVEAL ANIMATION ===== */ 207 | const srtop = ScrollReveal({ 208 | origin: 'top', 209 | distance: '80px', 210 | duration: 1000, 211 | reset: true 212 | }); 213 | 214 | /* SCROLL HOME */ 215 | srtop.reveal('.home .content h3', { delay: 200 }); 216 | srtop.reveal('.home .content p', { delay: 200 }); 217 | srtop.reveal('.home .content .btn', { delay: 200 }); 218 | 219 | srtop.reveal('.home .image', { delay: 400 }); 220 | srtop.reveal('.home .linkedin', { interval: 600 }); 221 | srtop.reveal('.home .github', { interval: 800 }); 222 | srtop.reveal('.home .twitter', { interval: 1000 }); 223 | srtop.reveal('.home .telegram', { interval: 600 }); 224 | srtop.reveal('.home .instagram', { interval: 600 }); 225 | srtop.reveal('.home .dev', { interval: 600 }); 226 | 227 | /* SCROLL ABOUT */ 228 | srtop.reveal('.about .content h3', { delay: 200 }); 229 | srtop.reveal('.about .content .tag', { delay: 200 }); 230 | srtop.reveal('.about .content p', { delay: 200 }); 231 | srtop.reveal('.about .content .box-container', { delay: 200 }); 232 | srtop.reveal('.about .content .resumebtn', { delay: 200 }); 233 | 234 | 235 | /* SCROLL SKILLS */ 236 | srtop.reveal('.skills .container', { interval: 200 }); 237 | srtop.reveal('.skills .container .bar', { delay: 400 }); 238 | 239 | /* SCROLL EDUCATION */ 240 | srtop.reveal('.education .box', { interval: 200 }); 241 | 242 | /* SCROLL PROJECTS */ 243 | srtop.reveal('.work .box', { interval: 200 }); 244 | 245 | /* SCROLL EXPERIENCE */ 246 | srtop.reveal('.experience .timeline', { delay: 400 }); 247 | srtop.reveal('.experience .timeline .container', { interval: 400 }); 248 | 249 | /* SCROLL CONTACT */ 250 | srtop.reveal('.contact .container', { delay: 400 }); 251 | srtop.reveal('.contact .container .form-group', { delay: 400 }); -------------------------------------------------------------------------------- /experience/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Experience | Portfolio Jigar Sable 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 32 |
33 | 34 | 35 | 36 |
37 | 38 |

Experience

39 |
40 | every experience in your life is being orchestrated to teach you something you need to know to move forward. 41 |
42 | 43 |
44 | 45 |
46 |
47 |
48 |

Self Employed

49 |
50 |
51 |

Full Stack Developer

52 |

Oct 2021 - present

53 |
54 |
55 |
56 | 57 |
58 |
59 |
60 |

DevIncept (Top Contributor)

61 |
62 |
63 |

DCP 2021 Contributor | Open Source Program

64 |

July 2021 - October 2021

65 |
66 |
67 |
68 | 69 |
70 |
71 |
72 |

LetsGrowMore Summer of Code

73 |
74 |
75 |

LGM-SOC'21 Participant | Open Source Program

76 |

June 2021 - August 2021

77 |
78 |
79 |
80 | 81 |
82 |
83 |
84 |

Mapstreak Flyseas

85 |
86 |
87 |

Web Developer | Internship

88 |

June 2021 - Dec 2021

89 |
90 |
91 |
92 | 93 |
94 |
95 |
96 |

The Spark Foundation

97 |
98 |
99 |

Website Developer | Internship

100 |

May 2021 - June 2021

101 |
102 |
103 |
104 | 105 |
106 |
107 |
108 |

The Spark Foundation

109 |
110 |
111 |

Mobile Application Developer | Internship

112 |

April 2021 - May 2021

113 |
114 |
115 |
116 | 117 |
118 |
119 |
120 |

Frshr Technologies

121 |
122 |
123 |

Wordpress Developer | Internship

124 |

April 2021 - April 2021

125 |
126 |
127 |
128 | 129 |
130 |
131 |
132 |

WonderingBlog

133 |
134 |
135 |

Web Development & SEO | Internship

136 |

March 2021 - April 2021

137 |
138 |
139 |
140 | 141 |
142 |
143 |
144 |

Hacktoberfest 2020

145 |
146 |
147 |

Contributor | Open Source Program

148 |

October 2020 - November 2020

149 |
150 |
151 |
152 | 153 |
154 | 155 |
156 | 157 | 158 | Back to Home 159 | 160 |
161 | 162 | 163 |
164 | 165 | 166 | 167 |
168 | 169 |
170 | 171 |
172 |

Jigar's Portfolio

173 |

Thank you for visiting my personal portfolio website. Connect with me over socials.

Keep Rising 🚀. Connect with me over live chat!

174 |
175 | 176 |
177 |

quick links

178 | home 179 | about 180 | skills 181 | education 182 | work 183 | experience 184 |
185 | 186 |
187 |

contact info

188 |

+91 704-302-4736

189 |

jigarsable21@gmail.com

190 |

Pune, India-412206

191 | 199 |
200 |
201 | 202 |

Designed with by jigar sable

203 | 204 |
205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | -------------------------------------------------------------------------------- /experience/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | $('#menu').click(function(){ 4 | $(this).toggleClass('fa-times'); 5 | $('.navbar').toggleClass('nav-toggle'); 6 | }); 7 | 8 | $(window).on('scroll load',function(){ 9 | $('#menu').removeClass('fa-times'); 10 | $('.navbar').removeClass('nav-toggle'); 11 | 12 | if(window.scrollY>60){ 13 | document.querySelector('#scroll-top').classList.add('active'); 14 | }else{ 15 | document.querySelector('#scroll-top').classList.remove('active'); 16 | } 17 | }); 18 | }); 19 | 20 | /* ===== SCROLL REVEAL ANIMATION ===== */ 21 | const srtop = ScrollReveal({ 22 | origin: 'top', 23 | distance: '80px', 24 | duration: 1000, 25 | reset: true 26 | }); 27 | 28 | /* SCROLL EXPERIENCE */ 29 | srtop.reveal('.experience .timeline',{delay: 400}); 30 | srtop.reveal('.experience .timeline .container',{interval: 400}); 31 | 32 | 33 | // Start of Tawk.to Live Chat 34 | var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date(); 35 | (function(){ 36 | var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0]; 37 | s1.async=true; 38 | s1.src='https://embed.tawk.to/60df10bf7f4b000ac03ab6a8/1f9jlirg6'; 39 | s1.charset='UTF-8'; 40 | s1.setAttribute('crossorigin','*'); 41 | s0.parentNode.insertBefore(s1,s0); 42 | })(); 43 | // End of Tawk.to Live Chat 44 | 45 | 46 | // disable developer mode 47 | document.onkeydown = function(e) { 48 | if(e.keyCode == 123) { 49 | return false; 50 | } 51 | if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) { 52 | return false; 53 | } 54 | if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) { 55 | return false; 56 | } 57 | if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) { 58 | return false; 59 | } 60 | if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) { 61 | return false; 62 | } 63 | } 64 | 65 | document.addEventListener('visibilitychange', 66 | function(){ 67 | if(document.visibilityState === "visible"){ 68 | document.title = "Experience | Portfolio Jigar Sable"; 69 | $("#favicon").attr("href","/assets/images/favicon.png"); 70 | } 71 | else { 72 | document.title = "Come Back To Portfolio"; 73 | $("#favicon").attr("href","/assets/images/favhand.png"); 74 | } 75 | }); -------------------------------------------------------------------------------- /experience/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"); 2 | @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap'); 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | text-decoration: none; 9 | outline: none; border: none; 10 | text-transform:capitalize; 11 | transition: all .2s linear; 12 | } 13 | html{ 14 | font-size: 62.5%; 15 | overflow-x: hidden; 16 | scroll-behavior: smooth; 17 | } 18 | body{ 19 | background: #f7f7f7; 20 | font-family: 'Poppins', sans-serif; 21 | } 22 | 23 | *::selection{ 24 | background: #2b3dda; 25 | color: #fff; 26 | } 27 | 28 | html{ 29 | font-size: 62.5%; 30 | overflow-x: hidden; 31 | } 32 | html::-webkit-scrollbar{ 33 | width: .8rem; 34 | } 35 | html::-webkit-scrollbar-track{ 36 | background: rgb(235, 202, 245); 37 | } 38 | html::-webkit-scrollbar-thumb{ 39 | background: #420177; 40 | } 41 | 42 | /* navbar starts */ 43 | header{ 44 | position: fixed; 45 | top: 0; left: 0; right: 0; 46 | z-index: 1000; 47 | display: flex; 48 | align-items: center; 49 | justify-content: space-between; 50 | padding: 1.7rem 10%; 51 | height: 6.5rem; 52 | background-color: #fff; 53 | box-shadow: 0 1px 4px rgba(146,161,176,.3); 54 | } 55 | section{ 56 | min-height: 100vh; 57 | padding: 2rem 9%; 58 | } 59 | .heading{ 60 | font-size: 3.5rem; 61 | color: rgb(20, 20, 20); 62 | font-weight: 800; 63 | text-align: center; 64 | } 65 | .heading span{ 66 | color: rgb(115, 3, 167); 67 | } 68 | header .logo{ 69 | font-size: 1.9rem; 70 | font-weight: 800; 71 | text-decoration: none; 72 | color: #0E2431; 73 | } 74 | header .logo i { 75 | font-size: 2.2rem; 76 | } 77 | header .logo:hover { 78 | color: #fc8c05; 79 | } 80 | header .navbar ul{ 81 | list-style: none; 82 | display: flex; 83 | justify-content: center; 84 | align-items: center; 85 | } 86 | header .navbar li{ 87 | margin-left: 2.5rem; 88 | } 89 | header .navbar ul li a{ 90 | font-size: 1.57rem; 91 | color: #0E2431; 92 | font-weight: 600; 93 | text-decoration: none; 94 | letter-spacing: 0.04rem; 95 | } 96 | header .navbar ul li a.active, 97 | header .navbar ul li a:hover{ 98 | color: #011aff; 99 | border-bottom: .2rem solid #011aff; 100 | padding: .5rem 0; 101 | } 102 | /* navbar ends */ 103 | 104 | /* hamburger icon starts*/ 105 | #menu{ 106 | font-size: 3rem; 107 | cursor: pointer; 108 | color: rgb(24, 2, 63); 109 | display: none; 110 | } 111 | @media(max-width:768px){ 112 | #menu{ 113 | display: block; 114 | } 115 | header .navbar{ 116 | position: fixed; 117 | top: 6.5rem; right: -120%; 118 | width: 75%; 119 | height: 100%; 120 | text-align: left; 121 | align-items: flex-start; 122 | background-color: #0e0f31; 123 | } 124 | header .navbar ul{ 125 | flex-flow: column; 126 | padding: 1rem; 127 | } 128 | header .navbar ul li{ 129 | text-align: center; 130 | width: 100%; 131 | margin: 1rem 0; 132 | border-radius: .5rem; 133 | width: 26rem; 134 | } 135 | header .navbar ul li a{ 136 | display: block; 137 | padding: 1rem; 138 | text-align: left; 139 | color: #fff; 140 | font-size: 2rem; 141 | } 142 | header .navbar ul li a.active, 143 | header .navbar ul li a:hover{ 144 | padding: 1rem; 145 | color: #fff; 146 | border-radius: .5rem; 147 | border-bottom: .5rem solid #011aff; 148 | } 149 | .fa-times{ 150 | transform: rotate(180deg); 151 | } 152 | header .navbar.nav-toggle{ 153 | right: 0; 154 | } 155 | } 156 | /* hamburger icon ends */ 157 | 158 | /* experience section starts */ 159 | .experience { 160 | margin-top: 5rem; 161 | } 162 | .experience .quote { 163 | text-align: center; 164 | font-size: 1.5rem; 165 | font-weight: 600; 166 | } 167 | .experience .timeline { 168 | position: relative; 169 | max-width: 1200px; 170 | margin: 2rem auto; 171 | } 172 | .experience .timeline::after { 173 | content: ''; 174 | position: absolute; 175 | width: 6px; 176 | background: #020133; 177 | top: 0; 178 | bottom: 0; 179 | left: 50%; 180 | margin-left: -3px; 181 | z-index: -2; 182 | } 183 | .experience .container { 184 | padding: 10px 40px; 185 | position: relative; 186 | background-color: inherit; 187 | width: 50%; 188 | } 189 | /*circles on timeline*/ 190 | .experience .container::after { 191 | content: "\f0b1"; 192 | position: absolute; 193 | width: 25px; 194 | height: 25px; 195 | right: -17px; 196 | background-color: rgb(255, 255, 255); 197 | border: 4px solid #f68c09; 198 | top: 15px; 199 | border-radius: 50%; 200 | z-index: 100; 201 | font-size: 1.89rem; 202 | text-align: center; 203 | font-weight: 600; 204 | color:#02094b; 205 | font-family: 'Font Awesome\ 5 Free'; 206 | } 207 | .experience .left { 208 | left: 0; 209 | } 210 | .experience .right { 211 | left: 50%; 212 | } 213 | /* arrows pointing right */ 214 | .experience .left::before { 215 | content: " "; 216 | height: 0; 217 | position: absolute; 218 | top: 22px; 219 | width: 0; 220 | z-index: 1; 221 | right: 30px; 222 | border: medium solid #f68c09; 223 | border-width: 10px 0 10px 10px; 224 | border-color: transparent transparent transparent #f68c09; 225 | } 226 | /* arrows pointing left */ 227 | .experience .right::before { 228 | content: " "; 229 | height: 0; 230 | position: absolute; 231 | top: 22px; 232 | width: 0; 233 | z-index: 1; 234 | left: 30px; 235 | border: medium solid #f68c09; 236 | border-width: 10px 10px 10px 0; 237 | border-color: transparent #f68c09 transparent transparent; 238 | } 239 | .experience .right::after { 240 | left: -16px; 241 | } 242 | .experience .content { 243 | background-color: #f68c09; 244 | position: relative; 245 | border-radius: 6px; 246 | } 247 | .experience .content .tag{ 248 | font-size: 1.3rem; 249 | padding-top: 1.5rem; 250 | padding-left: 1.5rem; 251 | } 252 | .experience .content .desc{ 253 | margin-left: 1.5rem; 254 | padding-bottom: 1rem; 255 | } 256 | .experience .content .desc h3{ 257 | font-size: 1.5rem; 258 | font-weight: 600; 259 | } 260 | .experience .content .desc p{ 261 | font-size: 1.2rem; 262 | } 263 | /* view all button */ 264 | .morebtn{ 265 | display: flex; 266 | justify-content: center; 267 | margin-bottom: 2rem; 268 | } 269 | .morebtn .btn { 270 | position: relative; 271 | line-height: 0; 272 | padding: 1.6rem 3rem; 273 | border-radius: .5em; 274 | transition: 0.5s; 275 | color: #fff; 276 | background: #2506ad; 277 | box-shadow: 0px 5px 10px rgba(48, 68, 247, .6); 278 | text-align: center; 279 | } 280 | .morebtn .btn span { 281 | font-weight: 600; 282 | font-size: 1.7rem; 283 | font-family: 'Nunito', sans-serif; 284 | } 285 | .morebtn .btn i { 286 | margin-right: 0.5rem; 287 | font-size: 1.5rem; 288 | transition: 0.3s; 289 | } 290 | .morebtn .btn:hover{ 291 | background: #1a047e; 292 | } 293 | .morebtn .btn:hover i { 294 | transform: translateX(-8px); 295 | } 296 | 297 | /* Media queries - Responsive timeline on screens less than 600px wide */ 298 | @media screen and (max-width: 600px) { 299 | .experience .timeline::after { 300 | left: 31px; 301 | } 302 | .experience .container { 303 | width: 100%; 304 | padding-left: 70px; 305 | padding-right: 25px; 306 | } 307 | .experience .container::before { 308 | left: 60px; 309 | border: medium solid #f68c09; 310 | border-width: 10px 10px 10px 0; 311 | border-color: transparent #f68c09 transparent transparent; 312 | } 313 | .experience .left::after { 314 | left: 15px; 315 | } 316 | .experience .right::after { 317 | left: 15px; 318 | } 319 | .experience .right { 320 | left: 0%; 321 | } 322 | .experience .container::after { 323 | font-size: 2.2rem;; 324 | } 325 | } 326 | /* experience media queries ends */ 327 | /* experience section ends */ 328 | 329 | 330 | /* footer section starts */ 331 | .footer{ 332 | min-height: auto; 333 | padding-top: 0; 334 | background: rgb(0, 1, 43); 335 | } 336 | .footer .box-container{ 337 | display: flex; 338 | justify-content: center; 339 | flex-wrap: wrap; 340 | } 341 | .footer .box-container .box{ 342 | flex: 1 1 25rem; 343 | margin: 2rem; 344 | } 345 | .footer .box-container .box h3{ 346 | font-size: 2.5rem; 347 | color: #fff; 348 | padding-bottom: 1rem; 349 | font-weight: normal; 350 | } 351 | .footer .box-container .box p{ 352 | font-size: 1.5rem; 353 | color: #ccc; 354 | padding: .7rem 0; 355 | text-transform: none; 356 | } 357 | .footer .box-container .box p i{ 358 | padding-right: 1rem; 359 | color: #ffae00; 360 | } 361 | .footer .box-container .box a{ 362 | font-size: 1.5rem; 363 | color: rgb(238, 238, 238); 364 | padding: .3rem 0; 365 | display: block; 366 | } 367 | .footer .box-container .box a:hover{ 368 | color: #ffae00; 369 | } 370 | .footer .box-container .box .share{ 371 | display: flex; 372 | flex-wrap: wrap; 373 | padding: 1rem 0; 374 | } 375 | .footer .box-container .box .share a{ 376 | height: 4rem; 377 | width: 4rem; 378 | padding: 1rem; 379 | text-align: center; 380 | border-radius: 5rem; 381 | font-size: 1.7rem; 382 | margin-right: 1rem; 383 | transition: .2s; 384 | background: rgb(230, 230, 230); 385 | color: #02094b; 386 | border: none; 387 | } 388 | .footer .box-container .box .share a:hover{ 389 | background: transparent; 390 | transform: scale(0.98); 391 | border: .1rem solid rgb(180, 178, 178); 392 | color: #ffae00; 393 | } 394 | .footer .credit{ 395 | padding: 1rem 0 0 0; 396 | text-align: center; 397 | font-size: 1.5rem; 398 | font-family: 'Nunito',sans-serif; 399 | font-weight: 600; 400 | color: #fff; 401 | border-top: .1rem solid #fff3; 402 | } 403 | .footer .credit a{ 404 | color: #ffae00; 405 | } 406 | .footer .fa{ 407 | color: #E90606; 408 | margin: 0 .3rem; 409 | font-size: 1.5rem; 410 | animation: pound .35s infinite alternate; 411 | } 412 | @-webkit-keyframes pound{ 413 | to{ 414 | transform: scale(1.1); 415 | } 416 | } 417 | @keyframes pound{ 418 | to{ 419 | transform: scale(1.1); 420 | } 421 | } 422 | @media(max-width:450px){ 423 | .footer .box-container .box{ 424 | margin: 2rem; 425 | } 426 | .footer .box-container .box p{ 427 | padding: 0.7rem; 428 | } 429 | .footer .box-container .box .share a{ 430 | padding: 1.1rem; 431 | } 432 | } 433 | /* footer section ends */ 434 | 435 | /* common media queries starts*/ 436 | @media(max-width:450px){ 437 | html{ 438 | font-size: 55%; 439 | } 440 | body{ 441 | padding-right: 0; 442 | } 443 | section{ 444 | padding: 2rem; 445 | } 446 | } 447 | /* common media queries ends*/ 448 | 449 | 450 | /* scroll top starts */ 451 | #scroll-top{ 452 | position: fixed; 453 | top: -140%; 454 | right: 2rem; 455 | padding: 1rem 1.5rem; 456 | font-size: 2rem; 457 | background: #ffae00; 458 | color: rgb(13, 0, 44); 459 | border-radius: 5rem; 460 | transition: 1s linear; 461 | z-index: 1000; 462 | } 463 | #scroll-top.active{ 464 | top: calc(100% - 12rem); 465 | } 466 | /* scroll top ends */ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Portfolio | Jigar Sable 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 40 |
41 | 42 | 43 | 44 | 45 |
46 |
47 | 48 |
49 |

Hi There,
I'm Jigar Sable

50 |

i am into

51 | About Me 52 | 53 | 54 |
55 | 63 |
64 |
65 |
66 | 67 |
68 |
69 | 70 | 71 | 72 | 73 |
74 |

About Me

75 | 76 |
77 | 78 |
79 | 80 |
81 |
82 |

I'm Jigar

83 | Full Stack Developer 84 | 85 |

I am a Full-Stack developer based in Pune, India. 86 | I am an Information Technology undergraduate from SPPU. 87 | I am very passionate about improving my coding skills & developing applications & websites. 88 | I build WebApps and Websites using MERN Stack. 89 | Working for myself to improve my skills. 90 | Love to build Full-Stack clones.

91 | 92 |
93 | 97 |
98 |

email : jigarsable21@gmail.com

99 |

place : Pune, India - 412206

100 |
101 |
102 | 103 |
104 | Resume 105 | 106 | 107 |
108 | 109 |
110 |
111 |
112 | 113 | 114 | 115 |
116 | 117 |

Skills & Abilities

118 | 119 |
120 |
121 | 122 | 128 | 129 |
130 |
131 |
132 | 133 | 134 | 135 | 136 |
137 | 138 |

My Education

139 | 140 |

Education is not the learning of facts, but the training of the mind to think.

141 | 142 |
143 | 144 |
145 |
146 | 147 |
148 |
149 |

Bachelor of Engineering in Information Technology

150 |

Zeal College of engineering and research | SPPU

151 |

2020-2024 | Pursuing

152 |
153 |
154 | 155 |
156 |
157 | 158 |
159 |
160 |

HSC Science | Informatic Practices

161 |

Shri L. G. Haria Multipurpose School | CBSE

162 |

2018-2020 | Completed

163 |
164 |
165 | 166 |
167 |
168 | 169 | 170 | 171 | 172 |
173 | 174 |

Projects Made

175 | 176 |
177 | 178 | 193 | 194 |
195 | 196 |
197 | View All 198 | 199 | 200 |
201 | 202 |
203 | 204 | 205 | 206 |
207 | 208 |

Experience

209 | 210 |
211 | 212 |
213 |
214 |
215 |

Self Employed

216 |
217 |
218 |

Full Stack Developer

219 |

Oct 2021 - present

220 |
221 |
222 |
223 | 224 |
225 |
226 |
227 |

Mapstreak Flyseas

228 |
229 |
230 |

Web Developer | Internship

231 |

June 2021 - Dec 2021

232 |
233 |
234 |
235 | 236 |
237 |
238 |
239 |

The Spark Foundation

240 |
241 |
242 |

Website Developer | Internship

243 |

May 2021 - June 2021

244 |
245 |
246 |
247 | 248 |
249 |
250 |
251 |

The Spark Foundation

252 |
253 |
254 |

Mobile Application Developer | Internship

255 |

April 2021 - May 2021

256 |
257 |
258 |
259 | 260 |
261 |
262 |
263 |

Frshr Technologies

264 |
265 |
266 |

Wordpress Developer | Internship

267 |

April 2021 - April 2021

268 |
269 |
270 |
271 | 272 |
273 |
274 |
275 |

WonderingBlog

276 |
277 |
278 |

Web Development & SEO | Internship

279 |

March 2021 - April 2021

280 |
281 |
282 |
283 |
284 | 285 |
286 | View All 287 | 288 | 289 |
290 | 291 | 292 | 293 |
294 | 295 | 296 | 297 |
298 | 299 |

Get in Touch

300 | 301 |
302 |
303 |
304 | 305 |
306 |
307 | 308 |
309 |
310 | 311 | 312 |
313 |
314 | 315 | 316 |
317 |
318 | 319 | 320 |
321 |
322 | 323 | 324 |
325 |
326 |
327 | 329 |
330 |
331 |
332 |
333 |
334 | 335 | 336 | 337 | 338 |
339 | 340 |
341 | 342 |
343 |

Jigar's Portfolio

344 |

Thank you for visiting my personal portfolio website. Connect with me over socials.

Keep Rising 🚀. Connect with me over live chat!

345 |
346 | 347 |
348 |

quick links

349 | home 350 | about 351 | skills 352 | education 353 | work 354 | experience 355 |
356 | 357 |
358 |

contact info

359 |

+91 XXX-XXX-XXXX

360 |

jigarsable21@gmail.com

361 |

Pune, India-412206

362 | 370 |
371 |
372 | 373 |

Designed with by jigar sable

374 | 375 |
376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | -------------------------------------------------------------------------------- /projects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Projects | Portfolio Jigar Sable 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 31 |
32 | 33 | 34 | 35 |
36 | 37 |

Projects Made

38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 |
46 | 47 |
48 | 49 | 64 | 65 |
66 | 67 |
68 | 69 | 70 | Back to Home 71 | 72 |
73 | 74 |
75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /projects/projects.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "NotyStack Android", 4 | "desc": "Fully fledged android CRUD app based on different design patterns. Built using Java, XML, SQLite, Firebase, RoomDB, MVVM.", 5 | "image": "notystackandroid", 6 | "category": "android", 7 | "links": { 8 | "view": "https://www.linkedin.com/posts/jigar-sable_androiddev-androidstudio-java-activity-6955224473822199808-JT0j", 9 | "code": "https://github.com/jigar-sable/notystack-android" 10 | } 11 | }, 12 | { 13 | "name": "SPPU Engg Prep", 14 | "desc": "All in one SPPU Engineering resources. Built using Java, XML and Firebase.", 15 | "image": "sppuprepandroid", 16 | "category": "android", 17 | "links": { 18 | "view": "https://www.linkedin.com/posts/jigar-sable_androiddev-androidstudio-java-activity-6955224473822199808-JT0j", 19 | "code": "https://github.com/jigar-sable/sppu-prep-android" 20 | } 21 | }, 22 | { 23 | "name": "NewsBox Android", 24 | "desc": "Native android app built using Java, XML. Retrofit & Glide dependencies. Provides different category news.", 25 | "image": "newsboxandroid", 26 | "category": "android", 27 | "links": { 28 | "view": "https://www.linkedin.com/posts/jigar-sable_androiddev-androidstudio-java-activity-6955224473822199808-JT0j", 29 | "code": "https://github.com/jigar-sable/newsbox-android" 30 | } 31 | }, 32 | { 33 | "name": "Weatherly Android", 34 | "desc": "Native android app built using Java, XML and Volley dependencies. Provides weather forecast.", 35 | "image": "weatherlyandroid", 36 | "category": "android", 37 | "links": { 38 | "view": "https://www.linkedin.com/posts/jigar-sable_androiddev-androidstudio-java-activity-6955224473822199808-JT0j", 39 | "code": "https://github.com/jigar-sable/weatherly-android" 40 | } 41 | }, 42 | { 43 | "name": "Instagram MERN", 44 | "desc": "Full-Stack Instagram clone built using MERN stack and realtime chat with the help of socket.iO", 45 | "image": "instagrammern", 46 | "category": "mern", 47 | "links": { 48 | "view": "https://instagramernstack.herokuapp.com/", 49 | "code": "https://github.com/jigar-sable/instagram-mern" 50 | } 51 | }, 52 | { 53 | "name": "Flipkart MERN", 54 | "desc": "Full-Stack Flipkart with Admin Dashboard and Paytm Payment Gateway. MERN Stack WebApp, ready to use for business.", 55 | "image": "flipkartmern", 56 | "category": "mern", 57 | "links": { 58 | "view": "https://flipkartwebs.herokuapp.com/", 59 | "code": "https://github.com/jigar-sable/flipkart-mern" 60 | } 61 | }, 62 | { 63 | "name": "ResumeGen", 64 | "desc": "ReactJS Basic Resume Generator which will generate customized resume in few minutes on your requirements.", 65 | "image": "resumegen", 66 | "category": "mern", 67 | "links": { 68 | "view": "https://resumegenx.netlify.app/", 69 | "code": "https://github.com/jigar-sable/resumegen" 70 | } 71 | }, 72 | { 73 | "name": "React-Projects", 74 | "desc": "Full-Stack project dashboard which is collection of projects built on the React library.", 75 | "image": "reactprojects", 76 | "category": "mern", 77 | "links": { 78 | "view": "https://reactjsprojects.herokuapp.com/", 79 | "code": "https://github.com/jigar-sable/React-Projects" 80 | } 81 | }, 82 | { 83 | "name": "Flipkart PHP", 84 | "desc": "Full-Stack Flipkart Clone Using LAMP Stack. With all major features and OTP authentication and Cashfree payment gateway.", 85 | "image": "flipkartphp", 86 | "category": "lamp", 87 | "links": { 88 | "view": "https://github.com/jigar-sable/Flipkart-Clone-PHP", 89 | "code": "https://github.com/jigar-sable/Flipkart-Clone-PHP" 90 | } 91 | }, 92 | { 93 | "name": "JavaScript Projects Website", 94 | "desc": "This website is specially build to showcase all major javaScript projects. All my javaScript based projects are in it.", 95 | "image": "jspro", 96 | "category": "basicweb", 97 | "links": { 98 | "view": "https://jigar-sable.github.io/JavaScript-Projects", 99 | "code": "https://github.com/jigar-sable/JavaScript-Projects" 100 | } 101 | }, 102 | { 103 | "name": "Web UI Clones", 104 | "desc": "Flipkart, YouTube, Instagram, Sololearn web UI clones using tailwindCSS.", 105 | "image": "webuiclones", 106 | "category": "mern", 107 | "links": { 108 | "view": "https://github.com/jigar-sable/web-ui-clones", 109 | "code": "https://github.com/jigar-sable/web-ui-clones" 110 | } 111 | }, 112 | { 113 | "name": "Crypto Tracker", 114 | "desc": "Crypto Tracker built using ReactJS and Chakra UI. Supports dark mode. API used coingecko.", 115 | "image": "cryptotracker", 116 | "category": "mern", 117 | "links": { 118 | "view": "https://crypto-tracker-react-project.netlify.app/", 119 | "code": "https://github.com/jigar-sable/React-Projects/tree/main/crypto-tracker" 120 | } 121 | }, 122 | { 123 | "name": "Hulu Website", 124 | "desc": "Hulu website built using NextJS and tailwindCSS. API used TMDB, deployed on vercel.", 125 | "image": "hulu", 126 | "category": "mern", 127 | "links": { 128 | "view": "https://hulu-clone-jigar-sable.vercel.app/", 129 | "code": "https://github.com/jigar-sable/React-Projects/tree/main/hulu-clone" 130 | } 131 | }, 132 | { 133 | "name": "Portfolio Website", 134 | "desc": "Personal Portfolio Website. Don't Need Much Info About It, Just Scroll Down. You're Here Only!", 135 | "image": "portfolio1", 136 | "category": "basicweb", 137 | "links": { 138 | "view": "#", 139 | "code": "https://github.com/jigar-sable/Portfolio-Website" 140 | } 141 | }, 142 | { 143 | "name": "Composey Website", 144 | "desc": "Simple landing page website built using HTML, CSS, JavaScript and some JavaScript Libraries.", 145 | "image": "composey", 146 | "category": "basicweb", 147 | "links": { 148 | "view": "https://composey.netlify.app/", 149 | "code": "https://github.com/jigar-sable/LGMVIP-WebDev" 150 | } 151 | }, 152 | { 153 | "name": "Webview App", 154 | "desc": "It's an android app which uses web view component for displaying content. This app provides many different features.", 155 | "image": "webviewapp", 156 | "category": "android", 157 | "links": { 158 | "view": "https://github.com/jigar-sable/Android-Webview#webapp--android-webview-app", 159 | "code": "https://github.com/jigar-sable/Android-Webview" 160 | } 161 | }, 162 | { 163 | "name": "PHP Banking Website", 164 | "desc": "Basic Banking System based on PHP and MySQL database. Made with HTML, CSS, JavaScript and backend with PHP.", 165 | "image": "tsfbank", 166 | "category": "lamp", 167 | "links": { 168 | "view": "https://tsfbank.rf.gd", 169 | "code": "https://github.com/jigar-sable/TSF-Bank" 170 | } 171 | }, 172 | { 173 | "name": "Bootstrap Portfolio", 174 | "desc": "Portfolio built using HTML, CSS, Bootstrap, SASS and JavaScript. Customized Bootstrap using SCSS.", 175 | "image": "bootstrapportfolio", 176 | "category": "basicweb", 177 | "links": { 178 | "view": "#", 179 | "code": "#" 180 | } 181 | }, 182 | { 183 | "name": "Bootstrap Template", 184 | "desc": "Basic website template built using HTML and Bootstrap.", 185 | "image": "bootstraptemplate", 186 | "category": "basicweb", 187 | "links": { 188 | "view": "#", 189 | "code": "#" 190 | } 191 | }, 192 | { 193 | "name": "Foodicious", 194 | "desc": "Basic food website landing page built using HTML, CSS and JavaScript.", 195 | "image": "foodicious", 196 | "category": "basicweb", 197 | "links": { 198 | "view": "#", 199 | "code": "#" 200 | } 201 | }, 202 | { 203 | "name": "Food Website", 204 | "desc": "Basic food website landing page built using HTML, CSS, SASS, Bootstrap and jQuery.", 205 | "image": "foodwebsite", 206 | "category": "basicweb", 207 | "links": { 208 | "view": "#", 209 | "code": "#" 210 | } 211 | }, 212 | { 213 | "name": "WebChat Website", 214 | "desc": "It's a web based chat app made using popular javaScript library Socket IO. Allows multiple users to connect.", 215 | "image": "webchat", 216 | "category": "mern", 217 | "links": { 218 | "view": "https://github.com/jigar-sable/WebChat#webchat", 219 | "code": "https://github.com/jigar-sable/WebChat" 220 | } 221 | }, 222 | { 223 | "name": "Basic Banking App", 224 | "desc": "It's an android app which uses SQLite to store user accounts data. It provides feature to simply transact amount.", 225 | "image": "basicbank", 226 | "category": "android", 227 | "links": { 228 | "view": "https://github.com/jigar-sable/Basic_Banking_App#basic-banking-app", 229 | "code": "https://github.com/jigar-sable/Basic_Banking_App" 230 | } 231 | }, 232 | { 233 | "name": "JavaScript Issue Tracker", 234 | "desc": "It provides the feature to Assign Issue With The Auto Generated Id By Using ChanceJS. Uses Local Storage.", 235 | "image": "issuetrack", 236 | "category": "basicweb", 237 | "links": { 238 | "view": "https://jigar-sable.github.io/JavaScript-Projects/projects/issuetracker", 239 | "code": "https://github.com/jigar-sable/JavaScript-Projects/tree/main/projects/issuetracker" 240 | } 241 | }, 242 | { 243 | "name": "PHP PBL Portal", 244 | "desc": "A simple portal in which students can submit their PBL projects and faculties can view by access admin panel.", 245 | "image": "phppblform", 246 | "category": "lamp", 247 | "links": { 248 | "view": "https://github.com/jigar-sable/PHP-Projects/tree/main/pblform#pbl-portal", 249 | "code": "https://github.com/jigar-sable/PHP-Projects/tree/main/pblform" 250 | } 251 | }, 252 | { 253 | "name": "Link List", 254 | "desc": "All major profile links in a single website. It's just like clone of link tree. Personalized and Responsive.", 255 | "image": "linklist", 256 | "category": "basicweb", 257 | "links": { 258 | "view": "https://jigar-sable.github.io/LinkList", 259 | "code": "https://github.com/jigar-sable/LinkList" 260 | } 261 | }, 262 | { 263 | "name": "Job Finder Dummy", 264 | "desc": "It Fetch JSON Data And Allow Feature To Search Within The Content Displayed. Will be Developed By Using Live APIs.", 265 | "image": "saas", 266 | "category": "basicweb", 267 | "links": { 268 | "view": "https://jigar-sable.github.io/JavaScript-Projects/api-projects/saas-jobs", 269 | "code": "https://github.com/jigar-sable/JavaScript-Projects/tree/main/api-projects/saas-jobs" 270 | } 271 | }, 272 | { 273 | "name": "Old Websites", 274 | "desc": "Bestwebs & ColorCoder. Two Years old websites memories. Simple with basic features.", 275 | "image": "oldsites", 276 | "category": "basicweb", 277 | "links": { 278 | "view": "#", 279 | "code": "#" 280 | } 281 | }, 282 | { 283 | "name": "Resistor Color Codes", 284 | "desc": "Simply provides the color codes of resistors. Calculation information and about resistors.", 285 | "image": "resistercolor", 286 | "category": "basicweb", 287 | "links": { 288 | "view": "#", 289 | "code": "#" 290 | } 291 | }, 292 | { 293 | "name": "KIA Info Website", 294 | "desc": "Basic KIA webpage displays the info about seltos product range. Specs and Image Gallery.", 295 | "image": "kiaweb", 296 | "category": "basicweb", 297 | "links": { 298 | "view": "#", 299 | "code": "#" 300 | } 301 | }, 302 | { 303 | "name": "Burger Shop Dummy", 304 | "desc": "Basic burger shop webpage allow users to check menu and price. Dummy Order Form.", 305 | "image": "burgerweb", 306 | "category": "basicweb", 307 | "links": { 308 | "view": "#", 309 | "code": "#" 310 | } 311 | }, 312 | { 313 | "name": "Indian Temples", 314 | "desc": "It shows temples of different sectors of India. as user clicks it will redirect to wiki of that temple for info.", 315 | "image": "templeweb", 316 | "category": "basicweb", 317 | "links": { 318 | "view": "#", 319 | "code": "#" 320 | } 321 | }, 322 | { 323 | "name": "Indian Temples", 324 | "desc": "It shows temples of different sectors of India. as user clicks it will redirect to wiki of that temple for info.", 325 | "image": "templeweb", 326 | "category": "basicweb", 327 | "links": { 328 | "view": "#", 329 | "code": "#" 330 | } 331 | }, 332 | { 333 | "name": "Indian Temples", 334 | "desc": "It shows temples of different sectors of India. as user clicks it will redirect to wiki of that temple for info.", 335 | "image": "templeweb", 336 | "category": "basicweb", 337 | "links": { 338 | "view": "#", 339 | "code": "#" 340 | } 341 | } 342 | ] 343 | -------------------------------------------------------------------------------- /projects/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | 3 | $('#menu').click(function () { 4 | $(this).toggleClass('fa-times'); 5 | $('.navbar').toggleClass('nav-toggle'); 6 | }); 7 | 8 | $(window).on('scroll load', function () { 9 | $('#menu').removeClass('fa-times'); 10 | $('.navbar').removeClass('nav-toggle'); 11 | 12 | if (window.scrollY > 60) { 13 | document.querySelector('#scroll-top').classList.add('active'); 14 | } else { 15 | document.querySelector('#scroll-top').classList.remove('active'); 16 | } 17 | }); 18 | }); 19 | 20 | document.addEventListener('visibilitychange', 21 | function () { 22 | if (document.visibilityState === "visible") { 23 | document.title = "Projects | Portfolio Jigar Sable"; 24 | $("#favicon").attr("href", "/assets/images/favicon.png"); 25 | } 26 | else { 27 | document.title = "Come Back To Portfolio"; 28 | $("#favicon").attr("href", "/assets/images/favhand.png"); 29 | } 30 | }); 31 | 32 | 33 | // fetch projects start 34 | function getProjects() { 35 | return fetch("projects.json") 36 | .then(response => response.json()) 37 | .then(data => { 38 | return data 39 | }); 40 | } 41 | 42 | 43 | function showProjects(projects) { 44 | let projectsContainer = document.querySelector(".work .box-container"); 45 | let projectsHTML = ""; 46 | projects.forEach(project => { 47 | projectsHTML += ` 48 |
49 |
50 | project 51 |
52 |
53 |

${project.name}

54 |
55 |
56 |

${project.desc}

57 |
58 | View 59 | Code 60 |
61 |
62 |
63 |
64 |
` 65 | }); 66 | projectsContainer.innerHTML = projectsHTML; 67 | 68 | // vanilla tilt.js 69 | // VanillaTilt.init(document.querySelectorAll(".tilt"), { 70 | // max: 20, 71 | // }); 72 | // // vanilla tilt.js 73 | 74 | // /* ===== SCROLL REVEAL ANIMATION ===== */ 75 | // const srtop = ScrollReveal({ 76 | // origin: 'bottom', 77 | // distance: '80px', 78 | // duration: 1000, 79 | // reset: true 80 | // }); 81 | 82 | // /* SCROLL PROJECTS */ 83 | // srtop.reveal('.work .box', { interval: 200 }); 84 | 85 | // isotope filter products 86 | var $grid = $('.box-container').isotope({ 87 | itemSelector: '.grid-item', 88 | layoutMode: 'fitRows', 89 | masonry: { 90 | columnWidth: 200 91 | } 92 | }); 93 | 94 | // filter items on button click 95 | $('.button-group').on('click', 'button', function () { 96 | $('.button-group').find('.is-checked').removeClass('is-checked'); 97 | $(this).addClass('is-checked'); 98 | var filterValue = $(this).attr('data-filter'); 99 | $grid.isotope({ filter: filterValue }); 100 | }); 101 | } 102 | 103 | getProjects().then(data => { 104 | showProjects(data); 105 | }) 106 | // fetch projects end 107 | 108 | // Start of Tawk.to Live Chat 109 | var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date(); 110 | (function () { 111 | var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0]; 112 | s1.async = true; 113 | s1.src = 'https://embed.tawk.to/60df10bf7f4b000ac03ab6a8/1f9jlirg6'; 114 | s1.charset = 'UTF-8'; 115 | s1.setAttribute('crossorigin', '*'); 116 | s0.parentNode.insertBefore(s1, s0); 117 | })(); 118 | // End of Tawk.to Live Chat 119 | 120 | // disable developer mode 121 | document.onkeydown = function (e) { 122 | if (e.keyCode == 123) { 123 | return false; 124 | } 125 | if (e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) { 126 | return false; 127 | } 128 | if (e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) { 129 | return false; 130 | } 131 | if (e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) { 132 | return false; 133 | } 134 | if (e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) { 135 | return false; 136 | } 137 | } -------------------------------------------------------------------------------- /projects/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"); 2 | @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap'); 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | text-decoration: none; 9 | outline: none; border: none; 10 | text-transform:capitalize; 11 | transition: all .2s linear; 12 | } 13 | html{ 14 | font-size: 62.5%; 15 | overflow-x: hidden; 16 | scroll-behavior: smooth; 17 | } 18 | body{ 19 | background: #f7f7f7; 20 | font-family: 'Poppins', sans-serif; 21 | } 22 | 23 | *::selection{ 24 | background: #2b3dda; 25 | color: #fff; 26 | } 27 | 28 | html{ 29 | font-size: 62.5%; 30 | overflow-x: hidden; 31 | } 32 | html::-webkit-scrollbar{ 33 | width: .8rem; 34 | } 35 | html::-webkit-scrollbar-track{ 36 | background: rgb(235, 202, 245); 37 | } 38 | html::-webkit-scrollbar-thumb{ 39 | background: #420177; 40 | } 41 | 42 | /* navbar starts */ 43 | header{ 44 | position: fixed; 45 | top: 0; left: 0; right: 0; 46 | z-index: 1000; 47 | display: flex; 48 | align-items: center; 49 | justify-content: space-between; 50 | padding: 1.7rem 10%; 51 | height: 6.5rem; 52 | background-color: #fff; 53 | box-shadow: 0 1px 4px rgba(146,161,176,.3); 54 | } 55 | section{ 56 | min-height: 100vh; 57 | padding: 2rem 9%; 58 | } 59 | .heading{ 60 | font-size: 3.5rem; 61 | color: rgb(32, 32, 32); 62 | font-weight: 800; 63 | text-align: center; 64 | } 65 | .heading span{ 66 | color: rgb(115, 3, 167); 67 | } 68 | header .logo{ 69 | font-size: 1.9rem; 70 | font-weight: 800; 71 | text-decoration: none; 72 | color: #0E2431; 73 | } 74 | header .logo i { 75 | font-size: 2.2rem; 76 | } 77 | header .logo:hover { 78 | color: #fc8c05; 79 | } 80 | header .navbar ul{ 81 | list-style: none; 82 | display: flex; 83 | justify-content: center; 84 | align-items: center; 85 | } 86 | header .navbar li{ 87 | margin-left: 2.5rem; 88 | } 89 | header .navbar ul li a{ 90 | font-size: 1.57rem; 91 | color: #0E2431; 92 | font-weight: 600; 93 | text-decoration: none; 94 | letter-spacing: 0.04rem; 95 | } 96 | header .navbar ul li a.active, 97 | header .navbar ul li a:hover{ 98 | color: #011aff; 99 | border-bottom: .2rem solid #011aff; 100 | padding: .5rem 0; 101 | } 102 | /* navbar ends */ 103 | 104 | /* hamburger icon starts*/ 105 | #menu{ 106 | font-size: 3rem; 107 | cursor: pointer; 108 | color: rgb(24, 2, 63); 109 | display: none; 110 | } 111 | @media(max-width:768px){ 112 | #menu{ 113 | display: block; 114 | } 115 | header .navbar{ 116 | position: fixed; 117 | top: 6.5rem; right: -120%; 118 | width: 75%; 119 | height: 100%; 120 | text-align: left; 121 | align-items: flex-start; 122 | background-color: #0e0f31; 123 | } 124 | header .navbar ul{ 125 | flex-flow: column; 126 | padding: 1rem; 127 | } 128 | header .navbar ul li{ 129 | text-align: center; 130 | width: 100%; 131 | margin: 1rem 0; 132 | border-radius: .5rem; 133 | width: 26rem; 134 | } 135 | header .navbar ul li a{ 136 | display: block; 137 | padding: 1rem; 138 | text-align: left; 139 | color: #fff; 140 | font-size: 2rem; 141 | } 142 | header .navbar ul li a.active, 143 | header .navbar ul li a:hover{ 144 | padding: 1rem; 145 | color: #fff; 146 | border-radius: .5rem; 147 | border-bottom: .5rem solid #011aff; 148 | } 149 | .fa-times{ 150 | transform: rotate(180deg); 151 | } 152 | header .navbar.nav-toggle{ 153 | right: 0; 154 | } 155 | } 156 | /* hamburger icon ends */ 157 | 158 | /* work section starts */ 159 | .work{ 160 | /* background: #010124; */ 161 | background: linear-gradient(to bottom, #010136, #00003a); 162 | margin-top: 5rem; 163 | } 164 | .work h2{ 165 | color: #fff; 166 | padding: 1rem; 167 | } 168 | .work .heading span{ 169 | color: rgb(255, 230, 0); 170 | } 171 | .work .button-group{ 172 | display: flex; 173 | flex-wrap: wrap; 174 | gap:1rem; 175 | margin: 2rem auto; 176 | width: 50%; 177 | justify-content: center; 178 | align-items: center; 179 | } 180 | .work .button-group .btn{ 181 | outline: none; 182 | padding: 1rem 2rem; 183 | background: transparent; 184 | color: #fff; 185 | border: 1px solid #fff; 186 | border-radius: 3px; 187 | cursor: pointer; 188 | font-weight: 500; 189 | } 190 | .work .button-group .btn:hover{ 191 | background-color: #fff; 192 | color: #000; 193 | } 194 | .work .button-group .btn.is-checked{ 195 | background-color: #fff; 196 | color: #000; 197 | } 198 | .work .box-container{ 199 | display: flex; 200 | flex-wrap: wrap; 201 | gap:1.5rem; 202 | margin: 2rem; 203 | } 204 | .work .box-container .box{ 205 | flex:1 1 30rem; 206 | border-radius: .5rem; 207 | box-shadow: 0 .7rem 1rem rgba(0,0,0,.3); 208 | position: relative; 209 | overflow:hidden; 210 | height:30rem; 211 | background: #fff; 212 | border: none; 213 | } 214 | .work .box-container .box img{ 215 | height: 100%; 216 | width:100%; 217 | object-fit: cover; 218 | } 219 | .work .box-container .box .content{ 220 | height: 100%; 221 | width:100%; 222 | position: absolute; 223 | top:85%; left:0; 224 | background:rgba(255, 255, 255, 0.9); 225 | display: flex; 226 | flex-direction: column; 227 | } 228 | .work .box-container .box .content .tag{ 229 | display: flex; 230 | flex-direction: row; 231 | justify-content: space-between; 232 | align-items: center; 233 | height: 4.5rem; 234 | width: 100%; 235 | padding-left: 1rem; 236 | background: #ffd900; 237 | } 238 | .work .box-container .box .content .tag h3{ 239 | font-size: 2rem; 240 | } 241 | .work .box-container .box:hover .content{ 242 | top: 25%; 243 | } 244 | .work .desc { 245 | margin: 2rem; 246 | display: flex; 247 | flex-direction: column; 248 | justify-content: center; 249 | } 250 | .work .desc p{ 251 | font-size: 1.5rem; 252 | } 253 | .work .desc .btns{ 254 | display: flex; 255 | justify-content: space-between; 256 | width: 100%; 257 | margin-top: 2rem; 258 | } 259 | .work .desc .btns .btn{ 260 | line-height: 0; 261 | display: inline; 262 | padding: 1.5rem 2.5rem; 263 | border-radius: .5rem; 264 | font-size: 1.5rem; 265 | color: #fff; 266 | background: rgb(12, 12, 12); 267 | margin-right: 2rem; 268 | } 269 | .work .desc .btns .btn:hover{ 270 | background: #310ae0f5; 271 | } 272 | 273 | @media screen and (max-width: 450px) { 274 | .work .button-group{ 275 | width: 100%; 276 | } 277 | .work .box-container{ 278 | margin: 0rem; 279 | } 280 | .work .box-container .grid-item .box{ 281 | width: 95% !important; 282 | } 283 | } 284 | 285 | /* back to home button */ 286 | .backbtn{ 287 | display: flex; 288 | justify-content: center; 289 | margin-bottom: 2rem; 290 | margin-top: 4rem; 291 | } 292 | .backbtn .btn { 293 | position: relative; 294 | line-height: 0; 295 | padding: 1.6rem 3rem; 296 | border-radius: .5em; 297 | transition: 0.3s; 298 | color: #fff; 299 | border: 2px solid #fff; 300 | box-shadow: 0px 2px 4px rgba(48, 68, 247, .3); 301 | text-align: center; 302 | } 303 | .backbtn .btn span { 304 | font-weight: 600; 305 | font-size: 1.7rem; 306 | font-family: 'Nunito', sans-serif; 307 | } 308 | .backbtn .btn i { 309 | margin-right: 0.5rem; 310 | font-size: 1.5rem; 311 | transition: 0.3s; 312 | } 313 | .backbtn .btn:hover{ 314 | background: #ffffff; 315 | color: #000; 316 | } 317 | .backbtn .btn:hover i { 318 | transform: translateX(-8px); 319 | } 320 | /* work section ends */ 321 | 322 | /* common media queries starts*/ 323 | @media(max-width:450px){ 324 | html{ 325 | font-size: 55%; 326 | } 327 | body{ 328 | padding-right: 0; 329 | } 330 | section{ 331 | padding: 2rem; 332 | } 333 | } 334 | /* common media queries ends*/ 335 | 336 | 337 | /* scroll top starts */ 338 | #scroll-top{ 339 | position: fixed; 340 | top: -140%; 341 | right: 2rem; 342 | padding: 1rem 1.5rem; 343 | font-size: 2rem; 344 | background: #ffae00; 345 | color: rgb(13, 0, 44); 346 | border-radius: 5rem; 347 | transition: 1s linear; 348 | z-index: 1000; 349 | } 350 | #scroll-top.active{ 351 | top: calc(100% - 12rem); 352 | } 353 | /* scroll top ends */ -------------------------------------------------------------------------------- /skills.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "ReactJS", 4 | "icon": "https://img.icons8.com/external-tal-revivo-color-tal-revivo/48/000000/external-react-a-javascript-library-for-building-user-interfaces-logo-color-tal-revivo.png" 5 | }, 6 | { 7 | "name": "ExpressJS", 8 | "icon": "https://img.icons8.com/fluency/48/000000/node-js.png" 9 | }, 10 | { 11 | "name": "NodeJS", 12 | "icon": "https://img.icons8.com/color/48/000000/nodejs.png" 13 | }, 14 | { 15 | "name": "Redux", 16 | "icon": "https://img.icons8.com/color/48/000000/redux.png" 17 | }, 18 | { 19 | "name": "Firebase", 20 | "icon": "https://img.icons8.com/color/48/000000/firebase.png" 21 | }, 22 | { 23 | "name": "Android", 24 | "icon": "https://img.icons8.com/fluency/48/000000/android-os.png" 25 | }, 26 | { 27 | "name": "MaterialUI", 28 | "icon": "https://img.icons8.com/color/48/000000/material-ui.png" 29 | }, 30 | { 31 | "name": "ChakraUI", 32 | "icon": "https://img.icons8.com/color/48/000000/chakra-ui.png" 33 | }, 34 | { 35 | "name": "TailwindCSS", 36 | "icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/48px-Tailwind_CSS_Logo.png" 37 | }, 38 | { 39 | "name": "Bootstrap", 40 | "icon": "https://img.icons8.com/color/48/000000/bootstrap.png" 41 | }, 42 | { 43 | "name": "Sass", 44 | "icon": "https://img.icons8.com/color/48/000000/sass.png" 45 | }, 46 | { 47 | "name": "HTML5", 48 | "icon": "https://img.icons8.com/color/48/000000/html-5--v1.png" 49 | }, 50 | { 51 | "name": "CSS3", 52 | "icon": "https://img.icons8.com/color/48/000000/css3.png" 53 | }, 54 | { 55 | "name": "JavaScript", 56 | "icon": "https://img.icons8.com/color/48/000000/javascript--v1.png" 57 | }, 58 | { 59 | "name": "Java", 60 | "icon": "https://img.icons8.com/color/48/000000/java-coffee-cup-logo--v1.png" 61 | }, 62 | { 63 | "name": "Kotlin", 64 | "icon": "https://img.icons8.com/color/48/000000/kotlin.png" 65 | }, 66 | { 67 | "name": "PHP", 68 | "icon": "https://img.icons8.com/offices/48/000000/php-logo.png" 69 | }, 70 | { 71 | "name": "Python", 72 | "icon": "https://img.icons8.com/color/48/000000/python--v1.png" 73 | }, 74 | { 75 | "name": "C++", 76 | "icon": "https://img.icons8.com/color/48/000000/c-plus-plus-logo.png" 77 | }, 78 | { 79 | "name": "MongoDB", 80 | "icon": "https://img.icons8.com/color/48/000000/mongodb.png" 81 | }, 82 | { 83 | "name": "MySQL", 84 | "icon": "https://img.icons8.com/color/48/000000/mysql-logo.png" 85 | }, 86 | { 87 | "name": "PostgreSQL", 88 | "icon": "https://img.icons8.com/color/48/000000/postgreesql.png" 89 | }, 90 | { 91 | "name": "AWS", 92 | "icon": "https://img.icons8.com/color/48/000000/amazon-web-services.png" 93 | }, 94 | { 95 | "name": "Heroku", 96 | "icon": "https://img.icons8.com/color/48/000000/heroku.png" 97 | }, 98 | { 99 | "name": "Netlify", 100 | "icon": "https://img.icons8.com/external-tal-revivo-shadow-tal-revivo/48/000000/external-netlify-a-cloud-computing-company-that-offers-hosting-and-serverless-backend-services-for-static-websites-logo-shadow-tal-revivo.png" 101 | }, 102 | { 103 | "name": "DigitalOcean", 104 | "icon": "https://img.icons8.com/ios-filled/48/0080FF/digitalocean.png" 105 | }, 106 | { 107 | "name": "jQuery", 108 | "icon": "https://img.icons8.com/ios-filled/48/1169ae/jquery.png" 109 | }, 110 | { 111 | "name": "Git VCS", 112 | "icon": "https://img.icons8.com/color/48/000000/git.png" 113 | }, 114 | { 115 | "name": "GitHub", 116 | "icon": "https://img.icons8.com/glyph-neue/48/ffffff/github.png" 117 | }, 118 | { 119 | "name": "WordPress", 120 | "icon": "https://img.icons8.com/color/48/000000/wordpress.png" 121 | } 122 | ] --------------------------------------------------------------------------------