├── .DS_Store ├── img ├── .DS_Store ├── About.png ├── N.png ├── Web-Design-Transparent-Images-PNG.png └── logo.png ├── index.html ├── script └── script.js └── style └── style.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/portfolio/33ef3ab594f1765621acba675e7dc9953381a9fe/.DS_Store -------------------------------------------------------------------------------- /img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/portfolio/33ef3ab594f1765621acba675e7dc9953381a9fe/img/.DS_Store -------------------------------------------------------------------------------- /img/About.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/portfolio/33ef3ab594f1765621acba675e7dc9953381a9fe/img/About.png -------------------------------------------------------------------------------- /img/N.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/portfolio/33ef3ab594f1765621acba675e7dc9953381a9fe/img/N.png -------------------------------------------------------------------------------- /img/Web-Design-Transparent-Images-PNG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/portfolio/33ef3ab594f1765621acba675e7dc9953381a9fe/img/Web-Design-Transparent-Images-PNG.png -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/portfolio/33ef3ab594f1765621acba675e7dc9953381a9fe/img/logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Nitin Rajput 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 31 |
32 | 33 | 34 |
35 |
36 |

Hello It's Me

37 |

Nitn Rajput

38 |

And I'm a

39 |

My Proficiency in building full-stack web applications using MongoDB, Express.js, React.js, and Node.js. With hands-on experience in developing and deploying robust and scalable web applications, I strive to create impactful solutions for businesses and users alike.

40 | 47 | Download CV 48 |
49 |
50 | 51 |
52 |
53 | 54 | 55 |
56 |
57 | About image 58 |
59 |
60 |

About Me

61 |

Frontend Developer!

62 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt fugiat praesentium autem pariatur ex corporis. Provident odio ipsa modi deleniti assumenda dolor tenetur, velit perferendis soluta qui? Corporis mollitia iure officia voluptatem incidunt dolorum dolore, fugiat consequuntur eveniet quaerat sunt optio. Veniam fuga quisquam mollitia alias.

63 | Read More 64 | 65 |
66 |
67 | 68 | 69 |
70 |

Our Service

71 |
72 |
73 | 74 |

Html5

75 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias perspiciatis deserunt maxime quos perferendis iusto reprehenderit ducimus, adipisci fugit id?

76 | Read More 77 |
78 | 79 |
80 | 81 |

CSS3

82 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias perspiciatis deserunt maxime quos perferendis iusto reprehenderit ducimus, adipisci fugit id?

83 | Read More 84 |
85 | 86 |
87 | 88 |

Javascript

89 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias perspiciatis deserunt maxime quos perferendis iusto reprehenderit ducimus, adipisci fugit id?

90 | Read More 91 |
92 | 93 |
94 | 95 |

bootstrap5

96 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias perspiciatis deserunt maxime quos perferendis iusto reprehenderit ducimus, adipisci fugit id?

97 | Read More 98 |
99 | 100 |
101 | 102 |

Front-end Development

103 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias perspiciatis deserunt maxime quos perferendis iusto reprehenderit ducimus, adipisci fugit id?

104 | Read More 105 |
106 | 107 |
108 | 109 |

UI Development

110 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias perspiciatis deserunt maxime quos perferendis iusto reprehenderit ducimus, adipisci fugit id?

111 | Read More 112 |
113 | 114 |
115 |
116 | 117 | 118 |
119 |

Latest Project

120 |
121 |
122 | Project Imge 123 |
124 |

Web Design

125 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, laboriosam.

126 | 127 |
128 |
129 | 130 |
131 | Project Imge 132 |
133 |

Web Design

134 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, laboriosam.

135 | 136 |
137 |
138 | 139 |
140 | Project Imge 141 |
142 |

Web Design

143 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, laboriosam.

144 | 145 |
146 |
147 | 148 |
149 | Project Imge 150 |
151 |

Web Design

152 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, laboriosam.

