├── README.md ├── index.html └── packages ├── css ├── styles.css └── swiper-bundle.min.css ├── images ├── arun.PNG ├── background.svg ├── portfolio1.jpg ├── portfolio2.png ├── portfolio3.PNG ├── pras-1.jpeg ├── pras-2.jpeg ├── shenan.PNG └── yuga.PNG └── js ├── main.js └── swiper-bundle.min.js /README.md: -------------------------------------------------------------------------------- 1 | ## Responsive Portfolio Website ✨ 2 | 3 | Responsive Portfolio Website Using HTML, CSS and JavaScript, with a beautiful user interface. 4 | Website contains: 5 | - Header 6 | - Home 7 | - About 8 | - Skills 9 | - Qualification 10 | - Services 11 | - Portfolio 12 | - Project in mind 13 | - Testimonial 14 | - Contact 15 | - Footer 16 | 17 | If u liked my website and the code was useful to you,
18 | feel free to leave a star (much appreciated) fork it and customize as you like! :) 19 | 20 | - Inspired design by Bedimcode-Alexa design 🙌 21 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Prashanna 17 | 18 | 19 | 20 | 69 | 70 | 71 |
72 | 73 |
74 |
75 |
76 | 87 | 88 |
89 | 90 | 91 | 95 | 96 | 97 | 101 | 102 | 103 | 104 |
105 | 106 |
107 |

Hi, I'am Prashanna

108 |

Data Analyst

109 |

High level experience in data analitical knowledge and digital banking with quality work.

110 | 111 | Contact Me 112 | 113 |
114 |
115 | 116 |
117 | 118 | 119 | Scroll Down 120 | 121 | 122 |
123 |
124 |
125 | 126 | 127 |
128 |

About Me

129 | My Introduction 130 | 131 |
132 | 133 |
134 |

135 | Data analyst, with extensive knowledge and years of experience, 136 | working in Digital banking technologies and other data analitical tools, 137 | delivering quality work. 138 |

139 |
140 |
141 | 03+ 142 | Years
experience 143 |
144 |
145 | 05+ 146 | Completed
certifications 147 |
148 |
149 | 02+ 150 | companies
worked 151 |
152 |
153 | 154 |
155 | 156 | Download CV 157 | 158 |
159 |
160 |
161 |
162 | 163 | 164 |
165 |

Skills

166 | My technical level 167 | 168 |
169 |
170 | 171 |
172 |
173 | 174 |
175 |

Data Analyst

176 | More than 2 years 177 |
178 | 179 | 180 |
181 |
182 |
183 |
184 |

Python

185 | 60% 186 |
187 |
188 | 189 |
190 |
191 |
192 |
193 |

Tableau

194 | 70% 195 |
196 |
197 | 198 |
199 |
200 |
201 |
202 |

SQL

203 | 50% 204 |
205 |
206 | 207 |
208 |
209 |
210 |
211 |

Google Suite

212 | 70% 213 |
214 |
215 | 216 |
217 |
218 |
219 |
220 | 221 |
222 |
223 | 224 |
225 |

Banker

226 | More than 3 years 227 |
228 | 229 | 230 |
231 |
232 |
233 |
234 |

Digital Banking

235 | 80% 236 |
237 |
238 | 239 |
240 |
241 |
242 |
243 |

Counters

244 | 80% 245 |
246 |
247 | 248 |
249 |
250 |
251 |
252 |

Google suite

253 | 70% 254 |
255 |
256 | 257 |
258 |
259 |
260 |
261 |

MS Office

262 | 90% 263 |
264 |
265 | 266 |
267 |
268 |
269 |
270 |
271 | 272 |
273 | 274 |
275 |
276 | 277 |
278 |

Web Developer

279 | More than 3 years 280 |
281 | 282 | 283 |
284 |
285 |
286 |
287 |

HTML

288 | 90% 289 |
290 |
291 | 292 |
293 |
294 |
295 |
296 |

CSS

297 | 80% 298 |
299 |
300 | 301 |
302 |
303 |
304 |
305 |

JavaScript

306 | 60% 307 |
308 |
309 | 310 |
311 |
312 |
313 |
314 |

WordPress

315 | 70% 316 |
317 |
318 | 319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 | 327 | 328 |
329 |

Qualification

330 | My personal journey 331 | 332 |
333 |
334 |
335 | 336 | Education 337 |
338 | 339 |
340 | 341 | Work 342 |
343 |
344 | 345 |
346 | 347 |
348 | 349 |
350 |
351 |

Diploma in English

352 | British Council, Kandy 353 |
354 | 355 | 2011 - 2012 356 |
357 |
358 | 359 |
360 | 361 | 362 |
363 |
364 | 365 | 366 |
367 |
368 |
369 | 370 | 371 |
372 | 373 |
374 |

GCE Adavance Level

375 | St.Anthony's College, Kandy 376 |
377 | 378 | 2012 - 2014 379 |
380 |
381 |
382 | 383 | 384 |
385 |
386 |

BSc Management Information System

387 | NSBM Green University 388 |
389 | 390 | 2015 - 2018 391 |
392 |
393 | 394 |
395 | 396 | 397 |
398 |
399 | 400 | 401 |
402 |
403 |
404 | 405 | 406 |
407 | 408 |
409 |

Data Analyst Professional Certification

410 | Google | Coursera - Online 411 |
412 | 413 | 2021 414 |
415 |
416 | 417 | 418 |
419 |
420 | 421 | 422 |
423 | 424 |
425 |
426 |

Trainee Banking Assistant

427 | DFCC Head Office - Colombo 428 |
429 | 430 | 2017 - 2019 431 |
432 |
433 | 434 |
435 | 436 | 437 |
438 |
439 | 440 | 441 |
442 |
443 |
444 | 445 | 446 |
447 | 448 |
449 |

Banking Assistant

450 | DFCC Head Office - Colombo 451 |
452 | 453 | 2019 - 2020 454 |
455 |
456 |
457 | 458 | 459 |
460 |
461 |

Data Analyst - Digital banking

462 | DFCC Head Office - Colombo 463 |
464 | 465 | 2020 - Present 466 |
467 |
468 | 469 |
470 | 471 | 472 |
473 |
474 | 475 |
476 | 477 |
478 |
479 |
480 | 481 | 482 |
483 |

Services

484 | What I offer 485 | 486 |
487 | 488 |
489 |
490 | 491 |

Data Analyst

492 |
493 | 494 | View more 495 | 496 | 497 | 498 |
499 |
500 |

Data Analyst

501 | 502 | 503 |
    504 |
  • 505 | 506 |

    I analize data systems.

    507 |
    • 508 | 509 |
  • 510 | 511 |

    Automating information retrieval.

    512 |
    • 513 | 514 |
  • 515 | 516 |

    Systematically applying statistical and logical techniques.

    517 |
    • 518 | 519 |
  • 520 | 521 |

    Visualizing graphs, charts and preparing reports and dashboards.

    522 |
    • 523 |
524 |
525 |
526 |
527 | 528 | 529 |
530 |
531 | 532 |

Banker

533 |
534 | 535 | View more 536 | 537 | 538 | 539 |
540 |
541 |

Banker

