├── .vscode
    └── settings.json
├── assets
    ├── Doc1.pdf
    ├── css
    │   └── style.css
    ├── images
    │   ├── Testimonials1.png
    │   ├── about-banner.png
    │   ├── adobe-xd.png
    │   ├── ajax.png
    │   ├── angular.png
    │   ├── avatar-1.png
    │   ├── avatar-2.png
    │   ├── avatar-3.png
    │   ├── avatar-4.png
    │   ├── bootstrap.png
    │   ├── clickup.png
    │   ├── command.png
    │   ├── css3.png
    │   ├── favicon.ico
    │   ├── firebase.png
    │   ├── git.png
    │   ├── gulp.png
    │   ├── hero-banner-md.png
    │   ├── hero-banner-sm.png
    │   ├── hero-banner.png
    │   ├── html5.png
    │   ├── icon-app.svg
    │   ├── icon-design.svg
    │   ├── icon-dev.svg
    │   ├── icon-photo.svg
    │   ├── icon-quote.svg
    │   ├── javascript.png
    │   ├── jquery.png
    │   ├── logo.ico
    │   ├── logo.svg
    │   ├── my-avatar.png
    │   ├── npm.png
    │   ├── photoshop.png
    │   ├── pp.png
    │   ├── project-1.jpg
    │   ├── project-1.png
    │   ├── project-2.png
    │   ├── project-3.png
    │   ├── project-4.png
    │   ├── project-5.png
    │   ├── project-6.png
    │   ├── project-7.png
    │   ├── project-9.png
    │   ├── pugjs.png
    │   ├── react.png
    │   ├── sass.png
    │   ├── slack.png
    │   ├── stats-card_icon-1.png
    │   ├── stats-card_icon-2.png
    │   ├── stats-card_icon-3.png
    │   ├── testimonials satish.jpg
    │   ├── trello.png
    │   ├── typescript.png
    │   ├── vs-code.png
    │   ├── vue.png
    │   └── webpack.png
    └── js
    │   └── script.js
├── index.html
├── style-guide.md
└── vcard
    ├── .vscode
        └── settings.json
    ├── Index.html
    └── assets
        ├── css
            └── style.css
        ├── images
            ├── Testimonials1.png
            ├── favicon.ico
            ├── icon-app.svg
            ├── icon-design.svg
            ├── icon-dev.svg
            ├── icon-photo.svg
            ├── icon-quote.svg
            ├── logo.ico
            ├── logo.svg
            ├── pp.png
            └── testimonials satish.jpg
        └── js
            └── script.js


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 5501
3 | }
4 | 


--------------------------------------------------------------------------------
/assets/Doc1.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/Doc1.pdf


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
   1 | /*-----------------------------------*\
   2 |  * style.css
   3 | \*-----------------------------------*/
   4 | 
   5 | /**
   6 |  * copyright 2022 codewithsadee
   7 |  */
   8 | 
   9 | /*-----------------------------------*\
  10 |  * #CUSTOM PROPERTY
  11 | \*-----------------------------------*/
  12 | 
  13 | :root {
  14 |   /**
  15 |    * colors
  16 |    */
  17 |   --raw-seinna: hsl(24, 74%, 58%);
  18 |   --sizzling-sunrise: hsl(51, 95%, 54%);
  19 |   --scarlet: hsl(13, 96%, 47%);
  20 |   --black: hsl(0, 0%, 0%);
  21 |   --white: hsl(0, 0%, 100%);
  22 |   /**
  23 |    * typography
  24 |    */
  25 |   --ff-saira-stencil-one: "Saira Stencil One", sans-serif;
  26 |   --ff-poppins: "Poppins", sans-serif;
  27 |   --ff-roboto: "Roboto", sans-serif;
  28 |   --fs-1: 2rem;
  29 |   --fs-2: calc(1.813rem + 1vw);
  30 |   --fs-3: calc(1.313rem + 1vw);
  31 |   --fs-4: 1.4rem;
  32 |   --fs-5: 1rem;
  33 |   --fs-6: 0.813rem;
  34 |   --fs-7: 0.75rem;
  35 |   --fw-400: 400;
  36 |   --fw-700: 700;
  37 |   /**
  38 |    * transition
  39 |    */
  40 |   --transition-1: 0.25s ease-in-out;
  41 |   /**
  42 |    * spacing
  43 |    */
  44 |   --section-padding: 80px;
  45 |   /**
  46 |    * radius
  47 |    */
  48 |   --radius-4: 4px;
  49 |   --radius-12: 12px;
  50 | }
  51 | 
  52 | /*-----------------------------------*\
  53 |  * #THEME COLORS
  54 | \*-----------------------------------*/
  55 | 
  56 | body.dark_theme {
  57 |   --bg-primary: hsl(0, 0%, 12%);
  58 |   --bg-secondary: hsl(0, 0%, 19%);
  59 |   --color-primary: hsl(0, 0%, 100%);
  60 |   --color-secondary: hsl(0, 0%, 62%);
  61 |   --card-shadow: hsla(0, 0%, 0%, 0.4);
  62 |   --input-bg: hsl(0, 0%, 16%);
  63 |   --shadow-1: 10px 10px 40px var(--card-shadow);
  64 | }
  65 | 
  66 | body.light_theme {
  67 |   --bg-primary: hsl(0, 0%, 90%);
  68 |   --bg-secondary: hsl(0, 0%, 100%);
  69 |   --color-primary: hsl(0, 0%, 12%);
  70 |   --color-secondary: hsl(0, 0%, 37%);
  71 |   --card-shadow: hsla(0, 0%, 0%, 0.1);
  72 |   --input-bg: hsl(0, 0%, 93%);
  73 |   --shadow-1: 10px 10px 40px var(--card-shadow);
  74 | }
  75 | 
  76 | /*-----------------------------------*\
  77 |  * #RESET
  78 | \*-----------------------------------*/
  79 | 
  80 | *,
  81 | *::before,
  82 | *::after {
  83 |   margin: 0;
  84 |   padding: 0;
  85 |   box-sizing: border-box;
  86 | }
  87 | 
  88 | li {
  89 |   list-style: none;
  90 | }
  91 | 
  92 | a {
  93 |   text-decoration: none;
  94 | }
  95 | 
  96 | a,
  97 | img,
  98 | time,
  99 | span,
 100 | input,
 101 | label,
 102 | select,
 103 | button,
 104 | textarea,
 105 | ion-icon {
 106 |   display: block;
 107 | }
 108 | 
 109 | input,
 110 | button,
 111 | select,
 112 | textarea {
 113 |   background: none;
 114 |   border: none;
 115 |   font: inherit;
 116 | }
 117 | 
 118 | button,
 119 | select {
 120 |   cursor: pointer;
 121 | }
 122 | 
 123 | input,
 124 | textarea {
 125 |   width: 100%;
 126 | }
 127 | 
 128 | ion-icon {
 129 |   pointer-events: none;
 130 | }
 131 | 
 132 | :is(a, button, select) {
 133 |   outline-color: var(--scarlet);
 134 |   outline-offset: 3px;
 135 | }
 136 | 
 137 | ::selection {
 138 |   background: var(--color-primary);
 139 |   color: var(--bg-primary);
 140 | }
 141 | 
 142 | html {
 143 |   font-family: var(--ff-roboto);
 144 |   scroll-behavior: smooth;
 145 | }
 146 | 
 147 | body {
 148 |   background: var(--bg-primary);
 149 |   transition: var(--transition-1);
 150 | }
 151 | 
 152 | body.active {
 153 |   overflow: hidden;
 154 | }
 155 | 
 156 | /*-----------------------------------*\
 157 |  * #REUSED STYLE
 158 | \*-----------------------------------*/
 159 | 
 160 | .container {
 161 |   padding-inline: 10px;
 162 | }
 163 | 
 164 | .h1 {
 165 |   font-size: var(--fs-1);
 166 |   line-height: 1.2;
 167 |   font-weight: 400;
 168 | }
 169 | 
 170 | .h2,
 171 | .h3,
 172 | .h4 {
 173 |   color: var(--color-primary);
 174 |   font-family: var(--ff-poppins);
 175 |   line-height: 1.2;
 176 | }
 177 | 
 178 | .h2 {
 179 |   font-size: var(--fs-2);
 180 | }
 181 | 
 182 | .h3 {
 183 |   font-size: var(--fs-3);
 184 | }
 185 | 
 186 | .h4 {
 187 |   font-size: var(--fs-5);
 188 | }
 189 | 
 190 | .w-100 {
 191 |   width: 100%;
 192 | }
 193 | 
 194 | .btn {
 195 |   max-width: max-content;
 196 |   color: var(--color-primary);
 197 |   font-weight: var(--fw-700);
 198 |   text-transform: uppercase;
 199 |   letter-spacing: 0.5px;
 200 |   padding: 10px 25px;
 201 |   border: 1px solid transparent;
 202 |   border-radius: var(--radius-4);
 203 |   transition: var(--transition-1);
 204 | }
 205 | 
 206 | .btn-primary {
 207 |   border-color: red;
 208 | }
 209 | 
 210 | .btn-primary:is(:hover, :focus) {
 211 |   background: red;
 212 |   color: var(--bg-primary);
 213 | }
 214 | 
 215 | .btn-secondary {
 216 |   background: var(--raw-seinna);
 217 |   border-color: var(--raw-seinna);
 218 |   color: var(--black);
 219 | }
 220 | 
 221 | .btn-secondary:is(:hover, :focus) {
 222 |   --raw-seinna: hsl(133, 100%, 47%);
 223 | }
 224 | 
 225 | .section-subtitle {
 226 |   position: relative;
 227 |   color: var(--color-secondary);
 228 |   text-transform: uppercase;
 229 |   padding-bottom: 5px;
 230 |   margin-bottom: 20px;
 231 | }
 232 | 
 233 | .section-subtitle::after {
 234 |   content: "";
 235 |   position: absolute;
 236 |   top: 100%;
 237 |   left: 0;
 238 |   width: 60px;
 239 |   height: 2px;
 240 |   background: var(--color-secondary);
 241 | }
 242 | 
 243 | .section-title {
 244 |   max-width: 350px;
 245 |   margin-bottom: 30px;
 246 | }
 247 | 
 248 | .section-text {
 249 |   color: var(--color-secondary);
 250 |   line-height: 1.8;
 251 |   margin-bottom: 30px;
 252 | }
 253 | 
 254 | .tooltip {
 255 |   position: absolute;
 256 |   top: -40px;
 257 |   background: var(--raw-seinna);
 258 |   min-width: max-content;
 259 |   color: var(--white);
 260 |   font-size: 15px;
 261 |   font-weight: var(--fw-700);
 262 |   padding: 5px 10px;
 263 |   border-radius: var(--radius-4);
 264 |   box-shadow: var(--shadow-1);
 265 |   transform: translateY(-10px);
 266 |   opacity: 0;
 267 |   pointer-events: none;
 268 |   transition: var(--transition-1);
 269 |   z-index: 1;
 270 | }
 271 | 
 272 | /*-----------------------------------*\
 273 |  * #HEADER
 274 | \*-----------------------------------*/
 275 | 
 276 | .header {
 277 |   padding-block: 15px;
 278 |   position: fixed;
 279 |   top: 0;
 280 |   left: 0;
 281 |   width: 100%;
 282 |   transition: var(--transition-1);
 283 |   z-index: 4;
 284 | }
 285 | 
 286 | .header.active {
 287 |   padding-block: 12px;
 288 |   background: var(--bg-secondary);
 289 |   box-shadow: var(--shadow-1);
 290 | }
 291 | 
 292 | .header .container {
 293 |   display: flex;
 294 |   justify-content: space-between;
 295 |   align-items: center;
 296 |   gap: 10px;
 297 | }
 298 | 
 299 | .logo {
 300 |   position: relative;
 301 |   min-width: 77px;
 302 |   z-index: 2;
 303 | }
 304 | 
 305 | .logo a {
 306 |   color: var(--color-primary);
 307 |   font-family: var(--ff-saira-stencil-one);
 308 | }
 309 | 
 310 | .logo span {
 311 |   display: inline-block;
 312 |   color: var(--raw-seinna);
 313 |   margin-left: 2px;
 314 | }
 315 | 
 316 | .navbar-actions {
 317 |   display: flex;
 318 |   align-items: center;
 319 |   gap: 15px;
 320 |   margin-left: auto;
 321 | }
 322 | 
 323 | .navbar-actions select {
 324 |   color: var(--color-primary);
 325 |   width: 45px;
 326 | }
 327 | 
 328 | .navbar-actions option {
 329 |   background: var(--bg-primary);
 330 |   color: var(--color-primary);
 331 | }
 332 | 
 333 | .theme-btn {
 334 |   padding: 4px;
 335 |   width: 48px;
 336 |   background: var(--bg-secondary);
 337 |   border-radius: 100px;
 338 |   transition: var(--transition-1);
 339 | }
 340 | 
 341 | .header.active .theme-btn {
 342 |   background: var(--bg-primary);
 343 | }
 344 | 
 345 | .theme-btn .icon {
 346 |   position: relative;
 347 |   left: 0;
 348 |   width: 20px;
 349 |   height: 20px;
 350 |   border-radius: 50px;
 351 |   box-shadow: inset 9px -6px var(--color-primary);
 352 |   transition: var(--transition-1);
 353 | }
 354 | 
 355 | .theme-btn.active .icon {
 356 |   left: 20px;
 357 |   box-shadow: inset 20px -20px var(--sizzling-sunrise);
 358 | }
 359 | 
 360 | .nav-toggle-btn {
 361 |   position: relative;
 362 |   transform: rotate(-55deg);
 363 |   transition: var(--transition-1);
 364 |   z-index: 2;
 365 | }
 366 | 
 367 | .nav-toggle-btn.active {
 368 |   transform: rotate(-45deg);
 369 | }
 370 | 
 371 | .nav-toggle-btn span {
 372 |   width: 20px;
 373 |   height: 2px;
 374 |   background: var(--color-primary);
 375 |   margin: 5px;
 376 |   transition: var(--transition-1);
 377 | }
 378 | 
 379 | .nav-toggle-btn :is(.one, .three) {
 380 |   width: 10px;
 381 | }
 382 | 
 383 | .nav-toggle-btn .one {
 384 |   margin-left: auto;
 385 |   transform-origin: left;
 386 | }
 387 | 
 388 | .nav-toggle-btn .three {
 389 |   transform-origin: right;
 390 | }
 391 | 
 392 | .nav-toggle-btn.active .one {
 393 |   transform: rotate(90deg) translateX(-3px);
 394 | }
 395 | 
 396 | .nav-toggle-btn.active .three {
 397 |   transform: rotate(90deg) translateX(3px);
 398 | }
 399 | 
 400 | .navbar {
 401 |   position: fixed;
 402 |   background: var(--bg-secondary);
 403 |   top: 100%;
 404 |   left: 0;
 405 |   width: 100%;
 406 |   height: 100%;
 407 |   display: grid;
 408 |   place-items: center;
 409 |   visibility: hidden;
 410 |   transition: 0.75s cubic-bezier(0.71, 0.01, 0.24, 0.99);
 411 |   transition-delay: 0.5s;
 412 |   z-index: 1;
 413 | }
 414 | 
 415 | .navbar.active {
 416 |   top: 0;
 417 |   visibility: visible;
 418 |   transition-delay: 0s;
 419 | }
 420 | 
 421 | .navbar-list > li {
 422 |   margin-block: 20px;
 423 |   padding-inline: 50px;
 424 |   overflow: hidden;
 425 | }
 426 | 
 427 | .navbar-link {
 428 |   position: relative;
 429 |   width: max-content;
 430 |   margin-inline: auto;
 431 |   color: var(--color-primary);
 432 |   font-family: var(--ff-poppins);
 433 |   font-size: var(--fs-1);
 434 |   padding: 10px;
 435 |   transform: translateY(50px);
 436 |   transition: 0.75s cubic-bezier(0.68, -0.55, 0.27, 2);
 437 | }
 438 | 
 439 | .navbar.active .navbar-link {
 440 |   transform: translateY(0);
 441 |   transition-delay: 0.5s;
 442 | }
 443 | 
 444 | .navbar-link::before {
 445 |   content: "";
 446 |   position: absolute;
 447 |   top: 50%;
 448 |   transform: translateY(-50%);
 449 |   left: 0;
 450 |   height: 5px;
 451 |   width: 0;
 452 |   background: var(--raw-seinna);
 453 |   transition: var(--transition-1);
 454 | }
 455 | 
 456 | .navbar-link:is(:hover, :focus)::before {
 457 |   width: 100%;
 458 | }
 459 | 
 460 | /*-----------------------------------*\
 461 |  * #HERO
 462 | \*-----------------------------------*/
 463 | 
 464 | main {
 465 |   overflow-x: hidden;
 466 | }
 467 | 
 468 | .hero {
 469 |   min-height: 100vh;
 470 |   display: flex;
 471 |   flex-direction: column;
 472 |   justify-content: center;
 473 |   align-items: center;
 474 |   padding-top: 115px;
 475 |   margin-bottom: var(--section-padding);
 476 | }
 477 | 
 478 | .hero-banner {
 479 |   max-width: 500px;
 480 |   width: 125%;
 481 |   margin-bottom: 30px;
 482 | }
 483 | 
 484 | :is(.hero-social-list, .scroll-down) {
 485 |   display: none;
 486 | }
 487 | 
 488 | .hero-content {
 489 |   max-width: 450px;
 490 | }
 491 | 
 492 | .hero-title {
 493 |   text-align: center;
 494 |   margin-bottom: 30px;
 495 | }
 496 | 
 497 | .hero .btn-primary {
 498 |   margin-inline: auto;
 499 | }
 500 | 
 501 | /*-----------------------------------*\
 502 |  * #STATS
 503 | \*-----------------------------------*/
 504 | 
 505 | .stats {
 506 |   padding-block: var(--section-padding);
 507 | }
 508 | 
 509 | .stats-list {
 510 |   display: grid;
 511 |   gap: 30px;
 512 | }
 513 | 
 514 | .stats-card {
 515 |   background: var(--bg-secondary);
 516 |   display: flex;
 517 |   align-items: center;
 518 |   gap: 10px;
 519 |   padding: 25px;
 520 |   border-radius: var(--radius-12);
 521 |   box-shadow: var(--shadow-1);
 522 |   transition: var(--transition-1);
 523 | }
 524 | 
 525 | .stats-card:is(:hover, :focus) {
 526 |   transform: translateY(-5px);
 527 | }
 528 | 
 529 | .stats-card .card-icon {
 530 |   background: var(--raw-seinna);
 531 |   width: 60px;
 532 |   height: 60px;
 533 |   display: grid;
 534 |   place-items: center;
 535 |   border-radius: 50%;
 536 | }
 537 | 
 538 | .stats-card .card-icon img {
 539 |   width: 70%;
 540 |   filter: invert(1);
 541 | }
 542 | 
 543 | .stats-card .card-title {
 544 |   width: calc(100% - 95px);
 545 |   color: var(--raw-seinna);
 546 |   text-align: center;
 547 | }
 548 | 
 549 | .stats-card .card-title strong {
 550 |   display: block;
 551 |   color: var(--color-primary);
 552 |   font-size: initial;
 553 |   line-height: 1.3;
 554 |   margin-top: 5px;
 555 | }
 556 | 
 557 | .stats-card > ion-icon {
 558 |   color: var(--color-secondary);
 559 | }
 560 | 
 561 | /*-----------------------------------*\
 562 |  * #ABOUT
 563 | \*-----------------------------------*/
 564 | 
 565 | .about {
 566 |   padding-block: var(--section-padding);
 567 | }
 568 | 
 569 | .about-banner {
 570 |   max-width: 400px;
 571 |   margin-inline: auto;
 572 |   margin-bottom: 80px;
 573 | }
 574 | 
 575 | .about .btn {
 576 |   max-width: unset;
 577 |   width: 100%;
 578 | }
 579 | 
 580 | .about .btn-secondary {
 581 |   margin-bottom: 10px;
 582 | }
 583 | 
 584 | /*-----------------------------------*\
 585 |  * #SKILLS
 586 | \*-----------------------------------*/
 587 | 
 588 | .skills {
 589 |   padding-block: var(--section-padding);
 590 | }
 591 | 
 592 | .skills-content {
 593 |   margin-bottom: 50px;
 594 | }
 595 | 
 596 | .skills-toggle {
 597 |   background: var(--bg-secondary);
 598 |   position: relative;
 599 |   width: max-content;
 600 |   margin-inline: auto;
 601 |   display: flex;
 602 |   align-items: center;
 603 |   padding: 5px;
 604 |   border-radius: 100px;
 605 |   box-shadow: var(--shadow-1);
 606 |   z-index: 1;
 607 | }
 608 | 
 609 | .skills-toggle::before {
 610 |   content: "";
 611 |   position: absolute;
 612 |   top: 5px;
 613 |   left: 5px;
 614 |   bottom: 5px;
 615 |   width: 93px;
 616 |   background: var(--raw-seinna);
 617 |   border-radius: 100px;
 618 |   transition: var(--transition-1);
 619 |   z-index: -1;
 620 | }
 621 | 
 622 | .skills-toggle.active::before {
 623 |   left: 98px;
 624 |   width: 94px;
 625 | }
 626 | 
 627 | .toggle-btn {
 628 |   color: var(--color-primary);
 629 |   font-family: var(--ff-poppins);
 630 |   padding: 5px 25px;
 631 |   transition: var(--transition-1);
 632 | }
 633 | 
 634 | .toggle-btn.active {
 635 |   color: var(--white);
 636 | }
 637 | 
 638 | .skills-box.active .skills-list,
 639 | .skills-box .tools-list {
 640 |   display: none;
 641 | }
 642 | 
 643 | .skills-box .skills-list,
 644 | .skills-box.active .tools-list {
 645 |   display: flex;
 646 |   flex-wrap: wrap;
 647 |   justify-content: center;
 648 |   align-items: center;
 649 |   gap: 15px;
 650 |   animation: fadeIn 0.5s ease-out forwards;
 651 | }
 652 | 
 653 | @keyframes fadeIn {
 654 |   0% {
 655 |     opacity: 0;
 656 |   }
 657 |   100% {
 658 |     opacity: 1;
 659 |   }
 660 | }
 661 | 
 662 | .skill-card {
 663 |   position: relative;
 664 |   background: var(--bg-secondary);
 665 |   width: 80px;
 666 |   height: 80px;
 667 |   display: grid;
 668 |   place-items: center;
 669 |   border-radius: var(--radius-12);
 670 |   box-shadow: var(--shadow-1);
 671 |   cursor: help;
 672 | }
 673 | 
 674 | .skill-card:hover .tooltip {
 675 |   transform: translateY(0);
 676 |   opacity: 1;
 677 | }
 678 | 
 679 | /*-----------------------------------*\
 680 |  * #PROJECT
 681 | \*-----------------------------------*/
 682 | 
 683 | .project {
 684 |   padding-block: var(--section-padding);
 685 | }
 686 | 
 687 | .project-list > li {
 688 |   margin-bottom: 25px;
 689 | }
 690 | 
 691 | .project-card {
 692 |   position: relative;
 693 |   overflow: hidden;
 694 |   border-radius: var(--radius-12);
 695 |   box-shadow: 2px 4px 6px hsla(0, 0%, 0%, 0.2);
 696 | }
 697 | 
 698 | .project-card::after {
 699 |   content: "";
 700 |   position: absolute;
 701 |   inset: 0;
 702 |   border-radius: inherit;
 703 |   transition: var(--transition-1);
 704 | }
 705 | 
 706 | .project-card:is(:hover, :focus)::after {
 707 |   background: hsla(0, 0%, 100%, 0.1);
 708 |   backdrop-filter: blur(0.5px);
 709 | }
 710 | 
 711 | .project-card .card-content {
 712 |   position: absolute;
 713 |   bottom: 0;
 714 |   left: 0;
 715 |   width: 100%;
 716 |   padding: 20px;
 717 | }
 718 | 
 719 | .project-card .card-title {
 720 |   margin-bottom: 10px;
 721 | }
 722 | 
 723 | .project-card :is(.card-title, .publish-date) {
 724 |   background: var(--bg-primary);
 725 |   padding: 6px 12px;
 726 |   width: max-content;
 727 |   box-shadow: var(--shadow-1);
 728 |   transform: translateY(20px);
 729 |   opacity: 0;
 730 |   transition: var(--transition-1);
 731 | }
 732 | 
 733 | .project-card .publish-date {
 734 |   font-size: var(--fs-6);
 735 |   color: var(--color-primary);
 736 |   transition-delay: 0s;
 737 | }
 738 | 
 739 | .project-card:is(:hover, :focus) :is(.card-title, .publish-date) {
 740 |   transform: translateY(0);
 741 |   opacity: 1;
 742 | }
 743 | 
 744 | .project-card:is(:hover, :focus) .publish-date {
 745 |   transition-delay: 0.1s;
 746 | }
 747 | 
 748 | .load-more {
 749 |   font-size: var(--fs-4);
 750 |   color: var(--raw-seinna);
 751 |   text-decoration: underline;
 752 |   margin-inline: auto;
 753 | }
 754 | 
 755 | /*-----------------------------------*\
 756 |  * #CONTACT
 757 | \*-----------------------------------*/
 758 | 
 759 | .contact {
 760 |   padding-block: var(--section-padding);
 761 | }
 762 | 
 763 | .contact-content {
 764 |   margin-bottom: 50px;
 765 | }
 766 | 
 767 | .contact-list-item {
 768 |   display: flex;
 769 |   align-items: flex-start;
 770 |   gap: 15px;
 771 |   margin-bottom: 20px;
 772 | }
 773 | 
 774 | .contact-item-icon {
 775 |   font-size: 25px;
 776 |   color: var(--color-primary);
 777 | }
 778 | 
 779 | .contact-item-icon ion-icon {
 780 |   --ionicon-stroke-width: 40px;
 781 | }
 782 | 
 783 | .contact-item-title {
 784 |   margin-bottom: 10px;
 785 | }
 786 | 
 787 | .contact-list-item .contact-info {
 788 |   color: var(--color-secondary);
 789 |   font-style: normal;
 790 |   line-height: 1.6;
 791 |   transition: var(--transition-1);
 792 | }
 793 | 
 794 | .contact-info:not(address):is(:hover, :focus) {
 795 |   color: var(--color-primary);
 796 | }
 797 | 
 798 | .contac-social-list {
 799 |   display: flex;
 800 |   flex-wrap: wrap;
 801 |   justify-content: flex-start;
 802 |   align-items: center;
 803 |   gap: 15px;
 804 |   padding-inline: 40px;
 805 | }
 806 | 
 807 | .contact-social-link {
 808 |   position: relative;
 809 |   background: var(--color-primary);
 810 |   color: var(--bg-primary);
 811 |   width: 35px;
 812 |   height: 35px;
 813 |   display: grid;
 814 |   place-items: center;
 815 |   border-radius: 50%;
 816 |   transition: var(--transition-1);
 817 | }
 818 | 
 819 | .contact-social-link:is(:hover, :focus) {
 820 |   background: var(--raw-seinna);
 821 |   color: var(--white);
 822 | }
 823 | 
 824 | .contact-social-link:is(:hover, :focus) .tooltip {
 825 |   transform: translateY(0);
 826 |   opacity: 1;
 827 | }
 828 | 
 829 | .contact-form {
 830 |   background: var(--bg-secondary);
 831 |   padding: 20px;
 832 |   border-radius: var(--radius-12);
 833 |   box-shadow: var(--shadow-1);
 834 | }
 835 | 
 836 | .form-wrapper {
 837 |   margin-bottom: 25px;
 838 | }
 839 | 
 840 | .form-label {
 841 |   color: var(--color-primary);
 842 |   font-size: var(--fs-7);
 843 |   font-family: var(--ff-poppins);
 844 |   margin-bottom: 8px;
 845 |   margin-left: 5px;
 846 | }
 847 | 
 848 | .input-wrapper {
 849 |   position: relative;
 850 | }
 851 | 
 852 | .input-field {
 853 |   background: var(--input-bg);
 854 |   color: var(--raw-seinna);
 855 |   padding: 10px;
 856 |   padding-left: 40px;
 857 |   border-radius: var(--radius-12);
 858 |   transition: var(--transition-1);
 859 | }
 860 | 
 861 | .input-wrapper ion-icon {
 862 |   position: absolute;
 863 |   top: 10px;
 864 |   left: 10px;
 865 |   color: var(--color-secondary);
 866 |   font-size: 20px;
 867 |   transition: var(--transition-1);
 868 | }
 869 | 
 870 | textarea.input-field {
 871 |   min-height: 60px;
 872 |   height: 120px;
 873 |   max-height: 200px;
 874 |   resize: vertical;
 875 | }
 876 | 
 877 | .input-field:focus {
 878 |   outline: 1px solid;
 879 | }
 880 | 
 881 | .input-field:focus + ion-icon {
 882 |   color: var(--raw-seinna);
 883 | }
 884 | 
 885 | .contact .btn-primary {
 886 |   max-width: unset;
 887 |   width: 100%;
 888 |   background: var(--color-primary);
 889 |   color: var(--bg-primary);
 890 | }
 891 | 
 892 | /*-----------------------------------*\
 893 |  * #FOOTER
 894 | \*-----------------------------------*/
 895 | 
 896 | .footer {
 897 |   background: var(--bg-secondary);
 898 |   padding-block: 20px;
 899 |   text-align: center;
 900 |   box-shadow: var(--shadow-1);
 901 | }
 902 | 
 903 | .footer .logo {
 904 |   margin-bottom: 15px;
 905 | }
 906 | 
 907 | .copyright {
 908 |   color: var(--color-secondary);
 909 |   line-height: 1.6;
 910 | }
 911 | 
 912 | .copyright a {
 913 |   display: inline-block;
 914 |   color: var(--raw-seinna);
 915 | }
 916 | 
 917 | /*-----------------------------------*\
 918 |  * #GO TO TOP
 919 | \*-----------------------------------*/
 920 | 
 921 | .go-top {
 922 |   position: fixed;
 923 |   bottom: 25px;
 924 |   right: 25px;
 925 |   width: 45px;
 926 |   height: 45px;
 927 |   display: grid;
 928 |   place-items: center;
 929 |   font-size: 20px;
 930 |   color: var(--color-primary);
 931 |   border: 2px solid var(--color-primary);
 932 |   border-radius: 50%;
 933 |   opacity: 0;
 934 |   pointer-events: none;
 935 |   transform: translateY(10px);
 936 |   transition: var(--transition-1);
 937 |   z-index: 2;
 938 | }
 939 | 
 940 | .go-top.active {
 941 |   opacity: 1;
 942 |   pointer-events: all;
 943 |   transform: translateY(0);
 944 | }
 945 | 
 946 | /*-----------------------------------*\
 947 |  * #MEDIA QUERIES
 948 | \*-----------------------------------*/
 949 | 
 950 | /**
 951 |  * responsive for larger than 550px screen
 952 |  */
 953 | 
 954 | @media (min-width: 550px) {
 955 |   /**
 956 |    * REUSED STYLE
 957 |    */
 958 |   .container {
 959 |     max-width: 550px;
 960 |     margin-inline: auto;
 961 |   }
 962 |   .section-title {
 963 |     max-width: 380px;
 964 |   }
 965 |   /**
 966 |    * PROJECT
 967 |    */
 968 |   .project-list {
 969 |     column-count: 2;
 970 |     column-gap: 25px;
 971 |   }
 972 |   .project-list > li:first-child {
 973 |     column-span: all;
 974 |   }
 975 | }
 976 | 
 977 | /**
 978 |  * responsive for larger than 768px screen
 979 |  */
 980 | 
 981 | @media (min-width: 768px) {
 982 |   /**
 983 |    * REUSED STYLE
 984 |    */
 985 |   .container {
 986 |     max-width: 720px;
 987 |   }
 988 |   .section-title {
 989 |     max-width: 430px;
 990 |   }
 991 |   /**
 992 |    * STATS
 993 |    */
 994 |   .stats-list {
 995 |     grid-template-columns: 1fr 1fr;
 996 |   }
 997 |   /**
 998 |    * ABOUT
 999 |    */
1000 |   .btn-group {
1001 |     display: flex;
1002 |     justify-content: flex-start;
1003 |     align-items: center;
1004 |     gap: 20px;
1005 |   }
1006 |   .about .btn {
1007 |     max-width: max-content;
1008 |   }
1009 |   .about .btn-secondary {
1010 |     margin-bottom: 0;
1011 |   }
1012 |   /**
1013 |    * CONTACT
1014 |    */
1015 |   .contact-form {
1016 |     max-width: 450px;
1017 |     margin-inline: auto;
1018 |   }
1019 | }
1020 | 
1021 | /**
1022 |  * responsive for larger than 992px screen
1023 |  */
1024 | 
1025 | @media (min-width: 992px) {
1026 |   /**
1027 |    * CUSTOM PROPERTY
1028 |    */
1029 |   :root {
1030 |     /**
1031 |      * typography
1032 |      */
1033 |     --fs-2: 3rem;
1034 |     /**
1035 |      * spacing
1036 |      */
1037 |     --section-padding: 100px;
1038 |   }
1039 |   /**
1040 |    * REUSED STYLE
1041 |    */
1042 |   .container {
1043 |     max-width: 980px;
1044 |   }
1045 |   .section-content {
1046 |     position: relative;
1047 |     padding-left: 40px;
1048 |   }
1049 |   .section-subtitle {
1050 |     position: absolute;
1051 |     top: 0;
1052 |     left: 0;
1053 |     transform: rotate(0.75turn) translateX(-100%);
1054 |     transform-origin: left top;
1055 |     margin-bottom: 0;
1056 |   }
1057 |   .section-subtitle::after {
1058 |     top: 8px;
1059 |     left: auto;
1060 |     right: calc(100% + 20px);
1061 |   }
1062 |   /**
1063 |    * HEADER
1064 |    */
1065 |   .header {
1066 |     padding-block: 30px;
1067 |   }
1068 |   .header.active {
1069 |     padding-block: 15px;
1070 |   }
1071 |   .navbar-actions {
1072 |     order: 1;
1073 |     margin-left: 0;
1074 |   }
1075 |   .nav-toggle-btn {
1076 |     display: none;
1077 |   }
1078 |   .navbar {
1079 |     all: unset;
1080 |   }
1081 |   .navbar-link {
1082 |     transform: translateY(0);
1083 |     font-size: unset;
1084 |     padding-inline: 5px;
1085 |   }
1086 |   .navbar-list > li {
1087 |     margin: 0;
1088 |     padding: 0;
1089 |     overflow: visible;
1090 |   }
1091 |   .navbar-list {
1092 |     display: flex;
1093 |     justify-content: center;
1094 |     align-items: center;
1095 |     gap: 20px;
1096 |   }
1097 |   .navbar-link::before {
1098 |     height: 2px;
1099 |   }
1100 |   /**
1101 |    * HERO
1102 |    */
1103 |   .hero {
1104 |     position: relative;
1105 |     padding-top: 0;
1106 |     height: 100vh;
1107 |   }
1108 |   .hero-banner {
1109 |     max-width: unset;
1110 |     height: 100%;
1111 |     margin-bottom: 0;
1112 |   }
1113 |   .hero img {
1114 |     height: 100%;
1115 |     width: auto;
1116 |     margin-inline: auto;
1117 |   }
1118 |   .hero-content {
1119 |     --color-primary: var(--white);
1120 |     position: absolute;
1121 |     top: 50%;
1122 |     filter: drop-shadow(2px 4px 10px var(--black));
1123 |   }
1124 |   .hero .btn-primary:is(:hover, :focus) {
1125 |     color: hsl(0, 0%, 12%);
1126 |   }
1127 |   .hero-social-list {
1128 |     display: block;
1129 |     position: absolute;
1130 |     bottom: 92px;
1131 |     left: -30px;
1132 |   }
1133 |   .hero-social-list::after {
1134 |     content: "";
1135 |     position: absolute;
1136 |     bottom: -40px;
1137 |     left: 13px;
1138 |     width: 2px;
1139 |     height: 30px;
1140 |     background: var(--color-secondary);
1141 |   }
1142 |   .hero-social-link {
1143 |     position: relative;
1144 |     color: var(--color-secondary);
1145 |     margin-block: 5px;
1146 |     padding: 5px;
1147 |     font-size: 18px;
1148 |     transition: var(--transition-1);
1149 |   }
1150 |   .hero-social-link:is(:hover, :focus) {
1151 |     color: var(--color-primary);
1152 |   }
1153 |   .hero-social-link .tooltip {
1154 |     --trans-x: 10px;
1155 |     left: calc(100% + 10px);
1156 |     top: 50%;
1157 |     transform: translateY(-50%) translateX(var(--trans-x));
1158 |   }
1159 |   .hero-social-link:is(:hover, :focus) .tooltip {
1160 |     --trans-x: 0;
1161 |     opacity: 1;
1162 |   }
1163 |   .scroll-down {
1164 |     display: block;
1165 |     position: absolute;
1166 |     bottom: 80px;
1167 |     right: -30px;
1168 |     color: var(--color-secondary);
1169 |     font-size: 1.125rem;
1170 |     text-transform: uppercase;
1171 |     transform: rotate(90deg);
1172 |     transform-origin: top right;
1173 |   }
1174 |   .scroll-down::after {
1175 |     content: "";
1176 |     position: absolute;
1177 |     top: 8px;
1178 |     right: -50px;
1179 |     width: 30px;
1180 |     height: 2px;
1181 |     background: var(--color-secondary);
1182 |   }
1183 |   /**
1184 |    * STATS
1185 |    */
1186 |   .stats-list {
1187 |     grid-template-columns: repeat(3, 1fr);
1188 |   }
1189 |   .stats-card {
1190 |     height: 100%;
1191 |   }
1192 |   /**
1193 |    * ABOUT
1194 |    */
1195 |   .about {
1196 |     display: grid;
1197 |     grid-template-columns: 1fr 1fr;
1198 |     align-items: center;
1199 |     gap: 30px;
1200 |   }
1201 |   .about-banner {
1202 |     margin-bottom: 0;
1203 |   }
1204 |   /**
1205 |    * SKILLS
1206 |    */
1207 |   .skills {
1208 |     display: grid;
1209 |     grid-template-columns: 1fr 1fr;
1210 |     align-items: center;
1211 |     gap: 50px;
1212 |   }
1213 |   .skills-content {
1214 |     margin-bottom: 0;
1215 |   }
1216 |   .skills-toggle {
1217 |     margin-inline: 0;
1218 |   }
1219 |   /**
1220 |    * PROJECT
1221 |    */
1222 |   .project-list {
1223 |     column-count: 3;
1224 |   }
1225 |   .project-list > li:first-child {
1226 |     column-span: unset;
1227 |     margin: 25px;
1228 |     margin-left: 0;
1229 |   }
1230 |   /**
1231 |    * CONTACT
1232 |    */
1233 |   .contact {
1234 |     display: grid;
1235 |     grid-template-columns: 1fr 1fr;
1236 |     gap: 30px;
1237 |   }
1238 |   .contact-content {
1239 |     margin-bottom: 0;
1240 |   }
1241 |   .contact-form {
1242 |     width: 100%;
1243 |   }
1244 |   .contact-list {
1245 |     margin-left: -40px;
1246 |   }
1247 |   /**
1248 |    * FOOTER
1249 |    */
1250 |   .footer .container {
1251 |     display: flex;
1252 |     justify-content: space-between;
1253 |     align-items: center;
1254 |   }
1255 |   .footer .logo {
1256 |     margin-bottom: 0;
1257 |   }
1258 | }
1259 | 
1260 | /**
1261 |  * responsive for larger than 1200px screen
1262 |  */
1263 | 
1264 | @media (min-width: 1200px) {
1265 |   /**
1266 |    * REUSED STYLE
1267 |    */
1268 |   .container {
1269 |     max-width: 1150px;
1270 |   }
1271 |   .section-title {
1272 |     max-width: 460px;
1273 |   }
1274 |   /**
1275 |    * HERO
1276 |    */
1277 |   .hero-social-list {
1278 |     left: -80px;
1279 |   }
1280 |   .scroll-down {
1281 |     right: -80px;
1282 |   }
1283 |   /**
1284 |    * ABOUT
1285 |    */
1286 |   .about-banner {
1287 |     max-width: 450px;
1288 |   }
1289 | }
1290 | 