153 | 154 |
155 |
156 | 157 |
158 | Project Imge 159 |
160 |

Web Design

161 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, laboriosam.

162 | 163 |
164 |
165 |
166 |
167 | 168 | 169 |
170 |

Contact Me!

171 |
173 | 174 |
175 | 176 | 177 | 178 |
179 |
180 | 181 | 182 |
183 | 184 | 185 | 186 |
187 |
188 | 189 | 190 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /script/script.js: -------------------------------------------------------------------------------- 1 | /*=======================Toggle icon navbar=============================*/ 2 | let menuIcon = document.querySelector('#menu-icon'); 3 | let navbar = document.querySelector('.navbar'); 4 | 5 | menuIcon.onclick = () => { 6 | menuIcon.classList.toggle('bx-x'); 7 | navbar.classList.toggle('active'); 8 | }; 9 | 10 | 11 | 12 | 13 | /*=======================Scroll sections active link=============================*/ 14 | let sections = document.querySelectorAll('section'); 15 | let navlinks = document.querySelectorAll('header nav a'); 16 | 17 | window.onscroll = () => { 18 | sections.forEach(sec =>{ 19 | let top = window.scrollY; 20 | let offset =sec.offsetTop - 150; 21 | let height =sec.offsetHeight; 22 | let id=sec.getAttribute('id'); 23 | 24 | if(top >= offset && top < offset + height){ 25 | navlinks.forEach(links =>{ 26 | links.classList.remove('active'); 27 | document.querySelector('header nav a[href*=' + id + ']').classList.add('active'); 28 | 29 | }); 30 | 31 | }; 32 | }); 33 | 34 | /*=========================Sticky navbar=================================================*/ 35 | 36 | let header = document.querySelector('header'); 37 | 38 | header.classList.toggle('sticky', window.scrollY > 100); 39 | 40 | /*=========remove toggle icon and navbar when click navbar link (scrol)=======================*/ 41 | menuIcon.classList.remove('bx-x'); 42 | navbar.classList.remove('active'); 43 | 44 | }; 45 | 46 | 47 | 48 | /*=========================Scroll Reveal =================================================*/ 49 | ScrollReveal({ 50 | // reset: true, 51 | distance:'80px', 52 | duration:2000, 53 | delay:200 54 | 55 | }); 56 | ScrollReveal().reveal('.home-content, .heading', { origin:'top' }); 57 | ScrollReveal().reveal('.home-img, .services-cotanier, .portfolio-box, .contact form ', { origin:'bottom' }); 58 | ScrollReveal().reveal('.home-content h1, .about-img', { origin:'left' }); 59 | ScrollReveal().reveal('.home-content p, .about-content', { origin:'right' }); 60 | 61 | /*=========================Typed js =================================================*/ 62 | const typed = new Typed('.multiple-text', { 63 | strings:['MERN Stack Developer', 'Full Stack Developer', 'Frontend Developer', 'Backend Developer'], 64 | typedSpeed:100, 65 | backSpeed:100, 66 | backDelay:1000, 67 | loop:true 68 | 69 | }); 70 | -------------------------------------------------------------------------------- /style/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | text-decoration: none; 8 | border: none; 9 | outline: none; 10 | scroll-behavior: smooth; 11 | font-family: 'Poppins', sans-serif; 12 | } 13 | 14 | :root{ 15 | --bg-color: #1f242d; 16 | --second-bg-color:#323946; 17 | --text-color: #fff; 18 | --main-color:#0ef; 19 | 20 | } 21 | 22 | html{ 23 | font-size: 62%; 24 | overflow-x: hidden; 25 | } 26 | 27 | body{ 28 | background-color: var(--bg-color); 29 | color: var(--text-color); 30 | 31 | } 32 | 33 | section{ 34 | min-height: 100vh; 35 | padding: 10rem 9% 2rem; 36 | 37 | } 38 | .header{ 39 | position: fixed; 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | padding: 2rem 9%; 44 | background-color: var(--bg-color); 45 | display: flex; 46 | justify-content: space-between; 47 | align-items: center; 48 | z-index: 100; 49 | } 50 | .header.sticky{ 51 | border-bottom: .1rem solid rgba(0, 0, 0, .2); 52 | } 53 | .logo{ 54 | font-size: 2.5rem; 55 | color: var(--text-color); 56 | font-weight: 600; 57 | cursor: default; 58 | } 59 | 60 | .navbar a{ 61 | font-size: 1.7rem; 62 | color: var(--text-color); 63 | margin-left: 4rem; 64 | transition: 3s; 65 | } 66 | .navbar a:hover, 67 | .navbar a.active{ 68 | color: var(--main-color); 69 | } 70 | 71 | #menu-icon{ 72 | font-size: 3.6rem; 73 | color: var(--text-color); 74 | display: none; 75 | 76 | } 77 | .home{ 78 | display: flex; 79 | justify-content: center; 80 | align-items: center; 81 | } 82 | .home-img img{ 83 | width: 35vw; 84 | animation: imgfloat 4s ease-in-out infinite; 85 | } 86 | @keyframes imgfloat { 87 | 0%{ 88 | transform: translateY(0); 89 | } 90 | 50%{ 91 | transform: translateY(-2.4rem); 92 | } 93 | 100%{ 94 | transform: translateY(0); 95 | } 96 | 97 | } 98 | 99 | .home-content h3{ 100 | font-size: 3.2rem; 101 | font-weight: 700; 102 | } 103 | .home-content h3:nth-of-type(2){ 104 | margin-bottom: 2rem; 105 | } 106 | 107 | span{ 108 | color: var(--main-color); 109 | 110 | } 111 | 112 | .home-content h1{ 113 | font-size: 5.6rem; 114 | font-weight: 700; 115 | line-height: 1.3; 116 | } 117 | .home-content p{ 118 | font-size: 1.6rem; 119 | 120 | } 121 | .social-media a { 122 | display: inline-flex; 123 | justify-content: center; 124 | align-items: center; 125 | width: 4rem; 126 | height: 4rem; 127 | background: transparent; 128 | border: .2rem solid var(--main-color); 129 | border-radius: 50%; 130 | font-size: 2rem; 131 | color: var(--main-color); 132 | margin: 3rem 1.5rem 3rem 0; 133 | transition: 0.5s ease; 134 | 135 | } 136 | .social-media a:hover{ 137 | background:var(--main-color); 138 | color: var(--second-bg-color); 139 | box-shadow: 0 0 1rem var(--main-color); 140 | } 141 | .btn{ 142 | display: inline-block; 143 | padding: 1rem 2.8rem; 144 | background: var(--main-color); 145 | border-radius: 4rem; 146 | box-shadow: 0 0 1rem var(--main-color); 147 | font-size: 1.6rem; 148 | color: var(--second-bg-color); 149 | letter-spacing: .1rem; 150 | font-weight: 600; 151 | transition: 0 0 1rem ease; 152 | 153 | } 154 | 155 | .btn:hover{ 156 | box-shadow: none; 157 | } 158 | 159 | .about{ 160 | display: flex; 161 | justify-content: center; 162 | align-items: center; 163 | gap: 10rem; 164 | background: var(--second-bg-color); 165 | } 166 | .about-img img{ 167 | width: 60vh; 168 | 169 | } 170 | .heading{ 171 | text-align: center; 172 | font-size: 4.5rem; 173 | } 174 | .about-content h2{ 175 | text-align: left; 176 | line-height: 1.2; 177 | 178 | } 179 | 180 | .about-content h3{ 181 | font-size: 2.6rem; 182 | 183 | } 184 | .about-content p{ 185 | font-size: 1.6rem; 186 | margin: 2rem 0 3rem; 187 | } 188 | .service h2{ 189 | margin-top: 5rem; 190 | } 191 | .services-cotanier { 192 | display: flex; 193 | justify-content: center; 194 | align-items: center; 195 | flex-wrap: wrap; 196 | gap: 2rem; 197 | } 198 | .services-cotanier .services-box{ 199 | flex: 1 1 30rem; 200 | background: var(--second-bg-color); 201 | padding: 3rem 2rem 4rem; 202 | border-radius: 2rem; 203 | text-align: center; 204 | border: .2rem solid var(--bg-color); 205 | transition: .4s ease; 206 | } 207 | 208 | .services-cotanier .services-box:hover{ 209 | border-color:var(--main-color); 210 | transform: scale(1.02); 211 | } 212 | 213 | .services-box img{ 214 | width: 8rem; 215 | } 216 | .services-box h3{ 217 | font-size: 2.6rem; 218 | } 219 | 220 | .services-box p{ 221 | font-size: 1.6rem; 222 | margin: 1rem 0 3rem; 223 | } 224 | .portfolio{ 225 | background: var(--second-bg-color); 226 | } 227 | 228 | .portfolio h2{ 229 | margin-bottom: 4rem; 230 | } 231 | 232 | .portfolio-container{ 233 | display: grid; 234 | grid-template-columns: repeat(3, 1fr); 235 | gap: 2.5rem; 236 | } 237 | .portfolio-container .portfolio-box { 238 | position: relative; 239 | border-radius: 2rem; 240 | box-shadow: 0 0 1rem var(--bg-color); 241 | overflow: hidden; 242 | display: flex; 243 | } 244 | .portfolio-box img{ 245 | width: 100%; 246 | transition: .5s ease; 247 | } 248 | 249 | .portfolio-box:hover img{ 250 | transform: scale(1.1); 251 | } 252 | .portfolio-box .portfolio-layer{ 253 | position: absolute; 254 | bottom: 0; 255 | left: 0; 256 | width: 100%; 257 | height: 100%; 258 | background: linear-gradient(rgba(0, 0, 0, .1), var(--main-color)); 259 | display: flex; 260 | justify-content: center; 261 | align-items: center; 262 | flex-direction: column; 263 | text-align: center; 264 | padding: 0 4rem ; 265 | transform: translateY(100%); 266 | transition: .5s ease; 267 | 268 | } 269 | .portfolio-box:hover .portfolio-layer{ 270 | transform: translateY(0); 271 | 272 | } 273 | .portfolio-layer h4{ 274 | font-size: 3rem ; 275 | } 276 | .portfolio-layer p{ 277 | font-size: 1.6rem; 278 | margin: .3rem 0 1rem; 279 | } 280 | .portfolio-layer a{ 281 | display: inline-flex; 282 | justify-content: center; 283 | align-items: center; 284 | width: 5rem; 285 | height: 5rem; 286 | background: var(--text-color); 287 | border-radius: 50%; 288 | 289 | } 290 | .portfolio-layer a i{ 291 | font-size: 2rem; 292 | color: var(--second-bg-color); 293 | } 294 | .contact h2{ 295 | margin-bottom: 3rem; 296 | } 297 | .contact form{ 298 | max-width: 70rem; 299 | margin: 1rem auto; 300 | text-align: center; 301 | margin-bottom: 3rem; 302 | } 303 | .contact form .input-box{ 304 | display: flex; 305 | justify-content: space-between; 306 | flex-wrap: wrap; 307 | } 308 | 309 | .contact form .input-box input, 310 | .contact form textarea{ 311 | width: 100%; 312 | padding: 1.5rem; 313 | font-size: 1.6rem; 314 | color: var(--text-color); 315 | background: var(--second-bg-color); 316 | border-radius: .8rem; 317 | margin: .7rem 0; 318 | 319 | } 320 | .contact form .input-box input{ 321 | width: 49%; 322 | 323 | } 324 | .contact form textarea{ 325 | resize: none; 326 | } 327 | .contact form .btn{ 328 | margin-top: 2rem; 329 | cursor: pointer; 330 | } 331 | .d-none{ 332 | display: none; 333 | visibility: none; 334 | } 335 | .footer{ 336 | display: flex; 337 | justify-content: space-between; 338 | align-items: center; 339 | flex-wrap: wrap; 340 | padding: 2rem 9%; 341 | background: var(--second-bg-color); 342 | } 343 | .footer-text p{ 344 | font-size: 1.6rem; 345 | } 346 | .footer-iconTop a{ 347 | display: inline-flex; 348 | justify-content: center; 349 | align-items: center; 350 | padding: .8rem; 351 | background: var(--main-color); 352 | border-radius: .8rem; 353 | transition: .5s ease; 354 | } 355 | .footer-iconTop a:hover{ 356 | box-shadow: 0 0 1rem var(--main-color); 357 | 358 | } 359 | .footer-iconTop a i{ 360 | font-size: 2.4rem; 361 | color: var(--second-bg-color); 362 | } 363 | 364 | 365 | /* BREAKPOINT */ 366 | 367 | @media (max-width: 1200px) { 368 | html{ 369 | font-size: 55%; 370 | } 371 | 372 | } 373 | 374 | @media (max-width: 991px) { 375 | .header{ 376 | padding: 2rem 3%; 377 | 378 | } 379 | section{ 380 | padding: 10rem 3% 2rem; 381 | 382 | } 383 | .service{ 384 | padding-bottom: 7rem; 385 | } 386 | .portfolio{ 387 | padding-bottom: 7rem; 388 | } 389 | .contact{ 390 | min-height: auto; 391 | } 392 | .footer { 393 | padding: 2rem 3%; 394 | 395 | } 396 | } 397 | 398 | @media (max-width: 768px){ 399 | #menu-icon{ 400 | display: block; 401 | } 402 | .navbar{ 403 | position: absolute; 404 | top: 100%; 405 | left: 0; 406 | width: 100%; 407 | padding: 1rem 3%; 408 | background: var(--bg-color); 409 | border-top: .1rem solid rgba(0, 0, 0, .2); 410 | box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); 411 | display: none; 412 | 413 | } 414 | .navbar.active{ 415 | display: block; 416 | 417 | } 418 | .navbar a{ 419 | display: block; 420 | font-size: 2rem; 421 | margin: 3rem 0; 422 | } 423 | 424 | .home{ 425 | flex-direction: column ; 426 | } 427 | .header-content h3{ 428 | font-size: 2.6rem; 429 | } 430 | .header-content h1{ 431 | font-size: 5rem; 432 | } 433 | .home-img img{ 434 | width: 70vw; 435 | margin-top: 4rem; 436 | } 437 | 438 | .about{ 439 | flex-direction: column-reverse; 440 | } 441 | .about-img img{ 442 | width: 70vw; 443 | margin-top: 4rem; 444 | } 445 | .service h2{ 446 | margin-bottom: 3rem; 447 | } 448 | .portfolio-container{ 449 | grid-template-columns: repeat(2,1fr); 450 | } 451 | 452 | } 453 | 454 | @media (max-width: 617px){ 455 | .portfolio-container{ 456 | grid-template-columns: 1fr; 457 | } 458 | } 459 | @media (max-width: 450px){ 460 | html{ 461 | font-size: 50%; 462 | } 463 | .contact form .input-box input{ 464 | width: 100%; 465 | 466 | } 467 | } 468 | 469 | @media (max-width: 365px){ 470 | .home-img img{ 471 | width: 90vw; 472 | } 473 | .about-img img{ 474 | width: 90vw; 475 | } 476 | .footer{ 477 | flex-direction: column-reverse; 478 | } 479 | .footer p{ 480 | text-align: center; 481 | margin-top: 2rem; 482 | } 483 | } --------------------------------------------------------------------------------