542 | 543 | 544 |
    545 |
  • 546 | 547 |

    Assiting both personal and commercial clients with financial questions and needs.

    548 |
    • 549 | 550 |
  • 551 | 552 |

    Maintain customer acoounts and help resolve disputes.

    553 |
    • 554 | 555 |
  • 556 | 557 |

    Refer customers to loan officers or other financial specialist.

    558 |
    • 559 | 560 |
  • 561 | 562 |

    Systematically applying statistical and logical techniques.

    563 |
    • 564 |
565 |
566 |
567 |
568 | 569 | 570 |
571 |
572 | 573 |

Web Developer

574 |
575 | 576 | View more 577 | 578 | 579 | 580 |
581 |
582 |

Web Developer

583 | 584 | 585 |
    586 |
  • 587 | 588 |

    I develop the user interface.

    589 |
    • 590 | 591 |
  • 592 | 593 |

    Webpage development.

    594 |
    • 595 | 596 |
  • 597 | 598 |

    I create Ux element interactions.

    599 |
    • 600 | 601 |
  • 602 | 603 |

    Well trained in WordPress.

    604 |
    • 605 |
606 |
607 |
608 |
609 | 610 | 611 |
612 |
613 | 614 |
615 | 616 |

Portfolio

617 | Most recent works 618 | 619 |
620 |
621 | 622 | 623 |
624 | 625 | 626 |
627 |

Modern Dashboard

628 |

Data analitical dashboard adaptable to all devices, 629 | with ui components and animated interactions.

630 | 631 | Demo 632 | 633 | 634 |
635 |
636 | 637 | 638 | 639 |
640 | 641 | 642 |
643 |

E-Commerce website

644 |

Above Amazon clone is adaptable to all devices, with 645 | ui components and animated interactions.

646 | 647 | Demo 648 | 649 | 650 |
651 |
652 | 653 | 654 | 655 |
656 | 657 | 658 |
659 |

Brand Design

660 |

Tesla Clone is adaptable to all devices, with 661 | ui components and animated interactions.

662 | 663 | Demo 664 | 665 | 666 |
667 |
668 |
669 | 670 | 671 |
672 | 673 |
674 | 675 |
676 | 677 |
678 | 679 | 680 |
681 | 682 | 683 |
684 | 685 |
686 | 687 | 688 |
689 | 690 |
691 |
692 |
693 |

You have a new project?

694 |

Contact me now and get discounts on your Web development projects.

695 | Contact me 696 | 697 | 698 | 699 |
700 | 701 |
702 |
703 | 704 |
705 | 706 | 707 |
708 | 709 |

Testimonials

710 | My client saying 711 | 712 |
713 |
714 | 715 |
716 |
717 |
718 | 719 | 720 |
721 |

Arun Prashanth

722 | Client 723 |
724 |
725 |
726 | 727 | 728 | 729 | 730 | 731 |
732 |
733 | 734 |

I get a good impression, I carry out my project with all the 735 | possible quality and attention and support 24 hours a day. 736 |

737 |
738 | 739 |
740 |
741 |
742 | 743 | 744 |
745 |

Yugadarshan

746 | Client 747 |
748 |
749 |
750 | 751 | 752 | 753 | 754 | 755 |
756 |
757 | 758 |

I get a good impression, I carry out my project with all the 759 | possible quality and attention and support 24 hours a day. 760 |

761 |
762 | 763 |
764 |
765 |
766 | 767 | 768 |
769 |

Shenan Sachinthan

770 | Client 771 |
772 |
773 |
774 | 775 | 776 | 777 | 778 | 779 |
780 |
781 | 782 |

I get a good impression, I carry out my project with all the 783 | possible quality and attention and support 24 hours a day.

784 |
785 |
786 | 787 | 788 |
789 |
790 |
791 | 792 | 793 |
794 |

Contact me

795 | Get in touch 796 | 797 |
798 |
799 |
800 | 801 | 802 |
803 |

Call me

804 | (+94) 755422421 805 |
806 |
807 | 808 |
809 | 810 | 811 |
812 |

E-mail

813 | Prashanna01@gmail.com 814 |
815 |
816 | 817 |
818 | 819 | 820 |
821 |

Location