--------------------------------------------------------------------------------
/assets/images/Testimonials1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/Testimonials1.png


--------------------------------------------------------------------------------
/assets/images/about-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/about-banner.png


--------------------------------------------------------------------------------
/assets/images/adobe-xd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/adobe-xd.png


--------------------------------------------------------------------------------
/assets/images/ajax.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/ajax.png


--------------------------------------------------------------------------------
/assets/images/angular.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/angular.png


--------------------------------------------------------------------------------
/assets/images/avatar-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/avatar-1.png


--------------------------------------------------------------------------------
/assets/images/avatar-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/avatar-2.png


--------------------------------------------------------------------------------
/assets/images/avatar-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/avatar-3.png


--------------------------------------------------------------------------------
/assets/images/avatar-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/avatar-4.png


--------------------------------------------------------------------------------
/assets/images/bootstrap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/bootstrap.png


--------------------------------------------------------------------------------
/assets/images/clickup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/clickup.png


--------------------------------------------------------------------------------
/assets/images/command.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/command.png


--------------------------------------------------------------------------------
/assets/images/css3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/css3.png


--------------------------------------------------------------------------------
/assets/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/favicon.ico


--------------------------------------------------------------------------------
/assets/images/firebase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/firebase.png


--------------------------------------------------------------------------------
/assets/images/git.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/git.png


--------------------------------------------------------------------------------
/assets/images/gulp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/gulp.png


--------------------------------------------------------------------------------
/assets/images/hero-banner-md.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/hero-banner-md.png


--------------------------------------------------------------------------------
/assets/images/hero-banner-sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/hero-banner-sm.png


--------------------------------------------------------------------------------
/assets/images/hero-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/hero-banner.png


--------------------------------------------------------------------------------
/assets/images/html5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/html5.png


--------------------------------------------------------------------------------
/assets/images/icon-app.svg:
--------------------------------------------------------------------------------
 1 | <svg width="40" height="40" viewBox="0 0 22 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M3 1C1.89543 1 1 1.89543 1 3V37C1 38.1046 1.89543 39 3 39H18.9C20.0046 39 20.9 38.1046 20.9 37V3C20.9 1.89543 20.0046 1 18.9 1H15.6631V2H6.23676V1H3Z" fill="url(#paint0_linear)"/>
 3 | <path d="M8.50854 35.6745C8.13501 35.6745 7.83221 35.9773 7.83221 36.3508C7.83221 36.7243 8.13501 37.0271 8.50854 37.0271V35.6745ZM13.4633 37.0271C13.8368 37.0271 14.1396 36.7243 14.1396 36.3508C14.1396 35.9773 13.8368 35.6745 13.4633 35.6745V37.0271ZM0.400024 29.4141C0.400024 29.7876 0.702827 30.0904 1.07635 30.0904C1.44988 30.0904 1.75268 29.7876 1.75268 29.4141H0.400024ZM1.75268 32.387C1.75268 32.0134 1.44988 31.7106 1.07635 31.7106C0.702827 31.7106 0.400024 32.0134 0.400024 32.387H1.75268ZM20.2192 7.61303C20.2192 7.98656 20.522 8.28936 20.8955 8.28936C21.269 8.28936 21.5718 7.98656 21.5718 7.61303H20.2192ZM21.5718 10.5859C21.5718 10.2124 21.269 9.90956 20.8955 9.90956C20.522 9.90956 20.2192 10.2124 20.2192 10.5859H21.5718ZM18.48 38.6473H3.49181V40H18.48V38.6473ZM3.49181 1.35266H6.52662V0H3.49181V1.35266ZM5.8503 1.69206H7.20295V0.676328H5.8503V1.69206ZM7.49281 3.33457H14.4791V1.98191H7.49281V3.33457ZM6.52662 1.35266H15.4452V0H6.52662V1.35266ZM15.4452 1.35266H18.48V0H15.4452V1.35266ZM16.1216 1.69206V0.676328H14.7689V1.69206H16.1216ZM8.50854 37.0271H13.4633V35.6745H8.50854V37.0271ZM1.75268 29.4141V3.09179H0.400024V29.4141H1.75268ZM1.75268 36.9082V32.387H0.400024V36.9082H1.75268ZM20.2192 3.09179V7.61303H21.5718V3.09179H20.2192ZM20.2192 10.5859V36.9082H21.5718V10.5859H20.2192ZM14.4791 3.33457C15.3862 3.33457 16.1216 2.5992 16.1216 1.69206H14.7689C14.7689 1.85214 14.6392 1.98191 14.4791 1.98191V3.33457ZM3.49181 38.6473C2.53132 38.6473 1.75268 37.8687 1.75268 36.9082H0.400024C0.400024 38.6157 1.78427 40 3.49181 40V38.6473ZM18.48 40C20.1876 40 21.5718 38.6157 21.5718 36.9082H20.2192C20.2192 37.8687 19.4405 38.6473 18.48 38.6473V40ZM18.48 1.35266C19.4405 1.35266 20.2192 2.13129 20.2192 3.09179H21.5718C21.5718 1.38424 20.1876 0 18.48 0V1.35266ZM5.8503 1.69206C5.8503 2.5992 6.58567 3.33457 7.49281 3.33457V1.98191C7.33272 1.98191 7.20295 1.85214 7.20295 1.69206H5.8503ZM3.49181 0C1.78427 0 0.400024 1.38424 0.400024 3.09179H1.75268C1.75268 2.13129 2.53132 1.35266 3.49181 1.35266V0Z" fill="url(#paint1_linear)"/>
 4 | <defs>
 5 | <linearGradient id="paint0_linear" x1="2.12767" y1="1" x2="30.7018" y2="17.5237" gradientUnits="userSpaceOnUse">
 6 | <stop offset="0.259336" stop-color="#FFDB6E"/>
 7 | <stop offset="1" stop-color="#FFBC5E"/>
 8 | </linearGradient>
 9 | <linearGradient id="paint1_linear" x1="1.59976" y1="8.08974e-07" x2="31.8368" y2="17.6727" gradientUnits="userSpaceOnUse">
