Personal Portfolio Website

├── santooo.png ├── script.js ├── index.html └── style.css /santooo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersantoshadhikari/web-profile-template-santosh-adhikari/HEAD/santooo.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | $(window).scroll(function(){ 3 | // sticky navbar on scroll script 4 | if(this.scrollY > 20){ 5 | $('.navbar').addClass("sticky"); 6 | }else{ 7 | $('.navbar').removeClass("sticky"); 8 | } 9 | 10 | // scroll-up button show/hide script 11 | if(this.scrollY > 500){ 12 | $('.scroll-up-btn').addClass("show"); 13 | }else{ 14 | $('.scroll-up-btn').removeClass("show"); 15 | } 16 | }); 17 | 18 | // slide-up script 19 | $('.scroll-up-btn').click(function(){ 20 | $('html').animate({scrollTop: 0}); 21 | // removing smooth scroll on slide-up button click 22 | $('html').css("scrollBehavior", "auto"); 23 | }); 24 | 25 | $('.navbar .menu li a').click(function(){ 26 | // applying again smooth scroll on menu items click 27 | $('html').css("scrollBehavior", "smooth"); 28 | }); 29 | 30 | // toggle menu/navbar script 31 | $('.menu-btn').click(function(){ 32 | $('.navbar .menu').toggleClass("active"); 33 | $('.menu-btn i').toggleClass("active"); 34 | }); 35 | 36 | // typing text animation script 37 | var typed = new Typed(".typing", { 38 | strings: ["App Developer", "Web Developer","Designer", ], 39 | typeSpeed: 100, 40 | backSpeed: 60, 41 | loop: true 42 | }); 43 | 44 | var typed = new Typed(".typing-2", { 45 | strings: ["App Developer", "Web Developer","Designer", ], 46 | typeSpeed: 100, 47 | backSpeed: 60, 48 | loop: true 49 | }); 50 | 51 | // owl carousel script 52 | $('.carousel').owlCarousel({ 53 | margin: 20, 54 | loop: true, 55 | autoplay: true, 56 | autoplayTimeOut: 2000, 57 | autoplayHoverPause: true, 58 | responsive: { 59 | 0:{ 60 | items: 1, 61 | nav: false 62 | }, 63 | 600:{ 64 | items: 2, 65 | nav: false 66 | }, 67 | 1000:{ 68 | items: 3, 69 | nav: false 70 | } 71 | } 72 | }); 73 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Personal Portfolio Website 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

19 | 20 |

21 | 37 | 38 | 39 |

40 |

41 |

42 |

Hello, my name is

43 |

SANTOSH ADHIKARI

44 |

And I'm a

45 | Hire me 46 |

47 |

48 |

49 | 50 | 51 |

52 |

53 |

About me

54 |

55 |

56 |

57 |

58 |

59 |

I'm SANTOSH and I'm a

60 |

Thank you for providing me the opportunity to introduce myself it’s me Santosh Adhikari, Origin from Parbat Nepal, I have been always successfully maintain good manner, discipline Regarding my career and Future, as well as I am always attracted toward activities and task that include natural and today Morden world technology.

61 | Download CV 62 |

63 |

64 |

65 |

66 | 67 | 68 |

69 |

70 |

My services

71 |

72 |

73 |

74 | 75 |

Web Design

76 |

Code your resume so it can be crawled by search engines.

77 |

78 |

79 |

80 |

81 | 82 |

Advertising

83 |

Service is promoted to a viewership in order to attract interest, engagement, and sales.

84 |

85 |

86 |

87 |

88 | 89 |

Apps Design

90 |

A curated collection of mobile app to inspire you in your mobile UI/UX design process.

91 |

92 |

93 |

94 |

95 | 96 |

97 | 98 | 99 |

100 |

101 |

My skills

102 |

103 |

104 |

My creative skills & experiences.

105 |

115 | Read more 116 |

117 |

118 |

119 |

120 | HTML 121 | 90% 122 |

123 |

124 |

125 |

126 |

127 | CSS 128 | 90% 129 |

130 |

131 |

132 |

133 |

134 | JavaScript 135 | 89% 136 |

137 |

138 |

139 |

140 |

141 | MySQL 142 | 88% 143 |

144 |

145 |

146 |

147 | C# 148 | 60% 149 |

150 |

151 |

152 |

153 |

154 |

155 | Dart 156 | 60% 157 |

158 |

159 |

160 |

161 | Flutter 162 | 61% 163 |

164 |

165 |

166 |

167 |

168 | Python 169 | 60% 170 |

171 |

172 |

173 |

174 |

175 |

176 |

177 | 178 | 179 | 180 | 181 | 182 |

183 |

184 |

Contact me

185 |

186 |

187 |

Get in Touch

188 |

Anything have you quarries about us then follow me

189 |

190 |

191 | 192 |

193 |

Name

194 |

SANTOSH ADHIKARI

195 |

196 |

197 |

198 | 199 |

200 |

Address

201 |

Pokhara, Nepal

202 |

203 |

204 |

205 | 206 |

207 |

208 |

santosh.ad215@gmail.com

209 |

210 |

211 |

212 |

213 |

214 |

Message me

215 | 234 |

235 |

236 |

237 |

238 | 239 | 240 | 241 | 242 | 243 | 244 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* import google fonts */ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap'); 3 | 4 | *{ 5 | margin: 70; 6 | padding: 250; 7 | box-sizing: border-box; 8 | text-decoration: none; 9 | } 10 | html{ 11 | scroll-behavior: smooth; 12 | } 13 | 14 | /* custom scroll bar */ 15 | ::-webkit-scrollbar { 16 | width: 10px; 17 | } 18 | ::-webkit-scrollbar-track { 19 | background: #f1f1f1; 20 | } 21 | ::-webkit-scrollbar-thumb { 22 | background: #888; 23 | } 24 | 25 | ::-webkit-scrollbar-thumb:hover { 26 | background: #555; 27 | } 28 | 29 | /* all similar content styling codes */ 30 | section{ 31 | padding: 100px 0; 32 | } 33 | .max-width{ 34 | max-width: 1300px; 35 | padding: 0 80px; 36 | margin: auto; 37 | } 38 | .about, .services, .skills, .teams, .contact, footer{ 39 | font-family: 'Poppins', sans-serif; 40 | } 41 | .about .about-content, 42 | .services .serv-content, 43 | .skills .skills-content, 44 | .contact .contact-content{ 45 | display: flex; 46 | flex-wrap: wrap; 47 | align-items: center; 48 | justify-content: space-between; 49 | } 50 | section .title{ 51 | position: relative; 52 | text-align: center; 53 | font-size: 40px; 54 | font-weight: 500; 55 | margin-bottom: 60px; 56 | padding-bottom: 20px; 57 | font-family: 'Ubuntu', sans-serif; 58 | } 59 | section .title::before{ 60 | content: ""; 61 | position: absolute; 62 | bottom: 0px; 63 | left: 50%; 64 | width: 180px; 65 | height: 3px; 66 | background: #111; 67 | transform: translateX(-50%); 68 | } 69 | section .title::after{ 70 | position: absolute; 71 | bottom: -8px; 72 | left: 50%; 73 | font-size: 20px; 74 | color: crimson; 75 | padding: 0 5px; 76 | background: #fff; 77 | transform: translateX(-50%); 78 | } 79 | 80 | /* navbar styling */ 81 | .navbar{ 82 | position: fixed; 83 | width: 100%; 84 | z-index: 999; 85 | padding: 30px 0; 86 | font-family: 'Ubuntu', sans-serif; 87 | transition: all 0.3s ease; 88 | } 89 | .navbar.sticky{ 90 | padding: 15px 0; 91 | background: crimson; 92 | } 93 | .navbar .max-width{ 94 | display: flex; 95 | align-items: center; 96 | justify-content: space-between; 97 | } 98 | .navbar .logo a{ 99 | color: #fff; 100 | font-size: 35px; 101 | font-weight: 600; 102 | } 103 | .navbar .logo a span{ 104 | color: crimson; 105 | transition: all 0.3s ease; 106 | } 107 | .navbar.sticky .logo a span{ 108 | color: #fff; 109 | } 110 | .navbar .menu li{ 111 | list-style: none; 112 | display: inline-block; 113 | } 114 | .navbar .menu li a{ 115 | display: block; 116 | color: #fff; 117 | font-size: 18px; 118 | font-weight: 500; 119 | margin-left: 25px; 120 | transition: color 0.3s ease; 121 | } 122 | .navbar .menu li a:hover{ 123 | color: crimson; 124 | } 125 | .navbar.sticky .menu li a:hover{ 126 | color: #fff; 127 | } 128 | 129 | /* menu btn styling */ 130 | .menu-btn{ 131 | color: #fff; 132 | font-size: 23px; 133 | cursor: pointer; 134 | display: none; 135 | } 136 | .scroll-up-btn{ 137 | position: fixed; 138 | height: 45px; 139 | width: 42px; 140 | background: crimson; 141 | right: 30px; 142 | bottom: 10px; 143 | text-align: center; 144 | line-height: 45px; 145 | color: #fff; 146 | z-index: 9999; 147 | font-size: 30px; 148 | border-radius: 6px; 149 | border-bottom-width: 2px; 150 | cursor: pointer; 151 | opacity: 0; 152 | pointer-events: none; 153 | transition: all 0.3s ease; 154 | } 155 | .scroll-up-btn.show{ 156 | bottom: 30px; 157 | opacity: 1; 158 | pointer-events: auto; 159 | } 160 | .scroll-up-btn:hover{ 161 | filter: brightness(90%); 162 | } 163 | 164 | 165 | /* home section styling */ 166 | .home{ 167 | display: flex; 168 | background: url("https://avatars.githubusercontent.com/u/78269495?s=400&u=f302e95952918f30f52a3e2f94cd1a12bc6673c4&v=4") no-repeat center; 169 | height: 80vh; 170 | color: #fff; 171 | min-height: 100px; 172 | background-size: cover; 173 | background-attachment: fixed; 174 | font-family: 'Ubuntu', sans-serif; 175 | } 176 | .home .max-width{ 177 | width: 10%; 178 | display: flex; 179 | } 180 | .home .max-width .row{ 181 | margin-right: 10; 182 | } 183 | .home .home-content .text-1{ 184 | font-size: 27px; 185 | } 186 | .home .home-content .text-2{ 187 | font-size: 75px; 188 | font-weight: 600; 189 | margin-left: -3px; 190 | } 191 | .home .home-content .text-3{ 192 | font-size: 40px; 193 | margin: 5px 0; 194 | } 195 | .home .home-content .text-3 span{ 196 | color: crimson; 197 | font-weight: 500; 198 | } 199 | .home .home-content a{ 200 | display: inline-block; 201 | background: crimson; 202 | color: #fff; 203 | font-size: 25px; 204 | padding: 12px 36px; 205 | margin-top: 20px; 206 | font-weight: 400; 207 | border-radius: 6px; 208 | border: 2px solid crimson; 209 | transition: all 0.3s ease; 210 | } 211 | .home .home-content a:hover{ 212 | color: crimson; 213 | background: none; 214 | } 215 | 216 | /* about section styling */ 217 | .about .title::after{ 218 | content: "who i am"; 219 | } 220 | .about .about-content .left{ 221 | width: 45%; 222 | } 223 | .about .about-content .left img{ 224 | height: 400px; 225 | width: 400px; 226 | object-fit: cover; 227 | border-radius: 6px; 228 | } 229 | .about .about-content .right{ 230 | width: 55%; 231 | } 232 | .about .about-content .right .text{ 233 | font-size: 25px; 234 | font-weight: 600; 235 | margin-bottom: 10px; 236 | } 237 | .about .about-content .right .text span{ 238 | color: crimson; 239 | } 240 | .about .about-content .right p{ 241 | text-align: justify; 242 | } 243 | .about .about-content .right a{ 244 | display: inline-block; 245 | background: crimson; 246 | color: #fff; 247 | font-size: 20px; 248 | font-weight: 500; 249 | padding: 10px 30px; 250 | margin-top: 20px; 251 | border-radius: 6px; 252 | border: 2px solid crimson; 253 | transition: all 0.3s ease; 254 | } 255 | .about .about-content .right a:hover{ 256 | color: crimson; 257 | background: none; 258 | } 259 | 260 | /* services section styling */ 261 | .services, .teams{ 262 | color:#fff; 263 | background: #111; 264 | } 265 | .services .title::before, 266 | .teams .title::before{ 267 | background: #fff; 268 | } 269 | .services .title::after, 270 | .teams .title::after{ 271 | background: #111; 272 | content: "what i provide"; 273 | } 274 | .services .serv-content .card{ 275 | width: calc(33% - 20px); 276 | background: #222; 277 | text-align: center; 278 | border-radius: 6px; 279 | padding: 50px 25px; 280 | cursor: pointer; 281 | transition: all 0.3s ease; 282 | } 283 | .services .serv-content .card:hover{ 284 | background: crimson; 285 | } 286 | .services .serv-content .card .box{ 287 | transition: all 0.3s ease; 288 | } 289 | .services .serv-content .card:hover .box{ 290 | transform: scale(1.05); 291 | } 292 | .services .serv-content .card i{ 293 | font-size: 50px; 294 | color: crimson; 295 | transition: color 0.3s ease; 296 | } 297 | .services .serv-content .card:hover i{ 298 | color: #fff; 299 | } 300 | .services .serv-content .card .text{ 301 | font-size: 25px; 302 | font-weight: 500; 303 | margin: 10px 0 7px 0; 304 | } 305 | 306 | /* skills section styling */ 307 | 308 | .skills .title::after{ 309 | content: "what i know"; 310 | } 311 | .skills .skills-content .column{ 312 | width: calc(50% - 30px); 313 | } 314 | .skills .skills-content .left .text{ 315 | font-size: 20px; 316 | font-weight: 600; 317 | margin-bottom: 10px; 318 | } 319 | .skills .skills-content .left p{ 320 | text-align: justify; 321 | } 322 | .skills .skills-content .left a{ 323 | display: inline-block; 324 | background: crimson; 325 | color: #fff; 326 | font-size: 18px; 327 | font-weight: 500; 328 | padding: 8px 16px; 329 | margin-top: 20px; 330 | border-radius: 6px; 331 | border: 2px solid crimson; 332 | transition: all 0.3s ease; 333 | } 334 | .skills .skills-content .left a:hover{ 335 | color: crimson; 336 | background: none; 337 | } 338 | .skills .skills-content .right .bars{ 339 | margin-bottom: 15px; 340 | } 341 | .skills .skills-content .right .info{ 342 | display: flex; 343 | margin-bottom: 5px; 344 | align-items: center; 345 | justify-content: space-between; 346 | } 347 | .skills .skills-content .right span{ 348 | font-weight: 500; 349 | font-size: 18px; 350 | } 351 | .skills .skills-content .right .line{ 352 | height: 5px; 353 | width: 100%; 354 | background: lightgrey; 355 | position: relative; 356 | } 357 | .skills .skills-content .right .line::before{ 358 | content: ""; 359 | position: absolute; 360 | height: 100%; 361 | left: 0; 362 | top: 0; 363 | background: crimson; 364 | } 365 | .skills-content .right .html::before{ 366 | width: 90%; 367 | } 368 | .skills-content .right .css::before{ 369 | width: 60%; 370 | } 371 | .skills-content .right .js::before{ 372 | width: 80%; 373 | } 374 | .skills-content .right .php::before{ 375 | width: 50%; 376 | } 377 | .skills-content .right .mysql::before{ 378 | width: 70%; 379 | } 380 | 381 | /* teams section styling */ 382 | .teams .title::after{ 383 | content: "who with me"; 384 | } 385 | .teams .carousel .card{ 386 | background: #222; 387 | border-radius: 6px; 388 | padding: 25px 35px; 389 | text-align: center; 390 | overflow: hidden; 391 | transition: all 0.3s ease; 392 | } 393 | .teams .carousel .card:hover{ 394 | background: crimson; 395 | } 396 | .teams .carousel .card .box{ 397 | display: flex; 398 | flex-direction: column; 399 | align-items: center; 400 | justify-content: center; 401 | transition: all 0.3s ease; 402 | } 403 | .teams .carousel .card:hover .box{ 404 | transform: scale(1.05); 405 | } 406 | .teams .carousel .card .text{ 407 | font-size: 25px; 408 | font-weight: 500; 409 | margin: 10px 0 7px 0; 410 | } 411 | .teams .carousel .card img{ 412 | height: 150px; 413 | width: 150px; 414 | object-fit: cover; 415 | border-radius: 50%; 416 | border: 5px solid crimson; 417 | transition: all 0.3s ease; 418 | } 419 | .teams .carousel .card:hover img{ 420 | border-color: #fff; 421 | } 422 | .owl-dots{ 423 | text-align: center; 424 | margin-top: 20px; 425 | } 426 | .owl-dot{ 427 | height: 13px; 428 | width: 13px; 429 | margin: 0 5px; 430 | outline: none!important; 431 | border-radius: 50%; 432 | border: 2px solid crimson!important; 433 | transition: all 0.3s ease; 434 | } 435 | .owl-dot.active{ 436 | width: 35px; 437 | border-radius: 14px; 438 | } 439 | .owl-dot.active, 440 | .owl-dot:hover{ 441 | background: crimson!important; 442 | } 443 | 444 | /* contact section styling */ 445 | .contact .title::after{ 446 | content: "get in touch"; 447 | } 448 | .contact .contact-content .column{ 449 | width: calc(50% - 30px); 450 | } 451 | .contact .contact-content .text{ 452 | font-size: 20px; 453 | font-weight: 600; 454 | margin-bottom: 10px; 455 | } 456 | .contact .contact-content .left p{ 457 | text-align: justify; 458 | } 459 | .contact .contact-content .left .icons{ 460 | margin: 10px 0; 461 | } 462 | .contact .contact-content .row{ 463 | display: flex; 464 | height: 65px; 465 | align-items: center; 466 | } 467 | .contact .contact-content .row .info{ 468 | margin-left: 30px; 469 | } 470 | .contact .contact-content .row i{ 471 | font-size: 25px; 472 | color: crimson; 473 | } 474 | .contact .contact-content .info .head{ 475 | font-weight: 500; 476 | } 477 | .contact .contact-content .info .sub-title{ 478 | color: #333; 479 | } 480 | .contact .right form .fields{ 481 | display: flex; 482 | } 483 | .contact .right form .field, 484 | .contact .right form .fields .field{ 485 | height: 45px; 486 | width: 100%; 487 | margin-bottom: 15px; 488 | } 489 | .contact .right form .textarea{ 490 | height: 80px; 491 | width: 100%; 492 | } 493 | .contact .right form .name{ 494 | margin-right: 10px; 495 | } 496 | .contact .right form .field input, 497 | .contact .right form .textarea textarea{ 498 | height: 100%; 499 | width: 100%; 500 | border: 1px solid lightgrey; 501 | border-radius: 6px; 502 | outline: none; 503 | padding: 0 15px; 504 | font-size: 17px; 505 | font-family: 'Poppins', sans-serif; 506 | transition: all 0.3s ease; 507 | } 508 | .contact .right form .field input:focus, 509 | .contact .right form .textarea textarea:focus{ 510 | border-color: #b3b3b3; 511 | } 512 | .contact .right form .textarea textarea{ 513 | padding-top: 10px; 514 | resize: none; 515 | } 516 | .contact .right form .button-area{ 517 | display: flex; 518 | align-items: center; 519 | } 520 | .right form .button-area button{ 521 | color: #fff; 522 | display: block; 523 | width: 160px!important; 524 | height: 45px; 525 | outline: none; 526 | font-size: 18px; 527 | font-weight: 500; 528 | border-radius: 6px; 529 | cursor: pointer; 530 | flex-wrap: nowrap; 531 | background: crimson; 532 | border: 2px solid crimson; 533 | transition: all 0.3s ease; 534 | } 535 | .right form .button-area button:hover{ 536 | color: crimson; 537 | background: none; 538 | } 539 | /* footer section styling */ 540 | footer{ 541 | background: #111; 542 | padding: 15px 23px; 543 | color: #fff; 544 | text-align: center; 545 | } 546 | footer span a{ 547 | color: crimson; 548 | text-decoration: none; 549 | } 550 | footer span a:hover{ 551 | text-decoration: underline; 552 | } 553 | 554 | 555 | /* responsive media query start */ 556 | @media (max-width: 1104px) { 557 | .about .about-content .left img{ 558 | height: 350px; 559 | width: 350px; 560 | } 561 | } 562 | 563 | @media (max-width: 991px) { 564 | .max-width{ 565 | padding: 0 50px; 566 | } 567 | } 568 | @media (max-width: 947px){ 569 | .menu-btn{ 570 | display: block; 571 | z-index: 999; 572 | } 573 | .menu-btn i.active:before{ 574 | content: "\f00d"; 575 | } 576 | .navbar .menu{ 577 | position: fixed; 578 | height: 100vh; 579 | width: 100%; 580 | left: -100%; 581 | top: 0; 582 | background: #111; 583 | text-align: center; 584 | padding-top: 80px; 585 | transition: all 0.3s ease; 586 | } 587 | .navbar .menu.active{ 588 | left: 0; 589 | } 590 | .navbar .menu li{ 591 | display: block; 592 | } 593 | .navbar .menu li a{ 594 | display: inline-block; 595 | margin: 20px 0; 596 | font-size: 25px; 597 | } 598 | .home .home-content .text-2{ 599 | font-size: 70px; 600 | } 601 | .home .home-content .text-3{ 602 | font-size: 35px; 603 | } 604 | .home .home-content a{ 605 | font-size: 23px; 606 | padding: 10px 30px; 607 | } 608 | .max-width{ 609 | max-width: 930px; 610 | } 611 | .about .about-content .column{ 612 | width: 100%; 613 | } 614 | .about .about-content .left{ 615 | display: flex; 616 | justify-content: center; 617 | margin: 0 auto 60px; 618 | } 619 | .about .about-content .right{ 620 | flex: 100%; 621 | } 622 | .services .serv-content .card{ 623 | width: calc(50% - 10px); 624 | margin-bottom: 20px; 625 | } 626 | .skills .skills-content .column, 627 | .contact .contact-content .column{ 628 | width: 100%; 629 | margin-bottom: 35px; 630 | } 631 | } 632 | 633 | @media (max-width: 690px) { 634 | .max-width{ 635 | padding: 0 23px; 636 | } 637 | .home .home-content .text-2{ 638 | font-size: 60px; 639 | } 640 | .home .home-content .text-3{ 641 | font-size: 32px; 642 | } 643 | .home .home-content a{ 644 | font-size: 20px; 645 | } 646 | .services .serv-content .card{ 647 | width: 100%; 648 | } 649 | } 650 | 651 | @media (max-width: 500px) { 652 | .home .home-content .text-2{ 653 | font-size: 50px; 654 | } 655 | .home .home-content .text-3{ 656 | font-size: 27px; 657 | } 658 | .about .about-content .right .text, 659 | .skills .skills-content .left .text{ 660 | font-size: 19px; 661 | } 662 | .contact .right form .fields{ 663 | flex-direction: column; 664 | } 665 | .contact .right form .name, 666 | .contact .right form .email{ 667 | margin: 0; 668 | } 669 | .right form .error-box{ 670 | width: 150px; 671 | } 672 | .scroll-up-btn{ 673 | right: 15px; 674 | bottom: 15px; 675 | height: 38px; 676 | width: 35px; 677 | font-size: 23px; 678 | line-height: 38px; 679 | } 680 | } 681 | --------------------------------------------------------------------------------