├── Entry Level Web Developer Resume.pdf ├── Index..html ├── ReadMe.md ├── css └── style.css ├── images ├── 2048game.png ├── banner-01.webp ├── curn-icon.png ├── currency-converter.png ├── dictionary.png ├── footer-dotted-right-img.png ├── footer-left-dotted-img.png ├── home-illustrator.jpg ├── lang-translator.png ├── piceditor.png ├── service-icon1.png ├── service-icon2.png ├── service-icon3.png ├── service-icon4.png ├── tastimonials-img.png ├── tictactoe.png └── triangle-icon.png ├── index.html └── js └── script.js /Entry Level Web Developer Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/Entry Level Web Developer Resume.pdf -------------------------------------------------------------------------------- /Index..html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My Portfolio 7 | 8 | 9 | 10 |

11 |

Your Name

12 | 20 |

21 | 22 |

23 |

About Me

24 |

Hello! I'm a [Your Profession]. Passionate about coding and web development.

25 |

26 | 27 |

28 |

Projects

29 |

30 |

Project 1

31 |

Description of project.

32 |

33 |

34 |

Project 2

35 |

Description of project.

36 |

37 |

38 | 39 |

40 |

Skills

41 |

HTML
CSS
JavaScript
React

47 |

48 | 49 |

50 |

Contact

51 |

Email: your.email@example.com

52 |