822 | Kandy, Sri Lanka 823 |
824 |
825 |
826 | 827 |
828 |
829 |
830 | 831 | 832 |
833 | 834 |
835 | 836 | 837 |
838 |
839 | 840 |
841 | 842 | 843 |
844 | 845 |
846 | 847 | 848 |
849 | 850 |
851 | 852 | Send message 853 | 854 | 855 |
856 |
857 |
858 | 859 |
860 |
861 | 862 | 863 | 899 | 900 | 901 | 904 | 905 | 906 | 907 | 908 | 909 | 910 | 911 | 912 | 913 | -------------------------------------------------------------------------------- /packages/css/styles.css: -------------------------------------------------------------------------------- 1 | /* ==================== GOOGLE FONTS ====================*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); 3 | 4 | /*==================== VARIABLES CSS ====================*/ 5 | :root { 6 | --header-height: 3rem; 7 | 8 | /*========== Colors ==========*/ 9 | /* Change favorite color */ 10 | --hue-color: 190; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/ 11 | 12 | /* HSL color mode */ 13 | --first-color: hsl(var(--hue-color), 69%, 61%); 14 | --first-color-second: hsl(var(--hue-color), 69%, 61%); 15 | --first-color-alt: hsl(var(--hue-color), 57%, 53%); 16 | --first-color-lighter: hsl(var(--hue-color), 92%, 85%); 17 | --title-color: hsl(var(--hue-color), 8%, 15%); 18 | --text-color: hsl(var(--hue-color), 8%, 45%); 19 | --text-color-light: hsl(var(--hue-color), 8%, 65%); 20 | --input-color: hsl(var(--hue-color), 70%, 96%); 21 | --body-color: hsl(var(--hue-color), 60%, 99%); 22 | --container-color: #fff; 23 | --scroll-bar-color: hsl(var(--hue-color), 12%, 90%); 24 | --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%); 25 | 26 | /*========== Font and typography ==========*/ 27 | --body-font: "Poppins", sans-serif; 28 | 29 | /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */ 30 | --big-font-size: 2rem; 31 | --h1-font-size: 1.5rem; 32 | --h2-font-size: 1.25rem; 33 | --h3-font-size: 1.125rem; 34 | --normal-font-size: 0.938rem; 35 | --small-font-size: 0.813rem; 36 | --smaller-font-size: 0.75rem; 37 | 38 | /*========== Font weight ==========*/ 39 | --font-medium: 500; 40 | --font-semi-bold: 600; 41 | 42 | /*========== Margenes Bottom ==========*/ 43 | /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */ 44 | --mb-0-25: 0.25rem; 45 | --mb-0-5: 0.5rem; 46 | --mb-0-75: 0.75rem; 47 | --mb-1: 1rem; 48 | --mb-1-5: 1.5rem; 49 | --mb-2: 2rem; 50 | --mb-2-5: 2.5rem; 51 | --mb-3: 3rem; 52 | 53 | /*========== z index ==========*/ 54 | --z-tooltip: 10; 55 | --z-fixed: 100; 56 | --z-modal: 1000; 57 | } 58 | 59 | /* Font size for large devices */ 60 | @media screen and (min-width: 968px) { 61 | :root { 62 | --big-font-size: 3rem; 63 | --h1-font-size: 2.25rem; 64 | --h2-font-size: 1.5rem; 65 | --h3-font-size: 1.25rem; 66 | --normal-font-size: 1rem; 67 | --small-font-size: 0.875rem; 68 | --smaller-font-size: 0.813rem; 69 | } 70 | } 71 | 72 | /*========== Variables Dark theme ==========*/ 73 | body.dark-theme { 74 | /* HSL color mode */ 75 | --first-color-second: hsl(var(--hue-color), 30%, 8%); 76 | --title-color: hsl(var(--hue-color), 8%, 95%); 77 | --text-color: hsl(var(--hue-color), 8%, 45%); 78 | --text-color-light: hsl(var(--hue-color), 8%, 75%); 79 | --input-color: hsl(var(--hue-color), 29%, 16%); 80 | --body-color: hsl(var(--hue-color), 28%, 12%); 81 | --container-color: hsl(var(--hue-color), 29%, 16%); 82 | --scroll-bar-color: hsl(var(--hue-color), 12%, 48%); 83 | --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%); 84 | } 85 | 86 | /*========== Button Dark/Light ==========*/ 87 | .nav__btns { 88 | display: flex; 89 | align-items: center; 90 | } 91 | 92 | .change-theme { 93 | font-size: 1.25rem; 94 | color: var(--title-color); 95 | margin-right: var(--mb-1); 96 | cursor: pointer; 97 | } 98 | 99 | .change-theme:hover { 100 | color: var(--first-color); 101 | } 102 | 103 | /*==================== BASE ====================*/ 104 | 105 | * { 106 | box-sizing: border-box; 107 | padding: 0; 108 | margin: 0; 109 | } 110 | 111 | html { 112 | scroll-behavior: smooth; 113 | } 114 | 115 | body { 116 | margin: 0 0 var(--header-height) 0; 117 | font-family: var(--body-font); 118 | font-size: var(--normal-font-size); 119 | background-color: var(--body-color); 120 | color: var(--text-color); 121 | } 122 | 123 | h1, 124 | h2, 125 | h3, 126 | h4 { 127 | color: var(--title-color); 128 | font-weight: var(--font-semi-bold); 129 | } 130 | 131 | ul { 132 | list-style: none; 133 | } 134 | 135 | a { 136 | text-decoration: none; 137 | } 138 | 139 | img { 140 | width: 100%; 141 | height: auto; 142 | } 143 | 144 | /*==================== REUSABLE CSS CLASSES ====================*/ 145 | .section { 146 | padding: 2rem 0 4rem; 147 | margin-bottom: 40px; 148 | } 149 | 150 | .section__title { 151 | font-size: var(--h1-font-size); 152 | } 153 | 154 | .section__subtitle { 155 | display: block; 156 | font-size: var(--small-font-size); 157 | margin-bottom: var(--mb-2); 158 | } 159 | 160 | .section__title, 161 | .section__subtitle { 162 | text-align: center; 163 | } 164 | 165 | /*==================== LAYOUT ====================*/ 166 | 167 | .container { 168 | max-width: 768px; 169 | margin-left: var(--mb-1-5); 170 | margin-right: var(--mb-1-5); 171 | } 172 | 173 | .grid { 174 | display: grid; 175 | gap: 1.5rem; 176 | } 177 | 178 | .header { 179 | width: 100%; 180 | position: fixed; 181 | bottom: 0; 182 | left: 0; 183 | z-index: var(--z-fixed); 184 | background-color: var(--body-color); 185 | } 186 | 187 | /*==================== NAV ====================*/ 188 | .nav { 189 | max-width: 968px; 190 | height: var(--header-height); 191 | display: flex; 192 | justify-content: space-between; 193 | align-items: center; 194 | } 195 | 196 | .nav__logo, 197 | .nav__toggle { 198 | color: var(--title-color); 199 | font-weight: var(--font-medium); 200 | } 201 | 202 | .nav__logo:hover { 203 | color: var(--first-color); 204 | } 205 | 206 | .nav__toggle { 207 | font-size: 1.1rem; 208 | cursor: pointer; 209 | } 210 | 211 | .nav__toggle:hover { 212 | color: var(--first-color); 213 | } 214 | 215 | @media screen and (max-width: 767px) { 216 | .nav__menu { 217 | position: fixed; 218 | bottom: -100%; 219 | left: 0; 220 | width: 100%; 221 | background-color: var(--body-color); 222 | padding: 2rem 1.5rem 4rem; 223 | box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15); 224 | border-radius: 1.5rem 1.5rem 0 0; 225 | transition: 0.3s; 226 | } 227 | } 228 | 229 | .nav__list { 230 | grid-template-columns: repeat(3, 1fr); 231 | gap: 2rem; 232 | } 233 | .nav__link { 234 | display: flex; 235 | flex-direction: column; 236 | align-items: center; 237 | font-size: var(--small-font-size); 238 | color: var(--title-color); 239 | font-weight: var(--font-medium); 240 | } 241 | 242 | .nav__link:hover { 243 | color: var(--first-color); 244 | } 245 | 246 | .nav__icon { 247 | font-size: 1.2rem; 248 | } 249 | 250 | .nav__close { 251 | position: absolute; 252 | right: 1.3rem; 253 | bottom: 0.5rem; 254 | font-size: 1.5rem; 255 | cursor: pointer; 256 | color: var(--first-color); 257 | } 258 | 259 | .nav__close:hover { 260 | color: var(--first-color-alt); 261 | } 262 | 263 | /* show menu */ 264 | .show-menu { 265 | bottom: 0; 266 | } 267 | 268 | /* Active link */ 269 | .active-link { 270 | color: var(--first-color); 271 | } 272 | 273 | /* Change background header */ 274 | .scroll-header { 275 | box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15); 276 | } 277 | 278 | /*==================== HOME ====================*/ 279 | 280 | .home__container { 281 | gap: 1rem; 282 | } 283 | 284 | .home__content { 285 | grid-template-columns: 0.5fr 3fr; 286 | padding-top: 3.5rem; 287 | align-items: center; 288 | } 289 | 290 | .home__social { 291 | display: grid; 292 | grid-template-columns: max-content; 293 | row-gap: 1rem; 294 | } 295 | 296 | .home__social-icon { 297 | font-size: 1.25rem; 298 | color: var(--first-color); 299 | } 300 | 301 | .home__social-icon:hover { 302 | color: var(--first-color-alt); 303 | } 304 | 305 | .home__blob { 306 | width: 200px; 307 | fill: var(--first-color); 308 | } 309 | 310 | .home__blob-img { 311 | width: 220px; 312 | } 313 | 314 | .home__data { 315 | grid-column: 1/3; 316 | } 317 | 318 | .home__title { 319 | font-size: var(--big-font-size); 320 | } 321 | 322 | .home__subtitle { 323 | font-size: var(--h3-font-size); 324 | color: var(--text-color); 325 | font-weight: var(--font-medium); 326 | margin-bottom: var(--mb-0-75); 327 | } 328 | 329 | .home__description { 330 | margin-bottom: var(--mb-2); 331 | } 332 | 333 | .home__scroll { 334 | display: none; 335 | } 336 | 337 | .home__scroll-button { 338 | color: var(--first-color); 339 | transition: 0.3s; 340 | } 341 | 342 | .home__scroll-button:hover { 343 | transform: translateY(0.25rem); 344 | } 345 | 346 | .home__scroll-mouse { 347 | font-size: 2rem; 348 | } 349 | 350 | .home__scroll-name { 351 | font-size: var(--small-font-size); 352 | color: var(--title-color); 353 | font-weight: var(--font-medium); 354 | margin-right: var(--mb-0-25); 355 | } 356 | 357 | .home__scroll-arrow { 358 | font-size: 1.25rem; 359 | } 360 | /*==================== BUTTONS ====================*/ 361 | 362 | .button { 363 | display: inline-block; 364 | background-color: var(--first-color); 365 | color: #ffff; 366 | padding: 1rem; 367 | border-radius: 0.5rem; 368 | font-weight: var(--font-medium); 369 | } 370 | 371 | .button:hover { 372 | background-color: var(--first-color-alt); 373 | } 374 | 375 | .button__icon { 376 | font-size: 1.2rem; 377 | margin-left: var(--mb-0-5); 378 | transition: 0.3s; 379 | } 380 | 381 | .button--white { 382 | background-color: #fff; 383 | color: var(--first-color); 384 | } 385 | 386 | .button--white:hover { 387 | background-color: #fff; 388 | } 389 | 390 | .button--flex { 391 | display: inline-flex; 392 | align-items: center; 393 | transition: 0.3s; 394 | } 395 | 396 | .button--small { 397 | padding: 0.75rem 1rem; 398 | } 399 | 400 | .button--link { 401 | padding: 0; 402 | background-color: transparent; 403 | color: var(--first-color); 404 | } 405 | 406 | .button--link:hover { 407 | background-color: transparent; 408 | color: var(--first-color-alt); 409 | } 410 | 411 | /*==================== ABOUT ====================*/ 412 | .about__img { 413 | width: 200px; 414 | border-radius: 0.5rem; 415 | justify-self: center; 416 | align-items: center; 417 | } 418 | 419 | .about__description { 420 | text-align: center; 421 | margin-bottom: var(--mb-2-5); 422 | } 423 | 424 | .about__info { 425 | display: flex; 426 | justify-content: space-evenly; 427 | margin-bottom: var(--mb-2-5); 428 | } 429 | 430 | .about__info-title { 431 | font-size: var(--h2-font-size); 432 | font-weight: var(--font-semi-bold); 433 | color: var(--title-color); 434 | } 435 | 436 | .about__info-name { 437 | font-size: var(--smaller-font-size); 438 | } 439 | 440 | .about__info-title, 441 | .about__info-name { 442 | display: block; 443 | text-align: center; 444 | } 445 | 446 | .about__buttons { 447 | display: flex; 448 | justify-content: center; 449 | } 450 | 451 | /*==================== SKILLS ====================*/ 452 | 453 | .skills__container { 454 | row-gap: 0; 455 | } 456 | 457 | .skills__header { 458 | display: flex; 459 | align-items: center; 460 | margin-bottom: var(--mb-2-5); 461 | cursor: pointer; 462 | } 463 | 464 | .skills__icon, 465 | .skills__arrow { 466 | font-size: 2rem; 467 | color: var(--first-color); 468 | } 469 | 470 | .skills__icon { 471 | margin-right: var(--mb-0-75); 472 | } 473 | 474 | .skills__title { 475 | font-size: var(--h3-font-size); 476 | } 477 | 478 | .skills__subtitle { 479 | font-size: var(--small-font-size); 480 | color: var(--text-color-light); 481 | } 482 | 483 | .skills__arrow { 484 | margin-left: auto; 485 | transition: 0.4s; 486 | } 487 | 488 | .skills__list { 489 | row-gap: 1.5rem; 490 | padding-left: 2.7rem; 491 | } 492 | 493 | .skills__titles { 494 | display: flex; 495 | justify-content: space-between; 496 | margin-bottom: var(--mb-0-5); 497 | } 498 | 499 | .skills__name { 500 | font-size: var(--normal-font-size); 501 | font-weight: var(--font-medium); 502 | } 503 | 504 | .skills__bar, 505 | .skills__percentage { 506 | height: 5px; 507 | border-radius: 0.25rem; 508 | } 509 | 510 | .skills__bar { 511 | background-color: var(--first-color-lighter); 512 | } 513 | 514 | .skills__percentage { 515 | display: block; 516 | background-color: var(--first-color); 517 | } 518 | 519 | .skills__html { 520 | width: 90%; 521 | } 522 | 523 | .skills__css { 524 | width: 80%; 525 | } 526 | 527 | .skills__js { 528 | width: 60%; 529 | } 530 | 531 | .skills__wordpress { 532 | width: 70%; 533 | } 534 | 535 | .skills__python { 536 | width: 60%; 537 | } 538 | 539 | .skills__tab { 540 | width: 70%; 541 | } 542 | 543 | .skills__sql { 544 | width: 50%; 545 | } 546 | 547 | .skills__google { 548 | width: 70%; 549 | } 550 | 551 | .skills__bank { 552 | width: 80%; 553 | } 554 | 555 | .skills__google { 556 | width: 70%; 557 | } 558 | 559 | .skills__counter { 560 | width: 80%; 561 | } 562 | 563 | .skills__office { 564 | width: 90%; 565 | } 566 | 567 | .skills__close .skills__list { 568 | height: 0; 569 | overflow: hidden; 570 | } 571 | 572 | .skills__open .skills__list { 573 | height: max-content; 574 | margin-bottom: var(--mb-2-5); 575 | } 576 | 577 | .skills__open .skills__arrow { 578 | transform: rotate(-180deg); 579 | } 580 | 581 | /*==================== QUALIFICATION ====================*/ 582 | .qualification__tabs { 583 | display: flex; 584 | justify-content: space-evenly; 585 | margin-bottom: var(--mb-2); 586 | } 587 | 588 | .qualification__button { 589 | font-size: var(--h3-font-size); 590 | font-weight: var(--font-medium); 591 | cursor: pointer; 592 | } 593 | 594 | .qualification__button:hover { 595 | color: var(--first-color); 596 | } 597 | 598 | .qualification__icon { 599 | font-size: 1.8rem; 600 | margin-right: var(--mb-0-25); 601 | } 602 | 603 | .qualification__data { 604 | display: grid; 605 | grid-template-columns: 1fr max-content 1fr; 606 | column-gap: 1.5rem; 607 | } 608 | 609 | .qualification__title { 610 | font-size: var(--normal-font-size); 611 | font-weight: var(--font-medium); 612 | } 613 | 614 | .qualification__subtitle { 615 | display: inline-block; 616 | font-size: var(--small-font-size); 617 | margin-bottom: var(--mb-1); 618 | } 619 | 620 | .qualification__calendar { 621 | font-size: var(--smaller-font-size); 622 | color: var(--text-color-light); 623 | /* margin-bottom: var(--mb-1) */ 624 | } 625 | 626 | .qualification__rounder { 627 | display: inline-block; 628 | width: 13px; 629 | height: 13px; 630 | background-color: var(--first-color); 631 | border-radius: 50%; 632 | } 633 | 634 | .qualification__line { 635 | display: block; 636 | width: 1px; 637 | height: 100%; 638 | background-color: var(--first-color); 639 | transform: translate(6px, -7px); 640 | } 641 | 642 | .qualification__content[data-content] { 643 | display: none; 644 | } 645 | 646 | .qualification__active[data-content] { 647 | display: block; 648 | } 649 | 650 | .qualification__button.qualification__active { 651 | color: var(--first-color); 652 | } 653 | 654 | /*==================== SERVICES ====================*/ 655 | .services__container { 656 | gap: 1.5rem; 657 | grid-template-columns: repeat(2, 1fr); 658 | } 659 | 660 | .services__content { 661 | position: relative; 662 | background-color: var(--container-color); 663 | padding: 3.5rem 0.5rem 1.25rem 1.5rem; 664 | border-radius: 0.25rem; 665 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); 666 | transition: 0.3s; 667 | } 668 | 669 | .services__content:hover { 670 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 671 | } 672 | 673 | .services__icon { 674 | display: block; 675 | font-size: 1.5rem; 676 | color: var(--first-color); 677 | margin-bottom: var(--mb-1); 678 | } 679 | 680 | .services__title { 681 | font-size: var(--h3-font-size); 682 | margin-bottom: var(--mb-1); 683 | font-weight: var(--font-medium); 684 | } 685 | 686 | .services__button { 687 | cursor: pointer; 688 | font-size: var(--small-font-size); 689 | } 690 | 691 | .services__button:hover .button__icon { 692 | transform: translateX(0.25rem); 693 | } 694 | 695 | .services__modal { 696 | position: fixed; 697 | top: 0; 698 | left: 0; 699 | right: 0; 700 | bottom: 0; 701 | background-color: rgba(0, 0, 0, 0.5); 702 | display: flex; 703 | align-items: center; 704 | justify-content: center; 705 | padding: 0 1rem; 706 | z-index: var(--z-modal); 707 | opacity: 0; 708 | visibility: hidden; 709 | transition: 0.3s; 710 | } 711 | 712 | .services__modal-content { 713 | position: relative; 714 | background-color: var(--container-color); 715 | padding: 1.5rem; 716 | border-radius: 0.5rem; 717 | } 718 | 719 | .services__modal-services { 720 | row-gap: 1rem; 721 | } 722 | 723 | .services__modal-service { 724 | display: flex; 725 | } 726 | 727 | .services__modal-title { 728 | font-size: var(--h3-font-size); 729 | font-weight: var(--font-medium); 730 | margin-bottom: var(--mb-1-5); 731 | } 732 | 733 | .services__modal-close { 734 | position: absolute; 735 | top: 1rem; 736 | right: 1rem; 737 | font-size: 1.5rem; 738 | color: var(--first-color); 739 | cursor: pointer; 740 | } 741 | 742 | .services__modal-icon { 743 | color: var(--first-color); 744 | margin-right: var(--mb-0-25); 745 | } 746 | 747 | /* Active Modal */ 748 | .active-modal { 749 | opacity: 1; 750 | visibility: visible; 751 | } 752 | 753 | /*==================== PORTFOLIO ====================*/ 754 | .portfolio__container { 755 | overflow: initial; 756 | } 757 | 758 | .portfolio__content { 759 | padding: 0 1.5rem; 760 | } 761 | 762 | .portfolio__img { 763 | width: 265px; 764 | border-radius: 0.5rem; 765 | justify-self: center; 766 | } 767 | 768 | .portfolio__title { 769 | font-size: var(--h3-font-size); 770 | margin-bottom: var(--mb-0-5); 771 | } 772 | 773 | .portfolio__description { 774 | margin-bottom: var(--mb-0-75); 775 | } 776 | 777 | .portfolio__button:hover .button__icon { 778 | transform: translateX(0.25rem); 779 | } 780 | 781 | .swiper-button-prev::after, 782 | .swiper-button-next::after { 783 | content: ""; 784 | } 785 | 786 | .swiper-portfolio-icon { 787 | font-size: 2rem; 788 | color: var(--first-color); 789 | } 790 | 791 | .swiper-button-prev { 792 | left: -0.5rem; 793 | } 794 | 795 | .swiper-button-next { 796 | right: -0.5rem; 797 | } 798 | 799 | .swiper-container-horizontal > .swiper-pagination-bullets { 800 | bottom: -2.5rem; 801 | } 802 | 803 | .swiper-pagination-bullet-active { 804 | background-color: var(--first-color); 805 | } 806 | 807 | .swiper-button-prev, 808 | .swiper-button-next, 809 | .swiper-pagination-bullet { 810 | outline: none; 811 | } 812 | /*==================== PROJECT IN MIND ====================*/ 813 | .project { 814 | text-align: center; 815 | } 816 | 817 | .project__bg { 818 | background-color: var(--first-color-second); 819 | padding-top: 3rem; 820 | } 821 | 822 | .project__title { 823 | font-size: var(--h2-font-size); 824 | margin-bottom: var(--mb-0-75); 825 | } 826 | 827 | .project__description { 828 | margin-bottom: var(--mb-1-5); 829 | } 830 | 831 | .project__title, 832 | .project__description { 833 | color: #fff; 834 | } 835 | 836 | .project__img { 837 | width: 232px; 838 | justify-self: center; 839 | } 840 | 841 | /*==================== TESTIMONIAL ====================*/ 842 | .testimonial__data, 843 | .testimonial__header { 844 | display: flex; 845 | } 846 | 847 | .testimonial__data { 848 | justify-content: space-between; 849 | margin-bottom: var(--mb-1); 850 | } 851 | 852 | .testimonial__img { 853 | width: 60px; 854 | height: 60px; 855 | border-radius: 50%; 856 | margin-right: var(--mb-0-75); 857 | } 858 | 859 | .testimonial__name { 860 | font-size: var(--h3-font-size); 861 | font-weight: var(--font-medium); 862 | } 863 | 864 | .testimonial__client { 865 | font-size: var(--small-font-size); 866 | color: var(--text-color-light); 867 | } 868 | 869 | .testimonial__description { 870 | margin-bottom: var(--mb-2-5); 871 | } 872 | 873 | .testimonial__icon-star { 874 | color: var(--first-color); 875 | } 876 | 877 | .swiper-container .swiper-pagination-testimonial { 878 | bottom: 0; 879 | } 880 | 881 | /*==================== CONTACT ME ====================*/ 882 | .contact__container { 883 | row-gap: 3rem; 884 | } 885 | 886 | .contact__information { 887 | display: flex; 888 | margin-bottom: var(--mb-2); 889 | } 890 | 891 | .contact__icon { 892 | font-size: 1.5rem; 893 | color: var(--first-color); 894 | margin-right: var(--mb-0-75); 895 | } 896 | 897 | .content__title { 898 | font-size: var(--h3-font-size); 899 | font-weight: var(--font-medium); 900 | } 901 | 902 | .contact__subtitle { 903 | font-size: var(--small-font-size); 904 | color: var(--text-color-light); 905 | } 906 | 907 | .contact__content { 908 | background-color: var(--input-color); 909 | border-radius: 0.5rem; 910 | padding: 0.75rem 1rem 0.25rem; 911 | } 912 | 913 | .contact__label { 914 | font-size: var(--smaller-font-size); 915 | color: var(--title-color); 916 | } 917 | 918 | .contact__input { 919 | width: 100%; 920 | background-color: var(--input-color); 921 | color: var(--text-color); 922 | font-family: var(--body-font); 923 | font-size: var(--normal-font-size); 924 | border: none; 925 | outline: none; 926 | padding: 0.25rem 0.5rem 0.5rem 0; 927 | } 928 | 929 | /*==================== FOOTER ====================*/ 930 | .footer { 931 | padding-top: 2rem; 932 | } 933 | 934 | .footer__container { 935 | row-gap: 3.5rem; 936 | } 937 | 938 | .footer__bg { 939 | background-color: var(--first-color-second); 940 | padding: 2rem 0 3rem; 941 | } 942 | 943 | .footer__title { 944 | font-size: var(--h1-font-size); 945 | margin-bottom: var(--mb-0-25); 946 | } 947 | 948 | .footer__subtitle { 949 | font-size: var(--small-font-size); 950 | } 951 | 952 | .footer__links { 953 | display: flex; 954 | flex-direction: column; 955 | row-gap: 1.5rem; 956 | } 957 | 958 | .footer__link:hover { 959 | color: var(--first-color-lighter); 960 | } 961 | 962 | .footer__social { 963 | font-size: 1.25rem; 964 | margin-right: var(--mb-1-5); 965 | } 966 | 967 | .footer__social:hover { 968 | color: var(--first-color-lighter); 969 | } 970 | 971 | .footer__copy { 972 | font-size: var(--smaller-font-size); 973 | text-align: center; 974 | color: var(--text-color-light); 975 | margin-top: var(--mb-3); 976 | } 977 | 978 | .footer__title, 979 | .footer__subtitle, 980 | .footer__link, 981 | .footer__social { 982 | color: #fff; 983 | } 984 | 985 | /*========== SCROLL UP ==========*/ 986 | .scrollup { 987 | position: fixed; 988 | right: 1rem; 989 | bottom: -20%; 990 | background-color: var(--first-color); 991 | opacity: 0.8; 992 | padding: 0 0.3rem; 993 | border-radius: 0.4rem; 994 | z-index: var(--z-tooltip); 995 | transition: 0.4s; 996 | } 997 | 998 | .scrollup:hover { 999 | background-color: var(--first-color-alt); 1000 | } 1001 | 1002 | .scrollup__icon { 1003 | font-size: 1.5rem; 1004 | color: #fff; 1005 | } 1006 | 1007 | /* Show scroll */ 1008 | .show-scroll { 1009 | bottom: 5rem; 1010 | } 1011 | 1012 | /*========== SCROLL BAR ==========*/ 1013 | ::-webkit-scrollbar { 1014 | width: 0.6rem; 1015 | background-color: var(--scroll-bar-color); 1016 | border-radius: 0.5rem; 1017 | } 1018 | 1019 | ::-webkit-scrollbar-thumb { 1020 | background-color: var(--scroll-thumb-color); 1021 | border-radius: 0.5rem; 1022 | } 1023 | 1024 | ::-webkit-scrollbar-thumb:hover { 1025 | background-color: var(--text-color-light); 1026 | } 1027 | 1028 | /*==================== MEDIA QUERIES ====================*/ 1029 | /* For small devices */ 1030 | @media screen and (max-width: 380px) { 1031 | .container { 1032 | margin-left: var(--mb-1); 1033 | margin-right: var(--mb-1); 1034 | } 1035 | 1036 | .nav__menu { 1037 | padding: 2rem 0.25rem 4rem; 1038 | } 1039 | 1040 | .nav__list { 1041 | column-gap: 0; 1042 | } 1043 | 1044 | .home__content { 1045 | grid-template-columns: 0.35fr 3fr; 1046 | } 1047 | 1048 | .home__blob { 1049 | width: 250px; 1050 | } 1051 | 1052 | .home__social-icon { 1053 | width: 30px; 1054 | } 1055 | 1056 | .home__subtitle { 1057 | font-size: 24px; 1058 | } 1059 | 1060 | .home__description { 1061 | font-size: 18px; 1062 | } 1063 | 1064 | .home__button { 1065 | font-size: 20px; 1066 | } 1067 | 1068 | .skills__title { 1069 | font-size: var(--normal-font-size); 1070 | } 1071 | .qualification__data { 1072 | gap: 0.5rem; 1073 | } 1074 | 1075 | .services__container { 1076 | grid-template-columns: max-content; 1077 | justify-content: center; 1078 | } 1079 | 1080 | .services__content { 1081 | padding-right: 3.5rem; 1082 | } 1083 | .services__modal { 1084 | padding: 0 0.5rem; 1085 | } 1086 | 1087 | .project__img { 1088 | width: 200px; 1089 | } 1090 | 1091 | .testimonial__header, 1092 | .testimonial__data { 1093 | flex-direction: column; 1094 | align-items: center; 1095 | } 1096 | 1097 | .testimonial__img { 1098 | margin-right: 0; 1099 | margin-bottom: var(--mb-0-25); 1100 | } 1101 | 1102 | .testimonial__data, 1103 | .testimonial__description { 1104 | text-align: center; 1105 | } 1106 | } 1107 | 1108 | /* For medium devices */ 1109 | @media screen and (min-width: 568px) { 1110 | .home__content { 1111 | grid-template-columns: max-content 1fr 1fr; 1112 | } 1113 | 1114 | .home__data { 1115 | grid-column: initial; 1116 | } 1117 | .home__img { 1118 | order: 1; 1119 | justify-self: center; 1120 | } 1121 | 1122 | .about__container, 1123 | .skills_container, 1124 | .portfolio__content, 1125 | .project__container, 1126 | .contact__container, 1127 | .footer__container { 1128 | grid-template-columns: repeat(2, 1fr); 1129 | } 1130 | 1131 | .qualification__sections { 1132 | display: grid; 1133 | grid-template-columns: 0.6fr; 1134 | justify-content: center; 1135 | } 1136 | 1137 | @media screen and (min-width: 768px) { 1138 | .container { 1139 | margin-left: auto; 1140 | margin-right: auto; 1141 | } 1142 | 1143 | .body { 1144 | margin: 0; 1145 | } 1146 | .section { 1147 | padding: 6rem 0 2rem; 1148 | } 1149 | .section__subtitle { 1150 | margin-bottom: 4rem; 1151 | } 1152 | .header { 1153 | top: 0; 1154 | bottom: initial; 1155 | } 1156 | 1157 | .header, 1158 | .main, 1159 | .footer__container { 1160 | padding: 0 1rem; 1161 | } 1162 | 1163 | .nav { 1164 | height: calc(var(--header-height) + 1.5rem); 1165 | column-gap: 1rem; 1166 | } 1167 | .nav__icon, 1168 | .nav__close, 1169 | .nav__toggle { 1170 | display: none; 1171 | } 1172 | 1173 | .nav__list { 1174 | display: flex; 1175 | column-gap: 2rem; 1176 | } 1177 | 1178 | .nav__menu { 1179 | margin-left: auto; 1180 | } 1181 | .change-theme { 1182 | margin: 0; 1183 | } 1184 | 1185 | .home__container { 1186 | row-gap: 5rem; 1187 | } 1188 | 1189 | .home__content { 1190 | padding-top: 5.5rem; 1191 | column-gap: 2rem; 1192 | } 1193 | .home__blob { 1194 | width: 270px; 1195 | } 1196 | .home__scroll { 1197 | display: block; 1198 | } 1199 | .home__scroll-button { 1200 | margin-left: 3rem; 1201 | } 1202 | .about__container { 1203 | column-gap: 5rem; 1204 | } 1205 | .about__img { 1206 | width: 350px; 1207 | } 1208 | .about__description { 1209 | text-align: initial; 1210 | } 1211 | .about__info { 1212 | justify-content: space-between; 1213 | } 1214 | .about__buttons { 1215 | justify-content: initial; 1216 | } 1217 | .qualification__tabs { 1218 | justify-content: center; 1219 | } 1220 | .qualification__button { 1221 | margin: 0 var(--mb-1); 1222 | } 1223 | 1224 | .qualification__sections { 1225 | grid-template-columns: 0.5fr; 1226 | } 1227 | .services__container { 1228 | grid-template-columns: repeat(3, 218px); 1229 | justify-content: center; 1230 | } 1231 | .services__icon { 1232 | font-size: 2rem; 1233 | } 1234 | .services__content { 1235 | padding: 6rem 0 2rem 2.5rem; 1236 | } 1237 | 1238 | .services__modal-content { 1239 | width: 450px; 1240 | } 1241 | .portfolio__img { 1242 | width: 320px; 1243 | } 1244 | .portfolio__content { 1245 | align-items: center; 1246 | } 1247 | .project { 1248 | text-align: initial; 1249 | } 1250 | .project__bg { 1251 | background: none; 1252 | } 1253 | .project__container { 1254 | background-color: var(--first-color-second); 1255 | border-radius: 1rem; 1256 | padding: 3rem 2.5rem 0; 1257 | grid-template-columns: 1fr max-content; 1258 | column-gap: 3rem; 1259 | } 1260 | .project__data { 1261 | padding-top: 0.8rem; 1262 | } 1263 | .footer__container { 1264 | grid-template-columns: repeat(3, 1fr); 1265 | } 1266 | .footer__bg { 1267 | padding: 3rem 0 3.5rem; 1268 | } 1269 | 1270 | .footer__links { 1271 | flex-direction: row; 1272 | column-gap: 2rem; 1273 | } 1274 | .footer__socials { 1275 | justify-self: flex-end; 1276 | } 1277 | .footer__copy { 1278 | margin-top: 4.5rem; 1279 | } 1280 | } 1281 | } 1282 | 1283 | /* For large devices */ 1284 | @media screen and (min-width: 1024px) { 1285 | body { 1286 | margin: 0; 1287 | } 1288 | 1289 | .header, 1290 | .main, 1291 | .footer__container { 1292 | padding: 0; 1293 | } 1294 | .home__blob { 1295 | width: 320px; 1296 | } 1297 | .home__social { 1298 | transform: translateX(-6rem); 1299 | } 1300 | .services__container { 1301 | grid-template-columns: repeat(3, 238px); 1302 | } 1303 | .portfolio__content { 1304 | column-gap: 5rem; 1305 | } 1306 | 1307 | .project__container { 1308 | padding-bottom: 30px; 1309 | } 1310 | 1311 | .swiper-portfolio-icon { 1312 | font-size: 3.5rem; 1313 | } 1314 | .swiper-button-prev { 1315 | left: -3.5rem; 1316 | } 1317 | .swiper-button-next { 1318 | right: -3.5rem; 1319 | } 1320 | .swiper-container-horizontal > .swiper-pagination-bullets { 1321 | bottom: -4.5rem; 1322 | } 1323 | 1324 | .contact__form { 1325 | width: 460px; 1326 | } 1327 | .contact__inputs { 1328 | grid-template-columns: repeat(2, 1fr); 1329 | } 1330 | } 1331 | -------------------------------------------------------------------------------- /packages/css/swiper-bundle.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Swiper 6.8.1 3 | * Most modern mobile touch slider and framework with hardware accelerated transitions 4 | * https://swiperjs.com 5 | * 6 | * Copyright 2014-2021 Vladimir Kharlampidi 7 | * 8 | * Released under the MIT License 9 | * 10 | * Released on: August 3, 2021 11 | */ 12 | 13 | @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-container-pointer-events{touch-action:pan-y}.swiper-container-pointer-events.swiper-container-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-container-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} -------------------------------------------------------------------------------- /packages/images/arun.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ratheshan03/Responsive-Portfolio-Design/a80615ecc93c940d4de54b3e6c81da213ebb28ff/packages/images/arun.PNG -------------------------------------------------------------------------------- /packages/images/background.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/images/portfolio1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ratheshan03/Responsive-Portfolio-Design/a80615ecc93c940d4de54b3e6c81da213ebb28ff/packages/images/portfolio1.jpg -------------------------------------------------------------------------------- /packages/images/portfolio2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ratheshan03/Responsive-Portfolio-Design/a80615ecc93c940d4de54b3e6c81da213ebb28ff/packages/images/portfolio2.png -------------------------------------------------------------------------------- /packages/images/portfolio3.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ratheshan03/Responsive-Portfolio-Design/a80615ecc93c940d4de54b3e6c81da213ebb28ff/packages/images/portfolio3.PNG -------------------------------------------------------------------------------- /packages/images/pras-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ratheshan03/Responsive-Portfolio-Design/a80615ecc93c940d4de54b3e6c81da213ebb28ff/packages/images/pras-1.jpeg -------------------------------------------------------------------------------- /packages/images/pras-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ratheshan03/Responsive-Portfolio-Design/a80615ecc93c940d4de54b3e6c81da213ebb28ff/packages/images/pras-2.jpeg -------------------------------------------------------------------------------- /packages/images/shenan.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ratheshan03/Responsive-Portfolio-Design/a80615ecc93c940d4de54b3e6c81da213ebb28ff/packages/images/shenan.PNG -------------------------------------------------------------------------------- /packages/images/yuga.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ratheshan03/Responsive-Portfolio-Design/a80615ecc93c940d4de54b3e6c81da213ebb28ff/packages/images/yuga.PNG -------------------------------------------------------------------------------- /packages/js/main.js: -------------------------------------------------------------------------------- 1 | /*==================== MENU SHOW Y HIDDEN ====================*/ 2 | const navMenu = document.getElementById("nav-menu"), 3 | navToggle = document.getElementById("nav-toggle"), 4 | navClose = document.getElementById("nav-close"); 5 | 6 | /*===== MENU SHOW =====*/ 7 | /* Validate if constant exists */ 8 | if (navToggle) { 9 | navToggle.addEventListener("click", () => { 10 | navMenu.classList.add("show-menu"); 11 | }); 12 | } 13 | 14 | /*===== MENU HIDDEN =====*/ 15 | /* Validate if constant exists */ 16 | if (navClose) { 17 | navClose.addEventListener("click", () => { 18 | navMenu.classList.remove("show-menu"); 19 | }); 20 | } 21 | 22 | /*==================== REMOVE MENU MOBILE ====================*/ 23 | const navLink = document.querySelectorAll(".nav__link"); 24 | 25 | function linkAction() { 26 | const navMenu = document.getElementById("nav-menu"); 27 | // When we click on each nav__link, we remove the show-menu class 28 | navMenu.classList.remove("show-menu"); 29 | } 30 | navLink.forEach((n) => n.addEventListener("click", linkAction)); 31 | 32 | /*==================== ACCORDION SKILLS ====================*/ 33 | const skillsContent = document.getElementsByClassName("skills__content"), 34 | skillsHeader = document.querySelectorAll(".skills__header"); 35 | 36 | function toggleSkills() { 37 | let itemClass = this.parentNode.className; 38 | 39 | for (i = 0; i < skillsContent.length; i++) { 40 | skillsContent[i].className = "skills__content skills__close"; 41 | } 42 | if (itemClass === "skills__content skills__close") { 43 | this.parentNode.className = "skills__content skills__open"; 44 | } 45 | } 46 | 47 | skillsHeader.forEach((el) => { 48 | el.addEventListener("click", toggleSkills); 49 | }); 50 | 51 | /*==================== QUALIFICATION TABS ====================*/ 52 | const tabs = document.querySelectorAll("[data-target]"), 53 | tabContents = document.querySelectorAll("[data-content]"); 54 | 55 | tabs.forEach((tab) => { 56 | tab.addEventListener("click", () => { 57 | const target = document.querySelector(tab.dataset.target); 58 | 59 | tabContents.forEach((tabContent) => { 60 | tabContent.classList.remove("qualification__active"); 61 | }); 62 | target.classList.add("qualification__active"); 63 | 64 | tabs.forEach((tab) => { 65 | tab.classList.remove("qualification__active"); 66 | }); 67 | tab.classList.add("qualification__active"); 68 | }); 69 | }); 70 | 71 | /*==================== SERVICES MODAL ====================*/ 72 | const modalViews = document.querySelectorAll(".services__modal"), 73 | modalBtns = document.querySelectorAll(".services__button"), 74 | modalCloses = document.querySelectorAll(".services__modal-close"); 75 | 76 | let modal = function (modalClick) { 77 | modalViews[modalClick].classList.add("active-modal"); 78 | }; 79 | 80 | modalBtns.forEach((modalBtn, i) => { 81 | modalBtn.addEventListener("click", () => { 82 | modal(i); 83 | }); 84 | }); 85 | 86 | modalCloses.forEach((modalClose) => { 87 | modalClose.addEventListener("click", () => { 88 | modalViews.forEach((modalView) => { 89 | modalView.classList.remove("active-modal"); 90 | }); 91 | }); 92 | }); 93 | 94 | /*==================== PORTFOLIO SWIPER ====================*/ 95 | let swiperPortfolio = new Swiper(".portfolio__container", { 96 | cssMode: true, 97 | loop: true, 98 | 99 | navigation: { 100 | nextEl: ".swiper-button-next", 101 | prevEl: ".swiper-button-prev", 102 | }, 103 | 104 | pagination: { 105 | el: ".swiper-pagination", 106 | clickable: true, 107 | }, 108 | 109 | /* mousewheel: true, 110 | keyboard: true, */ 111 | }); 112 | 113 | /*==================== TESTIMONIAL ====================*/ 114 | let swiperTestimonial = new Swiper(".testimonial__container", { 115 | loop: true, 116 | grabCursor: true, 117 | spaceBetween: 48, 118 | 119 | pagination: { 120 | el: ".swiper-pagination", 121 | clickable: true, 122 | dynamicBullets: true, 123 | }, 124 | 125 | breakpoints: { 126 | 568: { 127 | slidesPerView: 2, 128 | }, 129 | }, 130 | 131 | /* mousewheel: true, 132 | keyboard: true, */ 133 | }); 134 | 135 | /*==================== SCROLL SECTIONS ACTIVE LINK ====================*/ 136 | const sections = document.querySelectorAll("section[id]"); 137 | 138 | function scrollActive() { 139 | const scrollY = window.pageYOffset; 140 | 141 | sections.forEach((current) => { 142 | const sectionHeight = current.offsetHeight; 143 | const sectionTop = current.offsetTop - 50; 144 | sectionId = current.getAttribute("id"); 145 | 146 | if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { 147 | document 148 | .querySelector(".nav__menu a[href*=" + sectionId + "]") 149 | .classList.add("active-link"); 150 | } else { 151 | document 152 | .querySelector(".nav__menu a[href*=" + sectionId + "]") 153 | .classList.remove("active-link"); 154 | } 155 | }); 156 | } 157 | window.addEventListener("scroll", scrollActive); 158 | 159 | /*==================== CHANGE BACKGROUND HEADER ====================*/ 160 | function scrollHeader() { 161 | const nav = document.getElementById("header"); 162 | // When the scroll is greater than 200 viewport height, add the scroll-header class to the header tag 163 | if (this.scrollY >= 80) nav.classList.add("scroll-header"); 164 | else nav.classList.remove("scroll-header"); 165 | } 166 | window.addEventListener("scroll", scrollHeader); 167 | 168 | /*==================== SHOW SCROLL UP ====================*/ 169 | function scrollUp() { 170 | const scrollUp = document.getElementById("scroll-up"); 171 | // When the scroll is higher than 560 viewport height, add the show-scroll class to the a tag with the scroll-top class 172 | if (this.scrollY >= 560) scrollUp.classList.add("show-scroll"); 173 | else scrollUp.classList.remove("show-scroll"); 174 | } 175 | window.addEventListener("scroll", scrollUp); 176 | 177 | /*==================== DARK LIGHT THEME ====================*/ 178 | 179 | const themeButton = document.getElementById("theme-button"); 180 | const darkTheme = "dark-theme"; 181 | const iconTheme = "uil-sun"; 182 | 183 | // Previously selected topic (if user selected) 184 | const selectedTheme = localStorage.getItem("selected-theme"); 185 | const selectedIcon = localStorage.getItem("selected-icon"); 186 | 187 | // We obtain the current theme that the interface has by validating the dark-theme class 188 | const getCurrentTheme = () => 189 | document.body.classList.contains(darkTheme) ? "dark" : "light"; 190 | const getCurrentIcon = () => 191 | themeButton.classList.contains(iconTheme) ? "uil-moon" : "uil-sun"; 192 | 193 | // We validate if the user previously chose a topic 194 | if (selectedTheme) { 195 | // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark 196 | document.body.classList[selectedTheme === "dark" ? "add" : "remove"]( 197 | darkTheme 198 | ); 199 | themeButton.classList[selectedIcon === "uil-moon" ? "add" : "remove"]( 200 | iconTheme 201 | ); 202 | } 203 | 204 | // Activate / deactivate the theme manually with the button 205 | themeButton.addEventListener("click", () => { 206 | // Add or remove the dark / icon theme 207 | document.body.classList.toggle(darkTheme); 208 | themeButton.classList.toggle(iconTheme); 209 | // We save the theme and the current icon that the user chose 210 | localStorage.setItem("selected-theme", getCurrentTheme()); 211 | localStorage.setItem("selected-icon", getCurrentIcon()); 212 | }); 213 | --------------------------------------------------------------------------------