10 | <stop offset="0.259336" stop-color="#FFDB6E"/>
11 | <stop offset="1" stop-color="#FFBC5E"/>
12 | </linearGradient>
13 | </defs>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/assets/images/icon-design.svg:
--------------------------------------------------------------------------------
 1 | <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M40.6377 19.814C40.4183 19.7228 40.1658 19.7732 39.9978 19.9416L38.2394 21.7057V9.71161C38.2394 9.38628 37.9766 9.12261 37.6523 9.12261H33.1413L34.7788 7.47985L34.7795 7.47906L36.3573 5.89617C36.6954 5.55704 36.8816 5.10591 36.8816 4.62624C36.8816 4.14658 36.6954 3.6956 36.3573 3.35631L34.5328 1.52591C34.1948 1.18677 33.7451 1 33.2669 1C32.7888 1 32.3392 1.18677 32.0011 1.52591L30.4225 3.10958L28.515 5.02322L24.4288 9.12254H6.2047V3.29564C6.2047 2.9703 5.94181 2.70665 5.61759 2.70665C3.07149 2.70681 1 4.7848 1 7.33924V32.3559C1 32.3994 1.005 32.4417 1.01391 32.4825C1.095 33.5664 1.56242 34.5734 2.3436 35.3379C3.1786 36.1549 4.28087 36.6048 5.44743 36.6048H23.3879L20.0091 39.9946C19.8412 40.163 19.791 40.4162 19.8818 40.6364C19.9727 40.8565 20.1868 41 20.4243 41H40.413C40.7372 41 41.0001 40.7364 41.0001 40.411V20.3582C41.0001 20.12 40.857 19.9052 40.6377 19.814ZM32.8315 2.35897C33.0715 2.11804 33.4626 2.11804 33.7026 2.35897L35.5272 4.18945C35.7673 4.4303 35.7673 4.82242 35.5272 5.06335L34.3638 6.23053L31.668 3.52615L32.8315 2.35897ZM30.8377 4.35913L33.5334 7.06343L32.4562 8.14417L29.7606 5.43987L30.8377 4.35913ZM18.3967 21.76L16.715 22.3556L15.5945 21.2315L16.1882 19.5444L18.3967 21.76ZM35.8293 30.1707L30.1707 35.8293C30.1077 35.8923 30.1523 36 30.2414 36H36V30.2414C36 30.1523 35.8923 30.1077 35.8293 30.1707ZM16 18.5L19.5 22L32.5 9L29 5.5L16 18.5Z" fill="url(#paint0_linear)"/>
 3 | <path d="M36.3998 29.2549C36.1804 29.1637 35.9279 29.2141 35.76 29.3825L29.3439 35.8193C29.176 35.9878 29.1257 36.2411 29.2167 36.4612C29.3075 36.6814 29.5217 36.8248 29.7591 36.8248H36.1752C36.4995 36.8248 36.7623 36.5611 36.7623 36.2358V29.799C36.7622 29.5609 36.6192 29.3461 36.3998 29.2549ZM31.1763 35.6469L35.5879 31.221V35.6469H31.1763Z" fill="url(#paint1_linear)" stroke="url(#paint2_linear)" stroke-width="0.25"/>
 4 | <path d="M40.6377 19.814C40.4183 19.7228 40.1658 19.7732 39.9978 19.9416L38.2394 21.7057V9.71161C38.2394 9.38628 37.9766 9.12261 37.6523 9.12261H33.1413L34.7788 7.47985C34.7791 7.47962 34.7793 7.47929 34.7795 7.47906L36.3573 5.89617C36.6954 5.55704 36.8816 5.10591 36.8816 4.62624C36.8816 4.14658 36.6954 3.6956 36.3573 3.35631L34.5328 1.52591C34.1948 1.18677 33.7451 1 33.2669 1C32.7888 1 32.3392 1.18677 32.0011 1.52591L30.4225 3.10958L28.515 5.02322L24.4288 9.12254H6.2047V3.29564C6.2047 2.9703 5.94181 2.70665 5.61759 2.70665C3.07149 2.70681 1 4.7848 1 7.33924V32.3559C1 32.3994 1.005 32.4417 1.01391 32.4825C1.095 33.5664 1.56242 34.5734 2.3436 35.3379C3.1786 36.1549 4.28087 36.6048 5.44743 36.6048H23.3879L20.0091 39.9946C19.8412 40.163 19.791 40.4162 19.8818 40.6364C19.9727 40.8565 20.1868 41 20.4243 41H40.413C40.7372 41 41.0001 40.7364 41.0001 40.411V20.3582C41.0001 20.12 40.857 19.9052 40.6377 19.814ZM32.8315 2.35897C33.0715 2.11804 33.4626 2.11804 33.7026 2.35897L35.5272 4.18945C35.7673 4.4303 35.7673 4.82242 35.5272 5.06335L34.3638 6.23053L31.668 3.52615L32.8315 2.35897ZM30.8377 4.35913L33.5334 7.06343L32.4562 8.14417L29.7606 5.43987L30.8377 4.35913ZM39.826 26.9764H38.7428C38.4185 26.9764 38.1557 27.2401 38.1557 27.5654C38.1557 27.8908 38.4185 28.1544 38.7428 28.1544H39.826V29.9293H38.7428C38.4185 29.9293 38.1557 30.1931 38.1557 30.5184C38.1557 30.8437 38.4185 31.1074 38.7428 31.1074H39.826V32.8822H38.7428C38.4185 32.8822 38.1557 33.1458 38.1557 33.4712C38.1557 33.7965 38.4185 34.0602 38.7428 34.0602H39.826V35.8351H38.7428C38.4185 35.8351 38.1557 36.0988 38.1557 36.4241C38.1557 36.7495 38.4185 37.0131 38.7428 37.0131H39.826V39.8222H21.8416L27.7719 33.873C28.0012 33.6428 28.0012 33.27 27.7719 33.04C27.7456 33.0135 27.7173 32.9906 27.6877 32.9703C27.4591 32.8133 27.1446 32.8363 26.9415 33.04L24.5622 35.427H5.44751C3.66688 35.427 2.23344 34.0324 2.17703 32.2493C2.18039 32.1373 2.18906 32.0263 2.20297 31.9166C2.20305 31.916 2.20313 31.9154 2.20321 31.9147C2.20977 31.8626 2.21766 31.8107 2.22664 31.7592C2.22766 31.7533 2.22875 31.7473 2.22977 31.7415C2.23797 31.6955 2.24719 31.6497 2.25727 31.6041C2.26008 31.5914 2.26305 31.5787 2.26602 31.5661C2.27492 31.5275 2.28453 31.4892 2.29485 31.451C2.30047 31.4303 2.30633 31.4099 2.31235 31.3893C2.32094 31.3593 2.32985 31.3295 2.3393 31.2999C2.34875 31.2704 2.35883 31.2411 2.36907 31.2119C2.37617 31.1915 2.38321 31.171 2.39086 31.1507C2.40516 31.1121 2.42032 31.074 2.43594 31.0361C2.44039 31.0252 2.44477 31.0142 2.44938 31.0033C2.46946 30.9562 2.49032 30.9098 2.51235 30.8638C2.51328 30.8619 2.51414 30.8599 2.51508 30.858C2.9743 29.9046 3.85751 29.1938 4.91743 28.9732C4.9204 28.9726 4.92337 28.9719 4.92634 28.9712C4.97493 28.9613 5.02399 28.9528 5.07337 28.9449C5.08157 28.9436 5.08977 28.9418 5.09813 28.9406C5.14274 28.9338 5.18782 28.9285 5.2329 28.9234C5.24556 28.922 5.25813 28.92 5.27087 28.9188C5.31438 28.9144 5.35829 28.9115 5.4022 28.9087C5.4161 28.9078 5.43001 28.9064 5.44392 28.9057C5.50142 28.9028 5.55938 28.9013 5.61759 28.9013C5.94181 28.9013 6.2047 28.6377 6.2047 28.3123V24.0416C6.2047 23.7163 5.94181 23.4527 5.61759 23.4527C5.29337 23.4527 5.03048 23.7163 5.03048 24.0416V27.7604C4.03907 27.8862 3.11883 28.3298 2.39321 29.0407C2.31688 29.1154 2.24453 29.1932 2.17406 29.2722V7.33924C2.17406 5.63526 3.41047 4.21531 5.0304 3.93488V21.6858C5.0304 22.011 5.29329 22.2748 5.61751 22.2748C5.94173 22.2748 6.20462 22.011 6.20462 21.6858V10.3006H23.2547L20.009 13.5567C19.7797 13.7868 19.7797 14.1597 20.009 14.3897C20.2383 14.6196 20.61 14.6196 20.8393 14.3897L25.0872 10.1281C25.0873 10.128 25.0874 10.1278 25.0875 10.1277L28.9301 6.27278L31.6257 8.97715L31.3094 9.29441C31.3092 9.29465 31.3089 9.29488 31.3087 9.29513L19.4705 21.1715L16.7749 18.4672L19.1083 16.1263C19.3376 15.8961 19.3376 15.5233 19.1083 15.2933C18.879 15.0634 18.5073 15.0634 18.2781 15.2933L15.5294 18.0507C15.5147 18.0655 15.501 18.081 15.4881 18.097C15.4838 18.1024 15.48 18.1081 15.4759 18.1136C15.4676 18.1247 15.4595 18.1358 15.4519 18.1474C15.4476 18.1542 15.4437 18.1611 15.4396 18.168C15.4332 18.179 15.4269 18.1902 15.4212 18.2015C15.4175 18.2088 15.4141 18.2164 15.4107 18.224C15.4054 18.2355 15.4006 18.2473 15.3961 18.259C15.3946 18.2632 15.3925 18.2671 15.391 18.2712L14.2472 21.522L13.4674 23.7384C13.4571 23.7678 13.4496 23.7978 13.4441 23.828H11.4916C11.1674 23.828 10.9045 24.0916 10.9045 24.4169C10.9045 24.7423 11.1674 25.0059 11.4916 25.0059H27.7505C28.0748 25.0059 28.3376 24.7423 28.3376 24.4169C28.3376 24.0916 28.0748 23.828 27.7505 23.828H16.0854L19.6659 22.5599C19.6689 22.5589 19.6717 22.5574 19.6746 22.5563C19.6886 22.5511 19.7022 22.5452 19.7157 22.5391C19.7211 22.5366 19.7265 22.5342 19.7318 22.5316C19.7458 22.5246 19.7596 22.5168 19.7732 22.5085C19.7776 22.5058 19.7821 22.5034 19.7864 22.5007C19.8006 22.4916 19.8143 22.4816 19.8279 22.4711C19.8312 22.4686 19.8347 22.4663 19.838 22.4636C19.8543 22.4504 19.8703 22.4363 19.8855 22.421L31.9671 10.3007H37.0652V22.8837L28.667 31.3089C28.4377 31.5391 28.4377 31.9119 28.667 32.1419C28.6813 32.1563 28.6962 32.1698 28.7116 32.1823C28.8193 32.2704 28.9508 32.3145 29.0822 32.3145C29.2136 32.3145 29.3451 32.2704 29.4527 32.1823C29.4681 32.1698 29.483 32.1563 29.4973 32.1419L29.4976 32.1417L39.826 21.7799V26.9764ZM18.3967 21.76L16.715 22.3556L15.5945 21.2315L16.1882 19.5444L18.3967 21.76Z" fill="url(#paint3_linear)" stroke="url(#paint4_linear)" stroke-width="0.25"/>
 5 | <defs>
 6 | <linearGradient id="paint0_linear" x1="3.26667" y1="1" x2="37.8" y2="39.1334" gradientUnits="userSpaceOnUse">
 7 | <stop offset="0.259336" stop-color="#FFDB6E"/>
 8 | <stop offset="1" stop-color="#FFBC5E"/>
 9 | </linearGradient>
10 | <linearGradient id="paint1_linear" x1="29.602" y1="29.21" x2="36.1781" y2="36.4484" gradientUnits="userSpaceOnUse">
11 | <stop offset="0.259336" stop-color="#FFDB6E"/>
12 | <stop offset="1" stop-color="#FFBC5E"/>
13 | </linearGradient>
14 | <linearGradient id="paint2_linear" x1="29.602" y1="29.21" x2="36.1781" y2="36.4484" gradientUnits="userSpaceOnUse">
15 | <stop offset="0.259336" stop-color="#FFDB6E"/>
16 | <stop offset="1" stop-color="#FFBC5E"/>
17 | </linearGradient>
18 | <linearGradient id="paint3_linear" x1="3.26667" y1="1" x2="37.8" y2="39.1334" gradientUnits="userSpaceOnUse">
19 | <stop offset="0.259336" stop-color="#FFDB6E"/>
20 | <stop offset="1" stop-color="#FFBC5E"/>
21 | </linearGradient>
22 | <linearGradient id="paint4_linear" x1="3.26667" y1="1" x2="37.8" y2="39.1334" gradientUnits="userSpaceOnUse">
23 | <stop offset="0.259336" stop-color="#FFDB6E"/>
24 | <stop offset="1" stop-color="#FFBC5E"/>
25 | </linearGradient>
26 | </defs>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/assets/images/icon-dev.svg:
--------------------------------------------------------------------------------
 1 | <svg width="40" height="32" viewBox="0 0 40 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M3 1C1.89543 1 1 1.89543 1 3V28C1 29.1046 1.89543 30 3 30H37C38.1046 30 39 29.1046 39 28V3C39 1.89543 38.1046 1 37 1H3ZM36 9H4V28H36V9Z" fill="url(#paint0_linear)"/>
 3 | <path d="M37.6172 0.375H2.38281C1.06903 0.375 0 1.44403 0 2.75781V29.2422C0 30.556 1.06903 31.625 2.38281 31.625H37.6172C38.931 31.625 40 30.556 40 29.2422V2.75781C40 1.44403 38.931 0.375 37.6172 0.375ZM38.4375 29.2422C38.4375 29.6945 38.0695 30.0625 37.6172 30.0625H2.38281C1.93054 30.0625 1.5625 29.6945 1.5625 29.2422V2.75781C1.5625 2.30554 1.93054 1.9375 2.38281 1.9375H37.6172C38.0695 1.9375 38.4375 2.30554 38.4375 2.75781V29.2422Z" fill="url(#paint1_linear)"/>
 4 | <path d="M14.9219 5.79156H35.0781C35.5096 5.79156 35.8594 5.44183 35.8594 5.01031C35.8594 4.5791 35.5096 4.22906 35.0781 4.22906H14.9219C14.4904 4.22906 14.1406 4.5791 14.1406 5.01031C14.1406 5.44183 14.4904 5.79156 14.9219 5.79156Z" fill="url(#paint2_linear)"/>
 5 | <path d="M3.99231 5.3094C4.01184 5.3564 4.03595 5.40157 4.06403 5.44368C4.0921 5.48671 4.12506 5.52669 4.16107 5.56239C4.30634 5.70857 4.50775 5.79158 4.71313 5.79158C4.76471 5.79158 4.81567 5.7867 4.86633 5.77663C4.91638 5.76656 4.96552 5.7516 5.01251 5.73207C5.05951 5.71254 5.10468 5.68843 5.14679 5.66035C5.18982 5.63136 5.2298 5.5984 5.2655 5.5627C5.30243 5.52669 5.33447 5.48671 5.36316 5.44398C5.39154 5.40157 5.41565 5.3564 5.43518 5.3094C5.45471 5.2618 5.46967 5.21266 5.47974 5.16322C5.48981 5.11256 5.49438 5.06099 5.49438 5.01033C5.49438 4.95937 5.48981 4.90779 5.47974 4.85805C5.46967 4.808 5.45471 4.75856 5.43518 4.71187C5.41565 4.66426 5.39154 4.61879 5.36316 4.57668C5.33447 4.53365 5.30243 4.49397 5.2655 4.45796C5.2298 4.42195 5.18982 4.3893 5.14679 4.36092C5.10468 4.33284 5.05951 4.30873 5.01251 4.2892C4.96552 4.26967 4.91638 4.25471 4.86633 4.24464C4.76563 4.2242 4.66187 4.2242 4.56085 4.24464C4.5108 4.25471 4.46167 4.26967 4.41498 4.2892C4.36707 4.30873 4.3219 4.33284 4.27979 4.36092C4.23676 4.3893 4.19678 4.42195 4.16107 4.45796C4.12506 4.49397 4.0921 4.53365 4.06403 4.57668C4.03595 4.61879 4.01184 4.66426 3.99231 4.71187C3.97278 4.75856 3.95782 4.808 3.94775 4.85805C3.93738 4.90779 3.93188 4.95937 3.93188 5.01033C3.93188 5.06099 3.93738 5.11256 3.94775 5.16322C3.95782 5.21266 3.97278 5.2618 3.99231 5.3094Z" fill="url(#paint3_linear)"/>
 6 | <path d="M7.11731 5.3094C7.13684 5.3564 7.16095 5.40157 7.18903 5.44368C7.2171 5.48671 7.25006 5.52669 7.28607 5.56239C7.43134 5.70857 7.63275 5.79158 7.83813 5.79158C7.88971 5.79158 7.94067 5.7867 7.99133 5.77663C8.04138 5.76656 8.09052 5.7516 8.13751 5.73207C8.18451 5.71254 8.22968 5.68843 8.27179 5.66035C8.31482 5.63136 8.3548 5.5984 8.39142 5.5627C8.42743 5.52669 8.45947 5.48671 8.48816 5.44398C8.51654 5.40157 8.54065 5.3564 8.56018 5.3094C8.57971 5.2618 8.59467 5.21266 8.60474 5.16322C8.61481 5.11256 8.61938 5.06099 8.61938 5.01033C8.61938 4.95937 8.61481 4.90779 8.60474 4.85805C8.59467 4.808 8.57971 4.75856 8.56018 4.71187C8.54065 4.66426 8.51654 4.61879 8.48816 4.57668C8.45947 4.53365 8.42743 4.49397 8.39142 4.45796C8.3548 4.42195 8.31482 4.3893 8.27179 4.36092C8.22968 4.33284 8.18451 4.30873 8.13751 4.2892C8.09052 4.26967 8.04138 4.25471 7.99133 4.24464C7.89063 4.2242 7.78687 4.2242 7.68585 4.24464C7.6358 4.25471 7.58667 4.26967 7.53998 4.2892C7.49207 4.30873 7.4469 4.33284 7.40479 4.36092C7.36176 4.3893 7.32178 4.42195 7.28607 4.45796C7.25006 4.49397 7.2171 4.53365 7.18903 4.57668C7.16095 4.61879 7.13684 4.66426 7.11731 4.71187C7.09778 4.75856 7.08282 4.808 7.07275 4.85805C7.06238 4.90779 7.05688 4.95937 7.05688 5.01033C7.05688 5.06099 7.06238 5.11256 7.07275 5.16322C7.08282 5.21266 7.09778 5.2618 7.11731 5.3094Z" fill="url(#paint4_linear)"/>
 7 | <path d="M10.2423 5.3094C10.2618 5.3564 10.2859 5.40157 10.314 5.44368C10.3421 5.48671 10.3751 5.52669 10.4111 5.56239C10.4468 5.5984 10.4868 5.63136 10.5298 5.66005C10.5719 5.68843 10.6171 5.71254 10.665 5.73207C10.7117 5.7516 10.7608 5.76656 10.8109 5.77663C10.8609 5.7867 10.9125 5.79128 10.9631 5.79128C11.0147 5.79128 11.0657 5.7867 11.1163 5.77663C11.1664 5.76656 11.2155 5.7516 11.2625 5.73207C11.3095 5.71254 11.3547 5.68843 11.3977 5.66005C11.4398 5.63136 11.4798 5.5984 11.5164 5.56239C11.5524 5.52669 11.5845 5.48671 11.6132 5.44368C11.6415 5.40157 11.6656 5.3564 11.6852 5.3094C11.7047 5.2618 11.7197 5.21266 11.7297 5.16322C11.7398 5.11256 11.7444 5.06099 11.7444 5.01003C11.7444 4.95937 11.7398 4.90779 11.7297 4.85774C11.7197 4.80769 11.7047 4.75856 11.6852 4.71187C11.6656 4.66396 11.6415 4.61879 11.6132 4.57668C11.5845 4.53365 11.5524 4.49367 11.5164 4.45796C11.4798 4.42195 11.4398 4.38899 11.3977 4.36092C11.3547 4.33284 11.3095 4.30873 11.2625 4.2892C11.2155 4.26967 11.1664 4.25471 11.1163 4.24464C11.0156 4.2242 10.9119 4.2242 10.8109 4.24464C10.7608 4.25471 10.7117 4.26967 10.665 4.2892C10.6171 4.30873 10.5719 4.33284 10.5298 4.36092C10.4868 4.38899 10.4468 4.42195 10.4111 4.45796C10.3751 4.49367 10.3421 4.53365 10.314 4.57668C10.2859 4.61879 10.2618 4.66396 10.2423 4.71187C10.2228 4.75856 10.2078 4.80769 10.1978 4.85774C10.1874 4.90779 10.1819 4.95937 10.1819 5.01003C10.1819 5.06099 10.1874 5.11256 10.1978 5.16322C10.2078 5.21266 10.2228 5.2618 10.2423 5.3094Z" fill="url(#paint5_linear)"/>
 8 | <path d="M22.7154 13.739C22.344 13.5192 21.8649 13.6425 21.6452 14.0139L17.0099 21.8524C16.7901 22.2238 16.9131 22.7029 17.2845 22.9223C17.4093 22.9962 17.5464 23.0316 17.6816 23.0316C17.9486 23.0316 18.2089 22.8942 18.3548 22.6477L22.9901 14.8092C23.2098 14.4378 23.0868 13.9587 22.7154 13.739Z" fill="url(#paint6_linear)"/>
 9 | <path d="M12.9769 16.0351V15.2462C12.9769 14.8095 13.3321 14.454 13.7688 14.454H13.7798C14.2113 14.454 14.561 14.1042 14.561 13.6727C14.561 13.2415 14.2113 12.8915 13.7798 12.8915H13.7688C12.4706 12.8915 11.4144 13.948 11.4144 15.2462V16.0351C11.4144 16.3192 11.2978 16.5963 11.0946 16.795L10.0823 17.7853C9.93305 17.9312 9.84852 18.1307 9.8473 18.3395C9.84638 18.5482 9.92878 18.7487 10.0765 18.8964L11.108 19.9276C11.307 20.1263 11.4174 20.3906 11.4196 20.6719L11.4251 21.4907C11.4342 22.7801 12.4904 23.8293 13.7798 23.8293C14.2113 23.8293 14.561 23.4792 14.561 23.048C14.561 22.6165 14.2113 22.2668 13.7798 22.2668C13.3458 22.2668 12.9906 21.9137 12.9876 21.48L12.9821 20.6613C12.9772 19.9664 12.7037 19.3133 12.2127 18.8226L11.7397 18.3499L12.1874 17.9119C12.6891 17.4209 12.9769 16.737 12.9769 16.0351Z" fill="url(#paint7_linear)"/>
10 | <path d="M27.023 20.6857V21.4745C27.023 21.9113 26.6678 22.2668 26.2311 22.2668H26.2201C25.7886 22.2668 25.4388 22.6165 25.4388 23.048C25.4388 23.4792 25.7886 23.8293 26.2201 23.8293H26.2311C27.5293 23.8293 28.5855 22.7728 28.5855 21.4745V20.6857C28.5855 20.4016 28.7021 20.1245 28.9053 19.9258L29.9176 18.9355C30.0668 18.7896 30.1514 18.59 30.1523 18.3813C30.1535 18.1725 30.0711 17.972 29.9234 17.8243L28.8919 16.7932C28.6929 16.5945 28.5821 16.3299 28.5803 16.0488L28.5745 15.23C28.5657 13.9407 27.5095 12.8918 26.2201 12.8918C25.7886 12.8918 25.4388 13.2415 25.4388 13.673C25.4388 14.1042 25.7886 14.4543 26.2201 14.4543C26.6537 14.4543 27.0093 14.8071 27.012 15.2407L27.0178 16.0595C27.0227 16.7541 27.2958 17.4072 27.7872 17.8982L28.2602 18.3709L27.8125 18.8088C27.3108 19.2996 27.023 19.9838 27.023 20.6857Z" fill="url(#paint8_linear)"/>
11 | <path d="M36.0443 8.13531H3.95569C3.52417 8.13531 3.17444 8.48535 3.17444 8.91656V27.6666C3.17444 28.0981 3.52417 28.4478 3.95569 28.4478H13.2553C13.6868 28.4478 14.0366 28.0981 14.0366 27.6666C14.0366 27.2354 13.6868 26.8853 13.2553 26.8853H4.73694V9.69781H35.2631V26.8853H19.5312C19.0997 26.8853 18.75 27.2354 18.75 27.6666C18.75 28.0981 19.0997 28.4478 19.5312 28.4478H36.0443C36.4758 28.4478 36.8256 28.0981 36.8256 27.6666V8.91656C36.8256 8.48535 36.4758 8.13531 36.0443 8.13531Z" fill="url(#paint9_linear)"/>
12 | <defs>
13 | <linearGradient id="paint0_linear" x1="3.15333" y1="1" x2="26.6886" y2="35.0542" gradientUnits="userSpaceOnUse">
14 | <stop offset="0.259336" stop-color="#FFDB6E"/>
15 | <stop offset="1" stop-color="#FFBC5E"/>
16 | </linearGradient>
17 | <linearGradient id="paint1_linear" x1="2.26667" y1="0.375001" x2="27.8327" y2="36.511" gradientUnits="userSpaceOnUse">
18 | <stop offset="0.259336" stop-color="#FFDB6E"/>
19 | <stop offset="1" stop-color="#FFBC5E"/>
20 | </linearGradient>
21 | <linearGradient id="paint2_linear" x1="15.3714" y1="4.22906" x2="15.5472" y2="6.9288" gradientUnits="userSpaceOnUse">
22 | <stop offset="0.259336" stop-color="#FFDB6E"/>
23 | <stop offset="1" stop-color="#FFBC5E"/>
24 | </linearGradient>
25 | <linearGradient id="paint3_linear" x1="4.02043" y1="4.22931" x2="5.36917" y2="5.71887" gradientUnits="userSpaceOnUse">
26 | <stop offset="0.259336" stop-color="#FFDB6E"/>
27 | <stop offset="1" stop-color="#FFBC5E"/>
28 | </linearGradient>
29 | <linearGradient id="paint4_linear" x1="7.14543" y1="4.22931" x2="8.49417" y2="5.71887" gradientUnits="userSpaceOnUse">
30 | <stop offset="0.259336" stop-color="#FFDB6E"/>
31 | <stop offset="1" stop-color="#FFBC5E"/>
32 | </linearGradient>
33 | <linearGradient id="paint5_linear" x1="10.2704" y1="4.22931" x2="11.6189" y2="5.71884" gradientUnits="userSpaceOnUse">
34 | <stop offset="0.259336" stop-color="#FFDB6E"/>
35 | <stop offset="1" stop-color="#FFBC5E"/>
36 | </linearGradient>
37 | <linearGradient id="paint6_linear" x1="17.2521" y1="13.6301" x2="25.0143" y2="19.281" gradientUnits="userSpaceOnUse">
38 | <stop offset="0.259336" stop-color="#FFDB6E"/>
39 | <stop offset="1" stop-color="#FFBC5E"/>
40 | </linearGradient>
41 | <linearGradient id="paint7_linear" x1="10.1144" y1="12.8915" x2="17.4785" y2="16.3959" gradientUnits="userSpaceOnUse">
42 | <stop offset="0.259336" stop-color="#FFDB6E"/>
43 | <stop offset="1" stop-color="#FFBC5E"/>
44 | </linearGradient>
45 | <linearGradient id="paint8_linear" x1="25.7059" y1="12.8918" x2="33.0696" y2="16.3959" gradientUnits="userSpaceOnUse">
46 | <stop offset="0.259336" stop-color="#FFDB6E"/>
47 | <stop offset="1" stop-color="#FFBC5E"/>
48 | </linearGradient>
49 | <linearGradient id="paint9_linear" x1="5.08133" y1="8.13532" x2="19.9152" y2="35.2721" gradientUnits="userSpaceOnUse">
50 | <stop offset="0.259336" stop-color="#FFDB6E"/>
51 | <stop offset="1" stop-color="#FFBC5E"/>
52 | </linearGradient>
53 | </defs>
54 | </svg>
55 | 


--------------------------------------------------------------------------------
/assets/images/icon-photo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="42" height="32" viewBox="0 0 42 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M1.5 6.89825C1.5 5.79369 2.39543 4.89825 3.5 4.89825H38.3C39.4046 4.89825 40.3 5.79369 40.3 6.89825V27.8871C40.3 28.9917 39.4046 29.8871 38.3 29.8871H24.2108C28.4393 28.5311 31.5 24.5686 31.5 19.8916C31.5 14.0952 26.799 9.39625 21 9.39625C15.201 9.39625 10.5 14.0952 10.5 19.8916C10.5 24.5686 13.5607 28.5311 17.7892 29.8871H3.5C2.39543 29.8871 1.5 28.9917 1.5 27.8871V6.89825ZM21 24.8894C23.7614 24.8894 26 22.6518 26 19.8916C26 17.1314 23.7614 14.8938 21 14.8938C18.2386 14.8938 16 17.1314 16 19.8916C16 22.6518 18.2386 24.8894 21 24.8894Z" fill="url(#paint0_linear)"/>
 3 | <path d="M2.04688 21.5655C2.04688 21.8199 1.84039 22.0263 1.58594 22.0263C1.33149 22.0263 1.125 21.8199 1.125 21.5655V19.1966C1.125 18.942 1.33145 18.7359 1.58594 18.7359C1.84043 18.7359 2.04688 18.942 2.04688 19.1966V21.5655Z" fill="url(#paint1_linear)" stroke="url(#paint2_linear)" stroke-width="0.25"/>
 4 | <path d="M38.7448 4.72371H36.3178V4.44734C36.3178 3.66461 35.6806 3.02738 34.8972 3.02738H34.6484V2.31999C34.6484 1.53695 34.0109 0.900024 33.2278 0.900024H30.4285C29.6454 0.900024 29.0079 1.53695 29.0079 2.31999V3.02738H28.7591C27.9758 3.02738 27.3386 3.6643 27.3386 4.44734V4.72371H18.9984V4.11363C18.9984 3.3309 18.3612 2.69366 17.5778 2.69366H16.448C15.6649 2.69366 15.0274 3.33059 15.0274 4.11363V4.72371H13.6566V3.27934C13.6566 2.49661 13.0194 1.85938 12.236 1.85938H6.09828C5.31519 1.85938 4.67768 2.49661 4.67768 3.27934V4.72371H3.25525C2.01166 4.72371 1 5.73523 1 6.97797V16.646C1 16.9696 1.26245 17.2316 1.58594 17.2316C1.90943 17.2316 2.17188 16.9696 2.17188 16.646V11.0838H5.37867C5.63654 12.0276 6.50172 12.7237 7.5265 12.7237C8.55159 12.7237 9.41646 12.0276 9.67433 11.0838H14.3277C11.6247 13.1148 9.87331 16.3458 9.87331 19.9782C9.87331 22.363 10.6283 24.5745 11.9116 26.3874H2.17188V24.1161C2.17188 23.7925 1.90943 23.5304 1.58594 23.5304C1.26245 23.5304 1 23.7925 1 24.1161V27.7796C1 29.0226 2.01166 30.0339 3.25525 30.0339H16.2491C17.6907 30.7172 19.3014 31.1 21 31.1C22.6993 31.1 24.3103 30.7169 25.7522 30.033C25.7568 30.0333 25.7611 30.0339 25.7657 30.0339H38.7448C39.9884 30.0339 41.0001 29.0226 41.0001 27.7796V6.97797C41.0001 5.73523 39.9884 4.72371 38.7448 4.72371ZM30.1797 2.31999C30.1797 2.18303 30.2914 2.07138 30.4288 2.07138H33.2278C33.3649 2.07138 33.4766 2.18272 33.4766 2.31999V3.02738H30.1801V2.31999H30.1797ZM28.5104 4.44734C28.5104 4.31038 28.6221 4.19873 28.7595 4.19873H34.8972C35.0342 4.19873 35.1459 4.31038 35.1459 4.44734V4.72371H28.5107V4.44734H28.5104ZM16.1993 4.11363C16.1993 3.97667 16.311 3.86502 16.448 3.86502H17.5778C17.7151 3.86502 17.8265 3.97667 17.8265 4.11363V4.72371H16.1993V4.11363ZM5.84956 3.27934C5.84956 3.14238 5.96125 3.03073 6.09828 3.03073H12.2363C12.3733 3.03073 12.485 3.14238 12.485 3.27934V4.72371H5.84956V3.27934ZM7.5265 11.5523C6.94514 11.5523 6.47181 11.0795 6.47181 10.4982C6.47181 9.91703 6.94514 9.44391 7.5265 9.44391C8.10817 9.44391 8.58119 9.91703 8.58119 10.4982C8.58119 11.0795 8.10817 11.5523 7.5265 11.5523ZM9.67433 9.91246C9.41646 8.96866 8.55159 8.27256 7.5265 8.27256C6.50141 8.27256 5.63654 8.96866 5.37867 9.91246H2.17188V6.97797C2.17188 6.381 2.65802 5.89507 3.25525 5.89507H38.7448C39.3421 5.89507 39.8282 6.381 39.8282 6.97797V9.91246H38.0844V7.78449C38.0844 7.46115 37.822 7.19882 37.4985 7.19882H32.0453C31.7218 7.19882 31.4594 7.46115 31.4594 7.78449V9.91246H25.7266C24.2627 9.22551 22.651 8.85671 21 8.85671C19.31 8.85671 17.7072 9.23587 16.2713 9.91246H9.67433ZM32.6312 9.91246V8.37017H36.9125V9.91246H32.6312ZM3.25525 28.8625C2.65802 28.8625 2.17188 28.3766 2.17188 27.7796V27.5588H12.8665C13.3099 28.034 13.7942 28.4705 14.3139 28.8625H3.25525ZM11.0452 19.9785C11.0452 14.4917 15.5111 10.0281 21 10.0281C23.847 10.0281 26.5637 11.2512 28.454 13.3838C28.6685 13.626 29.0387 13.6486 29.281 13.4339C29.5233 13.2194 29.5456 12.8494 29.3311 12.6071C28.8284 12.0401 28.273 11.5313 27.6761 11.0838H39.8282V26.3874H30.0885C30.9833 25.1233 31.6205 23.6652 31.9247 22.0897H33.4576C34.3219 22.0897 35.0253 21.3868 35.0253 20.5227V19.0637C35.0253 18.1995 34.3222 17.4967 33.4576 17.4967H31.8448C31.6318 16.5648 31.301 15.661 30.8569 14.816C30.7065 14.5296 30.3522 14.4191 30.0659 14.5699C29.7794 14.7202 29.6689 15.074 29.8193 15.3605C30.5621 16.7747 30.9549 18.3716 30.9549 19.9785C30.9549 25.4652 26.4892 29.9289 21 29.9289C15.5111 29.9289 11.0452 25.4649 11.0452 19.9785ZM32.0483 18.6678H33.4576C33.6758 18.6678 33.8535 18.8453 33.8535 19.0634V20.5227C33.8535 20.7408 33.6758 20.9184 33.4576 20.9184H32.0865C32.1127 20.6084 32.1268 20.2948 32.1268 19.9782C32.1268 19.5399 32.1002 19.1022 32.0483 18.6678ZM38.7448 28.8625H27.6861C28.2059 28.4705 28.6902 28.034 29.1336 27.5588H39.8282V27.7796C39.8282 28.3766 39.3421 28.8625 38.7448 28.8625Z" fill="url(#paint3_linear)" stroke="url(#paint4_linear)" stroke-width="0.25"/>
 5 | <path d="M13.2415 19.9785C13.2415 15.7022 16.7219 12.223 21.0001 12.223C25.2783 12.223 28.7587 15.7022 28.7587 19.9785C28.7587 24.2545 25.2783 27.7336 21.0001 27.7336C16.7219 27.7336 13.2415 24.2545 13.2415 19.9785ZM14.1633 19.9785C14.1633 23.7467 17.2302 26.8121 21.0001 26.8121C24.77 26.8121 27.8368 23.7467 27.8368 19.9785C27.8368 16.2103 24.77 13.1445 21.0001 13.1445C17.2302 13.1445 14.1633 16.2103 14.1633 19.9785Z" fill="url(#paint5_linear)" stroke="url(#paint6_linear)" stroke-width="0.25"/>
 6 | <path d="M15.6189 19.9785C15.6189 17.0126 18.033 14.5995 20.9999 14.5995C23.9671 14.5995 26.3812 17.0126 26.3812 19.9785C26.3812 22.9443 23.9671 25.3571 20.9999 25.3571C18.0327 25.3571 15.6189 22.9443 15.6189 19.9785ZM16.5408 19.9785C16.5408 22.4363 18.541 24.4356 20.9999 24.4356C23.4588 24.4356 25.4593 22.4363 25.4593 19.9785C25.4593 17.5204 23.4588 15.521 20.9999 15.521C18.541 15.521 16.5408 17.5204 16.5408 19.9785Z" fill="url(#paint7_linear)" stroke="url(#paint8_linear)" stroke-width="0.25"/>
 7 | <defs>
 8 | <linearGradient id="paint0_linear" x1="3.69867" y1="4.89825" x2="22.5688" y2="37.2522" gradientUnits="userSpaceOnUse">
 9 | <stop offset="0.259336" stop-color="#FFDB6E"/>
10 | <stop offset="1" stop-color="#FFBC5E"/>
11 | </linearGradient>
12 | <linearGradient id="paint1_linear" x1="1.17724" y1="18.7359" x2="2.78931" y2="19.2346" gradientUnits="userSpaceOnUse">
13 | <stop offset="0.259336" stop-color="#FFDB6E"/>
14 | <stop offset="1" stop-color="#FFBC5E"/>
15 | </linearGradient>
16 | <linearGradient id="paint2_linear" x1="1.17724" y1="18.7359" x2="2.78931" y2="19.2346" gradientUnits="userSpaceOnUse">
17 | <stop offset="0.259336" stop-color="#FFDB6E"/>
18 | <stop offset="1" stop-color="#FFBC5E"/>
19 | </linearGradient>
20 | <linearGradient id="paint3_linear" x1="3.26667" y1="0.900025" x2="27.6816" y2="36.6089" gradientUnits="userSpaceOnUse">
21 | <stop offset="0.259336" stop-color="#FFDB6E"/>
22 | <stop offset="1" stop-color="#FFBC5E"/>
23 | </linearGradient>
24 | <linearGradient id="paint4_linear" x1="3.26667" y1="0.900025" x2="27.6816" y2="36.6089" gradientUnits="userSpaceOnUse">
25 | <stop offset="0.259336" stop-color="#FFDB6E"/>
26 | <stop offset="1" stop-color="#FFBC5E"/>
27 | </linearGradient>
28 | <linearGradient id="paint5_linear" x1="14.1208" y1="12.223" x2="27.511" y2="27.0155" gradientUnits="userSpaceOnUse">
29 | <stop offset="0.259336" stop-color="#FFDB6E"/>
30 | <stop offset="1" stop-color="#FFBC5E"/>
31 | </linearGradient>
32 | <linearGradient id="paint6_linear" x1="14.1208" y1="12.223" x2="27.511" y2="27.0155" gradientUnits="userSpaceOnUse">
33 | <stop offset="0.259336" stop-color="#FFDB6E"/>
34 | <stop offset="1" stop-color="#FFBC5E"/>
35 | </linearGradient>
36 | <linearGradient id="paint7_linear" x1="16.2288" y1="14.5995" x2="25.5157" y2="24.8592" gradientUnits="userSpaceOnUse">
37 | <stop offset="0.259336" stop-color="#FFDB6E"/>
38 | <stop offset="1" stop-color="#FFBC5E"/>
39 | </linearGradient>
40 | <linearGradient id="paint8_linear" x1="16.2288" y1="14.5995" x2="25.5157" y2="24.8592" gradientUnits="userSpaceOnUse">
41 | <stop offset="0.259336" stop-color="#FFDB6E"/>
42 | <stop offset="1" stop-color="#FFBC5E"/>
43 | </linearGradient>
44 | </defs>
45 | </svg>
46 | 


--------------------------------------------------------------------------------
/assets/images/icon-quote.svg:
--------------------------------------------------------------------------------
 1 | <svg width="34" height="23" viewBox="0 0 34 23" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M9.63091 0.144315L11.1066 1.03792C11.3675 1.19594 11.4272 1.54856 11.2349 1.78536C9.08005 4.43892 7.12216 7.31629 7.12195 10.8825C10.0635 10.8825 13.0949 13.3058 13.0949 16.4084C13.0949 20.7423 9.61052 23.4414 6.12633 22.939C2.64214 22.4367 0.58078 19.9249 0.153573 16.9107C-0.826125 9.99852 2.98637 3.77393 8.59945 0.151692C8.91222 -0.0501455 9.3125 -0.0485027 9.63091 0.144315ZM30.5361 0.144315L32.0117 1.03792C32.2727 1.19594 32.3323 1.54856 32.14 1.78536C29.9852 4.43892 28.0273 7.31629 28.0271 10.8825C30.9687 10.8825 34 13.3058 34 16.4084C34 20.7423 30.5157 23.4414 27.0315 22.939C23.5473 22.4367 21.4859 19.9249 21.0587 16.9107C20.079 9.99852 23.8915 3.77393 29.5046 0.151692C29.8174 -0.0501455 30.2177 -0.0485027 30.5361 0.144315Z" fill="url(#paint0_linear)"/>
 3 | <defs>
 4 | <linearGradient id="paint0_linear" x1="1.92667" y1="4.65138e-07" x2="19.7024" y2="29.0178" gradientUnits="userSpaceOnUse">
 5 | <stop offset="0.259336" stop-color="#FFDB6E"/>
 6 | <stop offset="1" stop-color="#FFBC5E"/>
 7 | </linearGradient>
 8 | </defs>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/assets/images/javascript.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/javascript.png


--------------------------------------------------------------------------------
/assets/images/jquery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/jquery.png


--------------------------------------------------------------------------------
/assets/images/logo.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/logo.ico


--------------------------------------------------------------------------------
/assets/images/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="185" height="185" viewBox="0 0 185 185" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M0 92.5C0 41.4137 41.4137 0 92.5 0H135C162.614 0 185 22.3858 185 50V92.5C185 143.586 143.586 185 92.5 185V185C41.4137 185 0 143.586 0 92.5V92.5Z" fill="url(#paint0_linear_13_13)"/>
 3 | <path d="M137.109 88.3594C137.109 88.3594 137.156 88.4766 137.25 88.7109V88.9922C137.25 89.1797 137.25 89.3672 137.25 89.5547C137.25 89.7422 137.203 89.8359 137.109 89.8359H136.828C136.828 89.9297 136.781 90.0234 136.688 90.1172C136.5 90.1172 136.336 90.2812 136.195 90.6094C136.102 90.9375 135.961 91.3594 135.773 91.875C135.305 92.625 134.859 93.6797 134.438 95.0391C134.016 96.3516 133.453 97.875 132.75 99.6094C131.391 103.078 129.82 107.414 128.039 112.617C127.852 113.367 127.617 114.023 127.336 114.586C127.102 115.148 126.891 115.828 126.703 116.625C126.328 117.188 126.023 117.844 125.789 118.594C125.555 119.297 125.297 120.07 125.016 120.914C124.828 121.477 124.547 122.133 124.172 122.883C123.844 123.586 123.539 124.383 123.258 125.273C122.883 125.836 122.555 126.492 122.273 127.242C121.992 127.945 121.641 128.719 121.219 129.562L120.234 131.602C120.047 132.07 119.789 132.492 119.461 132.867C119.133 133.242 118.875 133.594 118.688 133.922C118.5 134.109 118.312 134.297 118.125 134.484C117.984 134.672 117.82 134.859 117.633 135.047L117.352 135.609H116.93C116.93 135.703 116.883 135.797 116.789 135.891H116.508C116.414 135.891 116.367 136.078 116.367 136.453H116.086H115.945H115.664H115.453H115.172H114.75H114.609H114.188C114 136.453 113.906 136.359 113.906 136.172C113.906 135.984 113.859 135.891 113.766 135.891C113.578 135.891 113.438 135.844 113.344 135.75C113.25 135.656 113.109 135.609 112.922 135.609L112.148 134.203C112.148 134.016 112.125 133.898 112.078 133.852C112.031 133.805 111.914 133.617 111.727 133.289C111.727 133.102 111.703 132.914 111.656 132.727C111.609 132.539 111.586 132.352 111.586 132.164C111.398 132.164 111.305 131.977 111.305 131.602V131.32C111.211 131.32 111.164 131.227 111.164 131.039V130.758C111.164 130.289 111.164 130.008 111.164 129.914C111.164 129.867 111.07 129.75 110.883 129.562V129V128.719V125.555V123.797C111.07 123.234 111.164 122.625 111.164 121.969C111.164 121.266 111.211 120.633 111.305 120.07C111.492 118.898 111.609 117.797 111.656 116.766C111.703 115.688 111.82 114.586 112.008 113.461C112.383 109.148 112.969 104.812 113.766 100.453C113.953 98.25 114.188 96.0469 114.469 93.8438C114.75 91.6406 115.078 89.4375 115.453 87.2344C115.641 85.0312 115.875 82.7812 116.156 80.4844C116.484 78.1875 116.742 75.9375 116.93 73.7344C117.117 71.4375 117.281 69.1875 117.422 66.9844C117.562 64.7344 117.633 62.3672 117.633 59.8828C117.633 57.6797 117.562 55.5703 117.422 53.5547C117.281 51.5391 117.07 49.8047 116.789 48.3516C116.602 47.5078 116.391 46.7344 116.156 46.0312C115.922 45.2812 115.594 44.625 115.172 44.0625C114.609 43.2188 113.766 42.3516 112.641 41.4609H111.727C111.727 41.2734 111.703 41.1797 111.656 41.1797C111.609 41.1797 111.586 41.1328 111.586 41.0391V40.8984H111.164H110.32H109.406H108.562H107.438C107.344 40.8984 107.227 40.9922 107.086 41.1797C106.945 41.3672 106.781 41.4609 106.594 41.4609C106.312 41.4609 106.008 41.5547 105.68 41.7422H104.836C104.742 42.0234 104.625 42.1875 104.484 42.2344C104.344 42.2813 104.18 42.3984 103.992 42.5859C103.617 42.5859 103.312 42.7734 103.078 43.1484C102.984 43.1484 102.867 43.1953 102.727 43.2891C102.586 43.3828 102.422 43.4297 102.234 43.4297C101.953 43.7109 101.695 43.9688 101.461 44.2031C101.227 44.3906 100.922 44.625 100.547 44.9062C100.266 45.0938 99.9844 45.3516 99.7031 45.6797C99.4688 46.0078 99.1641 46.3359 98.7891 46.6641C97.7109 47.7422 96.6328 48.8438 95.5547 49.9688C94.5234 51.0938 93.5391 52.3828 92.6016 53.8359C91.5234 55.1953 90.5391 56.6719 89.6484 58.2656C88.8047 59.8125 87.9609 61.4062 87.1172 63.0469C86.2734 64.5 85.4062 66.0469 84.5156 67.6875C83.6719 69.2812 82.8047 70.8984 81.9141 72.5391C81.1641 73.9922 80.3906 75.5156 79.5938 77.1094C78.8438 78.6562 78.0469 80.1094 77.2031 81.4688C76.4531 83.1094 75.7031 84.6094 74.9531 85.9688C74.25 87.2812 73.5 88.6641 72.7031 90.1172C71.9531 91.4766 71.1797 92.7891 70.3828 94.0547C69.6328 95.2734 68.8828 96.4688 68.1328 97.6406C66.6797 100.406 65.3203 102.797 64.0547 104.812C63.6797 105.281 63.3516 105.82 63.0703 106.43C62.7891 106.992 62.4609 107.508 62.0859 107.977C61.8984 108.539 61.6406 109.078 61.3125 109.594C61.0312 110.062 60.7031 110.672 60.3281 111.422C59.1562 113.344 58.0781 115.125 57.0938 116.766C56.1094 118.406 55.125 119.883 54.1406 121.195C53.2969 122.836 52.5703 124.172 51.9609 125.203C51.3047 126.188 50.7422 127.078 50.2734 127.875C49.8984 128.344 49.6406 128.672 49.5 128.859C49.3125 129.047 49.125 129.281 48.9375 129.562L48.6562 129.844C48.4688 130.594 48.2812 130.594 48.0938 129.844V129V128.859C48.0938 128.766 48.1172 128.672 48.1641 128.578C48.2109 128.484 48.2344 128.344 48.2344 128.156C48.3281 128.062 48.6094 127.195 49.0781 125.555C49.4531 124.711 49.875 123.562 50.3438 122.109C50.7656 120.656 51.3047 118.922 51.9609 116.906C52.6172 115.172 53.3438 113.25 54.1406 111.141C54.9844 109.031 55.8984 106.828 56.8828 104.531C57.0703 103.781 57.3281 103.125 57.6562 102.562C57.9844 101.953 58.2422 101.25 58.4297 100.453L59.3438 98.7656C59.4375 98.2969 59.5547 97.9688 59.6953 97.7812C59.8359 97.5469 60 97.1953 60.1875 96.7266C61.125 94.1484 62.4141 91.5703 64.0547 88.9922C64.7109 87.3516 65.3438 85.8516 65.9531 84.4922C66.6094 83.1328 67.3359 81.75 68.1328 80.3438C68.8828 78.9844 69.6797 77.6016 70.5234 76.1953C71.4141 74.7422 72.2812 73.3359 73.125 71.9766C73.9688 70.5234 74.8594 69.1641 75.7969 67.8984C76.7344 66.5859 77.7188 65.25 78.75 63.8906C79.6875 62.7188 80.6719 61.5234 81.7031 60.3047C82.7344 59.0391 83.7656 57.75 84.7969 56.4375C85.875 55.3594 86.9531 54.2344 88.0312 53.0625C89.1562 51.8438 90.2344 50.6719 91.2656 49.5469C92.3438 48.1875 93.4219 46.9922 94.5 45.9609C95.625 44.8828 96.7734 43.7578 97.9453 42.5859C99.0234 41.2266 100.148 40.0547 101.32 39.0703C102.492 38.0859 103.758 37.1484 105.117 36.2578C105.211 36.2578 105.328 36.1641 105.469 35.9766C105.609 35.7891 105.773 35.6953 105.961 35.6953C106.148 35.6953 106.312 35.6484 106.453 35.5547C106.641 35.4609 106.828 35.4141 107.016 35.4141C107.203 35.0391 107.484 34.8516 107.859 34.8516C108.141 34.6641 108.516 34.5703 108.984 34.5703C109.266 34.1953 109.617 33.9844 110.039 33.9375L111.164 33.6562H111.305H111.586H112.008H113.344C114 33.6562 114.703 33.8672 115.453 34.2891C116.25 34.6641 117.023 35.1328 117.773 35.6953C118.43 36.5391 119.109 37.5938 119.812 38.8594C120.094 39.4219 120.398 40.0547 120.727 40.7578C121.055 41.4141 121.336 42.0234 121.57 42.5859C121.758 43.3359 121.945 44.0391 122.133 44.6953C122.32 45.3047 122.461 46.0547 122.555 46.9453C122.742 47.6953 122.906 48.375 123.047 48.9844C123.188 49.5469 123.305 50.2031 123.398 50.9531C123.586 52.4063 123.75 53.8828 123.891 55.3828C124.031 56.8359 124.102 58.2422 124.102 59.6016C124.195 61.0547 124.242 62.4375 124.242 63.75C124.242 65.0156 124.242 66.3281 124.242 67.6875C124.148 69.0469 124.102 70.3359 124.102 71.5547C124.102 72.7734 124.008 74.0625 123.82 75.4219C123.727 78 123.586 80.5781 123.398 83.1562C123.211 85.6875 123.023 88.1953 122.836 90.6797C122.648 92.9766 122.391 95.3203 122.062 97.7109C121.734 100.055 121.453 102.328 121.219 104.531C120.938 106.453 120.68 108.281 120.445 110.016C120.211 111.75 120 113.461 119.812 115.148C120 114.211 120.328 113.555 120.797 113.18C121.453 111.82 122.062 110.602 122.625 109.523C123.234 108.398 123.891 107.297 124.594 106.219C125.672 104.203 126.727 102.328 127.758 100.594C128.789 98.8125 129.75 97.2422 130.641 95.8828C131.484 94.2422 132.258 92.9297 132.961 91.9453C133.711 90.9141 134.367 90.0234 134.93 89.2734C135.211 89.0859 135.469 88.8984 135.703 88.7109C135.938 88.4766 136.148 88.3594 136.336 88.3594H136.688H136.828H137.109ZM115.031 122.672H114.75H115.031ZM114.75 122.672H114.609H114.75Z" fill="black" fill-opacity="0.86"/>
 4 | <defs>
 5 | <linearGradient id="paint0_linear_13_13" x1="0" y1="92" x2="185" y2="92" gradientUnits="userSpaceOnUse">
 6 | <stop stop-color="#FFDB6E"/>
 7 | <stop offset="1" stop-color="#FFBC5E"/>
 8 | </linearGradient>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/assets/images/my-avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/my-avatar.png


--------------------------------------------------------------------------------
/assets/images/npm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/npm.png


--------------------------------------------------------------------------------
/assets/images/photoshop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/photoshop.png


--------------------------------------------------------------------------------
/assets/images/pp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/pp.png


--------------------------------------------------------------------------------
/assets/images/project-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/project-1.jpg


--------------------------------------------------------------------------------
/assets/images/project-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/project-1.png


--------------------------------------------------------------------------------
/assets/images/project-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/project-2.png


--------------------------------------------------------------------------------
/assets/images/project-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/project-3.png


--------------------------------------------------------------------------------
/assets/images/project-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/project-4.png


--------------------------------------------------------------------------------
/assets/images/project-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/project-5.png


--------------------------------------------------------------------------------
/assets/images/project-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/project-6.png


--------------------------------------------------------------------------------
/assets/images/project-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/project-7.png


--------------------------------------------------------------------------------
/assets/images/project-9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/project-9.png


--------------------------------------------------------------------------------
/assets/images/pugjs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/pugjs.png


--------------------------------------------------------------------------------
/assets/images/react.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/react.png


--------------------------------------------------------------------------------
/assets/images/sass.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/sass.png


--------------------------------------------------------------------------------
/assets/images/slack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/slack.png


--------------------------------------------------------------------------------
/assets/images/stats-card_icon-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/stats-card_icon-1.png


--------------------------------------------------------------------------------
/assets/images/stats-card_icon-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/stats-card_icon-2.png


--------------------------------------------------------------------------------
/assets/images/stats-card_icon-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/stats-card_icon-3.png


--------------------------------------------------------------------------------
/assets/images/testimonials satish.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/testimonials satish.jpg


--------------------------------------------------------------------------------
/assets/images/trello.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/trello.png


--------------------------------------------------------------------------------
/assets/images/typescript.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/typescript.png


--------------------------------------------------------------------------------
/assets/images/vs-code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/vs-code.png


--------------------------------------------------------------------------------
/assets/images/vue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/vue.png


--------------------------------------------------------------------------------
/assets/images/webpack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/assets/images/webpack.png


--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | /**
  4 |  * element toggle function
  5 |  */
  6 | 
  7 | const elemToggleFunc = function (elem) { elem.classList.toggle("active"); }
  8 | 
  9 | 
 10 | 
 11 | /**
 12 |  * header sticky & go to top
 13 |  */
 14 | 
 15 | const header = document.querySelector("[data-header]");
 16 | const goTopBtn = document.querySelector("[data-go-top]");
 17 | 
 18 | window.addEventListener("scroll", function () {
 19 | 
 20 |   if (window.scrollY >= 10) {
 21 |     header.classList.add("active");
 22 |     goTopBtn.classList.add("active");
 23 |   } else {
 24 |     header.classList.remove("active");
 25 |     goTopBtn.classList.remove("active");
 26 |   }
 27 | 
 28 | });
 29 | 
 30 | 
 31 | 
 32 | /**
 33 |  * navbar toggle
 34 |  */
 35 | 
 36 | const navToggleBtn = document.querySelector("[data-nav-toggle-btn]");
 37 | const navbar = document.querySelector("[data-navbar]");
 38 | 
 39 | navToggleBtn.addEventListener("click", function () {
 40 | 
 41 |   elemToggleFunc(navToggleBtn);
 42 |   elemToggleFunc(navbar);
 43 |   elemToggleFunc(document.body);
 44 | 
 45 | });
 46 | 
 47 | 
 48 | 
 49 | /**
 50 |  * skills toggle
 51 |  */
 52 | 
 53 | const toggleBtnBox = document.querySelector("[data-toggle-box]");
 54 | const toggleBtns = document.querySelectorAll("[data-toggle-btn]");
 55 | const skillsBox = document.querySelector("[data-skills-box]");
 56 | 
 57 | for (let i = 0; i < toggleBtns.length; i++) {
 58 |   toggleBtns[i].addEventListener("click", function () {
 59 | 
 60 |     elemToggleFunc(toggleBtnBox);
 61 |     for (let i = 0; i < toggleBtns.length; i++) { elemToggleFunc(toggleBtns[i]); }
 62 |     elemToggleFunc(skillsBox);
 63 | 
 64 |   });
 65 | }
 66 | 
 67 | 
 68 | 
 69 | /**
 70 |  * dark & light theme toggle
 71 |  */
 72 | 
 73 | const themeToggleBtn = document.querySelector("[data-theme-btn]");
 74 | 
 75 | themeToggleBtn.addEventListener("click", function () {
 76 | 
 77 |   elemToggleFunc(themeToggleBtn);
 78 | 
 79 |   if (themeToggleBtn.classList.contains("active")) {
 80 |     document.body.classList.remove("dark_theme");
 81 |     document.body.classList.add("light_theme");
 82 | 
 83 |     localStorage.setItem("theme", "light_theme");
 84 |   } else {
 85 |     document.body.classList.add("dark_theme");
 86 |     document.body.classList.remove("light_theme");
 87 | 
 88 |     localStorage.setItem("theme", "dark_theme");
 89 |   }
 90 | 
 91 | });
 92 | 
 93 | /**
 94 |  * check & apply last time selected theme from localStorage
 95 |  */
 96 | 
 97 | if (localStorage.getItem("theme") === "light_theme") {
 98 |   themeToggleBtn.classList.add("active");
 99 |   document.body.classList.remove("dark_theme");
100 |   document.body.classList.add("light_theme");
101 | } else {
102 |   themeToggleBtn.classList.remove("active");
103 |   document.body.classList.remove("light_theme");
104 |   document.body.classList.add("dark_theme");
105 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8 |     <title>Aashis Jha - PORTFOLIO</title>
  9 | 
 10 |     <!-- 
 11 |     - favicon
 12 |   -->
 13 |     <link rel="shortcut icon" href="./assets/images/favicon.ico" type="image/svg+xml" />
 14 | 
 15 |     <!-- 
 16 |     - custom css link
 17 |   -->
 18 |     <link rel="stylesheet" href="./assets/css/style.css" />
 19 | 
 20 |     <!-- 
 21 |     - google font link
 22 |   -->
 23 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 24 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 25 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:wght@400;700&family=Saira+Stencil+One&display=swap" rel="stylesheet" />
 26 | </head>
 27 | 
 28 | <body id="top" class="dark_theme">
 29 |     <!-- 
 30 |     - #HEADER
 31 |   -->
 32 | 
 33 |     <header class="header" data-header>
 34 |         <div class="container">
 35 |             <h1 class="h1 logo">
 36 |                 <a href="#">aashis<span>.</span></a>
 37 |             </h1>
 38 | 
 39 |             <div class="navbar-actions">
 40 |                 <select name="language" id="lang">
 41 |             <option value="en">En</option>
 42 |             <option value="Hi">Hi</option>
 43 |           </select>
 44 | 
 45 |                 <button class="theme-btn" aria-label="Change Theme" title="Change Theme" data-theme-btn>
 46 |             <span class="icon"></span>
 47 |           </button>
 48 |             </div>
 49 | 
 50 |             <button class="nav-toggle-btn" aria-label="Toggle Menu" title="Toggle Menu" data-nav-toggle-btn>
 51 |           <span class="one"></span>
 52 |           <span class="two"></span>
 53 |           <span class="three"></span>
 54 |         </button>
 55 | 
 56 |             <nav class="navbar" data-navbar>
 57 |                 <ul class="navbar-list">
 58 |                     <li>
 59 |                         <a href="#home" class="navbar-link">Home.</a>
 60 |                     </li>
 61 | 
 62 |                     <li>
 63 |                         <a href="#about" class="navbar-link">About.</a>
 64 |                     </li>
 65 | 
 66 |                     <li>
 67 |                         <a href="#skills" class="navbar-link">Skills.</a>
 68 |                     </li>
 69 | 
 70 |                     <li>
 71 |                         <a href="#portfolio" class="navbar-link">Portfolio.</a>
 72 |                     </li>
 73 | 
 74 |                     <li>
 75 |                         <a href="#contact" class="navbar-link">Contact.</a>
 76 |                     </li>
 77 | 
 78 |                     <li>
 79 |                         <a href="" class="navbar-link">GDrive.</a>
 80 |                     </li>
 81 |                 </ul>
 82 |             </nav>
 83 |         </div>
 84 |     </header>
 85 | 
 86 |     <main>
 87 |         <article class="container">
 88 |             <!-- 
 89 |         - #HERO
 90 |       -->
 91 | 
 92 |             <section class="hero" id="home">
 93 |                 <figure class="hero-banner">
 94 |                     <picture>
 95 |                         <source srcset="./assets/images/hero-banner.png" media="(min-width: 768px)" />
 96 |                         <source srcset="./assets/images/hero-banner-md.png" media="(min-width: 500px)" />
 97 |                         <img src="./assets/images/hero-banner-sm.png" alt="A man in a blue shirt with a happy expression" class="w-100" />
 98 |                     </picture>
 99 |                 </figure>
100 | 
101 |                 <div class="hero-content">
102 |                     <h2 class="h2 hero-title">Software Engineer Digital Creator</h2>
103 | 
104 |                     <a href="#contact" class="btn btn-primary">Get in touch</a>
105 |                 </div>
106 | 
107 |                 <ul class="hero-social-list">
108 |                     <li>
109 |                         <a href="https://www.facebook.com/einsteinaashis" class="hero-social-link">
110 |                             <ion-icon name="logo-facebook"></ion-icon>
111 | 
112 |                             <div class="tooltip">Facebook</div>
113 |                         </a>
114 |                     </li>
115 | 
116 |                     <li>
117 |                         <a href="https://www.linkedin.com/in/aashiszha/" class="hero-social-link">
118 |                             <ion-icon name="logo-linkedin"></ion-icon>
119 | 
120 |                             <div class="tooltip">Linkedin</div>
121 |                         </a>
122 |                     </li>
123 | 
124 |                     <li>
125 |                         <a href="https://www.instagram.com/aashiszha/" class="hero-social-link">
126 |                             <ion-icon name="logo-instagram"></ion-icon>
127 | 
128 |                             <div class="tooltip">Instagram</div>
129 |                         </a>
130 |                     </li>
131 | 
132 |                     <li>
133 |                         <a href="https://github.com/OracleBrain" class="hero-social-link">
134 |                             <ion-icon name="logo-github"></ion-icon>
135 | 
136 |                             <div class="tooltip">Github</div>
137 |                         </a>
138 |                     </li>
139 | 
140 |                     <li>
141 |                         <a href="https://www.youtube.com/@OracleBrain" class="hero-social-link">
142 |                             <ion-icon name="logo-youtube"></ion-icon>
143 | 
144 |                             <div class="tooltip">Youtube</div>
145 |                         </a>
146 |                     </li>
147 | 
148 |                     <li>
149 |                         <a href="https://www.tiktok.com/@aashiszha" class="hero-social-link">
150 |                             <ion-icon name="logo-tiktok"></ion-icon>
151 | 
152 |                             <div class="tooltip">Tiktok</div>
153 |                         </a>
154 |                     </li>
155 | 
156 |                     <li>
157 |                         <a href="https://twitter.com/AashisZha" class="hero-social-link">
158 |                             <ion-icon name="logo-twitter"></ion-icon>
159 | 
160 |                             <div class="tooltip">Twitter</div>
161 |                         </a>
162 |                     </li>
163 |                 </ul>
164 | 
165 |                 <a href="#stats" class="scroll-down">Scroll</a>
166 |             </section>
167 | 
168 |             <!-- 
169 |         - #STATS
170 |       -->
171 | 
172 |             <section class="stats" id="stats">
173 |                 <ul class="stats-list">
174 |                     <li>
175 |                         <a href="#" class="stats-card">
176 |                             <div class="card-icon">
177 |                                 <img src="./assets/images/stats-card_icon-1.png" alt="Badge icon" />
178 |                             </div>
179 | 
180 |                             <h2 class="h2 card-title">
181 |                                 2+ <strong>Years of Experience</strong>
182 |                             </h2>
183 | 
184 |                             <ion-icon name="chevron-forward-outline"></ion-icon>
185 |                         </a>
186 |                     </li>
187 | 
188 |                     <li>
189 |                         <a href="#" class="stats-card">
190 |                             <div class="card-icon">
191 |                                 <img src="./assets/images/stats-card_icon-2.png" alt="Checkmark icon" />
192 |                             </div>
193 | 
194 |                             <h2 class="h2 card-title">
195 |                                 30+ <strong>Completed Projects</strong>
196 |                             </h2>
197 | 
198 |                             <ion-icon name="chevron-forward-outline"></ion-icon>
199 |                         </a>
200 |                     </li>
201 | 
202 |                     <li>
203 |                         <a href="#" class="stats-card">
204 |                             <div class="card-icon">
205 |                                 <img src="./assets/images/stats-card_icon-3.png" alt="Peoples rating icon" />
206 |                             </div>
207 | 
208 |                             <h2 class="h2 card-title">5+ <strong>Happy Clients</strong></h2>
209 | 
210 |                             <ion-icon name="chevron-forward-outline"></ion-icon>
211 |                         </a>
212 |                     </li>
213 |                 </ul>
214 |             </section>
215 | 
216 |             <!-- 
217 |         - #ABOUT
218 |       -->
219 | 
220 |             <section class="about" id="about">
221 |                 <figure class="about-banner">
222 |                     <img src="./assets/images/about-banner.png" alt="A man in a alice blue shirt with a thinking expression" class="w-100" />
223 |                 </figure>
224 | 
225 |                 <div class="about-content section-content">
226 |                     <p class="section-subtitle">About me</p>
227 | 
228 |                     <h2 class="h3 section-title">Hi,</h2>
229 |                     <h2 class="h3 section-title">I'm AASHIS JHA</h2>
230 |                     <h2 class="h3 section-title">SOFTWARE ENGINEER</h2>
231 | 
232 |                     <p class="section-text">
233 |                         Hey there! I am a tech-savvy and creative powerhouse, blending my skills as a software engineer and digital creator to bring cutting-edge solutions and captivating content to life. Whether it's coding up a storm or crafting digital magic, I bring a unique
234 |                         blend of technical prowess and artistic vision to every project. Ready to push the limits of what's possible, I am always on the hunt for the next big challenge. Let's make something amazing together! I bring technical expertise
235 |                         and creative flair to each project. I have worked with creative teams, which involves daily stand-ups and communications, source control, and project management.
236 |                     </p>
237 | 
238 |                     <div class="btn-group">
239 |                         <button class="btn btn-primary"><div class="d-block d-sm-flex align-items-center">
240 |                           <a class="btn content-download button-main button-scheme" href="./assets/Doc1.pdf" download="" role="button">Download CV</a>
241 |                     </div>
242 | 
243 |                     <div class="btn-group">
244 |                       <button class="btn btn-primary"><div class="d-block d-sm-flex align-items-center">
245 |                         <div class="blog-entry justify-content-end">
246 |                             <a class="nav-link" href="./vcard/Index.html">More About Me</a>
247 |                   </div>
248 |                 </div>
249 |             </section>
250 | 
251 |             <!-- 
252 |         - #SKILLS
253 |       -->
254 | 
255 |             <section class="skills" id="skills">
256 |                 <div class="skills-content section-content">
257 |                     <p class="section-subtitle">My skills</p>
258 | 
259 |                     <h2 class="h3 section-title">
260 |                         What My Programming Skills Included?
261 |                     </h2>
262 | 
263 |                     <p class="section-text">
264 |                         I develop simple, intuitive and responsive user interface that helps users get things done with less effort and time with those technologies.
265 |                     </p>
266 | 
267 |                     <div class="skills-toggle" data-toggle-box>
268 |                         <button class="toggle-btn active" data-toggle-btn>Skills</button>
269 | 
270 |                         <button class="toggle-btn" data-toggle-btn>Tools</button>
271 |                     </div>
272 |                 </div>
273 | 
274 |                 <div class="skills-box" data-skills-box>
275 |                     <ul class="skills-list">
276 |                         <li>
277 |                             <div class="skill-card">
278 |                                 <div class="tooltip">HTML5</div>
279 | 
280 |                                 <div class="card-icon">
281 |                                     <img src="./assets/images/html5.png" alt="HTML5 logo" />
282 |                                 </div>
283 |                             </div>
284 |                         </li>
285 | 
286 |                         <li>
287 |                             <div class="skill-card">
288 |                                 <div class="tooltip">CSS3</div>
289 | 
290 |                                 <div class="card-icon">
291 |                                     <img src="./assets/images/css3.png" alt="CSS3 logo" />
292 |                                 </div>
293 |                             </div>
294 |                         </li>
295 | 
296 |                         <li>
297 |                             <div class="skill-card">
298 |                                 <div class="tooltip">JavaScript</div>
299 | 
300 |                                 <div class="card-icon">
301 |                                     <img src="./assets/images/javascript.png" alt="JavaScript logo" />
302 |                                 </div>
303 |                             </div>
304 |                         </li>
305 | 
306 |                         <li>
307 |                             <div class="skill-card">
308 |                                 <div class="tooltip">TypeScript</div>
309 | 
310 |                                 <div class="card-icon">
311 |                                     <img src="./assets/images/typescript.png" alt="TypeScript logo" />
312 |                                 </div>
313 |                             </div>
314 |                         </li>
315 | 
316 |                         <li>
317 |                             <div class="skill-card">
318 |                                 <div class="tooltip">jQuery</div>
319 | 
320 |                                 <div class="card-icon">
321 |                                     <img src="./assets/images/jquery.png" alt="jQuery logo" />
322 |                                 </div>
323 |                             </div>
324 |                         </li>
325 | 
326 |                         <li>
327 |                             <div class="skill-card">
328 |                                 <div class="tooltip">Bootstrap</div>
329 | 
330 |                                 <div class="card-icon">
331 |                                     <img src="./assets/images/bootstrap.png" alt="Bootstrap logo" />
332 |                                 </div>
333 |                             </div>
334 |                         </li>
335 | 
336 |                         <li>
337 |                             <div class="skill-card">
338 |                                 <div class="tooltip">Angular</div>
339 | 
340 |                                 <div class="card-icon">
341 |                                     <img src="./assets/images/angular.png" alt="Angular logo" />
342 |                                 </div>
343 |                             </div>
344 |                         </li>
345 | 
346 |                         <li>
347 |                             <div class="skill-card">
348 |                                 <div class="tooltip">React</div>
349 | 
350 |                                 <div class="card-icon">
351 |                                     <img src="./assets/images/react.png" alt="React logo" />
352 |                                 </div>
353 |                             </div>
354 |                         </li>
355 | 
356 |                         <li>
357 |                             <div class="skill-card">
358 |                                 <div class="tooltip">Vue</div>
359 | 
360 |                                 <div class="card-icon">
361 |                                     <img src="./assets/images/vue.png" alt="Vue logo" />
362 |                                 </div>
363 |                             </div>
364 |                         </li>
365 | 
366 |                         <li>
367 |                             <div class="skill-card">
368 |                                 <div class="tooltip">Firebase</div>
369 | 
370 |                                 <div class="card-icon">
371 |                                     <img src="./assets/images/firebase.png" alt="Firebase logo" />
372 |                                 </div>
373 |                             </div>
374 |                         </li>
375 | 
376 |                         <li>
377 |                             <div class="skill-card">
378 |                                 <div class="tooltip">PugJs</div>
379 | 
380 |                                 <div class="card-icon">
381 |                                     <img src="./assets/images/pugjs.png" alt="PugJs logo" />
382 |                                 </div>
383 |                             </div>
384 |                         </li>
385 | 
386 |                         <li>
387 |                             <div class="skill-card">
388 |                                 <div class="tooltip">SASS</div>
389 | 
390 |                                 <div class="card-icon">
391 |                                     <img src="./assets/images/sass.png" alt="SASS logo" />
392 |                                 </div>
393 |                             </div>
394 |                         </li>
395 |                     </ul>
396 | 
397 |                     <ul class="tools-list">
398 |                         <li>
399 |                             <div class="skill-card">
400 |                                 <div class="tooltip">Ajax</div>
401 | 
402 |                                 <div class="card-icon">
403 |                                     <img src="./assets/images/ajax.png" alt="Ajax logo" />
404 |                                 </div>
405 |                             </div>
406 |                         </li>
407 | 
408 |                         <li>
409 |                             <div class="skill-card">
410 |                                 <div class="tooltip">Gulp</div>
411 | 
412 |                                 <div class="card-icon">
413 |                                     <img src="./assets/images/gulp.png" alt="Gulp logo" />
414 |                                 </div>
415 |                             </div>
416 |                         </li>
417 | 
418 |                         <li>
419 |                             <div class="skill-card">
420 |                                 <div class="tooltip">Webpack</div>
421 | 
422 |                                 <div class="card-icon">
423 |                                     <img src="./assets/images/webpack.png" alt="Webpack logo" />
424 |                                 </div>
425 |                             </div>
426 |                         </li>
427 | 
428 |                         <li>
429 |                             <div class="skill-card">
430 |                                 <div class="tooltip">Git</div>
431 | 
432 |                                 <div class="card-icon">
433 |                                     <img src="./assets/images/git.png" alt="Git logo" />
434 |                                 </div>
435 |                             </div>
436 |                         </li>
437 | 
438 |                         <li>
439 |                             <div class="skill-card">
440 |                                 <div class="tooltip">Npm</div>
441 | 
442 |                                 <div class="card-icon">
443 |                                     <img src="./assets/images/npm.png" alt="Npm logo" />
444 |                                 </div>
445 |                             </div>
446 |                         </li>
447 | 
448 |                         <li>
449 |                             <div class="skill-card">
450 |                                 <div class="tooltip">Command Line</div>
451 | 
452 |                                 <div class="card-icon">
453 |                                     <img src="./assets/images/command.png" alt="Command Line logo" />
454 |                                 </div>
455 |                             </div>
456 |                         </li>
457 | 
458 |                         <li>
459 |                             <div class="skill-card">
460 |                                 <div class="tooltip">VS Code</div>
461 | 
462 |                                 <div class="card-icon">
463 |                                     <img src="./assets/images/vs-code.png" alt="VS Code logo" />
464 |                                 </div>
465 |                             </div>
466 |                         </li>
467 | 
468 |                         <li>
469 |                             <div class="skill-card">
470 |                                 <div class="tooltip">Trello</div>
471 | 
472 |                                 <div class="card-icon">
473 |                                     <img src="./assets/images/trello.png" alt="Trello logo" />
474 |                                 </div>
475 |                             </div>
476 |                         </li>
477 | 
478 |                         <li>
479 |                             <div class="skill-card">
480 |                                 <div class="tooltip">ClickUp</div>
481 | 
482 |                                 <div class="card-icon">
483 |                                     <img src="./assets/images/clickup.png" alt="ClickUp logo" />
484 |                                 </div>
485 |                             </div>
486 |                         </li>
487 | 
488 |                         <li>
489 |                             <div class="skill-card">
490 |                                 <div class="tooltip">Slack</div>
491 | 
492 |                                 <div class="card-icon">
493 |                                     <img src="./assets/images/slack.png" alt="Slack logo" />
494 |                                 </div>
495 |                             </div>
496 |                         </li>
497 | 
498 |                         <li>
499 |                             <div class="skill-card">
500 |                                 <div class="tooltip">Photoshop</div>
501 | 
502 |                                 <div class="card-icon">
503 |                                     <img src="./assets/images/photoshop.png" alt="Photoshop logo" />
504 |                                 </div>
505 |                             </div>
506 |                         </li>
507 | 
508 |                         <li>
509 |                             <div class="skill-card">
510 |                                 <div class="tooltip">Adobe XD</div>
511 | 
512 |                                 <div class="card-icon">
513 |                                     <img src="./assets/images/adobe-xd.png" alt="Adobe XD logo" />
514 |                                 </div>
515 |                             </div>
516 |                         </li>
517 |                     </ul>
518 |                 </div>
519 |             </section>
520 | 
521 |             <!-- 
522 |         - #PROJECTS
523 |       -->
524 | 
525 |             <section class="project" id="portfolio">
526 |                 <ul class="project-list">
527 |                     <li>
528 |                         <div class="project-content section-content">
529 |                             <p class="section-subtitle">My Works</p>
530 | 
531 |                             <h2 class="h3 section-title">
532 |                                 See My Works Which Will Amaze You!
533 |                             </h2>
534 | 
535 |                             <p class="section-text">
536 |                                 We develop the best quality website that serves for the long-term. Well-documented, clean, easy and elegant interface helps any non-technical clients.
537 |                             </p>
538 |                         </div>
539 |                     </li>
540 | 
541 |                     <li>
542 |                         <a href="#" class="project-card">
543 |                             <figure class="card-banner">
544 |                                 <img src="./assets/images/project-1.png" class="w-100" alt="A macintosh on a yellow background." />
545 |                             </figure>
546 | 
547 |                             <div class="card-content">
548 |                                 <h3 class="h4 card-title">Lorem Ipsum Dolor 01</h3>
549 | 
550 |                                 <time class="publish-date" datetime="2022-04">April 2022</time
551 |                   >
552 |                 </div>
553 |               </a>
554 |             </li>
555 | 
556 |             <li>
557 |               <a href="#" class="project-card">
558 |                 <figure class="card-banner">
559 |                   <img
560 |                     src="./assets/images/project-2.png"
561 |                     class="w-100"
562 |                     alt="On a Blue background, a Wacom and a mouse."
563 |                   />
564 |                 </figure>
565 | 
566 |                 <div class="card-content">
567 |                   <h3 class="h4 card-title">Lorem Ipsum Dolor 02</h3>
568 | 
569 |                   <time class="publish-date" datetime="2022-04"
570 |                     >April 2022</time
571 |                   >
572 |                 </div>
573 |               </a>
574 |             </li>
575 | 
576 |             <li>
577 |                 <figure class="card-banner">
578 |                   <img class="embed-responsive embed-responsive-16by9" />
579 |                   <iframe
580 |                     src="https://www.youtube.com/embed/Ovu3rRdmo6I"
581 |                     frameborder="10"
582 |                     allowfullscreen
583 |                   ></iframe>
584 | 
585 |                 </figure>
586 |                 <div class="card-content">
587 |                   <h3 class="h4 card-title">ORACLE BRAIN</h3>
588 |                 </div>
589 |               </a>
590 |             </li>
591 | 
592 |             <li>
593 |               <a href="#" class="project-card">
594 |                 <figure class="card-banner">
595 |                   <img
596 |                     src="./assets/images/project-4.png"
597 |                     class="w-100"
598 |                     alt="Blue digital watch on a dark liver background."
599 |                   />
600 |                 </figure>
601 | 
602 |                 <div class="card-content">
603 |                   <h3 class="h4 card-title">Lorem Ipsum Dolor 04</h3>
604 | 
605 |                   <time class="publish-date" datetime="2022-04"
606 |                     >April 2022</time
607 |                   >
608 |                 </div>
609 |               </a>
610 |             </li>
611 | 
612 |             <li>
613 |               <a href="#" class="project-card">
614 |                 <figure class="card-banner">
615 |                   <img
616 |                     src="./assets/images/project-5.png"
617 |                     class="w-100"
618 |                     alt="On a dark liver background, Airport luggage car carrying a luggage."
619 |                   />
620 |                 </figure>
621 | 
622 |                 <div class="card-content">
623 |                   <h3 class="h4 card-title">Lorem Ipsum Dolor 05</h3>
624 | 
625 |                   <time class="publish-date" datetime="2022-04"
626 |                     >April 2022</time
627 |                   >
628 |                 </div>
629 |               </a>
630 |             </li>
631 | 
632 |             <li>
633 |               <a href="#" class="project-card">
634 |                 <figure class="card-banner">
635 |                   <img
636 |                     src="./assets/images/project-6.png"
637 |                     class="w-100"
638 |                     alt="On a yellow background, a digital watch and a glass."
639 |                   />
640 |                 </figure>
641 | 
642 |                 <div class="card-content">
643 |                   <h3 class="h4 card-title">Lorem Ipsum Dolor 06</h3>
644 | 
645 |                   <time class="publish-date" datetime="2022-04"
646 |                     >April 2022</time
647 |                   >
648 |                 </div>
649 |               </a>
650 |             </li>
651 | 
652 |             <li>
653 |               <a href="#" class="project-card">
654 |                 <figure class="card-banner">
655 |                   <img
656 |                     src="./assets/images/project-7.png"
657 |                     class="w-100"
658 |                     alt="A fujifilm instant camera on a dark electric blue background."
659 |                   />
660 |                 </figure>
661 | 
662 |                 <div class="card-content">
663 |                   <h3 class="h4 card-title">Lorem Ipsum Dolor 07</h3>
664 | 
665 |                   <time class="publish-date" datetime="2022-04"
666 |                     >April 2022</time
667 |                   >
668 |                 </div>
669 |               </a>
670 |             </li>
671 | 
672 |             <li>
673 |               <button class="load-more">Load more work</button>
674 |             </li>
675 |           </ul>
676 |         </section>
677 | 
678 |         <!-- 
679 |         - #CONTACT
680 |       -->
681 | 
682 |         <section class="contact" id="contact">
683 |           <div class="contact-content section-content">
684 |             <p class="section-subtitle">Contact</p>
685 | 
686 |             <h2 class="h3 section-title">
687 |               Have You Any QUERIES? Please Drop a Message
688 |             </h2>
689 | 
690 |             <p class="section-text">
691 |               Get in touch and let me know how i can help. Fill out the form and
692 |               i’ll be in touch as soon as possible.
693 |             </p>
694 | 
695 |             <ul class="contact-list">
696 |               <li class="contact-list-item">
697 |                 <div class="contact-item-icon">
698 |                   <ion-icon name="location-outline"></ion-icon>
699 |                 </div>
700 | 
701 |                 <div class="wrapper">
702 |                   <h3 class="h4 contact-item-title">Address:</h3>
703 | 
704 |                   <address class="contact-info">
705 |                     19 Janakpur Dham Shivpur Road, Dhanusha 45600, Nepal, WA
706 |                     (+977) 9807683746
707 |                   </address>
708 |                 </div>
709 |               </li>
710 | 
711 |               <li class="contact-list-item">
712 |                 <div class="contact-item-icon">
713 |                   <ion-icon name="call-outline"></ion-icon>
714 |                 </div>
715 | 
716 |                 <div class="wrapper">
717 |                   <h3 class="h4 contact-item-title">Phone:</h3>
718 | 
719 |                   <a href="tel:+9779807683746" class="contact-info"
720 |                     >+9779807683746</a
721 |                   >
722 |                 </div>
723 |               </li>
724 | 
725 |               <li class="contact-list-item">
726 |                 <div class="contact-item-icon">
727 |                   <ion-icon name="mail-outline"></ion-icon>
728 |                 </div>
729 | 
730 |                 <div class="wrapper">
731 |                   <h3 class="h4 contact-item-title">Email:</h3>
732 | 
733 |                   <a href="mailto:bewithu.aj@gmail.com" class="contact-info"
734 |                     >bewithu.aj@gmail.com</a
735 |                   >
736 |                 </div>
737 |               </li>
738 | 
739 |               <li>
740 |                 <ul class="contac-social-list">
741 |                   <li>
742 |                     <a
743 |                       href="https://www.facebook.com/einsteinaashis"
744 |                       class="contact-social-link"
745 |                     >
746 |                       <div class="tooltip">Facebook</div>
747 | 
748 |                       <ion-icon name="logo-facebook"></ion-icon>
749 |                     </a>
750 |                   </li>
751 | 
752 |                   <li>
753 |                     <a href="https://github.com/OracleBrain" class="contact-social-link">
754 |                       <div class="tooltip">Github</div>
755 | 
756 |                       <ion-icon name="logo-github"></ion-icon>
757 |                     </a>
758 |                   </li>
759 | 
760 |                   <li>
761 |                     <a
762 |                       href="https://www.linkedin.com/in/aashiszha/"
763 |                       class="contact-social-link"
764 |                     >
765 |                       <div class="tooltip">Linkedin</div>
766 | 
767 |                       <ion-icon name="logo-linkedin"></ion-icon>
768 |                     </a>
769 |                   </li>
770 | 
771 |                   <li>
772 |                     <a href="https://www.youtube.com/@OracleBrain" class="contact-social-link">
773 |                       <div class="tooltip">Youtube</div>
774 | 
775 |                       <ion-icon name="logo-youtube"></ion-icon>
776 |                     </a>
777 |                   </li>
778 |                 </ul>
779 |               </li>
780 |             </ul>
781 |           </div>
782 | 
783 |           <form action="https://formsubmit.co/bewithu.aj@gmail.com" method="POST" class="contact-form">
784 |             <div class="form-wrapper">
785 |               <label for="name" class="form-label">Name</label>
786 | 
787 |               <div class="input-wrapper">
788 |                 <input
789 |                   type="text"
790 |                   name="name"
791 |                   id="name"
792 |                   required
793 |                   placeholder="e.g Aashis Jha"
794 |                   class="input-field"
795 |                 />
796 | 
797 |                 <ion-icon name="person-circle"></ion-icon>
798 |               </div>
799 |             </div>
800 | 
801 |             <div class="form-wrapper">
802 |               <label for="email" class="form-label">Email</label>
803 | 
804 |               <div class="input-wrapper">
805 |                 <input
806 |                   type="email"
807 |                   name="email"
808 |                   id="email"
809 |                   required
810 |                   placeholder="e.g bewithu.aj@gmail.com"
811 |                   class="input-field"
812 |                 />
813 | 
814 |                 <ion-icon name="mail"></ion-icon>
815 |               </div>
816 |             </div>
817 | 
818 |             <div class="form-wrapper">
819 |               <label for="phone" class="form-label">Phone</label>
820 | 
821 |               <div class="input-wrapper">
822 |                 <input
823 |                   type="tel"
824 |                   name="phone"
825 |                   id="phone"
826 |                   required
827 |                   placeholder="Phone Number"
828 |                   class="input-field"
829 |                 />
830 | 
831 |                 <ion-icon name="call"></ion-icon>
832 |               </div>
833 |             </div>
834 | 
835 |             <div class="form-wrapper">
836 |               <label for="message" class="form-label">Message</label>
837 | 
838 |               <div class="input-wrapper">
839 |                 <textarea
840 |                   name="message"
841 |                   id="message"
842 |                   required
843 |                   placeholder="Write message..."
844 |                   class="input-field"
845 |                 ></textarea>
846 | 
847 |                 <ion-icon name="chatbubbles"></ion-icon>
848 |               </div>
849 |             </div>
850 | 
851 |             <button type="submit" class="btn btn-primary">Send</button>
852 |           </form>
853 |         </section>
854 |       </article>
855 |     </main>
856 | 
857 |     <!-- 
858 |     - #FOOTER
859 |   -->
860 | 
861 |     <footer class="footer">
862 |       <div class="container">
863 |         <p class="h1 logo">
864 |           <a href="#"> AJ<span>.</span> </a>
865 |         </p>
866 | 
867 |         <p class="copyright">
868 |           &copy; 2023 <a href="#">Aashis Jha</a>. All rights reserved POWERED
869 |           BY: <a href="https://jharohit.com.np/">BisKIRAN TECHNOLOGY</a>
870 |         </p>
871 |       </div>
872 |     </footer>
873 | 
874 |     <!-- 
875 |     - #GO TO TOP
876 |   -->
877 | 
878 |     <a href="#top" class="go-top" data-go-top title="Go to Top">
879 |       <ion-icon name="arrow-up"></ion-icon>
880 |     </a>
881 | 
882 |     <!-- 
883 |     - custom js link
884 |   -->
885 |     <script src="./assets/js/script.js"></script>
886 | 
887 |     <!-- 
888 |     - ionicon link
889 |   -->
890 |     <script
891 |       type="module"
892 |       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
893 |     ></script>
894 |     <script
895 |       nomodule
896 |       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
897 |     ></script>
898 |   </body>
899 | </html>


--------------------------------------------------------------------------------
/style-guide.md:
--------------------------------------------------------------------------------
  1 | # Essential Stuff
  2 | 
  3 | ## Html import links
  4 | 
  5 | Google font
  6 | 
  7 | ``` html
  8 | <link rel="preconnect" href="https://fonts.googleapis.com">
  9 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 | <link
 11 |   href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:wght@400;700&family=Saira+Stencil+One&display=swap"
 12 |   rel="stylesheet">
 13 | ```
 14 | 
 15 | Ionicon
 16 | 
 17 | ``` html
 18 | <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
 19 | <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
 20 | ```
 21 | 
 22 | ---
 23 | 
 24 | ## Colors
 25 | 
 26 | ``` css
 27 | --raw-seinna: hsl(24, 74%, 58%);
 28 | --sizzling-sunrise: hsl(51, 95%, 54%);
 29 | --scarlet: hsl(13, 96%, 47%);
 30 | --black: hsl(0, 0%, 0%);
 31 | --white: hsl(0, 0%, 100%);
 32 | ```
 33 | 
 34 | ## Typography
 35 | 
 36 | ``` css
 37 | --ff-saira-stencil-one: "Saira Stencil One", sans-serif; 
 38 | --ff-poppins: 'Poppins', sans-serif;
 39 | --ff-roboto: 'Roboto', sans-serif;
 40 | 
 41 | --fs-1: 2rem;
 42 | --fs-2: calc(1.813rem + 1vw);
 43 | --fs-3: calc(1.313rem + 1vw);
 44 | --fs-4: 1.4rem;
 45 | --fs-5: 1rem;
 46 | --fs-6: 0.813rem;
 47 | --fs-7: 0.75rem;
 48 | 
 49 | --fw-400: 400;
 50 | --fw-700: 700;
 51 | ```
 52 | 
 53 | ## Transition
 54 | 
 55 | ``` css
 56 | --transition-1: 0.25s ease-in-out;
 57 | ```
 58 | 
 59 | ## Spacing
 60 | 
 61 | ``` css
 62 | --section-padding: 80px;
 63 | ```
 64 | 
 65 | ## Border radius
 66 | 
 67 | ``` css
 68 | --radius-4: 4px;
 69 | --radius-12: 12px;
 70 | ```
 71 | 
 72 | ---
 73 | 
 74 | ## Theme Variables
 75 | 
 76 | ### Dark Mode
 77 | 
 78 | ``` css
 79 | --bg-primary: hsl(0, 0%, 12%);
 80 | --bg-secondary: hsl(0, 0%, 19%);
 81 | --color-primary: hsl(0, 0%, 100%);
 82 | --color-secondary: hsl(0, 0%, 62%);
 83 | --card-shadow: hsla(0, 0%, 0%, 0.4);
 84 | --input-bg: hsl(0, 0%, 16%);
 85 | 
 86 | --shadow-1: 10px 10px 40px var(--card-shadow);
 87 | ```
 88 | 
 89 | ### Light Mode
 90 | 
 91 | ``` css
 92 | --bg-primary: hsl(0, 0%, 90%);
 93 | --bg-secondary: hsl(0, 0%, 100%);
 94 | --color-primary: hsl(0, 0%, 12%);
 95 | --color-secondary: hsl(0, 0%, 37%);
 96 | --card-shadow: hsla(0, 0%, 0%, 0.1);
 97 | --input-bg: hsl(0, 0%, 93%);
 98 | 
 99 | --shadow-1: 10px 10px 40px var(--card-shadow);
100 | ```
101 | 


--------------------------------------------------------------------------------
/vcard/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 5502
3 | }


--------------------------------------------------------------------------------
/vcard/Index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>More About</title>
  8 | 
  9 |     <!--
 10 |     - favicon
 11 |   -->
 12 |     <link
 13 |       rel="shortcut icon"
 14 |       href="./assets/images/favicon.ico"
 15 |       type="image/x-icon"
 16 |     />
 17 | 
 18 |     <!--
 19 |     - custom css link
 20 |   -->
 21 |     <link rel="stylesheet" href="./assets/css/style.css" />
 22 | 
 23 |     <!--
 24 |     - google font link
 25 |   -->
 26 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 27 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 28 |     <link
 29 |       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"
 30 |       rel="stylesheet"
 31 |     />
 32 |   </head>
 33 | 
 34 |   <body>
 35 |     <!--
 36 |     - #MAIN
 37 |   -->
 38 | 
 39 |     <main>
 40 |       <!--
 41 |       - #SIDEBAR
 42 |     -->
 43 | 
 44 |       <aside class="sidebar" data-sidebar>
 45 |         <div class="sidebar-info">
 46 |           <figure class="avatar-box">
 47 |             <img src="./assets/images/pp.png" alt="Aashis Jha" width="80" />
 48 |           </figure>
 49 | 
 50 |           <div class="info-content">
 51 |             <h1 class="name" title="Richard hanrick">Aashis Jha</h1>
 52 | 
 53 |             <p class="title">Software Engineer</p>
 54 |           </div>
 55 | 
 56 |           <button class="info_more-btn" data-sidebar-btn>
 57 |             <span>Show Contacts</span>
 58 | 
 59 |             <ion-icon name="chevron-down"></ion-icon>
 60 |           </button>
 61 |         </div>
 62 | 
 63 |         <div class="sidebar-info_more">
 64 |           <div class="separator"></div>
 65 | 
 66 |           <ul class="contacts-list">
 67 |             <li class="contact-item">
 68 |               <div class="icon-box">
 69 |                 <ion-icon name="mail-outline"></ion-icon>
 70 |               </div>
 71 | 
 72 |               <div class="contact-info">
 73 |                 <p class="contact-title">Email</p>
 74 | 
 75 |                 <a href="mailto:richard@example.com" class="contact-link"
 76 |                   >bewithu.aj@gmail.com</a
 77 |                 >
 78 |               </div>
 79 |             </li>
 80 | 
 81 |             <li class="contact-item">
 82 |               <div class="icon-box">
 83 |                 <ion-icon name="phone-portrait-outline"></ion-icon>
 84 |               </div>
 85 | 
 86 |               <div class="contact-info">
 87 |                 <p class="contact-title">Phone</p>
 88 | 
 89 |                 <a href="tel:+12133522795" class="contact-link"
 90 |                   >+977 980-7683746</a
 91 |                 >
 92 |               </div>
 93 |             </li>
 94 | 
 95 |             <li class="contact-item">
 96 |               <div class="icon-box">
 97 |                 <ion-icon name="calendar-outline"></ion-icon>
 98 |               </div>
 99 | 
100 |               <div class="contact-info">
101 |                 <p class="contact-title">Birthday</p>
102 | 
103 |                 <time datetime="1982-06-23">Jul 25, 2006</time>
104 |               </div>
105 |             </li>
106 | 
107 |             <li class="contact-item">
108 |               <div class="icon-box">
109 |                 <ion-icon name="location-outline"></ion-icon>
110 |               </div>
111 | 
112 |               <div class="contact-info">
113 |                 <p class="contact-title">Location</p>
114 | 
115 |                 <address>Janakpur Dham, Nepal</address>
116 |               </div>
117 |             </li>
118 |           </ul>
119 | 
120 |           <div class="separator"></div>
121 | 
122 |           <ul class="social-list">
123 |             <li class="social-item">
124 |               <a
125 |                 href="https://www.facebook.com/einsteinaashis"
126 |                 class="social-link"
127 |               >
128 |                 <ion-icon name="logo-facebook"></ion-icon>
129 |               </a>
130 |             </li>
131 | 
132 |             <li class="social-item">
133 |               <a
134 |                 href="https://www.instagram.com/aashiszha/"
135 |                 class="social-link"
136 |               >
137 |                 <ion-icon name="logo-instagram"></ion-icon>
138 |               </a>
139 |             </li>
140 | 
141 |             <li class="social-item">
142 |               <a
143 |                 href="https://www.linkedin.com/in/aashiszha/"
144 |                 class="social-link"
145 |               >
146 |                 <ion-icon name="logo-linkedin"></ion-icon>
147 |               </a>
148 |             </li>
149 | 
150 |             <li class="social-item">
151 |               <a href="https://github.com/OracleBrain" class="social-link">
152 |                 <ion-icon name="logo-Github"></ion-icon>
153 |               </a>
154 |             </li>
155 |           </ul>
156 |         </div>
157 |       </aside>
158 | 
159 |       <!--
160 |       - #main-content
161 |     -->
162 | 
163 |       <div class="main-content">
164 |         <!--
165 |         - #NAVBAR
166 |       -->
167 | 
168 |         <nav class="navbar">
169 |           <ul class="navbar-list">
170 |             <li class="navbar-item">
171 |               <button class="navbar-link active" data-nav-link>About</button>
172 |             </li>
173 | 
174 |             <li class="navbar-item">
175 |               <button class="navbar-link" data-nav-link>Resume</button>
176 |             </li>
177 |           </ul>
178 |         </nav>
179 | 
180 |         <!--
181 |         - #ABOUT
182 |       -->
183 | 
184 |         <article class="about active" data-page="about">
185 |           <header>
186 |             <h2 class="h2 article-title">About me</h2>
187 |           </header>
188 | 
189 |           <section class="about-text">
190 |             <p>
191 |               As a software engineer, full stack developer, and YouTuber, I
192 |               bring a unique combination of technical expertise and creative
193 |               problem-solving skills to my work. As a software engineer, I have
194 |               a deep understanding of a wide range of programming languages and
195 |               software development methodologies, allowing me to design,
196 |               develop, and maintain complex software systems with ease. As a
197 |               full stack developer, I have a comprehensive understanding of both
198 |               front-end and back-end technologies, enabling me to create
199 |               complete, end-to-end solutions. My experience as a YouTuber has
200 |               given me a strong sense of digital media, and I am skilled at
201 |               communicating complex technical concepts in an engaging and easily
202 |               understandable way. I am a quick learner and a creative problem
203 |               solver, with a strong work ethic and a passion for delivering
204 |               high-quality software solutions.
205 |             </p>
206 |           </section>
207 | 
208 |           <!--
209 |           - service
210 |         -->
211 | 
212 |           <section class="service">
213 |             <h3 class="h3 service-title">What i'm doing</h3>
214 | 
215 |             <ul class="service-list">
216 |               <li class="service-item">
217 |                 <div class="service-icon-box">
218 |                   <img
219 |                     src="./assets/images/icon-design.svg
220 |                 "
221 |                     alt="design icon"
222 |                     width="40"
223 |                   />
224 |                 </div>
225 | 
226 |                 <div class="service-content-box">
227 |                   <h4 class="h4 service-item-title">Web design</h4>
228 | 
229 |                   <p class="service-item-text">
230 |                     The most modern and high-quality design made at a
231 |                     professional level.
232 |                   </p>
233 |                 </div>
234 |               </li>
235 | 
236 |               <li class="service-item">
237 |                 <div class="service-icon-box">
238 |                   <img
239 |                     src="./assets/images/icon-dev.svg"
240 |                     alt="Web development icon"
241 |                     width="40"
242 |                   />
243 |                 </div>
244 | 
245 |                 <div class="service-content-box">
246 |                   <h4 class="h4 service-item-title">Web development</h4>
247 | 
248 |                   <p class="service-item-text">
249 |                     High-quality development of sites at the professional level.
250 |                   </p>
251 |                 </div>
252 |               </li>
253 | 
254 |               <li class="service-item">
255 |                 <div class="service-icon-box">
256 |                   <img
257 |                     src="./assets/images/icon-app.svg"
258 |                     alt="mobile app icon"
259 |                     width="40"
260 |                   />
261 |                 </div>
262 | 
263 |                 <div class="service-content-box">
264 |                   <h4 class="h4 service-item-title">Mobile apps</h4>
265 | 
266 |                   <p class="service-item-text">
267 |                     Professional development of applications for iOS and
268 |                     Android.
269 |                   </p>
270 |                 </div>
271 |               </li>
272 | 
273 |               <li class="service-item">
274 |                 <div class="service-icon-box">
275 |                   <img
276 |                     src="./assets/images/icon-photo.svg"
277 |                     alt="camera icon"
278 |                     width="40"
279 |                   />
280 |                 </div>
281 | 
282 |                 <div class="service-content-box">
283 |                   <h4 class="h4 service-item-title">Photography</h4>
284 | 
285 |                   <p class="service-item-text">
286 |                     I make high-quality photos of any category at a professional
287 |                     level.
288 |                   </p>
289 |                 </div>
290 |               </li>
291 |             </ul>
292 |           </section>
293 | 
294 |           <!--
295 |           - testimonials
296 |         -->
297 | 
298 |           <section class="testimonials">
299 |             <h3 class="h3 testimonials-title">Testimonials</h3>
300 | 
301 |             <ul class="testimonials-list has-scrollbar">
302 |               <li class="testimonials-item">
303 |                 <div class="content-card" data-testimonials-item>
304 |                   <figure class="testimonials-avatar-box">
305 |                     <img
306 |                       src="./assets/images/Testimonials1.png"
307 |                       alt="Rohit Jha"
308 |                       width="60"
309 |                       data-testimonials-avatar
310 |                     />
311 |                   </figure>
312 | 
313 |                   <h4
314 |                     class="h4 testimonials-item-title"
315 |                     data-testimonials-title
316 |                   >
317 |                     Rohit Jha
318 |                   </h4>
319 | 
320 |                   <div class="testimonials-text" data-testimonials-text>
321 |                     <p>
322 |                       Aashis' dedication to client satisfaction and wealth of
323 |                       experience have resulted in a successful corporate
324 |                       identity project. His consideration for the client's needs
325 |                       and goals, along with his ability to translate those into
326 |                       a distinctive and effective brand representation, sets him
327 |                       apart from others in the field. His commitment to
328 |                       excellence is evident in the work he produces and the
329 |                       satisfaction of his clients.
330 |                     </p>
331 |                   </div>
332 |                 </div>
333 |               </li>
334 | 
335 |               <li class="testimonials-item">
336 |                 <div class="content-card" data-testimonials-item>
337 |                   <figure class="testimonials-avatar-box">
338 |                     <img
339 |                       src="./assets/images/testimonials satish.jpg"
340 |                       alt="Satish Jha"
341 |                       width="60"
342 |                       data-testimonials-avatar
343 |                     />
344 |                   </figure>
345 | 
346 |                   <h4
347 |                     class="h4 testimonials-item-title"
348 |                     data-testimonials-title
349 |                   >
350 |                     Satish Jha
351 |                   </h4>
352 | 
353 |                   <div class="testimonials-text" data-testimonials-text>
354 |                     <p>
355 |                       AJ created a successful corporate identity, impressing the
356 |                       client with their experience and focus on their needs.
357 |                       They ensured a deep understanding of the client's goals,
358 |                       resulting in a brand representation that perfectly
359 |                       captures the company's essence. AJ's commitment to
360 |                       excellence was evident in the final product.
361 |                     </p>
362 |                   </div>
363 |                 </div>
364 |               </li>
365 |             </ul>
366 |           </section>
367 | 
368 |           <!--
369 |           - testimonials modal
370 |         -->
371 | 
372 |           <div class="modal-container" data-modal-container>
373 |             <div class="overlay" data-overlay></div>
374 | 
375 |             <section class="testimonials-modal">
376 |               <button class="modal-close-btn" data-modal-close-btn>
377 |                 <ion-icon name="close-outline"></ion-icon>
378 |               </button>
379 | 
380 |               <div class="modal-img-wrapper">
381 |                 <figure class="modal-avatar-box">
382 |                   <img
383 |                     src="./assets/images/avatar-1.png"
384 |                     alt="Rohit Jha"
385 |                     width="80"
386 |                     data-modal-img
387 |                   />
388 |                 </figure>
389 | 
390 |                 <img src="./assets/images/icon-quote.svg" alt="quote icon" />
391 |               </div>
392 | 
393 |               <div class="modal-content">
394 |                 <h4 class="h3 modal-title" data-modal-title>Rohit Jha</h4>
395 | 
396 |                 <time datetime="2023-01-14">14 Jan, 2023</time>
397 | 
398 |                 <div data-modal-text>
399 |                   <p>
400 |                     Aashis' dedication to client satisfaction and wealth of
401 |                     experience have resulted in a successful corporate identity
402 |                     project. His consideration for the client's needs and goals,
403 |                     along with his ability to translate those into a distinctive
404 |                     and effective brand representation, sets him apart from
405 |                     others in the field. His commitment to excellence is evident
406 |                     in the work he produces and the satisfaction of his clients.
407 |                   </p>
408 |                 </div>
409 |               </div>
410 |             </section>
411 |           </div>
412 | 
413 |           <!--
414 |           - clients
415 |         -->
416 | 
417 |           <section class="clients">
418 |             <h3 class="h3 clients-title">Our Colabrations & Clients</h3>
419 | 
420 |             <ul class="clients-list has-scrollbar">
421 |               <iframe
422 |                 src="https://www.youtube.com/embed/Ovu3rRdmo6I"
423 |                 frameborder="10"
424 |                 allowfullscreen
425 |               ></iframe>
426 | 
427 |               <iframe
428 |                 src="https://www.youtube.com/embed/zxh8uui8fGY"
429 |                 frameborder="10"
430 |                 allowfullscreen
431 |               ></iframe>
432 | 
433 |               <!-- <li class="clients-item">
434 |                 <a href="https://jharohit.com.np/">
435 |                   <img
436 |                     src="./assets/images/Picsart_23-02-05_16-13-51-852.png"
437 |                     alt="client logo"
438 |                   />
439 |                 </a>
440 |               </li> -->
441 |             </ul>
442 |           </section>
443 |         </article>
444 | 
445 |         <!--
446 |         - #RESUME
447 |       -->
448 | 
449 |         <article class="resume" data-page="resume">
450 |           <header>
451 |             <h2 class="h2 article-title">Resume</h2>
452 |           </header>
453 | 
454 |           <section class="timeline">
455 |             <div class="title-wrapper">
456 |               <div class="icon-box">
457 |                 <ion-icon name="book-outline"></ion-icon>
458 |               </div>
459 | 
460 |               <h3 class="h3">Education</h3>
461 |             </div>
462 | 
463 |             <ol class="timeline-list">
464 |               <li class="timeline-item">
465 |                 <h4 class="h4 timeline-item-title">
466 |                   University school of the arts
467 |                 </h4>
468 | 
469 |                 <span>2007 — 2008</span>
470 | 
471 |                 <p class="timeline-text">
472 |                   Nemo enims ipsam voluptatem, blanditiis praesentium voluptum
473 |                   delenit atque corrupti, quos dolores et quas molestias
474 |                   exceptur.
475 |                 </p>
476 |               </li>
477 | 
478 |               <li class="timeline-item">
479 |                 <h4 class="h4 timeline-item-title">New york academy of art</h4>
480 | 
481 |                 <span>2006 — 2007</span>
482 | 
483 |                 <p class="timeline-text">
484 |                   Ratione voluptatem sequi nesciunt, facere quisquams facere
485 |                   menda ossimus, omnis voluptas assumenda est omnis..
486 |                 </p>
487 |               </li>
488 | 
489 |               <li class="timeline-item">
490 |                 <h4 class="h4 timeline-item-title">
491 |                   High school of art and design
492 |                 </h4>
493 | 
494 |                 <span>2002 — 2004</span>
495 | 
496 |                 <p class="timeline-text">
497 |                   Duis aute irure dolor in reprehenderit in voluptate, quila
498 |                   voluptas mag odit aut fugit, sed consequuntur magni dolores
499 |                   eos.
500 |                 </p>
501 |               </li>
502 |             </ol>
503 |           </section>
504 | 
505 |           <section class="timeline">
506 |             <div class="title-wrapper">
507 |               <div class="icon-box">
508 |                 <ion-icon name="book-outline"></ion-icon>
509 |               </div>
510 | 
511 |               <h3 class="h3">Experience</h3>
512 |             </div>
513 | 
514 |             <ol class="timeline-list">
515 |               <li class="timeline-item">
516 |                 <h4 class="h4 timeline-item-title">Creative director</h4>
517 | 
518 |                 <span>2015 — Present</span>
519 | 
520 |                 <p class="timeline-text">
521 |                   Nemo enim ipsam voluptatem blanditiis praesentium voluptum
522 |                   delenit atque corrupti, quos dolores et qvuas molestias
523 |                   exceptur.
524 |                 </p>
525 |               </li>
526 | 
527 |               <li class="timeline-item">
528 |                 <h4 class="h4 timeline-item-title">Art director</h4>
529 | 
530 |                 <span>2013 — 2015</span>
531 | 
532 |                 <p class="timeline-text">
533 |                   Nemo enims ipsam voluptatem, blanditiis praesentium voluptum
534 |                   delenit atque corrupti, quos dolores et quas molestias
535 |                   exceptur.
536 |                 </p>
537 |               </li>
538 | 
539 |               <li class="timeline-item">
540 |                 <h4 class="h4 timeline-item-title">Web designer</h4>
541 | 
542 |                 <span>2010 — 2013</span>
543 | 
544 |                 <p class="timeline-text">
545 |                   Nemo enims ipsam voluptatem, blanditiis praesentium voluptum
546 |                   delenit atque corrupti, quos dolores et quas molestias
547 |                   exceptur.
548 |                 </p>
549 |               </li>
550 |             </ol>
551 |           </section>
552 | 
553 |           <section class="skill">
554 |             <h3 class="h3 skills-title">My skills</h3>
555 | 
556 |             <ul class="skills-list content-card">
557 |               <li class="skills-item">
558 |                 <div class="title-wrapper">
559 |                   <h5 class="h5">Web design</h5>
560 |                   <data value="80">80%</data>
561 |                 </div>
562 | 
563 |                 <div class="skill-progress-bg">
564 |                   <div class="skill-progress-fill" style="width: 80%"></div>
565 |                 </div>
566 |               </li>
567 | 
568 |               <li class="skills-item">
569 |                 <div class="title-wrapper">
570 |                   <h5 class="h5">Graphic design</h5>
571 |                   <data value="70">70%</data>
572 |                 </div>
573 | 
574 |                 <div class="skill-progress-bg">
575 |                   <div class="skill-progress-fill" style="width: 70%"></div>
576 |                 </div>
577 |               </li>
578 | 
579 |               <li class="skills-item">
580 |                 <div class="title-wrapper">
581 |                   <h5 class="h5">Branding</h5>
582 |                   <data value="90">90%</data>
583 |                 </div>
584 | 
585 |                 <div class="skill-progress-bg">
586 |                   <div class="skill-progress-fill" style="width: 90%"></div>
587 |                 </div>
588 |               </li>
589 | 
590 |               <li class="skills-item">
591 |                 <div class="title-wrapper">
592 |                   <h5 class="h5">WordPress</h5>
593 |                   <data value="50">50%</data>
594 |                 </div>
595 | 
596 |                 <div class="skill-progress-bg">
597 |                   <div class="skill-progress-fill" style="width: 50%"></div>
598 |                 </div>
599 |               </li>
600 |             </ul>
601 |           </section>
602 |         </article>
603 | 
604 |         <div class="filter-select-box">
605 |           <button class="filter-select" data-select>
606 |             <div class="select-value" data-selecct-value>Select category</div>
607 | 
608 |             <div class="select-icon">
609 |               <ion-icon name="chevron-down"></ion-icon>
610 |             </div>
611 |           </button>
612 |         </div>
613 |       </div>
614 |     </main>
615 | 
616 |     <!--
617 |     - custom js link
618 |   -->
619 |     <script src="./assets/js/script.js"></script>
620 | 
621 |     <!--
622 |     - ionicon link
623 |   -->
624 |     <script
625 |       type="module"
626 |       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
627 |     ></script>
628 |     <script
629 |       nomodule
630 |       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
631 |     ></script>
632 |   </body>
633 | </html>
634 | 


--------------------------------------------------------------------------------
/vcard/assets/css/style.css:
--------------------------------------------------------------------------------
   1 | /*-----------------------------------*\
   2 |   #style.css
   3 | \*-----------------------------------*/
   4 | 
   5 | 
   6 | /**
   7 |  * copyright 2022 @codewithsadee
   8 |  */
   9 | 
  10 | 
  11 | 
  12 | 
  13 | 
  14 | /*-----------------------------------*\
  15 |   #CUSTOM PROPERTY
  16 | \*-----------------------------------*/
  17 | 
  18 | :root {
  19 | 
  20 |   /**
  21 |    * colors
  22 |    */
  23 | 
  24 |   /* gradient */
  25 | 
  26 |   --bg-gradient-onyx: linear-gradient(
  27 |     to bottom right, 
  28 |     hsl(240, 1%, 25%) 3%, 
  29 |     hsl(0, 0%, 19%) 97%
  30 |   );
  31 |   --bg-gradient-jet: linear-gradient(
  32 |     to bottom right, 
  33 |     hsla(240, 1%, 18%, 0.251) 0%, 
  34 |     hsla(240, 2%, 11%, 0) 100%
  35 |   ), hsl(240, 2%, 13%);
  36 |   --bg-gradient-yellow-1: linear-gradient(
  37 |     to bottom right, 
  38 |     hsl(45, 100%, 71%) 0%, 
  39 |     hsla(36, 100%, 69%, 0) 50%
  40 |   );
  41 |   --bg-gradient-yellow-2: linear-gradient(
  42 |     135deg, 
  43 |     hsla(45, 100%, 71%, 0.251) 0%, 
  44 |     hsla(35, 100%, 68%, 0) 59.86%
  45 |   ), hsl(240, 2%, 13%);
  46 |   --border-gradient-onyx: linear-gradient(
  47 |     to bottom right, 
  48 |     hsl(0, 0%, 25%) 0%, 
  49 |     hsla(0, 0%, 25%, 0) 50%
  50 |   );
  51 |   --text-gradient-yellow: linear-gradient(
  52 |     to right, 
  53 |     hsl(45, 100%, 72%), 
  54 |     hsl(35, 100%, 68%)
  55 |   );
  56 | 
  57 |   /* solid */
  58 | 
  59 |   --jet: hsl(0, 0%, 22%);
  60 |   --onyx: hsl(240, 1%, 17%);
  61 |   --eerie-black-1: hsl(240, 2%, 13%);
  62 |   --eerie-black-2: hsl(240, 2%, 12%);
  63 |   --smoky-black: hsl(0, 0%, 7%);
  64 |   --white-1: hsl(0, 0%, 100%);
  65 |   --white-2: hsl(0, 0%, 98%);
  66 |   --orange-yellow-crayola: hsl(45, 100%, 72%);
  67 |   --vegas-gold: hsl(45, 54%, 58%);
  68 |   --light-gray: hsl(0, 0%, 84%);
  69 |   --light-gray-70: hsla(0, 0%, 84%, 0.7);
  70 |   --bittersweet-shimmer: hsl(0, 43%, 51%);
  71 | 
  72 |   /**
  73 |    * typography
  74 |    */
  75 | 
  76 |   /* font-family */
  77 |   --ff-poppins: 'Poppins', sans-serif;
  78 | 
  79 |   /* font-size */
  80 |   --fs-1: 24px;
  81 |   --fs-2: 18px;
  82 |   --fs-3: 17px;
  83 |   --fs-4: 16px;
  84 |   --fs-5: 15px;
  85 |   --fs-6: 14px;
  86 |   --fs-7: 13px;
  87 |   --fs-8: 11px;
  88 | 
  89 |   /* font-weight */
  90 |   --fw-300: 300;
  91 |   --fw-400: 400;
  92 |   --fw-500: 500;
  93 |   --fw-600: 600;
  94 | 
  95 |   /**
  96 |    * shadow
  97 |    */
  98 |   
  99 |   --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
 100 |   --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
 101 |   --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
 102 |   --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
 103 |   --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);
 104 | 
 105 |   /**
 106 |    * transition
 107 |    */
 108 | 
 109 |   --transition-1: 0.25s ease;
 110 |   --transition-2: 0.5s ease-in-out;
 111 | 
 112 | }
 113 | 
 114 | 
 115 | 
 116 | 
 117 | 
 118 | /*-----------------------------------*\
 119 |   #RESET
 120 | \*-----------------------------------*/
 121 | 
 122 | *, *::before, *::after {
 123 |   margin: 0;
 124 |   padding: 0;
 125 |   box-sizing: border-box;
 126 | }
 127 | 
 128 | a { text-decoration: none; }
 129 | 
 130 | li { list-style: none; }
 131 | 
 132 | img, ion-icon, a, button, time, span { display: block; }
 133 | 
 134 | button {
 135 |   font: inherit;
 136 |   background: none;
 137 |   border: none;
 138 |   text-align: left;
 139 |   cursor: pointer;
 140 | }
 141 | 
 142 | input, textarea {
 143 |   display: block;
 144 |   width: 100%;
 145 |   background: none;
 146 |   font: inherit;
 147 | }
 148 | 
 149 | ::selection {
 150 |   background: var(--orange-yellow-crayola);
 151 |   color: var(--smoky-black);
 152 | }
 153 | 
 154 | :focus { outline-color: var(--orange-yellow-crayola); }
 155 | 
 156 | html { font-family: var(--ff-poppins); }
 157 | 
 158 | body { background: var(--smoky-black); }
 159 | 
 160 | 
 161 | 
 162 | 
 163 | 
 164 | /*-----------------------------------*\
 165 |   #REUSED STYLE
 166 | \*-----------------------------------*/
 167 | 
 168 | .sidebar,
 169 | article {
 170 |   background: var(--eerie-black-2);
 171 |   border: 1px solid var(--jet);
 172 |   border-radius: 20px;
 173 |   padding: 15px;
 174 |   box-shadow: var(--shadow-1);
 175 |   z-index: 1;
 176 | }
 177 | 
 178 | .separator {
 179 |   width: 100%;
 180 |   height: 1px;
 181 |   background: var(--jet);
 182 |   margin: 16px 0;
 183 | }
 184 | 
 185 | .icon-box {
 186 |   position: relative;
 187 |   background: var(--border-gradient-onyx);
 188 |   width: 30px;
 189 |   height: 30px;
 190 |   border-radius: 8px;
 191 |   display: flex;
 192 |   justify-content: center;
 193 |   align-items: center;
 194 |   font-size: 16px;
 195 |   color: var(--orange-yellow-crayola);
 196 |   box-shadow: var(--shadow-1);
 197 |   z-index: 1;
 198 | }
 199 | 
 200 | .icon-box::before {
 201 |   content: "";
 202 |   position: absolute;
 203 |   inset: 1px;
 204 |   background: var(--eerie-black-1);
 205 |   border-radius: inherit;
 206 |   z-index: -1;
 207 | }
 208 | 
 209 | .icon-box ion-icon { --ionicon-stroke-width: 35px; }
 210 | 
 211 | article { display: none; }
 212 | 
 213 | article.active {
 214 |   display: block;
 215 |   animation: fade 0.5s ease backwards;
 216 | }
 217 | 
 218 | @keyframes fade {
 219 |   0% { opacity: 0; }
 220 |   100% { opacity: 1; }
 221 | }
 222 | 
 223 | .h2,
 224 | .h3,
 225 | .h4,
 226 | .h5 {
 227 |   color: var(--white-2);
 228 |   text-transform: capitalize;
 229 | }
 230 | 
 231 | .h2 { font-size: var(--fs-1); }
 232 | 
 233 | .h3 { font-size: var(--fs-2); }
 234 | 
 235 | .h4 { font-size: var(--fs-4); }
 236 | 
 237 | .h5 {
 238 |   font-size: var(--fs-7);
 239 |   font-weight: var(--fw-500);
 240 | }
 241 | 
 242 | .article-title {
 243 |   position: relative;
 244 |   padding-bottom: 7px;
 245 | }
 246 | 
 247 | .article-title::after {
 248 |   content: "";
 249 |   position: absolute;
 250 |   bottom: 0;
 251 |   left: 0;
 252 |   width: 30px;
 253 |   height: 3px;
 254 |   background: var(--text-gradient-yellow);
 255 |   border-radius: 3px;
 256 | }
 257 | 
 258 | .has-scrollbar::-webkit-scrollbar {
 259 |   width: 5px; /* for vertical scrollbar */
 260 |   height: 5px; /* for horizontal scrollbar */
 261 | }
 262 | 
 263 | .has-scrollbar::-webkit-scrollbar-track {
 264 |   background: var(--onyx);
 265 |   border-radius: 5px;
 266 | }
 267 | 
 268 | .has-scrollbar::-webkit-scrollbar-thumb {
 269 |   background: var(--orange-yellow-crayola);
 270 |   border-radius: 5px;
 271 | }
 272 | 
 273 | .has-scrollbar::-webkit-scrollbar-button { width: 20px; }
 274 | 
 275 | .content-card {
 276 |   position: relative;
 277 |   background: var(--border-gradient-onyx);
 278 |   padding: 15px;
 279 |   padding-top: 45px;
 280 |   border-radius: 14px;
 281 |   box-shadow: var(--shadow-2);
 282 |   cursor: pointer;
 283 |   z-index: 1;
 284 | }
 285 | 
 286 | .content-card::before {
 287 |   content: "";
 288 |   position: absolute;
 289 |   inset: 1px;
 290 |   background: var(--bg-gradient-jet);
 291 |   border-radius: inherit;
 292 |   z-index: -1;
 293 | }
 294 | 
 295 | 
 296 | 
 297 | 
 298 | 
 299 | /*-----------------------------------*\
 300 |   #MAIN
 301 | \*-----------------------------------*/
 302 | 
 303 | main {
 304 |   margin: 15px 12px;
 305 |   margin-bottom: 75px;
 306 |   min-width: 259px;
 307 | }
 308 | 
 309 | 
 310 | 
 311 | 
 312 | 
 313 | /*-----------------------------------*\
 314 |   #SIDEBAR
 315 | \*-----------------------------------*/
 316 | 
 317 | .sidebar {
 318 |   margin-bottom: 15px;
 319 |   max-height: 112px;
 320 |   overflow: hidden;
 321 |   transition: var(--transition-2);
 322 | }
 323 | 
 324 | .sidebar.active { max-height: 405px; }
 325 | 
 326 | .sidebar-info {
 327 |   position: relative;
 328 |   display: flex;
 329 |   justify-content: flex-start;
 330 |   align-items: center;
 331 |   gap: 15px;
 332 | }
 333 | 
 334 | .avatar-box {
 335 |   background: var(--bg-gradient-onyx);
 336 |   border-radius: 20px;
 337 | }
 338 | 
 339 | .info-content .name {
 340 |   color: var(--white-2);
 341 |   font-size: var(--fs-3);
 342 |   font-weight: var(--fw-500);
 343 |   letter-spacing: -0.25px;
 344 |   margin-bottom: 10px;
 345 | }
 346 | 
 347 | .info-content .title {
 348 |   color: var(--white-1);
 349 |   background: var(--onyx);
 350 |   font-size: var(--fs-8);
 351 |   font-weight: var(--fw-300);
 352 |   width: max-content;
 353 |   padding: 3px 12px;
 354 |   border-radius: 8px;
 355 | }
 356 | 
 357 | .info_more-btn {
 358 |   position: absolute;
 359 |   top: -15px;
 360 |   right: -15px;
 361 |   border-radius: 0 15px;
 362 |   font-size: 13px;
 363 |   color: var(--orange-yellow-crayola);
 364 |   background: var(--border-gradient-onyx);
 365 |   padding: 10px;
 366 |   box-shadow: var(--shadow-2);
 367 |   transition: var(--transition-1);
 368 |   z-index: 1;
 369 | }
 370 | 
 371 | .info_more-btn::before {
 372 |   content: "";
 373 |   position: absolute;
 374 |   inset: 1px;
 375 |   border-radius: inherit;
 376 |   background: var(--bg-gradient-jet);
 377 |   transition: var(--transition-1);
 378 |   z-index: -1;
 379 | }
 380 | 
 381 | .info_more-btn:hover,
 382 | .info_more-btn:focus { background: var(--bg-gradient-yellow-1); }
 383 | 
 384 | .info_more-btn:hover::before,
 385 | .info_more-btn:focus::before { background: var(--bg-gradient-yellow-2); }
 386 | 
 387 | .info_more-btn span { display: none; }
 388 | 
 389 | .sidebar-info_more {
 390 |   opacity: 0;
 391 |   visibility: hidden;
 392 |   transition: var(--transition-2);
 393 | }
 394 | 
 395 | .sidebar.active .sidebar-info_more {
 396 |   opacity: 1;
 397 |   visibility: visible;
 398 | }
 399 | 
 400 | .contacts-list {
 401 |   display: grid;
 402 |   grid-template-columns: 1fr;
 403 |   gap: 16px;
 404 | }
 405 | 
 406 | .contact-item {
 407 |   min-width: 100%;
 408 |   display: flex;
 409 |   align-items: center;
 410 |   gap: 16px;
 411 | }
 412 | 
 413 | .contact-info {
 414 |   max-width: calc(100% - 46px);
 415 |   width: calc(100% - 46px);
 416 | }
 417 | 
 418 | .contact-title {
 419 |   color: var(--light-gray-70);
 420 |   font-size: var(--fs-8);
 421 |   text-transform: uppercase;
 422 |   margin-bottom: 2px;
 423 | }
 424 | 
 425 | .contact-info :is(.contact-link, time, address) {
 426 |   color: var(--white-2);
 427 |   font-size: var(--fs-7);
 428 | }
 429 | 
 430 | .contact-info address { font-style: normal; }
 431 | 
 432 | .social-list {
 433 |   display: flex;
 434 |   justify-content: flex-start;
 435 |   align-items: center;
 436 |   gap: 15px;
 437 |   padding-bottom: 4px;
 438 |   padding-left: 7px;
 439 | }
 440 | 
 441 | .social-item .social-link {
 442 |   color: var(--light-gray-70);
 443 |   font-size: 18px;
 444 | }
 445 | 
 446 | 
 447 | .social-item .social-link:hover { color: var(--light-gray); }
 448 | 
 449 | 
 450 | 
 451 | 
 452 | 
 453 | /*-----------------------------------*\
 454 |   #NAVBAR
 455 | \*-----------------------------------*/
 456 | 
 457 | .navbar {
 458 |   position: fixed;
 459 |   bottom: 0;
 460 |   left: 0;
 461 |   width: 100%;
 462 |   background: hsla(240, 1%, 17%, 0.75);
 463 |   backdrop-filter: blur(10px);
 464 |   border: 1px solid var(--jet);
 465 |   border-radius: 12px 12px 0 0;
 466 |   box-shadow: var(--shadow-2);
 467 |   z-index: 5;
 468 | }
 469 | 
 470 | .navbar-list {
 471 |   display: flex;
 472 |   flex-wrap: wrap;
 473 |   justify-content: center;
 474 |   align-items: center;
 475 |   padding: 0 10px;
 476 | }
 477 | 
 478 | .navbar-link {
 479 |   color: var(--light-gray);
 480 |   font-size: var(--fs-8);
 481 |   padding: 20px 7px;
 482 |   transition: color var(--transition-1);
 483 | }
 484 | 
 485 | .navbar-link:hover,
 486 | .navbar-link:focus { color: var(--light-gray-70); }
 487 | 
 488 | .navbar-link.active { color: var(--orange-yellow-crayola); }
 489 | 
 490 | 
 491 | 
 492 | 
 493 | 
 494 | /*-----------------------------------*\
 495 |   #ABOUT
 496 | \*-----------------------------------*/
 497 | 
 498 | .about .article-title { margin-bottom: 15px; }
 499 | 
 500 | .about-text {
 501 |   color: var(--light-gray);
 502 |   font-size: var(--fs-6);
 503 |   font-weight: var(--fw-300);
 504 |   line-height: 1.6;
 505 | }
 506 | 
 507 | .about-text p { margin-bottom: 15px; }
 508 | 
 509 | 
 510 | 
 511 | /**
 512 |  * #service 
 513 |  */
 514 | 
 515 | .service { margin-bottom: 35px; }
 516 | 
 517 | .service-title { margin-bottom: 20px; }
 518 | 
 519 | .service-list {
 520 |   display: grid;
 521 |   grid-template-columns: 1fr;
 522 |   gap: 20px;
 523 | }
 524 | 
 525 | .service-item {
 526 |   position: relative;
 527 |   background: var(--border-gradient-onyx);
 528 |   padding: 20px;
 529 |   border-radius: 14px;
 530 |   box-shadow: var(--shadow-2);
 531 |   z-index: 1;
 532 | }
 533 | 
 534 | .service-item::before {
 535 |   content: "";
 536 |   position: absolute;
 537 |   inset: 1px;
 538 |   background: var(--bg-gradient-jet);
 539 |   border-radius: inherit;
 540 |   z-index: -1;
 541 | }
 542 | 
 543 | .service-icon-box { margin-bottom: 10px; }
 544 | 
 545 | .service-icon-box img { margin: auto; }
 546 | 
 547 | .service-content-box { text-align: center; }
 548 | 
 549 | .service-item-title { margin-bottom: 7px; }
 550 | 
 551 | .service-item-text {
 552 |   color: var(--light-gray);
 553 |   font-size: var(--fs-6);
 554 |   font-weight: var(--fw-3);
 555 |   line-height: 1.6;
 556 | }
 557 | 
 558 | 
 559 | /**
 560 |  * #testimonials 
 561 |  */
 562 | 
 563 | .testimonials { margin-bottom: 30px; }
 564 | 
 565 | .testimonials-title { margin-bottom: 20px; }
 566 | 
 567 | .testimonials-list {
 568 |   display: flex;
 569 |   justify-content: flex-start;
 570 |   align-items: flex-start;
 571 |   gap: 15px;
 572 |   margin: 0 -15px;
 573 |   padding: 25px 15px;
 574 |   padding-bottom: 35px;
 575 |   overflow-x: auto;
 576 |   scroll-behavior: smooth;
 577 |   overscroll-behavior-inline: contain;
 578 |   scroll-snap-type: inline mandatory;
 579 | }
 580 | 
 581 | .testimonials-item {
 582 |   min-width: 100%;
 583 |   scroll-snap-align: center;
 584 | }
 585 | 
 586 | .testimonials-avatar-box {
 587 |   position: absolute;
 588 |   top: 0;
 589 |   left: 0;
 590 |   transform: translate(15px, -25px);
 591 |   background: var(--bg-gradient-onyx);
 592 |   border-radius: 14px;
 593 |   box-shadow: var(--shadow-1);
 594 | }
 595 | 
 596 | .testimonials-item-title { margin-bottom: 7px; }
 597 | 
 598 | .testimonials-text {
 599 |   color: var(--light-gray);
 600 |   font-size: var(--fs-6);
 601 |   font-weight: var(--fw-300);
 602 |   line-height: 1.6;
 603 |   display: -webkit-box;
 604 |   line-clamp: 4;
 605 |   -webkit-line-clamp: 4;
 606 |   -webkit-box-orient: vertical;
 607 |   overflow: hidden;
 608 | }
 609 | 
 610 | 
 611 | /**
 612 |  * #testimonials-modal
 613 |  */
 614 | 
 615 | .modal-container {
 616 |   position: fixed;
 617 |   top: 0;
 618 |   left: 0;
 619 |   width: 100%;
 620 |   height: 100%;
 621 |   display: flex;
 622 |   justify-content: center;
 623 |   align-items: center;
 624 |   overflow-y: auto;
 625 |   overscroll-behavior: contain;
 626 |   z-index: 20;
 627 |   pointer-events: none;
 628 |   visibility: hidden;
 629 | }
 630 | 
 631 | .modal-container::-webkit-scrollbar { display: none; }
 632 | 
 633 | .modal-container.active {
 634 |   pointer-events: all;
 635 |   visibility: visible;
 636 | }
 637 | 
 638 | .overlay {
 639 |   position: fixed;
 640 |   top: 0;
 641 |   left: 0;
 642 |   width: 100%;
 643 |   height: 100vh;
 644 |   background: hsl(0, 0%, 5%);
 645 |   opacity: 0;
 646 |   visibility: hidden;
 647 |   pointer-events: none;
 648 |   z-index: 1;
 649 |   transition: var(--transition-1);
 650 | }
 651 | 
 652 | .overlay.active {
 653 |   opacity: 0.8;
 654 |   visibility: visible;
 655 |   pointer-events: all;
 656 | }
 657 | 
 658 | .testimonials-modal {
 659 |   background: var(--eerie-black-2);
 660 |   position: relative;
 661 |   padding: 15px;
 662 |   margin: 15px 12px;
 663 |   border: 1px solid var(--jet);
 664 |   border-radius: 14px;
 665 |   box-shadow: var(--shadow-5);
 666 |   transform: scale(1.2);
 667 |   opacity: 0;
 668 |   transition: var(--transition-1);
 669 |   z-index: 2;
 670 | }
 671 | 
 672 | .modal-container.active .testimonials-modal {
 673 |   transform: scale(1);
 674 |   opacity: 1;
 675 | }
 676 | 
 677 | .modal-close-btn {
 678 |   position: absolute;
 679 |   top: 15px;
 680 |   right: 15px;
 681 |   background: var(--onyx);
 682 |   border-radius: 8px;
 683 |   width: 32px;
 684 |   height: 32px;
 685 |   display: flex;
 686 |   justify-content: center;
 687 |   align-items: center;
 688 |   color: var(--white-2);
 689 |   font-size: 18px;
 690 |   opacity: 0.7;
 691 | }
 692 | 
 693 | .modal-close-btn:hover,
 694 | .modal-close-btn:focus { opacity: 1; }
 695 | 
 696 | .modal-close-btn ion-icon { --ionicon-stroke-width: 50px; }
 697 | 
 698 | .modal-avatar-box {
 699 |   background: var(--bg-gradient-onyx);
 700 |   width: max-content;
 701 |   border-radius: 14px;
 702 |   margin-bottom: 15px;
 703 |   box-shadow: var(--shadow-2);
 704 | }
 705 | 
 706 | .modal-img-wrapper > img { display: none; }
 707 | 
 708 | .modal-title { margin-bottom: 4px; }
 709 | 
 710 | .modal-content time {
 711 |   font-size: var(--fs-6);
 712 |   color: var(--light-gray-70);
 713 |   font-weight: var(--fw-300);
 714 |   margin-bottom: 10px;
 715 | }
 716 | 
 717 | .modal-content p {
 718 |   color: var(--light-gray);
 719 |   font-size: var(--fs-6);
 720 |   font-weight: var(--fw-300);
 721 |   line-height: 1.6;
 722 | }
 723 | 
 724 | 
 725 | /**
 726 |  * #clients 
 727 |  */
 728 | 
 729 | .clients { margin-bottom: 15px; }
 730 | 
 731 | .clients-list {
 732 |   display: flex;
 733 |   justify-content: flex-start;
 734 |   align-items: flex-start;
 735 |   gap: 15px;
 736 |   margin: 0 -15px;
 737 |   padding: 25px;
 738 |   padding-bottom: 25px;
 739 |   overflow-x: auto;
 740 |   scroll-behavior: smooth;
 741 |   overscroll-behavior-inline: contain;
 742 |   scroll-snap-type: inline mandatory;
 743 |   scroll-padding-inline: 25px;
 744 | }
 745 | 
 746 | .clients-item {
 747 |   min-width: 50%;
 748 |   scroll-snap-align: start;
 749 | }
 750 | 
 751 | .clients-item img {
 752 |   width: 100%;
 753 |   filter: grayscale(1);
 754 |   transition: var(--transition-1);
 755 | }
 756 | 
 757 | .clients-item img:hover { filter: grayscale(0); }
 758 | 
 759 | 
 760 | 
 761 | 
 762 | 
 763 | /*-----------------------------------*\
 764 |   #RESUME
 765 | \*-----------------------------------*/
 766 | 
 767 | .article-title { margin-bottom: 30px; }
 768 | 
 769 | 
 770 | /**
 771 |  * education and experience 
 772 |  */
 773 | 
 774 | .timeline { margin-bottom: 30px; }
 775 | 
 776 | .timeline .title-wrapper {
 777 |   display: flex;
 778 |   align-items: center;
 779 |   gap: 15px;
 780 |   margin-bottom: 25px;
 781 | }
 782 | 
 783 | .timeline-list {
 784 |   font-size: var(--fs-6);
 785 |   margin-left: 45px;
 786 | }
 787 | 
 788 | .timeline-item { position: relative; }
 789 | 
 790 | .timeline-item:not(:last-child) { margin-bottom: 20px; }
 791 | 
 792 | .timeline-item-title {
 793 |   font-size: var(--fs-6);
 794 |   line-height: 1.3;
 795 |   margin-bottom: 7px;
 796 | }
 797 | 
 798 | .timeline-list span {
 799 |   color: var(--vegas-gold);
 800 |   font-weight: var(--fw-400);
 801 |   line-height: 1.6;
 802 | }
 803 | 
 804 | .timeline-item:not(:last-child)::before {
 805 |   content: "";
 806 |   position: absolute;
 807 |   top: -25px;
 808 |   left: -30px;
 809 |   width: 1px;
 810 |   height: calc(100% + 50px);
 811 |   background: var(--jet);
 812 | }
 813 | 
 814 | .timeline-item::after {
 815 |   content: "";
 816 |   position: absolute;
 817 |   top: 5px;
 818 |   left: -33px;
 819 |   height: 6px;
 820 |   width: 6px;
 821 |   background: var(--text-gradient-yellow);
 822 |   border-radius: 50%;
 823 |   box-shadow: 0 0 0 4px var(--jet);
 824 | }
 825 | 
 826 | .timeline-text {
 827 |   color: var(--light-gray);
 828 |   font-weight: var(--fw-300);
 829 |   line-height: 1.6;
 830 | }
 831 | 
 832 | 
 833 | /**
 834 |  * skills 
 835 |  */
 836 | 
 837 | .skills-title { margin-bottom: 20px; }
 838 | 
 839 | .skills-list { padding: 20px; }
 840 | 
 841 | 
 842 | .skills-item:not(:last-child) { margin-bottom: 15px; }
 843 | 
 844 | .skill .title-wrapper {
 845 |   display: flex;
 846 |   align-items: center;
 847 |   gap: 5px;
 848 |   margin-bottom: 8px;
 849 | }
 850 | 
 851 | .skill .title-wrapper data {
 852 |   color: var(--light-gray);
 853 |   font-size: var(--fs-7);
 854 |   font-weight: var(--fw-300);
 855 | }
 856 | 
 857 | .skill-progress-bg {
 858 |   background: var(--jet);
 859 |   width: 100%;
 860 |   height: 8px;
 861 |   border-radius: 10px;
 862 | }
 863 | 
 864 | .skill-progress-fill {
 865 |   background: var(--text-gradient-yellow);
 866 |   height: 100%;
 867 |   border-radius: inherit;
 868 | }
 869 | 
 870 | 
 871 | 
 872 | 
 873 | 
 874 | /*-----------------------------------*\
 875 |   #PORTFOLIO
 876 | \*-----------------------------------*/
 877 | 
 878 | .filter-list { display: none; }
 879 | 
 880 | .filter-select-box {
 881 |   position: relative;
 882 |   margin-bottom: 25px;
 883 | }
 884 | 
 885 | .filter-select {
 886 |   background: var(--eerie-black-2);
 887 |   color: var(--light-gray);
 888 |   display: flex;
 889 |   justify-content: space-between;
 890 |   align-items: center;
 891 |   width: 100%;
 892 |   padding: 12px 16px;
 893 |   border: 1px solid var(--jet);
 894 |   border-radius: 14px;
 895 |   font-size: var(--fs-6);
 896 |   font-weight: var(--fw-300);
 897 | }
 898 | 
 899 | .filter-select.active .select-icon { transform: rotate(0.5turn); }
 900 | 
 901 | .select-list {
 902 |   background: var(--eerie-black-2);
 903 |   position: absolute;
 904 |   top: calc(100% + 6px);
 905 |   width: 100%;
 906 |   padding: 6px;
 907 |   border: 1px solid var(--jet);
 908 |   border-radius: 14px;
 909 |   z-index: 2;
 910 |   opacity: 0;
 911 |   visibility: hidden;
 912 |   pointer-events: none;
 913 |   transition: 0.15s ease-in-out;
 914 | }
 915 | 
 916 | .filter-select.active + .select-list {
 917 |   opacity: 1;
 918 |   visibility: visible;
 919 |   pointer-events: all;
 920 | }
 921 | 
 922 | .select-item button {
 923 |   background: var(--eerie-black-2);
 924 |   color: var(--light-gray);
 925 |   font-size: var(--fs-6);
 926 |   font-weight: var(--fw-300);
 927 |   text-transform: capitalize;
 928 |   width: 100%;
 929 |   padding: 8px 10px;
 930 |   border-radius: 8px;
 931 | }
 932 | 
 933 | .select-item button:hover { --eerie-black-2: hsl(240, 2%, 20%); }
 934 | 
 935 | .project-list {
 936 |   display: grid;
 937 |   grid-template-columns: 1fr;
 938 |   gap: 30px;
 939 |   margin-bottom: 10px;
 940 | }
 941 | 
 942 | .project-item { display: none; }
 943 | 
 944 | .project-item.active {
 945 |   display: block;
 946 |   animation: scaleUp 0.25s ease forwards;
 947 | }
 948 | 
 949 | @keyframes scaleUp {
 950 |   0% { transform: scale(0.5); }
 951 |   100% { transform: scale(1); }
 952 | }
 953 | 
 954 | .project-item > a { width: 100%; }
 955 | 
 956 | .project-img {
 957 |   position: relative;
 958 |   width: 100%;
 959 |   height: 200px;
 960 |   border-radius: 16px;
 961 |   overflow: hidden;
 962 |   margin-bottom: 15px;
 963 | }
 964 | 
 965 | .project-img::before {
 966 |   content: "";
 967 |   position: absolute;
 968 |   top: 0;
 969 |   left: 0;
 970 |   width: 100%;
 971 |   height: 100%;
 972 |   background: transparent;
 973 |   z-index: 1;
 974 |   transition: var(--transition-1);
 975 | }
 976 | 
 977 | .project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, 0.5); }
 978 | 
 979 | .project-item-icon-box {
 980 |   --scale: 0.8;
 981 | 
 982 |   background: var(--jet);
 983 |   color: var(--orange-yellow-crayola);
 984 |   position: absolute;
 985 |   top: 50%;
 986 |   left: 50%;
 987 |   transform: translate(-50%, -50%) scale(var(--scale));
 988 |   font-size: 20px;
 989 |   padding: 18px;
 990 |   border-radius: 12px;
 991 |   opacity: 0;
 992 |   z-index: 1;
 993 |   transition: var(--transition-1);
 994 | }
 995 | 
 996 | .project-item > a:hover .project-item-icon-box {
 997 |   --scale: 1;
 998 |   opacity: 1;
 999 | }