53 | 54 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /ReadMe.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/pawantech12/portfolio-website) 4 | ![GitHub stars](https://img.shields.io/github/stars/pawantech12/portfolio-website?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/pawantech12/portfolio-website?style=social) 6 | 7 |
8 | 9 |

Responsive Portfolio Website

10 | 11 | Responsive Portfolio Website using HTML, CSS, and JavaScript. 12 | 13 | ➥ Live Demo 14 | 15 |

16 | 17 |
18 | 19 | ### Desktop Preview 20 | 21 | https://github.com/pawantech12/portfolio-website/assets/118673866/0322c419-a173-4aa9-a360-b09bd7bd24aa 22 | 23 | ### Prerequisites 24 | 25 | Before you begin, ensure you have met the following requirements: 26 | 27 | * You Should Know Basic or Intermediate of HTML ,CSS and JavaScript 28 | * This website is developed by bootstrap 5 copy below code : 29 | ``` 30 | 31 | 32 | 33 | 34 | 35 | ``` 36 | 37 | * JQuery CDN LInk : 38 | ``` 39 | 40 | 41 | ``` 42 | 43 | * Bootstrap Icon : 44 | ``` 45 | 46 | 47 | ``` 48 | 49 | ### AOS Animation Library Installation 50 | 51 | ### Basic 52 | Add Styles in `` : 53 | ```css 54 | 55 | ``` 56 | Add script right before closing `` tag, and initialize AOS : 57 | ```js 58 | 59 | 62 | ``` 63 | 64 | ### Using package managers 65 | 66 | Install `aos` package: 67 | * `yarn add aos@next` 68 | * or `npm install --save aos@next` 69 | 70 | Import script, styles and initialize AOS: 71 | ```js 72 | import AOS from 'aos'; 73 | import 'aos/dist/aos.css'; // You can also use for styles 74 | // .. 75 | AOS.init(); 76 | ``` 77 | 78 | In order to make it work you'll have to make sure your build process has configured styles loader, and bundles it all correctly. 79 | If you're using [Parcel](https://parceljs.org/) however, it will work out of the box as provided. 80 | 81 | ### How to use it ? 82 | 1. Initialize AOS : 83 | ```js 84 | // initializing AOS library 85 | AOS.init({ 86 | duration: 1000, 87 | offset: 50, 88 | }); 89 | ``` 90 | 91 | 2. Set animation using `data-aos` attribute: 92 | ``` 93 |

94 | ``` 95 | 96 | * For More Guidence Click on AOS Animation 97 | 98 | ### Project Contain 99 | 100 | * Sticky Responsive Navigation Bar 101 | * Hero Section 102 | * Expertise section 103 | * Skill Section with Progress Animation 104 | * Working Portfolio Section 105 | * Testimonial Section 106 | * Blog Section 107 | * Contact Section 108 | * Footer Section 109 | * Fully Responsive for all devices 110 | 111 | ### Font Family 112 | 113 | * I have Used Google Fonts - Josefin Sans 114 | ``` 115 | 116 | 117 | 118 | 119 | ``` 120 | 121 | ### Run Locally 122 | 123 | To run **Personal Portfolio** locally, run this command on your git bash: 124 | 125 | Linux and macOS: 126 | 127 | ```bash 128 | sudo git clone https://github.com/pawantech12/portfolio-website.git 129 | ``` 130 | 131 | Windows: 132 | 133 | ```bash 134 | git clone https://github.com/pawantech12/portfolio-website.git 135 | ``` 136 | 137 | ### Contact 138 | 139 | If you want to contact with me you can reach me at [Instagram](https://www.instagram.com/codewithpawan/). 140 | 141 | ### License 142 | 143 | This project is **Free To Use** and does not contains any license. 144 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* appling google font over the website */ 2 | body{ 3 | font-family: 'Josefin Sans', sans-serif; 4 | font-weight: 400; 5 | } 6 | /* styling menu icon */ 7 | .nav-menu{ 8 | border: none; 9 | background-color: #fff; 10 | font-size: 1.5rem; 11 | color: #fca61f; 12 | } 13 | /* styling navbar links */ 14 | .navbar-nav a{ 15 | color: black; 16 | position: relative; 17 | } 18 | .navbar-nav a:hover{ 19 | color: #fca61f; 20 | } 21 | .navbar-nav a:after { 22 | background: none repeat scroll 0 0 transparent; 23 | bottom: 0; 24 | content: ""; 25 | display: block; 26 | height: 2px; 27 | left: 50%; 28 | top: 35px; 29 | position: absolute; 30 | background: #fca61f; 31 | transition: width 0.3s ease 0s, left 0.3s ease 0s; 32 | width: 0; 33 | } 34 | .navbar-nav a:hover:after { 35 | width: 100%; 36 | left: 0; 37 | } 38 | /* styling contact btn */ 39 | .c-btn{ 40 | border: none; 41 | background: #fca61f; 42 | color: #fff; 43 | font-size: 1.2rem; 44 | } 45 | /* styling home section starts */ 46 | .home{ 47 | background: linear-gradient(33deg, rgba(242,242,255,1) 0%, rgba(235,249,255,1) 100%); 48 | padding: 30px 0px 10px 0px; 49 | } 50 | .home h2{ 51 | font-size: 3rem; 52 | line-height: 4rem; 53 | } 54 | .c-orange{ 55 | color: #6f34fe; 56 | font-weight: 700; 57 | font-size: 4rem; 58 | } 59 | .home p{ 60 | width: fit-content; 61 | margin-top: 1rem; 62 | font-size: 1.2rem; 63 | } 64 | .h-btn:hover{ 65 | background: #6f34fe; 66 | color: #fff; 67 | transform: translateY(-20px); 68 | transition-duration: 1s; 69 | } 70 | .link{ 71 | text-decoration: none; 72 | font-size: 1.2rem; 73 | color: #fca61f; 74 | position: relative; 75 | } 76 | .link::after{ 77 | content: ''; 78 | position: absolute; 79 | width: 100%; 80 | transform: scaleX(0); 81 | height: 2px; 82 | bottom: 0; 83 | left: 0; 84 | top: 20px; 85 | background-color: #6f34fe; 86 | transform-origin: bottom right; 87 | transition: transform 0.25s ease-out; 88 | } 89 | .link:hover{ 90 | color: #6f34fe; 91 | } 92 | .link:hover::after{ 93 | transform: scaleX(1); 94 | transform-origin: bottom left; 95 | } 96 | /* adding animation to home section image */ 97 | .home img{ 98 | animation: floatimg 4s ease-in-out infinite; 99 | } 100 | 101 | @keyframes floatimg { 102 | 0%{ 103 | transform: translateX(0); 104 | } 105 | 50%{ 106 | transform: translateX(-24px); 107 | } 108 | 100%{ 109 | transform: translateX(0); 110 | } 111 | } 112 | 113 | /* expertise section starts */ 114 | .heading small{ 115 | color: #6f34fe; 116 | font-size: 1.5rem; 117 | font-weight: 600; 118 | } 119 | .heading h3{ 120 | margin-top: 0.5rem; 121 | color: #3f396d; 122 | font-size: 2.5rem; 123 | font-weight: 700; 124 | } 125 | .expertise h4{ 126 | color: #3f396d; 127 | font-weight: 700; 128 | } 129 | .expertise a{ 130 | text-decoration: none; 131 | color: #fca61f; 132 | } 133 | .expertise a:hover{ 134 | color: #6f34fe; 135 | } 136 | .expertise .service-card{ 137 | text-align: center; 138 | padding: 15px 15px; 139 | border-radius: 0.7rem; 140 | } 141 | 142 | /* skill section starts */ 143 | .skill{ 144 | background-color: rgb(234, 234, 249); 145 | } 146 | .progress-card{ 147 | padding: 12% 10% 10% 15%; 148 | background-color: #fff; 149 | text-align: center; 150 | border-radius: 10%; 151 | } 152 | .progress-card:hover{ 153 | transform: scale(1.1,1.1); 154 | transition-duration: 0.6s; 155 | } 156 | .circular-progress{ 157 | position: relative; 158 | height: 130px; 159 | width: 130px; 160 | border-radius: 50%; 161 | background: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg); 162 | display: flex; 163 | align-items: center; 164 | justify-content: center; 165 | } 166 | .circular-progress::before{ 167 | content: ""; 168 | position: absolute; 169 | height: 120px; 170 | width: 120px; 171 | border-radius: 50%; 172 | background-color: #fff; 173 | } 174 | .progress-value{ 175 | position: relative; 176 | font-size: 1.5rem; 177 | font-weight: 600; 178 | } 179 | .html-progress{ 180 | color: #fca61f; 181 | } 182 | .javascript-progress{ 183 | color: #6f34fe; 184 | } 185 | .php-progress{ 186 | color: #20c997; 187 | } 188 | .reactjs-progress{ 189 | color: #3f396d; 190 | } 191 | .text{ 192 | font-size: 1.2rem; 193 | font-weight: 500; 194 | } 195 | .heading p{ 196 | font-size: 1.3rem; 197 | } 198 | 199 | /* portfolio section starts */ 200 | #myBtnContainer{ 201 | margin-bottom: 45px; 202 | } 203 | #myBtnContainer button{ 204 | border: none; 205 | color: black; 206 | background: transparent; 207 | font-size: 20px; 208 | font-weight: 600; 209 | cursor: pointer; 210 | display: inline-block; 211 | margin: 0 25px; 212 | } 213 | #myBtnContainer button:hover{ 214 | color: #fca61f; 215 | } 216 | 217 | #myBtnContainer button:focus{ 218 | outline: none; 219 | } 220 | .post .content h4{ 221 | font-size: 1rem; 222 | font-weight: 700; 223 | } 224 | .post .card{ 225 | border: none; 226 | } 227 | 228 | /* testimonial section starts */ 229 | .testimonial img:hover{ 230 | transform: scale(1.2,1.2); 231 | transition-duration: 1s; 232 | } 233 | .testimonial h4{ 234 | color: #3f396d; 235 | } 236 | .testimonial i{ 237 | font-size: 2.9rem; 238 | color: #fca61f; 239 | 240 | } 241 | .testimonial .nextprev-btn{ 242 | border: none; 243 | background-color: #fff; 244 | } 245 | .prev:hover,.prev-btn:hover{ 246 | color:#6f34fe; 247 | transform: translateX(-10px); 248 | transition-duration: 1s; 249 | } 250 | .next:hover,.next-btn:hover{ 251 | color:#6f34fe; 252 | transform: translateX(10px); 253 | transition-duration: 1s; 254 | } 255 | 256 | /* blog section starts */ 257 | .blog{ 258 | background-color: #f2f2ff; 259 | } 260 | .blog .blogpost .card{ 261 | border: none; 262 | border-radius: 5%; 263 | } 264 | .nav-bg{ 265 | background-color: #fff; 266 | } 267 | 268 | .blog .blogpost small{ 269 | color: #6f34fe; 270 | font-size: 1.1rem; 271 | } 272 | .blog .blogpost h4,.blogpost a{ 273 | color: #3f396d; 274 | font-weight: 700; 275 | margin-top: 1rem; 276 | text-decoration: none; 277 | } 278 | .blogpost a:hover{ 279 | color: #fca61f; 280 | } 281 | .blog .blogpost .read-more-btn{ 282 | text-decoration: none; 283 | color: #fca61f; 284 | font-size: 1.1rem; 285 | } 286 | .blog .blogpost .read-more-btn:hover{ 287 | color: #6f34fe; 288 | } 289 | /* styling modal group */ 290 | .btn-c{ 291 | margin-left: 94%; 292 | background-color: transparent; 293 | border: none; 294 | color: #fff; 295 | font-size: 2rem; 296 | margin-top: -3%; 297 | } 298 | .btn-c i{ 299 | color: #fca61f; 300 | } 301 | .modal-body .content span{ 302 | font-size: 1rem; 303 | } 304 | .modal-body .content small{ 305 | font-size: 1rem; 306 | color: #6f34fe; 307 | } 308 | /* contact section starts */ 309 | .contact{ 310 | background-color: #f3f3f3; 311 | } 312 | .contact-details i{ 313 | font-size: 1.5rem; 314 | color: #fca61f; 315 | } 316 | .contact-details p{ 317 | font-size: 1.2rem; 318 | margin-left: 1rem; 319 | } 320 | .contact-form .form-control:focus{ 321 | box-shadow: none; 322 | border: 1px solid #fca61f; 323 | } 324 | .contact-form .form-control{ 325 | padding: 10px 10px; 326 | width: 80%; 327 | } 328 | 329 | /* footer section starts */ 330 | footer{ 331 | background-color: #211e39; 332 | } 333 | 334 | footer .link-group a{ 335 | margin-left: 10px; 336 | margin-right: 10px; 337 | text-decoration: none; 338 | color: #6c757d; 339 | font-size: 1.1rem; 340 | margin-top: 1rem; 341 | } 342 | footer .link-group a:hover{ 343 | color: #fca61f; 344 | } 345 | .social-links button{ 346 | border: none; 347 | margin-right: 1rem; 348 | font-size: 1.2rem; 349 | background-color: #fff; 350 | padding: 14px 15px 10px 15px; 351 | } 352 | .social-links .dribble{ 353 | color: #f33a7e; 354 | } 355 | .social-links button:hover{ 356 | color: #fff; 357 | transform: translateY(-20px); 358 | transition-duration: 1s; 359 | } 360 | .social-links .dribble:hover{ 361 | background-color: #f33a7e; 362 | } 363 | .social-links .whatsapp{ 364 | color: #25D366; 365 | } 366 | .social-links .whatsapp:hover{ 367 | background-color: #25D366; 368 | } 369 | .social-links .behance{ 370 | color: #255afc; 371 | } 372 | .social-links .behance:hover{ 373 | background-color: #255afc; 374 | } 375 | 376 | /* styling back to top button */ 377 | #btn-back-to-top { 378 | position: fixed; 379 | bottom: 40px; 380 | right: 40px; 381 | display: none; 382 | font-size: 1.4rem; 383 | background-color: #fca61f; 384 | color: #fff; 385 | animation: pulse 3s infinite; 386 | } 387 | -------------------------------------------------------------------------------- /images/2048game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/2048game.png -------------------------------------------------------------------------------- /images/banner-01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/banner-01.webp -------------------------------------------------------------------------------- /images/curn-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/curn-icon.png -------------------------------------------------------------------------------- /images/currency-converter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/currency-converter.png -------------------------------------------------------------------------------- /images/dictionary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/dictionary.png -------------------------------------------------------------------------------- /images/footer-dotted-right-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/footer-dotted-right-img.png -------------------------------------------------------------------------------- /images/footer-left-dotted-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/footer-left-dotted-img.png -------------------------------------------------------------------------------- /images/home-illustrator.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/home-illustrator.jpg -------------------------------------------------------------------------------- /images/lang-translator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/lang-translator.png -------------------------------------------------------------------------------- /images/piceditor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/piceditor.png -------------------------------------------------------------------------------- /images/service-icon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/service-icon1.png -------------------------------------------------------------------------------- /images/service-icon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/service-icon2.png -------------------------------------------------------------------------------- /images/service-icon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/service-icon3.png -------------------------------------------------------------------------------- /images/service-icon4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/service-icon4.png -------------------------------------------------------------------------------- /images/tastimonials-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/tastimonials-img.png -------------------------------------------------------------------------------- /images/tictactoe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/tictactoe.png -------------------------------------------------------------------------------- /images/triangle-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pawantech12/portfolio-website/6506ccaa993699eed597426404177a63e95a92e8/images/triangle-icon.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Personal Portfolio - Pawan Kumavat 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 27 | 28 | 29 | 33 | 34 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |

47 |

48 | 51 | 59 | 84 | 85 |

86 |

87 | 88 | 89 | 90 |

91 |

92 | 93 |

94 |

95 | Hello! I Am
Pawan Kumavat 96 |

97 |

98 | I'm A Web Developer having 5 years of experience in expertise of 99 | creating website with fully responsive Also with backend part too. 100 |

101 | 104 | 105 |

106 |

107 |

108 |

109 |

110 |

111 | 112 | 113 | 114 |

115 |

116 | My Expertise 117 |

118 | Provide Wide Range of
119 | Digital Services 120 |

121 |

122 |

123 |

124 |

125 |

126 |

131 |

132 |

133 |

Web Design

134 |

135 | Dolor repellendus temporibus autem quibusdam officiis debitis 136 | rerum neces aibus minima veniam. 137 |

138 | Read More 139 |

140 |

141 |

142 |

143 |

144 |

145 |

150 |

151 |

152 |

Web Development

153 |

154 | Dolor repellendus temporibus autem quibusdam officiis debitis 155 | rerum neces aibus minima veniam. 156 |

157 | Read More 158 |

159 |

160 |

161 |

162 |

163 |

164 |

169 |

170 |

171 |

Debugging

172 |

173 | Dolor repellendus temporibus autem quibusdam officiis debitis 174 | rerum neces aibus minima veniam. 175 |

176 | Read More 177 |

178 |

179 |

180 |

181 |

182 | 183 | 184 | 185 |

186 |

187 |

188 |

189 |

190 |

191 |

192 | 0% 193 |

194 |
195 | HTML & CSS 196 |

197 |

198 |

199 |

200 |

201 | 0% 202 |

203 |
204 | JavaScript 205 |

206 |

207 |

208 |

209 |

210 |

211 |

212 | 0% 213 |

214 |
215 | PHP 216 |

217 |

218 |

219 |

220 |

221 | 0% 222 |

223 |
224 | ReactJS 225 |

226 |

227 |

228 |

229 |

230 |

231 | My Skills 232 |

Beautiful & Unique Digital Experiences

233 |

234 | Nostrum exercitationem ullam corporis suscipit laborioa nisi ut 235 | aliquid exrea commodi consequatur magni dolores aos qui ratione 236 | voluptatem nesciunt. 237 |

238 |

239 | Quia voluptas sit aspernatur aut odit aut fugit, sed ruiano 240 | consequntar magni dolores. 241 |

242 | 251 |

252 |

253 |

254 |

255 | 256 | 257 | 258 |

259 |

260 | Creative Work 261 |

Check My Portfolio

262 |

263 | 264 |

265 | 266 | 267 | 268 | 269 | 270 | 271 |

272 |

273 |

274 |

275 |

276 |

277 |

278 |

2048 Game

285 |

286 |

287 |

288 |

289 |

294 |

295 |

Converter App

302 |

303 |

304 |

305 |

306 |

307 |

308 |

Dictionary

315 |

316 |

317 |

318 |

319 |

320 |

321 |

322 |

323 |

PicEditor App

330 |

331 |

332 |

333 |

334 |

335 |

336 |

TicTacToe Game

343 |

344 |

345 |

346 |

347 |

352 |

353 |

Lang Translator

360 |

361 |

362 |

363 |

364 |

365 | 366 | 367 | 368 |

369 |

370 |

371 |

372 |

373 |

374 |

375 | Testimonials 376 |

Happy Clients Feedback

377 | 378 |

383 |

384 |

385 |

386 |

387 | 388 |

389 |

390 |

391 | Quisruam est, qui dolorem ipsum quia dolor sit amet, 392 | consecteaur aeci velit, sed quia non numquam eius modi 393 | tempora incidunt ut lao magnam aliquam quaerat ... 394 |

395 |

Kevin Andrew

396 | CEO of Company 397 |

398 |

399 |

400 |

401 |

402 |

403 | 404 |

405 |

406 |

407 | Quisruam est, qui dolorem ipsum quia dolor sit amet, 408 | consecteaur aeci velit, sed quia non numquam eius modi 409 | tempora incidunt ut lao magnam aliquam quaerat ... 410 |

411 |

Kevin Andrew

412 | CEO of Company 413 |

414 |

415 |

416 |

417 |

418 |

419 | 420 |

421 |

422 |

423 | Quisruam est, qui dolorem ipsum quia dolor sit amet, 424 | consecteaur aeci velit, sed quia non numquam eius modi 425 | tempora incidunt ut lao magnam aliquam quaerat ... 426 |

427 |

Kevin Andrew

428 | CEO of Company 429 |

430 |

431 |

432 |

433 | 442 | 451 |

452 |

453 |

454 |

455 |

456 | 457 | 458 | 459 |

460 |

461 | Latest News 462 |

Blog & Articles

463 |

464 |

465 |

466 |

467 |

472 |

473 | By Pawan KumavatMar 8,2022 475 |

476 | Quis autem vea eum iure reprehenderit 477 |

478 |

479 | Dolor repellendus temporibus autem quibusdam officiis debitis 480 | rerum nece aibus minima veniam. 481 |

482 | Read More 483 |

484 |

485 |

486 |

487 |

488 |

493 |

494 | By Pawan KumavatMar 8,2022 496 |

497 | Quis autem vea eum iure reprehenderit 498 |

499 |

500 | Dolor repellendus temporibus autem quibusdam officiis debitis 501 | rerum nece aibus minima veniam. 502 |

503 | Read More 504 |

505 |

506 |

507 |

508 |

509 |

514 |

515 | By Pawan KumavatMar 8,2022 517 |

518 | Quis autem vea eum iure reprehenderit 519 |

520 |

521 | Dolor repellendus temporibus autem quibusdam officiis debitis 522 | rerum nece aibus minima veniam. 523 |

524 | Read More 525 |

526 |

527 |

528 | 529 | 601 | 673 | 745 |

746 |

747 | 748 | 749 | 750 |

751 |

752 | Get in Touch 753 |

Any Questions? Feel Free to Contact

754 |

755 |

756 |

757 |

758 |

759 | 760 |

761 |

762 |

121 King Street Melbourne, 3000, Australia

763 |

764 |

765 |

766 |

767 | 768 |

769 |

770 |

+91 9527818693

771 |

772 |

773 |

774 |

775 | 776 |

777 |

778 |

codewithpawan@gmail.com

779 |

780 |

781 |

782 |

783 | 784 |

785 |

786 |

codingpawan.com

787 |

788 |

789 |

790 |

791 |

792 |

793 | 799 |

800 |

801 | 807 |

808 |

809 | 815 |

816 |

817 | 823 |

824 | 827 |

828 |

829 |

830 |

831 | 832 | 833 | 834 | 841 | 842 | 843 | 873 | 874 | 875 | 876 | 881 | 882 | 883 | 884 | 891 | 892 | 893 | 894 | 895 | 896 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | // htmlcss progress circular bar 2 | let htmlProgress = document.querySelector(".html-css"), 3 | htmlValue = document.querySelector(".html-progress"); 4 | 5 | let htmlStartValue = 0, 6 | htmlEndValue = 90, 7 | htmlspeed = 30; 8 | 9 | let progresshtml = setInterval(() => { 10 | htmlStartValue++; 11 | 12 | htmlValue.textContent = `${htmlStartValue}%`; 13 | htmlProgress.style.background = `conic-gradient(#fca61f ${ 14 | htmlStartValue * 3.6 15 | }deg, #ededed 0deg)`; 16 | 17 | if (htmlStartValue == htmlEndValue) { 18 | clearInterval(progresshtml); 19 | } 20 | }, htmlspeed); 21 | 22 | // javasript progress circular bar 23 | let javascriptProgress = document.querySelector(".javascript"), 24 | javascriptValue = document.querySelector(".javascript-progress"); 25 | 26 | let javascriptStartValue = 0, 27 | javascriptEndValue = 75, 28 | jsspeed = 30; 29 | 30 | let progressjs = setInterval(() => { 31 | javascriptStartValue++; 32 | 33 | javascriptValue.textContent = `${javascriptStartValue}%`; 34 | javascriptProgress.style.background = `conic-gradient(#7d2ae8 ${ 35 | javascriptStartValue * 3.6 36 | }deg, #ededed 0deg)`; 37 | 38 | if (javascriptStartValue == javascriptEndValue) { 39 | clearInterval(progressjs); 40 | } 41 | }, jsspeed); 42 | 43 | // php progress circular bar 44 | let phpProgress = document.querySelector(".php"), 45 | phpValue = document.querySelector(".php-progress"); 46 | 47 | let phpStartValue = 0, 48 | phpEndValue = 80, 49 | phpspeed = 30; 50 | 51 | let progressphp = setInterval(() => { 52 | phpStartValue++; 53 | 54 | phpValue.textContent = `${phpStartValue}%`; 55 | phpProgress.style.background = `conic-gradient(#20c997 ${ 56 | phpStartValue * 3.6 57 | }deg, #ededed 0deg)`; 58 | 59 | if (phpStartValue == phpEndValue) { 60 | clearInterval(progressphp); 61 | } 62 | }, phpspeed); 63 | 64 | // reactjs progress circular bar 65 | let reactProgress = document.querySelector(".reactjs"), 66 | reactValue = document.querySelector(".reactjs-progress"); 67 | 68 | let reactStartValue = 0, 69 | reactEndValue = 30, 70 | rjsspeed = 30; 71 | 72 | let progressreact = setInterval(() => { 73 | reactStartValue++; 74 | 75 | reactValue.textContent = `${reactStartValue}%`; 76 | reactProgress.style.background = `conic-gradient(#3f396d ${ 77 | reactStartValue * 3.6 78 | }deg, #ededed 0deg)`; 79 | 80 | if (reactStartValue == reactEndValue) { 81 | clearInterval(progressreact); 82 | } 83 | }, rjsspeed); 84 | 85 | 86 | // filter using javascript 87 | $(document).ready(function () { 88 | $(".filter-item").click(function () { 89 | const value = $(this).attr("data-filter"); 90 | if (value == "all") { 91 | $(".post").show("1000"); 92 | } else { 93 | $(".post") 94 | .not("." + value) 95 | .hide("1000"); 96 | $(".post") 97 | .filter("." + value) 98 | .show("1000"); 99 | } 100 | }); 101 | }); 102 | 103 | 104 | // javascript for sticky navbar even if u scroll the navbar will be fixed 105 | document.addEventListener("DOMContentLoaded", function(){ 106 | window.addEventListener('scroll', function() { 107 | if (window.scrollY > 50) { 108 | document.getElementById('navbar-top').classList.add('fixed-top'); 109 | // add padding top to show content behind navbar 110 | navbar_height = document.querySelector('.navbar').offsetHeight; 111 | document.body.style.paddingTop = navbar_height + 'px'; 112 | } else { 113 | document.getElementById('navbar-top').classList.remove('fixed-top'); 114 | // remove padding top from body 115 | document.body.style.paddingTop = '0'; 116 | } 117 | }); 118 | }); 119 | 120 | 121 | // adding funtionality to back to top button 122 | 123 | //Get the button 124 | let mybutton = document.getElementById("btn-back-to-top"); 125 | 126 | // When the user scrolls down 20px from the top of the document, show the button 127 | window.onscroll = function () { 128 | scrollFunction(); 129 | }; 130 | function scrollFunction() { 131 | if ( 132 | document.body.scrollTop > 20 || 133 | document.documentElement.scrollTop > 20 134 | ) { 135 | mybutton.style.display = "block"; 136 | } else { 137 | mybutton.style.display = "none"; 138 | } 139 | } 140 | // When the user clicks on the button, scroll to the top of the document 141 | mybutton.addEventListener("click",function(){ 142 | document.body.scrollTop = 0; 143 | document.documentElement.scrollTop = 0; 144 | }); --------------------------------------------------------------------------------

About Me

Projects

Project 1

Project 2

Skills

Contact

Responsive Portfolio Website

95 | Hello! I Am Pawan Kumavat 96 |

118 | Provide Wide Range of 119 | Digital Services 120 |

Web Design

Web Development

Debugging

Beautiful & Unique Digital Experiences

Check My Portfolio

2048 Game

Converter App

Dictionary

PicEditor App

TicTacToe Game

Lang Translator

Happy Clients Feedback

Kevin Andrew

Kevin Andrew

Kevin Andrew

Blog & Articles

476 | Quis autem vea eum iure reprehenderit 477 |

497 | Quis autem vea eum iure reprehenderit 498 |

518 | Quis autem vea eum iure reprehenderit 519 |

Any Questions? Feel Free to Contact

95 | Hello! I Am
Pawan Kumavat 96 |

118 | Provide Wide Range of
119 | Digital Services 120 |