1000 | 
1001 | .project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }
1002 | 
1003 | .project-img img {
1004 |   width: 100%;
1005 |   height: 100%;
1006 |   object-fit: cover;
1007 |   transition: var(--transition-1);
1008 | }
1009 | 
1010 | .project-item > a:hover img { transform: scale(1.1); }
1011 | 
1012 | .project-title,
1013 | .project-category { margin-left: 10px; }
1014 | 
1015 | .project-title {
1016 |   color: var(--white-2);
1017 |   font-size: var(--fs-5);
1018 |   font-weight: var(--fw-400);
1019 |   text-transform: capitalize;
1020 |   line-height: 1.3;
1021 | }
1022 | 
1023 | .project-category {
1024 |   color: var(--light-gray-70);
1025 |   font-size: var(--fs-6);
1026 |   font-weight: var(--fw-300);
1027 | }
1028 | 
1029 | 
1030 | 
1031 | 
1032 | 
1033 | /*-----------------------------------*\
1034 |   #BLOG
1035 | \*-----------------------------------*/
1036 | 
1037 | .blog-posts { margin-bottom: 10px; }
1038 | 
1039 | .blog-posts-list {
1040 |   display: grid;
1041 |   grid-template-columns: 1fr;
1042 |   gap: 20px;
1043 | }
1044 | 
1045 | .blog-post-item > a {
1046 |   position: relative;
1047 |   background: var(--border-gradient-onyx);
1048 |   height: 100%;
1049 |   box-shadow: var(--shadow-4);
1050 |   border-radius: 16px;
1051 |   z-index: 1;
1052 | }
1053 | 
1054 | .blog-post-item > a::before {
1055 |   content: "";
1056 |   position: absolute;
1057 |   inset: 1px;
1058 |   border-radius: inherit;
1059 |   background: var(--eerie-black-1);
1060 |   z-index: -1;
1061 | }
1062 | 
1063 | .blog-banner-box {
1064 |   width: 100%;
1065 |   height: 200px;
1066 |   border-radius: 12px;
1067 |   overflow: hidden;
1068 | }
1069 | 
1070 | .blog-banner-box img {
1071 |   width: 100%;
1072 |   height: 100%;
1073 |   object-fit: cover;
1074 |   transition: var(--transition-1);
1075 | }
1076 | 
1077 | .blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); }
1078 | 
1079 | .blog-content { padding: 15px; }
1080 | 
1081 | .blog-meta {
1082 |   display: flex;
1083 |   justify-content: flex-start;
1084 |   align-items: center;
1085 |   gap: 7px;
1086 |   margin-bottom: 10px;
1087 | }
1088 | 
1089 | .blog-meta :is(.blog-category, time) {
1090 |   color: var(--light-gray-70);
1091 |   font-size: var(--fs-6);
1092 |   font-weight: var(--fw-300);
1093 | }
1094 | 
1095 | .blog-meta .dot {
1096 |   background: var(--light-gray-70);
1097 |   width: 4px;
1098 |   height: 4px;
1099 |   border-radius: 4px;
1100 | }
1101 | 
1102 | .blog-item-title {
1103 |   margin-bottom: 10px;
1104 |   line-height: 1.3;
1105 |   transition: var(--transition-1);
1106 | }
1107 | 
1108 | .blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); }
1109 | 
1110 | .blog-text {
1111 |   color: var(--light-gray);
1112 |   font-size: var(--fs-6);
1113 |   font-weight: var(--fw-300);
1114 |   line-height: 1.6;
1115 | }
1116 | 
1117 | 
1118 | 
1119 | 
1120 | 
1121 | /*-----------------------------------*\
1122 |   #CONTACT
1123 | \*-----------------------------------*/
1124 | 
1125 | .mapbox {
1126 |   position: relative;
1127 |   height: 250px;
1128 |   width: 100%;
1129 |   border-radius: 16px;
1130 |   margin-bottom: 30px;
1131 |   border: 1px solid var(--jet);
1132 |   overflow: hidden;
1133 | }
1134 | 
1135 | .mapbox figure { height: 100%; }
1136 | 
1137 | .mapbox iframe {
1138 |   width: 100%;
1139 |   height: 100%;
1140 |   border: none;
1141 |   filter: grayscale(1) invert(1);
1142 | }
1143 | 
1144 | .contact-form { margin-bottom: 10px; }
1145 | 
1146 | .form-title { margin-bottom: 20px; }
1147 | 
1148 | .input-wrapper {
1149 |   display: grid;
1150 |   grid-template-columns: 1fr;
1151 |   gap: 25px;
1152 |   margin-bottom: 25px;
1153 | }
1154 | 
1155 | .form-input {
1156 |   color: var(--white-2);
1157 |   font-size: var(--fs-6);
1158 |   font-weight: var(--fw-400);
1159 |   padding: 13px 20px;
1160 |   border: 1px solid var(--jet);
1161 |   border-radius: 14px;
1162 |   outline: none;
1163 | }
1164 | 
1165 | .form-input::placeholder { font-weight: var(--fw-500); }
1166 | 
1167 | .form-input:focus { border-color: var(--orange-yellow-crayola); }
1168 | 
1169 | textarea.form-input {
1170 |   min-height: 100px;
1171 |   height: 120px;
1172 |   max-height: 200px;
1173 |   resize: vertical;
1174 |   margin-bottom: 25px;
1175 | }
1176 | 
1177 | textarea.form-input::-webkit-resizer { display: none; }
1178 | 
1179 | .form-input:focus:invalid { border-color: var(--bittersweet-shimmer); }
1180 | 
1181 | .form-btn {
1182 |   position: relative;
1183 |   width: 100%;
1184 |   background: var(--border-gradient-onyx);
1185 |   color: var(--orange-yellow-crayola);
1186 |   display: flex;
1187 |   justify-content: center;
1188 |   align-items: center;
1189 |   gap: 10px;
1190 |   padding: 13px 20px;
1191 |   border-radius: 14px;
1192 |   font-size: var(--fs-6);
1193 |   text-transform: capitalize;
1194 |   box-shadow: var(--shadow-3);
1195 |   z-index: 1;
1196 |   transition: var(--transition-1);
1197 | }
1198 | 
1199 | .form-btn::before {
1200 |   content: "";
1201 |   position: absolute;
1202 |   inset: 1px;
1203 |   background: var(--bg-gradient-jet);
1204 |   border-radius: inherit;
1205 |   z-index: -1;
1206 |   transition: var(--transition-1);
1207 | }
1208 | 
1209 | .form-btn ion-icon { font-size: 16px; }
1210 | 
1211 | .form-btn:hover { background: var(--bg-gradient-yellow-1); }
1212 | 
1213 | .form-btn:hover::before { background: var(--bg-gradient-yellow-2); }
1214 | 
1215 | .form-btn:disabled {
1216 |   opacity: 0.7;
1217 |   cursor: not-allowed;
1218 | }
1219 | 
1220 | .form-btn:disabled:hover { background: var(--border-gradient-onyx); }
1221 | 
1222 | .form-btn:disabled:hover::before { background: var(--bg-gradient-jet); }
1223 | 
1224 | 
1225 | 
1226 | 
1227 | 
1228 | /*-----------------------------------*\
1229 |   #RESPONSIVE
1230 | \*-----------------------------------*/
1231 | 
1232 | /**
1233 |  * responsive larger than 450px screen
1234 |  */
1235 | 
1236 | @media (min-width: 450px) {
1237 | 
1238 |   /**
1239 |    * client
1240 |    */
1241 | 
1242 |   .clients-item { min-width: calc(33.33% - 10px); }
1243 | 
1244 | 
1245 | 
1246 |   /**
1247 |    * #PORTFOLIO, BLOG 
1248 |    */
1249 | 
1250 |   .project-img,
1251 |   .blog-banner-box { height: auto; }
1252 | 
1253 | }
1254 | 
1255 | 
1256 | 
1257 | 
1258 | 
1259 | /**
1260 |  * responsive larger than 580px screen
1261 |  */
1262 | 
1263 | @media (min-width: 580px) {
1264 | 
1265 |   /**
1266 |    * CUSTOM PROPERTY
1267 |    */
1268 | 
1269 |   :root {
1270 | 
1271 |     /**
1272 |      * typography
1273 |      */
1274 | 
1275 |     --fs-1: 32px;
1276 |     --fs-2: 24px;
1277 |     --fs-3: 26px;
1278 |     --fs-4: 18px;
1279 |     --fs-6: 15px;
1280 |     --fs-7: 15px;
1281 |     --fs-8: 12px;
1282 | 
1283 |   }
1284 | 
1285 | 
1286 | 
1287 |   /**
1288 |    * #REUSED STYLE
1289 |    */
1290 | 
1291 |   .sidebar, article {
1292 |     width: 520px;
1293 |     margin-inline: auto;
1294 |     padding: 30px;
1295 |   }
1296 | 
1297 |   .article-title {
1298 |     font-weight: var(--fw-600);
1299 |     padding-bottom: 15px;
1300 |   }
1301 | 
1302 |   .article-title::after {
1303 |     width: 40px;
1304 |     height: 5px;
1305 |   }
1306 | 
1307 |   .icon-box {
1308 |     width: 48px;
1309 |     height: 48px;
1310 |     border-radius: 12px;
1311 |     font-size: 18px;
1312 |   }
1313 | 
1314 | 
1315 | 
1316 |   /**
1317 |    * #MAIN
1318 |    */
1319 | 
1320 |   main {
1321 |     margin-top: 60px;
1322 |     margin-bottom: 100px;
1323 |   }
1324 | 
1325 | 
1326 | 
1327 |   /**
1328 |    * #SIDEBAR
1329 |    */
1330 | 
1331 |   .sidebar {
1332 |     max-height: 180px;
1333 |     margin-bottom: 30px;
1334 |   }
1335 | 
1336 |   .sidebar.active { max-height: 584px; }
1337 | 
1338 |   .sidebar-info { gap: 25px; }
1339 | 
1340 |   .avatar-box { border-radius: 30px; }
1341 | 
1342 |   .avatar-box img { width: 120px; }
1343 | 
1344 |   .info-content .name { margin-bottom: 15px; }
1345 | 
1346 |   .info-content .title { padding: 5px 18px; }
1347 | 
1348 |   .info_more-btn {
1349 |     top: -30px;
1350 |     right: -30px;
1351 |     padding: 10px 15px;
1352 |   }
1353 | 
1354 |   .info_more-btn span {
1355 |     display: block;
1356 |     font-size: var(--fs-8);
1357 |   }
1358 | 
1359 |   .info_more-btn ion-icon { display: none; }
1360 | 
1361 |   .separator { margin: 32px 0; }
1362 | 
1363 |   .contacts-list { gap: 20px; }
1364 | 
1365 |   .contact-info {
1366 |     max-width: calc(100% - 64px);
1367 |     width: calc(100% - 64px);
1368 |   }
1369 | 
1370 | 
1371 | 
1372 |   /**
1373 |    * #NAVBAR
1374 |    */
1375 | 
1376 |   .navbar { border-radius: 20px 20px 0 0; }
1377 | 
1378 |   .navbar-list { gap: 20px; }
1379 | 
1380 |   .navbar-link { --fs-8: 14px; }
1381 | 
1382 | 
1383 | 
1384 |   /**
1385 |    * #ABOUT
1386 |    */
1387 | 
1388 |   .about .article-title { margin-bottom: 20px; }
1389 | 
1390 |   .about-text { margin-bottom: 40px; }
1391 | 
1392 |   /* service */
1393 | 
1394 |   .service-item {
1395 |     display: flex;
1396 |     justify-content: flex-start;
1397 |     align-items: flex-start;
1398 |     gap: 18px;
1399 |     padding: 30px;
1400 |   }
1401 | 
1402 |   .service-icon-box {
1403 |     margin-bottom: 0;
1404 |     margin-top: 5px;
1405 |   }
1406 | 
1407 |   .service-content-box { text-align: left; }
1408 | 
1409 |   /* testimonials */
1410 | 
1411 |   .testimonials-title { margin-bottom: 25px; }
1412 | 
1413 |   .testimonials-list {
1414 |     gap: 30px;
1415 |     margin: 0 -30px;
1416 |     padding: 30px;
1417 |     padding-bottom: 35px;
1418 |   }
1419 | 
1420 |   .content-card {
1421 |     padding: 30px;
1422 |     padding-top: 25px;
1423 |   }
1424 | 
1425 |   .testimonials-avatar-box {
1426 |     transform: translate(30px, -30px);
1427 |     border-radius: 20px;
1428 |   }
1429 | 
1430 |   .testimonials-avatar-box img { width: 80px; }
1431 | 
1432 |   .testimonials-item-title {
1433 |     margin-bottom: 10px;
1434 |     margin-left: 95px;
1435 |   }
1436 | 
1437 |   .testimonials-text {
1438 |     line-clamp: 2;
1439 |     -webkit-line-clamp: 2;
1440 |   }
1441 | 
1442 |   /* testimonials modal */
1443 | 
1444 |   .modal-container { padding: 20px; }
1445 | 
1446 |   .testimonials-modal {
1447 |     display: flex;
1448 |     justify-content: flex-start;
1449 |     align-items: stretch;
1450 |     gap: 25px;
1451 |     padding: 30px;
1452 |     border-radius: 20px;
1453 |   }
1454 | 
1455 |   .modal-img-wrapper {
1456 |     display: flex;
1457 |     flex-direction: column;
1458 |     align-items: center;
1459 |   }
1460 | 
1461 |   .modal-avatar-box {
1462 |     border-radius: 18px;
1463 |     margin-bottom: 0;
1464 |   }
1465 | 
1466 |   .modal-avatar-box img { width: 65px; }
1467 | 
1468 |   .modal-img-wrapper > img {
1469 |     display: block;
1470 |     flex-grow: 1;
1471 |     width: 35px;
1472 |   }
1473 | 
1474 |   /* clients */
1475 | 
1476 |   .clients-list {
1477 |     gap: 50px;
1478 |     margin: 0 -30px;
1479 |     padding: 45px;
1480 |     scroll-padding-inline: 45px;
1481 |   }
1482 | 
1483 |   .clients-item { min-width: calc(33.33% - 35px); }
1484 | 
1485 | 
1486 | 
1487 |   /**
1488 |    * #RESUME
1489 |    */
1490 | 
1491 |   .timeline-list { margin-left: 65px; }
1492 | 
1493 |   .timeline-item:not(:last-child)::before { left: -40px; }
1494 | 
1495 |   .timeline-item::after {
1496 |     height: 8px;
1497 |     width: 8px;
1498 |     left: -43px;
1499 |   }
1500 | 
1501 |   .skills-item:not(:last-child) { margin-bottom: 25px; }
1502 | 
1503 | 
1504 | 
1505 |   /**
1506 |    * #PORTFOLIO, BLOG
1507 |    */
1508 | 
1509 |   .project-img, .blog-banner-box { border-radius: 16px; }
1510 | 
1511 |   .blog-posts-list { gap: 30px; }
1512 | 
1513 |   .blog-content { padding: 25px; }
1514 | 
1515 | 
1516 | 
1517 |   /**
1518 |    * #CONTACT
1519 |    */
1520 | 
1521 |   .mapbox {
1522 |     height: 380px;
1523 |     border-radius: 18px;
1524 |   }
1525 | 
1526 |   .input-wrapper {
1527 |     gap: 30px;
1528 |     margin-bottom: 30px;
1529 |   }
1530 | 
1531 |   .form-input { padding: 15px 20px; }
1532 | 
1533 |   textarea.form-input { margin-bottom: 30px; }
1534 | 
1535 |   .form-btn {
1536 |     --fs-6: 16px;
1537 |     padding: 16px 20px;
1538 |   }
1539 | 
1540 |   .form-btn ion-icon { font-size: 18px; }
1541 | 
1542 | }
1543 | 
1544 | 
1545 | 
1546 | 
1547 | 
1548 | /**
1549 |  * responsive larger than 768px screen
1550 |  */
1551 | 
1552 | @media (min-width: 768px) {
1553 | 
1554 |   /**
1555 |    * REUSED STYLE
1556 |    */
1557 | 
1558 |   .sidebar, article { width: 700px; }
1559 | 
1560 |   .has-scrollbar::-webkit-scrollbar-button { width: 100px; }
1561 | 
1562 | 
1563 | 
1564 |   /**
1565 |    * SIDEBAR
1566 |    */
1567 | 
1568 |   .contacts-list {
1569 |     grid-template-columns: 1fr 1fr;
1570 |     gap: 30px 15px;
1571 |   }
1572 | 
1573 | 
1574 | 
1575 |   /**
1576 |    * NAVBAR
1577 |    */
1578 | 
1579 |   .navbar-link { --fs-8: 15px; }
1580 | 
1581 | 
1582 | 
1583 |   /**
1584 |    * ABOUT
1585 |    */
1586 | 
1587 |   /* testimonials modal */
1588 | 
1589 |   .testimonials-modal {
1590 |     gap: 35px;
1591 |     max-width: 680px;
1592 |   }
1593 | 
1594 |   .modal-avatar-box img { width: 80px; }
1595 | 
1596 | 
1597 | 
1598 |   /**
1599 |    * PORTFOLIO
1600 |    */
1601 | 
1602 |   .article-title { padding-bottom: 20px; }
1603 | 
1604 |   .filter-select-box { display: none; }
1605 | 
1606 |   .filter-list {
1607 |     display: flex;
1608 |     justify-content: flex-start;
1609 |     align-items: center;
1610 |     gap: 25px;
1611 |     padding-left: 5px;
1612 |     margin-bottom: 30px;
1613 |   }
1614 | 
1615 |   .filter-item button {
1616 |     color: var(--light-gray);
1617 |     font-size: var(--fs-5);
1618 |     transition: var(--transition-1);
1619 |   }
1620 | 
1621 |   .filter-item button:hover { color: var(--light-gray-70); }
1622 | 
1623 |   .filter-item button.active { color: var(--orange-yellow-crayola); }
1624 | 
1625 |   /* portfolio and blog grid */
1626 | 
1627 |   .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }
1628 | 
1629 | 
1630 | 
1631 |   /**
1632 |    * CONTACT
1633 |    */
1634 | 
1635 |   .input-wrapper { grid-template-columns: 1fr 1fr; }
1636 | 
1637 |   .form-btn {
1638 |     width: max-content;
1639 |     margin-left: auto;
1640 |   }
1641 |   
1642 | }
1643 | 
1644 | 
1645 | 
1646 | 
1647 | 
1648 | /**
1649 |  * responsive larger than 1024px screen
1650 |  */
1651 | 
1652 | @media (min-width: 1024px) {
1653 | 
1654 |   /**
1655 |    * CUSTOM PROPERTY
1656 |    */
1657 | 
1658 |   :root {
1659 | 
1660 |     /**
1661 |     * shadow
1662 |     */
1663 | 
1664 |     --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
1665 |     --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
1666 |     --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);
1667 | 
1668 |   }
1669 | 
1670 | 
1671 | 
1672 |   /**
1673 |    * REUSED STYLE
1674 |    */
1675 | 
1676 |   .sidebar, article {
1677 |     width: 950px;
1678 |     box-shadow: var(--shadow-5);
1679 |   }
1680 | 
1681 | 
1682 | 
1683 |   /**
1684 |    * MAIN 
1685 |    */
1686 | 
1687 |   main { margin-bottom: 60px; }
1688 | 
1689 |   .main-content {
1690 |     position: relative;
1691 |     width: max-content;
1692 |     margin: auto;
1693 |   }
1694 | 
1695 | 
1696 | 
1697 |   /**
1698 |    * NAVBAR
1699 |    */
1700 | 
1701 |   .navbar {
1702 |     position: absolute;
1703 |     bottom: auto;
1704 |     top: 0;
1705 |     left: auto;
1706 |     right: 0;
1707 |     width: max-content;
1708 |     border-radius: 0 20px;
1709 |     padding: 0 20px;
1710 |     box-shadow: none;
1711 |   }
1712 | 
1713 |   .navbar-list {
1714 |     gap: 30px;
1715 |     padding: 0 20px;
1716 |   }
1717 | 
1718 |   .navbar-link { font-weight: var(--fw-500); }
1719 | 
1720 | 
1721 | 
1722 |   /**
1723 |    * ABOUT
1724 |    */
1725 | 
1726 |   /* service */
1727 | 
1728 |   .service-list {
1729 |     grid-template-columns: 1fr 1fr;
1730 |     gap: 20px 25px;
1731 |   }
1732 | 
1733 |   /* testimonials */
1734 | 
1735 |   .testimonials-item { min-width: calc(50% - 15px); }
1736 | 
1737 |   /* clients */
1738 | 
1739 |   .clients-item { min-width: calc(25% - 38px); }
1740 | 
1741 | 
1742 | 
1743 |   /**
1744 |    * PORTFOLIO
1745 |    */
1746 | 
1747 |   .project-list { grid-template-columns: repeat(3, 1fr); }
1748 | 
1749 | 
1750 | 
1751 |   /**
1752 |    * BLOG
1753 |    */
1754 | 
1755 |   .blog-banner-box { height: 230px; }
1756 | 
1757 | }
1758 | 
1759 | 
1760 | 
1761 | 
1762 | 
1763 | /**
1764 |  * responsive larger than 1250px screen
1765 |  */
1766 | 
1767 | @media (min-width: 1250px) {
1768 | 
1769 |   /**
1770 |    * RESET
1771 |    */
1772 | 
1773 |   body::-webkit-scrollbar { width: 20px; }
1774 | 
1775 |   body::-webkit-scrollbar-track { background: var(--smoky-black); }
1776 | 
1777 |   body::-webkit-scrollbar-thumb {
1778 |     border: 5px solid var(--smoky-black);
1779 |     background: hsla(0, 0%, 100%, 0.1);
1780 |     border-radius: 20px;
1781 |     box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11),
1782 |                 inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
1783 |   }
1784 | 
1785 |   body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); }
1786 | 
1787 |   body::-webkit-scrollbar-button { height: 60px; }
1788 | 
1789 | 
1790 | 
1791 |   /**
1792 |    * REUSED STYLE
1793 |    */
1794 | 
1795 |   .sidebar, article { width: auto; }
1796 | 
1797 |   article { min-height: 100%; }
1798 | 
1799 | 
1800 | 
1801 |   /**
1802 |    * MAIN
1803 |    */
1804 | 
1805 |   main {
1806 |     max-width: 1200px;
1807 |     margin-inline: auto;
1808 |     display: flex;
1809 |     justify-content: center;
1810 |     align-items: stretch;
1811 |     gap: 25px;
1812 |   }
1813 | 
1814 |   .main-content {
1815 |     min-width: 75%;
1816 |     width: 75%;
1817 |     margin: 0;
1818 |   }
1819 | 
1820 | 
1821 | 
1822 |   /**
1823 |    * SIDEBAR
1824 |    */
1825 | 
1826 |   .sidebar {
1827 |     position: sticky;
1828 |     top: 60px;
1829 |     max-height: max-content;
1830 |     height: 100%;
1831 |     margin-bottom: 0;
1832 |     padding-top: 60px;
1833 |     z-index: 1;
1834 |   }
1835 | 
1836 |   .sidebar-info { flex-direction: column; }
1837 | 
1838 |   .avatar-box img { width: 150px; }
1839 | 
1840 |   .info-content .name {
1841 |     white-space: nowrap;
1842 |     text-align: center;
1843 |   }
1844 | 
1845 |   .info-content .title { margin: auto; }
1846 | 
1847 |   .info_more-btn { display: none; }
1848 | 
1849 |   .sidebar-info_more {
1850 |     opacity: 1;
1851 |     visibility: visible;
1852 |   }
1853 | 
1854 |   .contacts-list { grid-template-columns: 1fr; }
1855 | 
1856 |   .contact-info :is(.contact-link) {
1857 |     white-space: nowrap;
1858 |     overflow: hidden;
1859 |     text-overflow: ellipsis;
1860 |   }
1861 | 
1862 |   .contact-info :is(.contact-link, time, address) {
1863 |     --fs-7: 14px;
1864 |     font-weight: var(--fw-300);
1865 |   }
1866 | 
1867 |   .separator:last-of-type {
1868 |     margin: 15px 0;
1869 |     opacity: 0;
1870 |   }
1871 | 
1872 |   .social-list { justify-content: center; }
1873 | 
1874 | 
1875 | 
1876 |   /**
1877 | 	 * RESUME
1878 | 	 */
1879 | 
1880 |   .timeline-text { max-width: 700px; }
1881 | 
1882 | }


--------------------------------------------------------------------------------
/vcard/assets/images/Testimonials1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/vcard/assets/images/Testimonials1.png


--------------------------------------------------------------------------------
/vcard/assets/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/vcard/assets/images/favicon.ico


--------------------------------------------------------------------------------
/vcard/assets/images/icon-app.svg:
--------------------------------------------------------------------------------
 1 | <svg width="40" height="40" viewBox="0 0 22 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M3 1C1.89543 1 1 1.89543 1 3V37C1 38.1046 1.89543 39 3 39H18.9C20.0046 39 20.9 38.1046 20.9 37V3C20.9 1.89543 20.0046 1 18.9 1H15.6631V2H6.23676V1H3Z" fill="url(#paint0_linear)"/>
 3 | <path d="M8.50854 35.6745C8.13501 35.6745 7.83221 35.9773 7.83221 36.3508C7.83221 36.7243 8.13501 37.0271 8.50854 37.0271V35.6745ZM13.4633 37.0271C13.8368 37.0271 14.1396 36.7243 14.1396 36.3508C14.1396 35.9773 13.8368 35.6745 13.4633 35.6745V37.0271ZM0.400024 29.4141C0.400024 29.7876 0.702827 30.0904 1.07635 30.0904C1.44988 30.0904 1.75268 29.7876 1.75268 29.4141H0.400024ZM1.75268 32.387C1.75268 32.0134 1.44988 31.7106 1.07635 31.7106C0.702827 31.7106 0.400024 32.0134 0.400024 32.387H1.75268ZM20.2192 7.61303C20.2192 7.98656 20.522 8.28936 20.8955 8.28936C21.269 8.28936 21.5718 7.98656 21.5718 7.61303H20.2192ZM21.5718 10.5859C21.5718 10.2124 21.269 9.90956 20.8955 9.90956C20.522 9.90956 20.2192 10.2124 20.2192 10.5859H21.5718ZM18.48 38.6473H3.49181V40H18.48V38.6473ZM3.49181 1.35266H6.52662V0H3.49181V1.35266ZM5.8503 1.69206H7.20295V0.676328H5.8503V1.69206ZM7.49281 3.33457H14.4791V1.98191H7.49281V3.33457ZM6.52662 1.35266H15.4452V0H6.52662V1.35266ZM15.4452 1.35266H18.48V0H15.4452V1.35266ZM16.1216 1.69206V0.676328H14.7689V1.69206H16.1216ZM8.50854 37.0271H13.4633V35.6745H8.50854V37.0271ZM1.75268 29.4141V3.09179H0.400024V29.4141H1.75268ZM1.75268 36.9082V32.387H0.400024V36.9082H1.75268ZM20.2192 3.09179V7.61303H21.5718V3.09179H20.2192ZM20.2192 10.5859V36.9082H21.5718V10.5859H20.2192ZM14.4791 3.33457C15.3862 3.33457 16.1216 2.5992 16.1216 1.69206H14.7689C14.7689 1.85214 14.6392 1.98191 14.4791 1.98191V3.33457ZM3.49181 38.6473C2.53132 38.6473 1.75268 37.8687 1.75268 36.9082H0.400024C0.400024 38.6157 1.78427 40 3.49181 40V38.6473ZM18.48 40C20.1876 40 21.5718 38.6157 21.5718 36.9082H20.2192C20.2192 37.8687 19.4405 38.6473 18.48 38.6473V40ZM18.48 1.35266C19.4405 1.35266 20.2192 2.13129 20.2192 3.09179H21.5718C21.5718 1.38424 20.1876 0 18.48 0V1.35266ZM5.8503 1.69206C5.8503 2.5992 6.58567 3.33457 7.49281 3.33457V1.98191C7.33272 1.98191 7.20295 1.85214 7.20295 1.69206H5.8503ZM3.49181 0C1.78427 0 0.400024 1.38424 0.400024 3.09179H1.75268C1.75268 2.13129 2.53132 1.35266 3.49181 1.35266V0Z" fill="url(#paint1_linear)"/>
 4 | <defs>
 5 | <linearGradient id="paint0_linear" x1="2.12767" y1="1" x2="30.7018" y2="17.5237" gradientUnits="userSpaceOnUse">
 6 | <stop offset="0.259336" stop-color="#FFDB6E"/>
 7 | <stop offset="1" stop-color="#FFBC5E"/>
 8 | </linearGradient>
 9 | <linearGradient id="paint1_linear" x1="1.59976" y1="8.08974e-07" x2="31.8368" y2="17.6727" gradientUnits="userSpaceOnUse">
10 | <stop offset="0.259336" stop-color="#FFDB6E"/>
11 | <stop offset="1" stop-color="#FFBC5E"/>
12 | </linearGradient>
13 | </defs>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/vcard/assets/images/icon-design.svg:
--------------------------------------------------------------------------------
 1 | <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M40.6377 19.814C40.4183 19.7228 40.1658 19.7732 39.9978 19.9416L38.2394 21.7057V9.71161C38.2394 9.38628 37.9766 9.12261 37.6523 9.12261H33.1413L34.7788 7.47985L34.7795 7.47906L36.3573 5.89617C36.6954 5.55704 36.8816 5.10591 36.8816 4.62624C36.8816 4.14658 36.6954 3.6956 36.3573 3.35631L34.5328 1.52591C34.1948 1.18677 33.7451 1 33.2669 1C32.7888 1 32.3392 1.18677 32.0011 1.52591L30.4225 3.10958L28.515 5.02322L24.4288 9.12254H6.2047V3.29564C6.2047 2.9703 5.94181 2.70665 5.61759 2.70665C3.07149 2.70681 1 4.7848 1 7.33924V32.3559C1 32.3994 1.005 32.4417 1.01391 32.4825C1.095 33.5664 1.56242 34.5734 2.3436 35.3379C3.1786 36.1549 4.28087 36.6048 5.44743 36.6048H23.3879L20.0091 39.9946C19.8412 40.163 19.791 40.4162 19.8818 40.6364C19.9727 40.8565 20.1868 41 20.4243 41H40.413C40.7372 41 41.0001 40.7364 41.0001 40.411V20.3582C41.0001 20.12 40.857 19.9052 40.6377 19.814ZM32.8315 2.35897C33.0715 2.11804 33.4626 2.11804 33.7026 2.35897L35.5272 4.18945C35.7673 4.4303 35.7673 4.82242 35.5272 5.06335L34.3638 6.23053L31.668 3.52615L32.8315 2.35897ZM30.8377 4.35913L33.5334 7.06343L32.4562 8.14417L29.7606 5.43987L30.8377 4.35913ZM18.3967 21.76L16.715 22.3556L15.5945 21.2315L16.1882 19.5444L18.3967 21.76ZM35.8293 30.1707L30.1707 35.8293C30.1077 35.8923 30.1523 36 30.2414 36H36V30.2414C36 30.1523 35.8923 30.1077 35.8293 30.1707ZM16 18.5L19.5 22L32.5 9L29 5.5L16 18.5Z" fill="url(#paint0_linear)"/>
 3 | <path d="M36.3998 29.2549C36.1804 29.1637 35.9279 29.2141 35.76 29.3825L29.3439 35.8193C29.176 35.9878 29.1257 36.2411 29.2167 36.4612C29.3075 36.6814 29.5217 36.8248 29.7591 36.8248H36.1752C36.4995 36.8248 36.7623 36.5611 36.7623 36.2358V29.799C36.7622 29.5609 36.6192 29.3461 36.3998 29.2549ZM31.1763 35.6469L35.5879 31.221V35.6469H31.1763Z" fill="url(#paint1_linear)" stroke="url(#paint2_linear)" stroke-width="0.25"/>
 4 | <path d="M40.6377 19.814C40.4183 19.7228 40.1658 19.7732 39.9978 19.9416L38.2394 21.7057V9.71161C38.2394 9.38628 37.9766 9.12261 37.6523 9.12261H33.1413L34.7788 7.47985C34.7791 7.47962 34.7793 7.47929 34.7795 7.47906L36.3573 5.89617C36.6954 5.55704 36.8816 5.10591 36.8816 4.62624C36.8816 4.14658 36.6954 3.6956 36.3573 3.35631L34.5328 1.52591C34.1948 1.18677 33.7451 1 33.2669 1C32.7888 1 32.3392 1.18677 32.0011 1.52591L30.4225 3.10958L28.515 5.02322L24.4288 9.12254H6.2047V3.29564C6.2047 2.9703 5.94181 2.70665 5.61759 2.70665C3.07149 2.70681 1 4.7848 1 7.33924V32.3559C1 32.3994 1.005 32.4417 1.01391 32.4825C1.095 33.5664 1.56242 34.5734 2.3436 35.3379C3.1786 36.1549 4.28087 36.6048 5.44743 36.6048H23.3879L20.0091 39.9946C19.8412 40.163 19.791 40.4162 19.8818 40.6364C19.9727 40.8565 20.1868 41 20.4243 41H40.413C40.7372 41 41.0001 40.7364 41.0001 40.411V20.3582C41.0001 20.12 40.857 19.9052 40.6377 19.814ZM32.8315 2.35897C33.0715 2.11804 33.4626 2.11804 33.7026 2.35897L35.5272 4.18945C35.7673 4.4303 35.7673 4.82242 35.5272 5.06335L34.3638 6.23053L31.668 3.52615L32.8315 2.35897ZM30.8377 4.35913L33.5334 7.06343L32.4562 8.14417L29.7606 5.43987L30.8377 4.35913ZM39.826 26.9764H38.7428C38.4185 26.9764 38.1557 27.2401 38.1557 27.5654C38.1557 27.8908 38.4185 28.1544 38.7428 28.1544H39.826V29.9293H38.7428C38.4185 29.9293 38.1557 30.1931 38.1557 30.5184C38.1557 30.8437 38.4185 31.1074 38.7428 31.1074H39.826V32.8822H38.7428C38.4185 32.8822 38.1557 33.1458 38.1557 33.4712C38.1557 33.7965 38.4185 34.0602 38.7428 34.0602H39.826V35.8351H38.7428C38.4185 35.8351 38.1557 36.0988 38.1557 36.4241C38.1557 36.7495 38.4185 37.0131 38.7428 37.0131H39.826V39.8222H21.8416L27.7719 33.873C28.0012 33.6428 28.0012 33.27 27.7719 33.04C27.7456 33.0135 27.7173 32.9906 27.6877 32.9703C27.4591 32.8133 27.1446 32.8363 26.9415 33.04L24.5622 35.427H5.44751C3.66688 35.427 2.23344 34.0324 2.17703 32.2493C2.18039 32.1373 2.18906 32.0263 2.20297 31.9166C2.20305 31.916 2.20313 31.9154 2.20321 31.9147C2.20977 31.8626 2.21766 31.8107 2.22664 31.7592C2.22766 31.7533 2.22875 31.7473 2.22977 31.7415C2.23797 31.6955 2.24719 31.6497 2.25727 31.6041C2.26008 31.5914 2.26305 31.5787 2.26602 31.5661C2.27492 31.5275 2.28453 31.4892 2.29485 31.451C2.30047 31.4303 2.30633 31.4099 2.31235 31.3893C2.32094 31.3593 2.32985 31.3295 2.3393 31.2999C2.34875 31.2704 2.35883 31.2411 2.36907 31.2119C2.37617 31.1915 2.38321 31.171 2.39086 31.1507C2.40516 31.1121 2.42032 31.074 2.43594 31.0361C2.44039 31.0252 2.44477 31.0142 2.44938 31.0033C2.46946 30.9562 2.49032 30.9098 2.51235 30.8638C2.51328 30.8619 2.51414 30.8599 2.51508 30.858C2.9743 29.9046 3.85751 29.1938 4.91743 28.9732C4.9204 28.9726 4.92337 28.9719 4.92634 28.9712C4.97493 28.9613 5.02399 28.9528 5.07337 28.9449C5.08157 28.9436 5.08977 28.9418 5.09813 28.9406C5.14274 28.9338 5.18782 28.9285 5.2329 28.9234C5.24556 28.922 5.25813 28.92 5.27087 28.9188C5.31438 28.9144 5.35829 28.9115 5.4022 28.9087C5.4161 28.9078 5.43001 28.9064 5.44392 28.9057C5.50142 28.9028 5.55938 28.9013 5.61759 28.9013C5.94181 28.9013 6.2047 28.6377 6.2047 28.3123V24.0416C6.2047 23.7163 5.94181 23.4527 5.61759 23.4527C5.29337 23.4527 5.03048 23.7163 5.03048 24.0416V27.7604C4.03907 27.8862 3.11883 28.3298 2.39321 29.0407C2.31688 29.1154 2.24453 29.1932 2.17406 29.2722V7.33924C2.17406 5.63526 3.41047 4.21531 5.0304 3.93488V21.6858C5.0304 22.011 5.29329 22.2748 5.61751 22.2748C5.94173 22.2748 6.20462 22.011 6.20462 21.6858V10.3006H23.2547L20.009 13.5567C19.7797 13.7868 19.7797 14.1597 20.009 14.3897C20.2383 14.6196 20.61 14.6196 20.8393 14.3897L25.0872 10.1281C25.0873 10.128 25.0874 10.1278 25.0875 10.1277L28.9301 6.27278L31.6257 8.97715L31.3094 9.29441C31.3092 9.29465 31.3089 9.29488 31.3087 9.29513L19.4705 21.1715L16.7749 18.4672L19.1083 16.1263C19.3376 15.8961 19.3376 15.5233 19.1083 15.2933C18.879 15.0634 18.5073 15.0634 18.2781 15.2933L15.5294 18.0507C15.5147 18.0655 15.501 18.081 15.4881 18.097C15.4838 18.1024 15.48 18.1081 15.4759 18.1136C15.4676 18.1247 15.4595 18.1358 15.4519 18.1474C15.4476 18.1542 15.4437 18.1611 15.4396 18.168C15.4332 18.179 15.4269 18.1902 15.4212 18.2015C15.4175 18.2088 15.4141 18.2164 15.4107 18.224C15.4054 18.2355 15.4006 18.2473 15.3961 18.259C15.3946 18.2632 15.3925 18.2671 15.391 18.2712L14.2472 21.522L13.4674 23.7384C13.4571 23.7678 13.4496 23.7978 13.4441 23.828H11.4916C11.1674 23.828 10.9045 24.0916 10.9045 24.4169C10.9045 24.7423 11.1674 25.0059 11.4916 25.0059H27.7505C28.0748 25.0059 28.3376 24.7423 28.3376 24.4169C28.3376 24.0916 28.0748 23.828 27.7505 23.828H16.0854L19.6659 22.5599C19.6689 22.5589 19.6717 22.5574 19.6746 22.5563C19.6886 22.5511 19.7022 22.5452 19.7157 22.5391C19.7211 22.5366 19.7265 22.5342 19.7318 22.5316C19.7458 22.5246 19.7596 22.5168 19.7732 22.5085C19.7776 22.5058 19.7821 22.5034 19.7864 22.5007C19.8006 22.4916 19.8143 22.4816 19.8279 22.4711C19.8312 22.4686 19.8347 22.4663 19.838 22.4636C19.8543 22.4504 19.8703 22.4363 19.8855 22.421L31.9671 10.3007H37.0652V22.8837L28.667 31.3089C28.4377 31.5391 28.4377 31.9119 28.667 32.1419C28.6813 32.1563 28.6962 32.1698 28.7116 32.1823C28.8193 32.2704 28.9508 32.3145 29.0822 32.3145C29.2136 32.3145 29.3451 32.2704 29.4527 32.1823C29.4681 32.1698 29.483 32.1563 29.4973 32.1419L29.4976 32.1417L39.826 21.7799V26.9764ZM18.3967 21.76L16.715 22.3556L15.5945 21.2315L16.1882 19.5444L18.3967 21.76Z" fill="url(#paint3_linear)" stroke="url(#paint4_linear)" stroke-width="0.25"/>
 5 | <defs>
 6 | <linearGradient id="paint0_linear" x1="3.26667" y1="1" x2="37.8" y2="39.1334" gradientUnits="userSpaceOnUse">
 7 | <stop offset="0.259336" stop-color="#FFDB6E"/>
 8 | <stop offset="1" stop-color="#FFBC5E"/>
 9 | </linearGradient>
10 | <linearGradient id="paint1_linear" x1="29.602" y1="29.21" x2="36.1781" y2="36.4484" gradientUnits="userSpaceOnUse">
11 | <stop offset="0.259336" stop-color="#FFDB6E"/>
12 | <stop offset="1" stop-color="#FFBC5E"/>
13 | </linearGradient>
14 | <linearGradient id="paint2_linear" x1="29.602" y1="29.21" x2="36.1781" y2="36.4484" gradientUnits="userSpaceOnUse">
15 | <stop offset="0.259336" stop-color="#FFDB6E"/>
16 | <stop offset="1" stop-color="#FFBC5E"/>
17 | </linearGradient>
18 | <linearGradient id="paint3_linear" x1="3.26667" y1="1" x2="37.8" y2="39.1334" gradientUnits="userSpaceOnUse">
19 | <stop offset="0.259336" stop-color="#FFDB6E"/>
20 | <stop offset="1" stop-color="#FFBC5E"/>
21 | </linearGradient>
22 | <linearGradient id="paint4_linear" x1="3.26667" y1="1" x2="37.8" y2="39.1334" gradientUnits="userSpaceOnUse">
23 | <stop offset="0.259336" stop-color="#FFDB6E"/>
24 | <stop offset="1" stop-color="#FFBC5E"/>
25 | </linearGradient>
26 | </defs>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/vcard/assets/images/icon-dev.svg:
--------------------------------------------------------------------------------
 1 | <svg width="40" height="32" viewBox="0 0 40 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M3 1C1.89543 1 1 1.89543 1 3V28C1 29.1046 1.89543 30 3 30H37C38.1046 30 39 29.1046 39 28V3C39 1.89543 38.1046 1 37 1H3ZM36 9H4V28H36V9Z" fill="url(#paint0_linear)"/>
 3 | <path d="M37.6172 0.375H2.38281C1.06903 0.375 0 1.44403 0 2.75781V29.2422C0 30.556 1.06903 31.625 2.38281 31.625H37.6172C38.931 31.625 40 30.556 40 29.2422V2.75781C40 1.44403 38.931 0.375 37.6172 0.375ZM38.4375 29.2422C38.4375 29.6945 38.0695 30.0625 37.6172 30.0625H2.38281C1.93054 30.0625 1.5625 29.6945 1.5625 29.2422V2.75781C1.5625 2.30554 1.93054 1.9375 2.38281 1.9375H37.6172C38.0695 1.9375 38.4375 2.30554 38.4375 2.75781V29.2422Z" fill="url(#paint1_linear)"/>
 4 | <path d="M14.9219 5.79156H35.0781C35.5096 5.79156 35.8594 5.44183 35.8594 5.01031C35.8594 4.5791 35.5096 4.22906 35.0781 4.22906H14.9219C14.4904 4.22906 14.1406 4.5791 14.1406 5.01031C14.1406 5.44183 14.4904 5.79156 14.9219 5.79156Z" fill="url(#paint2_linear)"/>
 5 | <path d="M3.99231 5.3094C4.01184 5.3564 4.03595 5.40157 4.06403 5.44368C4.0921 5.48671 4.12506 5.52669 4.16107 5.56239C4.30634 5.70857 4.50775 5.79158 4.71313 5.79158C4.76471 5.79158 4.81567 5.7867 4.86633 5.77663C4.91638 5.76656 4.96552 5.7516 5.01251 5.73207C5.05951 5.71254 5.10468 5.68843 5.14679 5.66035C5.18982 5.63136 5.2298 5.5984 5.2655 5.5627C5.30243 5.52669 5.33447 5.48671 5.36316 5.44398C5.39154 5.40157 5.41565 5.3564 5.43518 5.3094C5.45471 5.2618 5.46967 5.21266 5.47974 5.16322C5.48981 5.11256 5.49438 5.06099 5.49438 5.01033C5.49438 4.95937 5.48981 4.90779 5.47974 4.85805C5.46967 4.808 5.45471 4.75856 5.43518 4.71187C5.41565 4.66426 5.39154 4.61879 5.36316 4.57668C5.33447 4.53365 5.30243 4.49397 5.2655 4.45796C5.2298 4.42195 5.18982 4.3893 5.14679 4.36092C5.10468 4.33284 5.05951 4.30873 5.01251 4.2892C4.96552 4.26967 4.91638 4.25471 4.86633 4.24464C4.76563 4.2242 4.66187 4.2242 4.56085 4.24464C4.5108 4.25471 4.46167 4.26967 4.41498 4.2892C4.36707 4.30873 4.3219 4.33284 4.27979 4.36092C4.23676 4.3893 4.19678 4.42195 4.16107 4.45796C4.12506 4.49397 4.0921 4.53365 4.06403 4.57668C4.03595 4.61879 4.01184 4.66426 3.99231 4.71187C3.97278 4.75856 3.95782 4.808 3.94775 4.85805C3.93738 4.90779 3.93188 4.95937 3.93188 5.01033C3.93188 5.06099 3.93738 5.11256 3.94775 5.16322C3.95782 5.21266 3.97278 5.2618 3.99231 5.3094Z" fill="url(#paint3_linear)"/>
 6 | <path d="M7.11731 5.3094C7.13684 5.3564 7.16095 5.40157 7.18903 5.44368C7.2171 5.48671 7.25006 5.52669 7.28607 5.56239C7.43134 5.70857 7.63275 5.79158 7.83813 5.79158C7.88971 5.79158 7.94067 5.7867 7.99133 5.77663C8.04138 5.76656 8.09052 5.7516 8.13751 5.73207C8.18451 5.71254 8.22968 5.68843 8.27179 5.66035C8.31482 5.63136 8.3548 5.5984 8.39142 5.5627C8.42743 5.52669 8.45947 5.48671 8.48816 5.44398C8.51654 5.40157 8.54065 5.3564 8.56018 5.3094C8.57971 5.2618 8.59467 5.21266 8.60474 5.16322C8.61481 5.11256 8.61938 5.06099 8.61938 5.01033C8.61938 4.95937 8.61481 4.90779 8.60474 4.85805C8.59467 4.808 8.57971 4.75856 8.56018 4.71187C8.54065 4.66426 8.51654 4.61879 8.48816 4.57668C8.45947 4.53365 8.42743 4.49397 8.39142 4.45796C8.3548 4.42195 8.31482 4.3893 8.27179 4.36092C8.22968 4.33284 8.18451 4.30873 8.13751 4.2892C8.09052 4.26967 8.04138 4.25471 7.99133 4.24464C7.89063 4.2242 7.78687 4.2242 7.68585 4.24464C7.6358 4.25471 7.58667 4.26967 7.53998 4.2892C7.49207 4.30873 7.4469 4.33284 7.40479 4.36092C7.36176 4.3893 7.32178 4.42195 7.28607 4.45796C7.25006 4.49397 7.2171 4.53365 7.18903 4.57668C7.16095 4.61879 7.13684 4.66426 7.11731 4.71187C7.09778 4.75856 7.08282 4.808 7.07275 4.85805C7.06238 4.90779 7.05688 4.95937 7.05688 5.01033C7.05688 5.06099 7.06238 5.11256 7.07275 5.16322C7.08282 5.21266 7.09778 5.2618 7.11731 5.3094Z" fill="url(#paint4_linear)"/>
 7 | <path d="M10.2423 5.3094C10.2618 5.3564 10.2859 5.40157 10.314 5.44368C10.3421 5.48671 10.3751 5.52669 10.4111 5.56239C10.4468 5.5984 10.4868 5.63136 10.5298 5.66005C10.5719 5.68843 10.6171 5.71254 10.665 5.73207C10.7117 5.7516 10.7608 5.76656 10.8109 5.77663C10.8609 5.7867 10.9125 5.79128 10.9631 5.79128C11.0147 5.79128 11.0657 5.7867 11.1163 5.77663C11.1664 5.76656 11.2155 5.7516 11.2625 5.73207C11.3095 5.71254 11.3547 5.68843 11.3977 5.66005C11.4398 5.63136 11.4798 5.5984 11.5164 5.56239C11.5524 5.52669 11.5845 5.48671 11.6132 5.44368C11.6415 5.40157 11.6656 5.3564 11.6852 5.3094C11.7047 5.2618 11.7197 5.21266 11.7297 5.16322C11.7398 5.11256 11.7444 5.06099 11.7444 5.01003C11.7444 4.95937 11.7398 4.90779 11.7297 4.85774C11.7197 4.80769 11.7047 4.75856 11.6852 4.71187C11.6656 4.66396 11.6415 4.61879 11.6132 4.57668C11.5845 4.53365 11.5524 4.49367 11.5164 4.45796C11.4798 4.42195 11.4398 4.38899 11.3977 4.36092C11.3547 4.33284 11.3095 4.30873 11.2625 4.2892C11.2155 4.26967 11.1664 4.25471 11.1163 4.24464C11.0156 4.2242 10.9119 4.2242 10.8109 4.24464C10.7608 4.25471 10.7117 4.26967 10.665 4.2892C10.6171 4.30873 10.5719 4.33284 10.5298 4.36092C10.4868 4.38899 10.4468 4.42195 10.4111 4.45796C10.3751 4.49367 10.3421 4.53365 10.314 4.57668C10.2859 4.61879 10.2618 4.66396 10.2423 4.71187C10.2228 4.75856 10.2078 4.80769 10.1978 4.85774C10.1874 4.90779 10.1819 4.95937 10.1819 5.01003C10.1819 5.06099 10.1874 5.11256 10.1978 5.16322C10.2078 5.21266 10.2228 5.2618 10.2423 5.3094Z" fill="url(#paint5_linear)"/>
 8 | <path d="M22.7154 13.739C22.344 13.5192 21.8649 13.6425 21.6452 14.0139L17.0099 21.8524C16.7901 22.2238 16.9131 22.7029 17.2845 22.9223C17.4093 22.9962 17.5464 23.0316 17.6816 23.0316C17.9486 23.0316 18.2089 22.8942 18.3548 22.6477L22.9901 14.8092C23.2098 14.4378 23.0868 13.9587 22.7154 13.739Z" fill="url(#paint6_linear)"/>
 9 | <path d="M12.9769 16.0351V15.2462C12.9769 14.8095 13.3321 14.454 13.7688 14.454H13.7798C14.2113 14.454 14.561 14.1042 14.561 13.6727C14.561 13.2415 14.2113 12.8915 13.7798 12.8915H13.7688C12.4706 12.8915 11.4144 13.948 11.4144 15.2462V16.0351C11.4144 16.3192 11.2978 16.5963 11.0946 16.795L10.0823 17.7853C9.93305 17.9312 9.84852 18.1307 9.8473 18.3395C9.84638 18.5482 9.92878 18.7487 10.0765 18.8964L11.108 19.9276C11.307 20.1263 11.4174 20.3906 11.4196 20.6719L11.4251 21.4907C11.4342 22.7801 12.4904 23.8293 13.7798 23.8293C14.2113 23.8293 14.561 23.4792 14.561 23.048C14.561 22.6165 14.2113 22.2668 13.7798 22.2668C13.3458 22.2668 12.9906 21.9137 12.9876 21.48L12.9821 20.6613C12.9772 19.9664 12.7037 19.3133 12.2127 18.8226L11.7397 18.3499L12.1874 17.9119C12.6891 17.4209 12.9769 16.737 12.9769 16.0351Z" fill="url(#paint7_linear)"/>
10 | <path d="M27.023 20.6857V21.4745C27.023 21.9113 26.6678 22.2668 26.2311 22.2668H26.2201C25.7886 22.2668 25.4388 22.6165 25.4388 23.048C25.4388 23.4792 25.7886 23.8293 26.2201 23.8293H26.2311C27.5293 23.8293 28.5855 22.7728 28.5855 21.4745V20.6857C28.5855 20.4016 28.7021 20.1245 28.9053 19.9258L29.9176 18.9355C30.0668 18.7896 30.1514 18.59 30.1523 18.3813C30.1535 18.1725 30.0711 17.972 29.9234 17.8243L28.8919 16.7932C28.6929 16.5945 28.5821 16.3299 28.5803 16.0488L28.5745 15.23C28.5657 13.9407 27.5095 12.8918 26.2201 12.8918C25.7886 12.8918 25.4388 13.2415 25.4388 13.673C25.4388 14.1042 25.7886 14.4543 26.2201 14.4543C26.6537 14.4543 27.0093 14.8071 27.012 15.2407L27.0178 16.0595C27.0227 16.7541 27.2958 17.4072 27.7872 17.8982L28.2602 18.3709L27.8125 18.8088C27.3108 19.2996 27.023 19.9838 27.023 20.6857Z" fill="url(#paint8_linear)"/>
11 | <path d="M36.0443 8.13531H3.95569C3.52417 8.13531 3.17444 8.48535 3.17444 8.91656V27.6666C3.17444 28.0981 3.52417 28.4478 3.95569 28.4478H13.2553C13.6868 28.4478 14.0366 28.0981 14.0366 27.6666C14.0366 27.2354 13.6868 26.8853 13.2553 26.8853H4.73694V9.69781H35.2631V26.8853H19.5312C19.0997 26.8853 18.75 27.2354 18.75 27.6666C18.75 28.0981 19.0997 28.4478 19.5312 28.4478H36.0443C36.4758 28.4478 36.8256 28.0981 36.8256 27.6666V8.91656C36.8256 8.48535 36.4758 8.13531 36.0443 8.13531Z" fill="url(#paint9_linear)"/>
12 | <defs>
13 | <linearGradient id="paint0_linear" x1="3.15333" y1="1" x2="26.6886" y2="35.0542" gradientUnits="userSpaceOnUse">
14 | <stop offset="0.259336" stop-color="#FFDB6E"/>
15 | <stop offset="1" stop-color="#FFBC5E"/>
16 | </linearGradient>
17 | <linearGradient id="paint1_linear" x1="2.26667" y1="0.375001" x2="27.8327" y2="36.511" gradientUnits="userSpaceOnUse">
18 | <stop offset="0.259336" stop-color="#FFDB6E"/>
19 | <stop offset="1" stop-color="#FFBC5E"/>
20 | </linearGradient>
21 | <linearGradient id="paint2_linear" x1="15.3714" y1="4.22906" x2="15.5472" y2="6.9288" gradientUnits="userSpaceOnUse">
22 | <stop offset="0.259336" stop-color="#FFDB6E"/>
23 | <stop offset="1" stop-color="#FFBC5E"/>
24 | </linearGradient>
25 | <linearGradient id="paint3_linear" x1="4.02043" y1="4.22931" x2="5.36917" y2="5.71887" gradientUnits="userSpaceOnUse">
26 | <stop offset="0.259336" stop-color="#FFDB6E"/>
27 | <stop offset="1" stop-color="#FFBC5E"/>
28 | </linearGradient>
29 | <linearGradient id="paint4_linear" x1="7.14543" y1="4.22931" x2="8.49417" y2="5.71887" gradientUnits="userSpaceOnUse">
30 | <stop offset="0.259336" stop-color="#FFDB6E"/>
31 | <stop offset="1" stop-color="#FFBC5E"/>
32 | </linearGradient>
33 | <linearGradient id="paint5_linear" x1="10.2704" y1="4.22931" x2="11.6189" y2="5.71884" gradientUnits="userSpaceOnUse">
34 | <stop offset="0.259336" stop-color="#FFDB6E"/>
35 | <stop offset="1" stop-color="#FFBC5E"/>
36 | </linearGradient>
37 | <linearGradient id="paint6_linear" x1="17.2521" y1="13.6301" x2="25.0143" y2="19.281" gradientUnits="userSpaceOnUse">
38 | <stop offset="0.259336" stop-color="#FFDB6E"/>
39 | <stop offset="1" stop-color="#FFBC5E"/>
40 | </linearGradient>
41 | <linearGradient id="paint7_linear" x1="10.1144" y1="12.8915" x2="17.4785" y2="16.3959" gradientUnits="userSpaceOnUse">
42 | <stop offset="0.259336" stop-color="#FFDB6E"/>
43 | <stop offset="1" stop-color="#FFBC5E"/>
44 | </linearGradient>
45 | <linearGradient id="paint8_linear" x1="25.7059" y1="12.8918" x2="33.0696" y2="16.3959" gradientUnits="userSpaceOnUse">
46 | <stop offset="0.259336" stop-color="#FFDB6E"/>
47 | <stop offset="1" stop-color="#FFBC5E"/>
48 | </linearGradient>
49 | <linearGradient id="paint9_linear" x1="5.08133" y1="8.13532" x2="19.9152" y2="35.2721" gradientUnits="userSpaceOnUse">
50 | <stop offset="0.259336" stop-color="#FFDB6E"/>
51 | <stop offset="1" stop-color="#FFBC5E"/>
52 | </linearGradient>
53 | </defs>
54 | </svg>
55 | 


--------------------------------------------------------------------------------
/vcard/assets/images/icon-photo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="42" height="32" viewBox="0 0 42 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M1.5 6.89825C1.5 5.79369 2.39543 4.89825 3.5 4.89825H38.3C39.4046 4.89825 40.3 5.79369 40.3 6.89825V27.8871C40.3 28.9917 39.4046 29.8871 38.3 29.8871H24.2108C28.4393 28.5311 31.5 24.5686 31.5 19.8916C31.5 14.0952 26.799 9.39625 21 9.39625C15.201 9.39625 10.5 14.0952 10.5 19.8916C10.5 24.5686 13.5607 28.5311 17.7892 29.8871H3.5C2.39543 29.8871 1.5 28.9917 1.5 27.8871V6.89825ZM21 24.8894C23.7614 24.8894 26 22.6518 26 19.8916C26 17.1314 23.7614 14.8938 21 14.8938C18.2386 14.8938 16 17.1314 16 19.8916C16 22.6518 18.2386 24.8894 21 24.8894Z" fill="url(#paint0_linear)"/>
 3 | <path d="M2.04688 21.5655C2.04688 21.8199 1.84039 22.0263 1.58594 22.0263C1.33149 22.0263 1.125 21.8199 1.125 21.5655V19.1966C1.125 18.942 1.33145 18.7359 1.58594 18.7359C1.84043 18.7359 2.04688 18.942 2.04688 19.1966V21.5655Z" fill="url(#paint1_linear)" stroke="url(#paint2_linear)" stroke-width="0.25"/>
 4 | <path d="M38.7448 4.72371H36.3178V4.44734C36.3178 3.66461 35.6806 3.02738 34.8972 3.02738H34.6484V2.31999C34.6484 1.53695 34.0109 0.900024 33.2278 0.900024H30.4285C29.6454 0.900024 29.0079 1.53695 29.0079 2.31999V3.02738H28.7591C27.9758 3.02738 27.3386 3.6643 27.3386 4.44734V4.72371H18.9984V4.11363C18.9984 3.3309 18.3612 2.69366 17.5778 2.69366H16.448C15.6649 2.69366 15.0274 3.33059 15.0274 4.11363V4.72371H13.6566V3.27934C13.6566 2.49661 13.0194 1.85938 12.236 1.85938H6.09828C5.31519 1.85938 4.67768 2.49661 4.67768 3.27934V4.72371H3.25525C2.01166 4.72371 1 5.73523 1 6.97797V16.646C1 16.9696 1.26245 17.2316 1.58594 17.2316C1.90943 17.2316 2.17188 16.9696 2.17188 16.646V11.0838H5.37867C5.63654 12.0276 6.50172 12.7237 7.5265 12.7237C8.55159 12.7237 9.41646 12.0276 9.67433 11.0838H14.3277C11.6247 13.1148 9.87331 16.3458 9.87331 19.9782C9.87331 22.363 10.6283 24.5745 11.9116 26.3874H2.17188V24.1161C2.17188 23.7925 1.90943 23.5304 1.58594 23.5304C1.26245 23.5304 1 23.7925 1 24.1161V27.7796C1 29.0226 2.01166 30.0339 3.25525 30.0339H16.2491C17.6907 30.7172 19.3014 31.1 21 31.1C22.6993 31.1 24.3103 30.7169 25.7522 30.033C25.7568 30.0333 25.7611 30.0339 25.7657 30.0339H38.7448C39.9884 30.0339 41.0001 29.0226 41.0001 27.7796V6.97797C41.0001 5.73523 39.9884 4.72371 38.7448 4.72371ZM30.1797 2.31999C30.1797 2.18303 30.2914 2.07138 30.4288 2.07138H33.2278C33.3649 2.07138 33.4766 2.18272 33.4766 2.31999V3.02738H30.1801V2.31999H30.1797ZM28.5104 4.44734C28.5104 4.31038 28.6221 4.19873 28.7595 4.19873H34.8972C35.0342 4.19873 35.1459 4.31038 35.1459 4.44734V4.72371H28.5107V4.44734H28.5104ZM16.1993 4.11363C16.1993 3.97667 16.311 3.86502 16.448 3.86502H17.5778C17.7151 3.86502 17.8265 3.97667 17.8265 4.11363V4.72371H16.1993V4.11363ZM5.84956 3.27934C5.84956 3.14238 5.96125 3.03073 6.09828 3.03073H12.2363C12.3733 3.03073 12.485 3.14238 12.485 3.27934V4.72371H5.84956V3.27934ZM7.5265 11.5523C6.94514 11.5523 6.47181 11.0795 6.47181 10.4982C6.47181 9.91703 6.94514 9.44391 7.5265 9.44391C8.10817 9.44391 8.58119 9.91703 8.58119 10.4982C8.58119 11.0795 8.10817 11.5523 7.5265 11.5523ZM9.67433 9.91246C9.41646 8.96866 8.55159 8.27256 7.5265 8.27256C6.50141 8.27256 5.63654 8.96866 5.37867 9.91246H2.17188V6.97797C2.17188 6.381 2.65802 5.89507 3.25525 5.89507H38.7448C39.3421 5.89507 39.8282 6.381 39.8282 6.97797V9.91246H38.0844V7.78449C38.0844 7.46115 37.822 7.19882 37.4985 7.19882H32.0453C31.7218 7.19882 31.4594 7.46115 31.4594 7.78449V9.91246H25.7266C24.2627 9.22551 22.651 8.85671 21 8.85671C19.31 8.85671 17.7072 9.23587 16.2713 9.91246H9.67433ZM32.6312 9.91246V8.37017H36.9125V9.91246H32.6312ZM3.25525 28.8625C2.65802 28.8625 2.17188 28.3766 2.17188 27.7796V27.5588H12.8665C13.3099 28.034 13.7942 28.4705 14.3139 28.8625H3.25525ZM11.0452 19.9785C11.0452 14.4917 15.5111 10.0281 21 10.0281C23.847 10.0281 26.5637 11.2512 28.454 13.3838C28.6685 13.626 29.0387 13.6486 29.281 13.4339C29.5233 13.2194 29.5456 12.8494 29.3311 12.6071C28.8284 12.0401 28.273 11.5313 27.6761 11.0838H39.8282V26.3874H30.0885C30.9833 25.1233 31.6205 23.6652 31.9247 22.0897H33.4576C34.3219 22.0897 35.0253 21.3868 35.0253 20.5227V19.0637C35.0253 18.1995 34.3222 17.4967 33.4576 17.4967H31.8448C31.6318 16.5648 31.301 15.661 30.8569 14.816C30.7065 14.5296 30.3522 14.4191 30.0659 14.5699C29.7794 14.7202 29.6689 15.074 29.8193 15.3605C30.5621 16.7747 30.9549 18.3716 30.9549 19.9785C30.9549 25.4652 26.4892 29.9289 21 29.9289C15.5111 29.9289 11.0452 25.4649 11.0452 19.9785ZM32.0483 18.6678H33.4576C33.6758 18.6678 33.8535 18.8453 33.8535 19.0634V20.5227C33.8535 20.7408 33.6758 20.9184 33.4576 20.9184H32.0865C32.1127 20.6084 32.1268 20.2948 32.1268 19.9782C32.1268 19.5399 32.1002 19.1022 32.0483 18.6678ZM38.7448 28.8625H27.6861C28.2059 28.4705 28.6902 28.034 29.1336 27.5588H39.8282V27.7796C39.8282 28.3766 39.3421 28.8625 38.7448 28.8625Z" fill="url(#paint3_linear)" stroke="url(#paint4_linear)" stroke-width="0.25"/>
 5 | <path d="M13.2415 19.9785C13.2415 15.7022 16.7219 12.223 21.0001 12.223C25.2783 12.223 28.7587 15.7022 28.7587 19.9785C28.7587 24.2545 25.2783 27.7336 21.0001 27.7336C16.7219 27.7336 13.2415 24.2545 13.2415 19.9785ZM14.1633 19.9785C14.1633 23.7467 17.2302 26.8121 21.0001 26.8121C24.77 26.8121 27.8368 23.7467 27.8368 19.9785C27.8368 16.2103 24.77 13.1445 21.0001 13.1445C17.2302 13.1445 14.1633 16.2103 14.1633 19.9785Z" fill="url(#paint5_linear)" stroke="url(#paint6_linear)" stroke-width="0.25"/>
 6 | <path d="M15.6189 19.9785C15.6189 17.0126 18.033 14.5995 20.9999 14.5995C23.9671 14.5995 26.3812 17.0126 26.3812 19.9785C26.3812 22.9443 23.9671 25.3571 20.9999 25.3571C18.0327 25.3571 15.6189 22.9443 15.6189 19.9785ZM16.5408 19.9785C16.5408 22.4363 18.541 24.4356 20.9999 24.4356C23.4588 24.4356 25.4593 22.4363 25.4593 19.9785C25.4593 17.5204 23.4588 15.521 20.9999 15.521C18.541 15.521 16.5408 17.5204 16.5408 19.9785Z" fill="url(#paint7_linear)" stroke="url(#paint8_linear)" stroke-width="0.25"/>
 7 | <defs>
 8 | <linearGradient id="paint0_linear" x1="3.69867" y1="4.89825" x2="22.5688" y2="37.2522" gradientUnits="userSpaceOnUse">
 9 | <stop offset="0.259336" stop-color="#FFDB6E"/>
10 | <stop offset="1" stop-color="#FFBC5E"/>
11 | </linearGradient>
12 | <linearGradient id="paint1_linear" x1="1.17724" y1="18.7359" x2="2.78931" y2="19.2346" gradientUnits="userSpaceOnUse">
13 | <stop offset="0.259336" stop-color="#FFDB6E"/>
14 | <stop offset="1" stop-color="#FFBC5E"/>
15 | </linearGradient>
16 | <linearGradient id="paint2_linear" x1="1.17724" y1="18.7359" x2="2.78931" y2="19.2346" gradientUnits="userSpaceOnUse">
17 | <stop offset="0.259336" stop-color="#FFDB6E"/>
18 | <stop offset="1" stop-color="#FFBC5E"/>
19 | </linearGradient>
20 | <linearGradient id="paint3_linear" x1="3.26667" y1="0.900025" x2="27.6816" y2="36.6089" gradientUnits="userSpaceOnUse">
21 | <stop offset="0.259336" stop-color="#FFDB6E"/>
22 | <stop offset="1" stop-color="#FFBC5E"/>
23 | </linearGradient>
24 | <linearGradient id="paint4_linear" x1="3.26667" y1="0.900025" x2="27.6816" y2="36.6089" gradientUnits="userSpaceOnUse">
25 | <stop offset="0.259336" stop-color="#FFDB6E"/>
26 | <stop offset="1" stop-color="#FFBC5E"/>
27 | </linearGradient>
28 | <linearGradient id="paint5_linear" x1="14.1208" y1="12.223" x2="27.511" y2="27.0155" gradientUnits="userSpaceOnUse">
29 | <stop offset="0.259336" stop-color="#FFDB6E"/>
30 | <stop offset="1" stop-color="#FFBC5E"/>
31 | </linearGradient>
32 | <linearGradient id="paint6_linear" x1="14.1208" y1="12.223" x2="27.511" y2="27.0155" gradientUnits="userSpaceOnUse">
33 | <stop offset="0.259336" stop-color="#FFDB6E"/>
34 | <stop offset="1" stop-color="#FFBC5E"/>
35 | </linearGradient>
36 | <linearGradient id="paint7_linear" x1="16.2288" y1="14.5995" x2="25.5157" y2="24.8592" gradientUnits="userSpaceOnUse">
37 | <stop offset="0.259336" stop-color="#FFDB6E"/>
38 | <stop offset="1" stop-color="#FFBC5E"/>
39 | </linearGradient>
40 | <linearGradient id="paint8_linear" x1="16.2288" y1="14.5995" x2="25.5157" y2="24.8592" gradientUnits="userSpaceOnUse">
41 | <stop offset="0.259336" stop-color="#FFDB6E"/>
42 | <stop offset="1" stop-color="#FFBC5E"/>
43 | </linearGradient>
44 | </defs>
45 | </svg>
46 | 


--------------------------------------------------------------------------------
/vcard/assets/images/icon-quote.svg:
--------------------------------------------------------------------------------
 1 | <svg width="34" height="23" viewBox="0 0 34 23" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M9.63091 0.144315L11.1066 1.03792C11.3675 1.19594 11.4272 1.54856 11.2349 1.78536C9.08005 4.43892 7.12216 7.31629 7.12195 10.8825C10.0635 10.8825 13.0949 13.3058 13.0949 16.4084C13.0949 20.7423 9.61052 23.4414 6.12633 22.939C2.64214 22.4367 0.58078 19.9249 0.153573 16.9107C-0.826125 9.99852 2.98637 3.77393 8.59945 0.151692C8.91222 -0.0501455 9.3125 -0.0485027 9.63091 0.144315ZM30.5361 0.144315L32.0117 1.03792C32.2727 1.19594 32.3323 1.54856 32.14 1.78536C29.9852 4.43892 28.0273 7.31629 28.0271 10.8825C30.9687 10.8825 34 13.3058 34 16.4084C34 20.7423 30.5157 23.4414 27.0315 22.939C23.5473 22.4367 21.4859 19.9249 21.0587 16.9107C20.079 9.99852 23.8915 3.77393 29.5046 0.151692C29.8174 -0.0501455 30.2177 -0.0485027 30.5361 0.144315Z" fill="url(#paint0_linear)"/>
 3 | <defs>
 4 | <linearGradient id="paint0_linear" x1="1.92667" y1="4.65138e-07" x2="19.7024" y2="29.0178" gradientUnits="userSpaceOnUse">
 5 | <stop offset="0.259336" stop-color="#FFDB6E"/>
 6 | <stop offset="1" stop-color="#FFBC5E"/>
 7 | </linearGradient>
 8 | </defs>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/vcard/assets/images/logo.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/vcard/assets/images/logo.ico


--------------------------------------------------------------------------------
/vcard/assets/images/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="185" height="185" viewBox="0 0 185 185" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M0 92.5C0 41.4137 41.4137 0 92.5 0H135C162.614 0 185 22.3858 185 50V92.5C185 143.586 143.586 185 92.5 185V185C41.4137 185 0 143.586 0 92.5V92.5Z" fill="url(#paint0_linear_13_13)"/>
 3 | <path d="M137.109 88.3594C137.109 88.3594 137.156 88.4766 137.25 88.7109V88.9922C137.25 89.1797 137.25 89.3672 137.25 89.5547C137.25 89.7422 137.203 89.8359 137.109 89.8359H136.828C136.828 89.9297 136.781 90.0234 136.688 90.1172C136.5 90.1172 136.336 90.2812 136.195 90.6094C136.102 90.9375 135.961 91.3594 135.773 91.875C135.305 92.625 134.859 93.6797 134.438 95.0391C134.016 96.3516 133.453 97.875 132.75 99.6094C131.391 103.078 129.82 107.414 128.039 112.617C127.852 113.367 127.617 114.023 127.336 114.586C127.102 115.148 126.891 115.828 126.703 116.625C126.328 117.188 126.023 117.844 125.789 118.594C125.555 119.297 125.297 120.07 125.016 120.914C124.828 121.477 124.547 122.133 124.172 122.883C123.844 123.586 123.539 124.383 123.258 125.273C122.883 125.836 122.555 126.492 122.273 127.242C121.992 127.945 121.641 128.719 121.219 129.562L120.234 131.602C120.047 132.07 119.789 132.492 119.461 132.867C119.133 133.242 118.875 133.594 118.688 133.922C118.5 134.109 118.312 134.297 118.125 134.484C117.984 134.672 117.82 134.859 117.633 135.047L117.352 135.609H116.93C116.93 135.703 116.883 135.797 116.789 135.891H116.508C116.414 135.891 116.367 136.078 116.367 136.453H116.086H115.945H115.664H115.453H115.172H114.75H114.609H114.188C114 136.453 113.906 136.359 113.906 136.172C113.906 135.984 113.859 135.891 113.766 135.891C113.578 135.891 113.438 135.844 113.344 135.75C113.25 135.656 113.109 135.609 112.922 135.609L112.148 134.203C112.148 134.016 112.125 133.898 112.078 133.852C112.031 133.805 111.914 133.617 111.727 133.289C111.727 133.102 111.703 132.914 111.656 132.727C111.609 132.539 111.586 132.352 111.586 132.164C111.398 132.164 111.305 131.977 111.305 131.602V131.32C111.211 131.32 111.164 131.227 111.164 131.039V130.758C111.164 130.289 111.164 130.008 111.164 129.914C111.164 129.867 111.07 129.75 110.883 129.562V129V128.719V125.555V123.797C111.07 123.234 111.164 122.625 111.164 121.969C111.164 121.266 111.211 120.633 111.305 120.07C111.492 118.898 111.609 117.797 111.656 116.766C111.703 115.688 111.82 114.586 112.008 113.461C112.383 109.148 112.969 104.812 113.766 100.453C113.953 98.25 114.188 96.0469 114.469 93.8438C114.75 91.6406 115.078 89.4375 115.453 87.2344C115.641 85.0312 115.875 82.7812 116.156 80.4844C116.484 78.1875 116.742 75.9375 116.93 73.7344C117.117 71.4375 117.281 69.1875 117.422 66.9844C117.562 64.7344 117.633 62.3672 117.633 59.8828C117.633 57.6797 117.562 55.5703 117.422 53.5547C117.281 51.5391 117.07 49.8047 116.789 48.3516C116.602 47.5078 116.391 46.7344 116.156 46.0312C115.922 45.2812 115.594 44.625 115.172 44.0625C114.609 43.2188 113.766 42.3516 112.641 41.4609H111.727C111.727 41.2734 111.703 41.1797 111.656 41.1797C111.609 41.1797 111.586 41.1328 111.586 41.0391V40.8984H111.164H110.32H109.406H108.562H107.438C107.344 40.8984 107.227 40.9922 107.086 41.1797C106.945 41.3672 106.781 41.4609 106.594 41.4609C106.312 41.4609 106.008 41.5547 105.68 41.7422H104.836C104.742 42.0234 104.625 42.1875 104.484 42.2344C104.344 42.2813 104.18 42.3984 103.992 42.5859C103.617 42.5859 103.312 42.7734 103.078 43.1484C102.984 43.1484 102.867 43.1953 102.727 43.2891C102.586 43.3828 102.422 43.4297 102.234 43.4297C101.953 43.7109 101.695 43.9688 101.461 44.2031C101.227 44.3906 100.922 44.625 100.547 44.9062C100.266 45.0938 99.9844 45.3516 99.7031 45.6797C99.4688 46.0078 99.1641 46.3359 98.7891 46.6641C97.7109 47.7422 96.6328 48.8438 95.5547 49.9688C94.5234 51.0938 93.5391 52.3828 92.6016 53.8359C91.5234 55.1953 90.5391 56.6719 89.6484 58.2656C88.8047 59.8125 87.9609 61.4062 87.1172 63.0469C86.2734 64.5 85.4062 66.0469 84.5156 67.6875C83.6719 69.2812 82.8047 70.8984 81.9141 72.5391C81.1641 73.9922 80.3906 75.5156 79.5938 77.1094C78.8438 78.6562 78.0469 80.1094 77.2031 81.4688C76.4531 83.1094 75.7031 84.6094 74.9531 85.9688C74.25 87.2812 73.5 88.6641 72.7031 90.1172C71.9531 91.4766 71.1797 92.7891 70.3828 94.0547C69.6328 95.2734 68.8828 96.4688 68.1328 97.6406C66.6797 100.406 65.3203 102.797 64.0547 104.812C63.6797 105.281 63.3516 105.82 63.0703 106.43C62.7891 106.992 62.4609 107.508 62.0859 107.977C61.8984 108.539 61.6406 109.078 61.3125 109.594C61.0312 110.062 60.7031 110.672 60.3281 111.422C59.1562 113.344 58.0781 115.125 57.0938 116.766C56.1094 118.406 55.125 119.883 54.1406 121.195C53.2969 122.836 52.5703 124.172 51.9609 125.203C51.3047 126.188 50.7422 127.078 50.2734 127.875C49.8984 128.344 49.6406 128.672 49.5 128.859C49.3125 129.047 49.125 129.281 48.9375 129.562L48.6562 129.844C48.4688 130.594 48.2812 130.594 48.0938 129.844V129V128.859C48.0938 128.766 48.1172 128.672 48.1641 128.578C48.2109 128.484 48.2344 128.344 48.2344 128.156C48.3281 128.062 48.6094 127.195 49.0781 125.555C49.4531 124.711 49.875 123.562 50.3438 122.109C50.7656 120.656 51.3047 118.922 51.9609 116.906C52.6172 115.172 53.3438 113.25 54.1406 111.141C54.9844 109.031 55.8984 106.828 56.8828 104.531C57.0703 103.781 57.3281 103.125 57.6562 102.562C57.9844 101.953 58.2422 101.25 58.4297 100.453L59.3438 98.7656C59.4375 98.2969 59.5547 97.9688 59.6953 97.7812C59.8359 97.5469 60 97.1953 60.1875 96.7266C61.125 94.1484 62.4141 91.5703 64.0547 88.9922C64.7109 87.3516 65.3438 85.8516 65.9531 84.4922C66.6094 83.1328 67.3359 81.75 68.1328 80.3438C68.8828 78.9844 69.6797 77.6016 70.5234 76.1953C71.4141 74.7422 72.2812 73.3359 73.125 71.9766C73.9688 70.5234 74.8594 69.1641 75.7969 67.8984C76.7344 66.5859 77.7188 65.25 78.75 63.8906C79.6875 62.7188 80.6719 61.5234 81.7031 60.3047C82.7344 59.0391 83.7656 57.75 84.7969 56.4375C85.875 55.3594 86.9531 54.2344 88.0312 53.0625C89.1562 51.8438 90.2344 50.6719 91.2656 49.5469C92.3438 48.1875 93.4219 46.9922 94.5 45.9609C95.625 44.8828 96.7734 43.7578 97.9453 42.5859C99.0234 41.2266 100.148 40.0547 101.32 39.0703C102.492 38.0859 103.758 37.1484 105.117 36.2578C105.211 36.2578 105.328 36.1641 105.469 35.9766C105.609 35.7891 105.773 35.6953 105.961 35.6953C106.148 35.6953 106.312 35.6484 106.453 35.5547C106.641 35.4609 106.828 35.4141 107.016 35.4141C107.203 35.0391 107.484 34.8516 107.859 34.8516C108.141 34.6641 108.516 34.5703 108.984 34.5703C109.266 34.1953 109.617 33.9844 110.039 33.9375L111.164 33.6562H111.305H111.586H112.008H113.344C114 33.6562 114.703 33.8672 115.453 34.2891C116.25 34.6641 117.023 35.1328 117.773 35.6953C118.43 36.5391 119.109 37.5938 119.812 38.8594C120.094 39.4219 120.398 40.0547 120.727 40.7578C121.055 41.4141 121.336 42.0234 121.57 42.5859C121.758 43.3359 121.945 44.0391 122.133 44.6953C122.32 45.3047 122.461 46.0547 122.555 46.9453C122.742 47.6953 122.906 48.375 123.047 48.9844C123.188 49.5469 123.305 50.2031 123.398 50.9531C123.586 52.4063 123.75 53.8828 123.891 55.3828C124.031 56.8359 124.102 58.2422 124.102 59.6016C124.195 61.0547 124.242 62.4375 124.242 63.75C124.242 65.0156 124.242 66.3281 124.242 67.6875C124.148 69.0469 124.102 70.3359 124.102 71.5547C124.102 72.7734 124.008 74.0625 123.82 75.4219C123.727 78 123.586 80.5781 123.398 83.1562C123.211 85.6875 123.023 88.1953 122.836 90.6797C122.648 92.9766 122.391 95.3203 122.062 97.7109C121.734 100.055 121.453 102.328 121.219 104.531C120.938 106.453 120.68 108.281 120.445 110.016C120.211 111.75 120 113.461 119.812 115.148C120 114.211 120.328 113.555 120.797 113.18C121.453 111.82 122.062 110.602 122.625 109.523C123.234 108.398 123.891 107.297 124.594 106.219C125.672 104.203 126.727 102.328 127.758 100.594C128.789 98.8125 129.75 97.2422 130.641 95.8828C131.484 94.2422 132.258 92.9297 132.961 91.9453C133.711 90.9141 134.367 90.0234 134.93 89.2734C135.211 89.0859 135.469 88.8984 135.703 88.7109C135.938 88.4766 136.148 88.3594 136.336 88.3594H136.688H136.828H137.109ZM115.031 122.672H114.75H115.031ZM114.75 122.672H114.609H114.75Z" fill="black" fill-opacity="0.86"/>
 4 | <defs>
 5 | <linearGradient id="paint0_linear_13_13" x1="0" y1="92" x2="185" y2="92" gradientUnits="userSpaceOnUse">
 6 | <stop stop-color="#FFDB6E"/>
 7 | <stop offset="1" stop-color="#FFBC5E"/>
 8 | </linearGradient>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/vcard/assets/images/pp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/vcard/assets/images/pp.png


--------------------------------------------------------------------------------
/vcard/assets/images/testimonials satish.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/MyWorld/5bdbef41292944064143a696a4a3c4155fccb88c/vcard/assets/images/testimonials satish.jpg


--------------------------------------------------------------------------------
/vcard/assets/js/script.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | 
  4 | 
  5 | // element toggle function
  6 | const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
  7 | 
  8 | 
  9 | 
 10 | // sidebar variables
 11 | const sidebar = document.querySelector("[data-sidebar]");
 12 | const sidebarBtn = document.querySelector("[data-sidebar-btn]");
 13 | 
 14 | // sidebar toggle functionality for mobile
 15 | sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
 16 | 
 17 | 
 18 | 
 19 | // testimonials variables
 20 | const testimonialsItem = document.querySelectorAll("[data-testimonials-item]");
 21 | const modalContainer = document.querySelector("[data-modal-container]");
 22 | const modalCloseBtn = document.querySelector("[data-modal-close-btn]");
 23 | const overlay = document.querySelector("[data-overlay]");
 24 | 
 25 | // modal variable
 26 | const modalImg = document.querySelector("[data-modal-img]");
 27 | const modalTitle = document.querySelector("[data-modal-title]");
 28 | const modalText = document.querySelector("[data-modal-text]");
 29 | 
 30 | // modal toggle function
 31 | const testimonialsModalFunc = function () {
 32 |   modalContainer.classList.toggle("active");
 33 |   overlay.classList.toggle("active");
 34 | }
 35 | 
 36 | // add click event to all modal items
 37 | for (let i = 0; i < testimonialsItem.length; i++) {
 38 | 
 39 |   testimonialsItem[i].addEventListener("click", function () {
 40 | 
 41 |     modalImg.src = this.querySelector("[data-testimonials-avatar]").src;
 42 |     modalImg.alt = this.querySelector("[data-testimonials-avatar]").alt;
 43 |     modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML;
 44 |     modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML;
 45 | 
 46 |     testimonialsModalFunc();
 47 | 
 48 |   });
 49 | 
 50 | }
 51 | 
 52 | // add click event to modal close button
 53 | modalCloseBtn.addEventListener("click", testimonialsModalFunc);
 54 | overlay.addEventListener("click", testimonialsModalFunc);
 55 | 
 56 | 
 57 | 
 58 | // custom select variables
 59 | const select = document.querySelector("[data-select]");
 60 | const selectItems = document.querySelectorAll("[data-select-item]");
 61 | const selectValue = document.querySelector("[data-selecct-value]");
 62 | const filterBtn = document.querySelectorAll("[data-filter-btn]");
 63 | 
 64 | select.addEventListener("click", function () { elementToggleFunc(this); });
 65 | 
 66 | // add event in all select items
 67 | for (let i = 0; i < selectItems.length; i++) {
 68 |   selectItems[i].addEventListener("click", function () {
 69 | 
 70 |     let selectedValue = this.innerText.toLowerCase();
 71 |     selectValue.innerText = this.innerText;
 72 |     elementToggleFunc(select);
 73 |     filterFunc(selectedValue);
 74 | 
 75 |   });
 76 | }
 77 | 
 78 | // filter variables
 79 | const filterItems = document.querySelectorAll("[data-filter-item]");
 80 | 
 81 | const filterFunc = function (selectedValue) {
 82 | 
 83 |   for (let i = 0; i < filterItems.length; i++) {
 84 | 
 85 |     if (selectedValue === "all") {
 86 |       filterItems[i].classList.add("active");
 87 |     } else if (selectedValue === filterItems[i].dataset.category) {
 88 |       filterItems[i].classList.add("active");
 89 |     } else {
 90 |       filterItems[i].classList.remove("active");
 91 |     }
 92 | 
 93 |   }
 94 | 
 95 | }
 96 | 
 97 | // add event in all filter button items for large screen
 98 | let lastClickedBtn = filterBtn[0];
 99 | 
100 | for (let i = 0; i < filterBtn.length; i++) {
101 | 
102 |   filterBtn[i].addEventListener("click", function () {
103 | 
104 |     let selectedValue = this.innerText.toLowerCase();
105 |     selectValue.innerText = this.innerText;
106 |     filterFunc(selectedValue);
107 | 
108 |     lastClickedBtn.classList.remove("active");
109 |     this.classList.add("active");
110 |     lastClickedBtn = this;
111 | 
112 |   });
113 | 
114 | }
115 | 
116 | 
117 | 
118 | // contact form variables
119 | const form = document.querySelector("[data-form]");
120 | const formInputs = document.querySelectorAll("[data-form-input]");
121 | const formBtn = document.querySelector("[data-form-btn]");
122 | 
123 | // add event to all form input field
124 | for (let i = 0; i < formInputs.length; i++) {
125 |   formInputs[i].addEventListener("input", function () {
126 | 
127 |     // check form validation
128 |     if (form.checkValidity()) {
129 |       formBtn.removeAttribute("disabled");
130 |     } else {
131 |       formBtn.setAttribute("disabled", "");
132 |     }
133 | 
134 |   });
135 | }
136 | 
137 | 
138 | 
139 | // page navigation variables
140 | const navigationLinks = document.querySelectorAll("[data-nav-link]");
141 | const pages = document.querySelectorAll("[data-page]");
142 | 
143 | // add event to all nav link
144 | for (let i = 0; i < navigationLinks.length; i++) {
145 |   navigationLinks[i].addEventListener("click", function () {
146 | 
147 |     for (let i = 0; i < pages.length; i++) {
148 |       if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
149 |         pages[i].classList.add("active");
150 |         navigationLinks[i].classList.add("active");
151 |         window.scrollTo(0, 0);
152 |       } else {
153 |         pages[i].classList.remove("active");
154 |         navigationLinks[i].classList.remove("active");
155 |       }
156 |     }
157 | 
158 |   });
159 | }


--------------------------------------------------------------------------------