├── README.md ├── assets ├── css │ ├── style.css │ └── style.min.css ├── images │ ├── author.png │ ├── blog-1.png │ ├── blog-10.png │ ├── blog-2.png │ ├── blog-3.png │ ├── blog-4.png │ ├── blog-5.png │ ├── blog-6.png │ ├── blog-7.png │ ├── blog-8.png │ ├── blog-9.png │ ├── favicon.ico │ ├── hero.png │ ├── logo-dark.svg │ ├── logo-light.svg │ └── pattern.png └── js │ ├── script.js │ └── script.min.js └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # DevBlog - A Personal Blog Website 2 | 3 | 4 | ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/devblog-personal-blog-website) 5 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/devblog-personal-blog-website?style=social) 6 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/devblog-personal-blog-website?style=social) 7 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_) 8 | [![YouTube Video Views](https://img.shields.io/youtube/views/HtRTmkd5Nsg?style=social)](https://youtu.be/HtRTmkd5Nsg) 9 | 10 | DevBlog is a completely responsive personal blog website that is compatible with all mobile devices, has **Dark and light themes**, and is built using HTML, CSS, and JavaScript. 11 | 12 | ## Prerequisites 13 | 14 | Before you begin, ensure you have met the following requirements: 15 | 16 | 17 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system. 18 | 19 | ## Installing DevBlog 20 | 21 | To install **DevBlog**, follow these steps: 22 | 23 | Linux and macOS: 24 | 25 | ``` 26 | sudo git clone https://github.com/codewithsadee/devblog-personal-blog-website.git 27 | ``` 28 | 29 | Windows: 30 | 31 | ``` 32 | git clone https://github.com/codewithsadee/devblog-personal-blog-website.git 33 | ``` 34 | 35 | ## Contact 36 | 37 | If you want to contact me you can reach me at [Twitter](https://www.twitter.com/codewithsadee). 38 | 39 | ## License 40 | 41 | 42 | This project is free to use and does not contains any license. 43 | 44 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | #style.css 3 | \*-----------------------------------*/ 4 | 5 | /** 6 | * copyright 2022 @codewithsadee 7 | */ 8 | 9 | 10 | 11 | 12 | 13 | /*-----------------------------------*\ 14 | #CUSTOM PROPERTY 15 | \*-----------------------------------*/ 16 | 17 | .light-theme { 18 | 19 | /** 20 | * light theme colors 21 | */ 22 | 23 | --background-primary: hsl(0, 0%, 100%); 24 | --background-secondary: hsl(0, 0%, 97%); 25 | 26 | --action-primary: hsl(214, 32%, 91%); 27 | --action-secondary: hsl(210, 38%, 95%); 28 | 29 | --foreground-primary: hsl(218, 23%, 23%); 30 | --foreground-secondary: hsl(216, 15%, 52%); 31 | --foreground-tertiary: hsl(214, 20%, 69%); 32 | 33 | --accent: hsl(229, 76%, 66%); 34 | 35 | } 36 | 37 | .dark-theme { 38 | 39 | /** 40 | * dark theme colors 41 | */ 42 | 43 | --background-primary: hsl(218, 23%, 23%); 44 | --background-secondary: hsl(220, 26%, 14%); 45 | 46 | --action-primary: hsl(216, 15%, 52%); 47 | --action-secondary: hsl(218, 23%, 23%); 48 | 49 | --foreground-primary: hsl(210, 38%, 95%); 50 | --foreground-secondary: hsl(211, 25%, 84%); 51 | --foreground-tertiary: hsl(214, 20%, 69%); 52 | 53 | --accent: hsl(229, 76%, 66%); 54 | 55 | } 56 | 57 | :root { 58 | 59 | /** 60 | * color 61 | */ 62 | 63 | --white: hsl(0, 0%, 100%); 64 | 65 | /** 66 | * typography 67 | */ 68 | 69 | --fs-base: 0.85rem; 70 | --fs-1: 1.875rem; 71 | --fs-2: 1.5rem; 72 | --fs-3: 1.25rem; 73 | --fs-4: 0.875rem; 74 | --fs-5: 0.75rem; 75 | 76 | /** 77 | * spacing 78 | */ 79 | 80 | --py: 5rem; 81 | 82 | } 83 | 84 | 85 | 86 | 87 | 88 | /*-----------------------------------*\ 89 | #RESET 90 | \*-----------------------------------*/ 91 | 92 | *, *::before, *::after { 93 | margin: 0; 94 | padding: 0; 95 | box-sizing: border-box; 96 | } 97 | 98 | a { text-decoration: none; } 99 | 100 | li { list-style: none; } 101 | 102 | img, button { display: block; } 103 | 104 | a, span { display: inline-block; } 105 | 106 | button { 107 | font: inherit; 108 | border: none; 109 | background: none; 110 | cursor: pointer; 111 | } 112 | 113 | html { 114 | font-family: "Inter", sans-serif; 115 | font-size: var(--fs-base); /* base font-size (0.85rem = 13.6px) */ 116 | line-height: 1.8; 117 | } 118 | 119 | :focus { outline-offset: 4px; } 120 | 121 | 122 | /** 123 | * scrollbar style 124 | */ 125 | 126 | ::-webkit-scrollbar { width: 16px; } 127 | 128 | 129 | ::-webkit-scrollbar-thumb { 130 | background: var(--accent); 131 | border-radius: 20px; 132 | border: 4px solid; 133 | } 134 | 135 | .light-theme::-webkit-scrollbar-thumb { border-color: hsl(0, 0%, 90%); } 136 | 137 | .dark-theme::-webkit-scrollbar-thumb { border-color: hsl(219, 27%, 20%); } 138 | 139 | .light-theme::-webkit-scrollbar-track { background: hsl(0, 0%, 90%); } 140 | 141 | .dark-theme::-webkit-scrollbar-track { background: hsl(219, 27%, 20%); } 142 | 143 | 144 | 145 | 146 | 147 | /*-----------------------------------*\ 148 | #BASE STYLE 149 | \*-----------------------------------*/ 150 | 151 | .h1, 152 | .h2, 153 | .h3, 154 | .h4 { 155 | display: block; 156 | color: var(--foreground-primary); 157 | } 158 | 159 | .h1 { 160 | font-size: var(--fs-1); 161 | font-weight: 900; 162 | } 163 | 164 | .h2 { 165 | font-size: var(--fs-2); 166 | font-weight: 700; 167 | } 168 | 169 | .h3 { 170 | font-size: var(--fs-3); 171 | font-weight: 700; 172 | } 173 | 174 | .h4 { 175 | font-size: var(--fs-4); 176 | font-weight: 700; 177 | } 178 | 179 | .text-sm { font-size: var(--fs-4); } 180 | 181 | .text-tiny { font-size: var(--fs-5); } 182 | 183 | 184 | 185 | 186 | 187 | /*-----------------------------------*\ 188 | #REUSED STYLE 189 | \*-----------------------------------*/ 190 | 191 | .container { 192 | margin-inline: auto; 193 | margin: auto; /* fallback for margin-inline */ 194 | padding: 0 15px; 195 | } 196 | 197 | .btn { 198 | min-width: 10rem; 199 | border-radius: 100px; 200 | } 201 | 202 | .btn-primary { 203 | background: var(--accent); 204 | color: var(--white); 205 | padding: 0.6875rem 1.1875rem; 206 | } 207 | 208 | .btn-primary:hover { 209 | background: var(--foreground-secondary); 210 | color: var(--action-primary); 211 | } 212 | 213 | .btn-secondary { 214 | background: var(--action-secondary); 215 | color: var(--foreground-secondary); 216 | padding: 0.5rem 1rem; 217 | border: 3px solid var(--foreground-tertiary); 218 | } 219 | 220 | .btn-secondary:hover { border-color: var(--accent); } 221 | 222 | 223 | 224 | 225 | 226 | /*-----------------------------------*\ 227 | #Extra style for dark theme 228 | \*-----------------------------------*/ 229 | 230 | .dark-theme .btn-primary:hover { color: var(--background-primary); } 231 | 232 | .dark-theme .blog-topic { 233 | background: var(--action-primary); 234 | color: var(--foreground-secondary); 235 | } 236 | 237 | .dark-theme .blog-topic:hover { 238 | background: var(--foreground-primary); 239 | color: var(--action-primary); 240 | } 241 | 242 | .dark-theme .load-more:hover { color: var(--white); } 243 | 244 | .dark-theme .aside .h2 { color: var(--foreground-primary); } 245 | 246 | 247 | 248 | 249 | /*-----------------------------------*\ 250 | #HEADER 251 | \*-----------------------------------*/ 252 | 253 | header { background: var(--background-primary); } 254 | 255 | header .flex-wrapper { display: none; } 256 | 257 | .navbar { 258 | display: flex; 259 | justify-content: space-between; 260 | align-items: center; 261 | gap: 15px; 262 | padding: 15px 0; 263 | } 264 | 265 | .logo-light, 266 | .logo-dark { display: none; } 267 | 268 | .light-theme .logo-light, 269 | .dark-theme .logo-dark { display: block; } 270 | 271 | header .btn-group { 272 | display: flex; 273 | align-items: center; 274 | gap: 15px; 275 | } 276 | 277 | .theme-btn-mobile, 278 | .nav-menu-btn, 279 | .nav-close-btn { 280 | background: var(--action-secondary); 281 | color: var(--foreground-tertiary); 282 | width: 40px; 283 | height: 40px; 284 | display: flex; 285 | justify-content: center; 286 | align-items: center; 287 | border-radius: 50%; 288 | font-size: 25px; 289 | } 290 | 291 | :is(.theme-btn-mobile, 292 | .nav-menu-btn, 293 | .nav-close-btn):hover { 294 | background: var(--accent); 295 | color: var(--white); 296 | } 297 | 298 | .theme-btn-mobile ion-icon { display: none; } 299 | 300 | .theme-btn-mobile.light .sun, 301 | .theme-btn-mobile.dark .moon { display: block; } 302 | 303 | .mobile-nav { 304 | position: fixed; 305 | inset: 0; 306 | background: var(--background-primary); 307 | padding: 70px 20px; 308 | overflow: auto; 309 | overscroll-behavior: contain; 310 | transform: translateX(100%); 311 | visibility: hidden; 312 | transition: 0.5s cubic-bezier(1, 0, 0.30, 0.70); 313 | z-index: 10; 314 | } 315 | 316 | .mobile-nav.active { 317 | transform: translateX(0); 318 | visibility: visible; 319 | } 320 | 321 | .nav-close-btn { 322 | position: absolute; 323 | top: 20px; 324 | right: 20px; 325 | } 326 | 327 | .mobile-nav .wrapper { 328 | padding-bottom: 1.25rem; 329 | margin-bottom: 1.25rem; 330 | border-bottom: 1px solid var(--action-primary); 331 | } 332 | 333 | .mobile-nav .nav-title { margin-bottom: 1rem; } 334 | 335 | .mobile-nav .nav-item { margin-bottom: 0.5rem; } 336 | 337 | .mobile-nav .nav-link { 338 | font-size: var(--fs-3); 339 | color: var(--foreground-secondary); 340 | } 341 | 342 | .mobile-nav .nav-link:hover { color: var(--accent); } 343 | 344 | 345 | 346 | 347 | 348 | /*-----------------------------------*\ 349 | #HERO SECTION 350 | \*-----------------------------------*/ 351 | 352 | .hero { 353 | background: var(--background-primary); 354 | padding-top: 2rem; 355 | padding-bottom: var(--py); 356 | text-align: center; 357 | } 358 | 359 | .hero .h1 { 360 | margin-bottom: 1rem; 361 | line-height: 1.6; 362 | } 363 | 364 | .hero b { 365 | color: var(--accent); 366 | font-weight: inherit; 367 | } 368 | 369 | .hero .h3 { 370 | color: var(--foreground-secondary); 371 | margin-bottom: 2rem; 372 | } 373 | 374 | .hero .btn-group { 375 | display: flex; 376 | justify-content: center; 377 | flex-wrap: wrap; 378 | gap: 15px; 379 | text-align: center; 380 | } 381 | 382 | .hero .right { display: none; } 383 | 384 | 385 | 386 | 387 | 388 | /*-----------------------------------*\ 389 | #BLOG SECTION 390 | \*-----------------------------------*/ 391 | 392 | .main { 393 | background: var(--background-secondary); 394 | padding: var(--py) 0; 395 | } 396 | 397 | .blog .h2 { 398 | line-height: 1.3; 399 | margin-bottom: 3rem; 400 | text-align: center; 401 | } 402 | 403 | .blog-card-group { margin-bottom: 3rem; } 404 | 405 | .blog-card { 406 | background: var(--background-primary); 407 | padding: 10px; 408 | margin-bottom: 1rem; 409 | border-radius: 10px; 410 | box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.05); 411 | transition: 0.25s ease; 412 | } 413 | 414 | .blog-card:hover { 415 | transform: translateY(-2px); 416 | box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.1); 417 | } 418 | 419 | .blog-card-banner { display: none; } 420 | 421 | .blog-content-wrapper { padding: 10px 5px; } 422 | 423 | .blog-topic { 424 | background: var(--action-secondary); 425 | color: var(--foreground-secondary); 426 | font-weight: 600; 427 | padding: 0.25rem 1rem; 428 | border-radius: 5px; 429 | margin-bottom: 1rem; 430 | } 431 | 432 | .blog-topic:hover { 433 | background: var(--foreground-secondary); 434 | color: var(--action-secondary); 435 | } 436 | 437 | .blog-card .h3 { 438 | line-height: 1.4; 439 | margin-bottom: 1rem; 440 | } 441 | 442 | .blog-card .h3:hover { 443 | text-decoration: underline; 444 | text-decoration-thickness: 2px; 445 | } 446 | 447 | .blog-text, 448 | .profile-wrapper { display: none; } 449 | 450 | .blog .wrapper { 451 | display: flex; 452 | justify-content: space-between; 453 | align-items: center; 454 | flex-wrap: wrap; 455 | gap: 15px; 456 | } 457 | 458 | .blog .h4 { color: var(--foreground-secondary); } 459 | 460 | .blog .h4:hover { color: var(--accent); } 461 | 462 | .blog .text-sm { 463 | display: flex; 464 | align-items: center; 465 | gap: 5px; 466 | color: var(--foreground-tertiary); 467 | } 468 | 469 | .blog .separator { 470 | background: var(--foreground-tertiary); 471 | margin-inline: 3px; 472 | margin: 0 3px; /* fallback for margin-inline */ 473 | width: 3px; 474 | height: 3px; 475 | border-radius: 3px; 476 | } 477 | 478 | .blog ion-icon { --ionicon-stroke-width: 50px; } 479 | 480 | .load-more { 481 | margin-inline: auto; 482 | margin: auto; /* fallback for margin-inline */ 483 | background: var(--foreground-secondary); 484 | color: var(--background-secondary); 485 | padding: 0.6875rem 1.1875rem; 486 | } 487 | 488 | .load-more:hover { background: var(--accent); } 489 | 490 | 491 | 492 | 493 | 494 | /*-----------------------------------*\ 495 | #ASIDE 496 | \*-----------------------------------*/ 497 | 498 | .aside { display: none; } 499 | 500 | 501 | 502 | 503 | 504 | /*-----------------------------------*\ 505 | #FOOTER 506 | \*-----------------------------------*/ 507 | 508 | footer { background: var(--background-primary); } 509 | 510 | footer .container { 511 | padding: var(--py) 15px; 512 | display: grid; 513 | grid-template-columns: 1fr; 514 | gap: 30px; 515 | } 516 | 517 | footer .wrapper { text-align: center; } 518 | 519 | .footer-logo { margin-bottom: 10px; } 520 | 521 | .footer-text { 522 | color: var(--foreground-secondary); 523 | max-width: 300px; 524 | margin-inline: auto; 525 | margin: auto; /* fallback for margin-inline */ 526 | } 527 | 528 | .footer-title { 529 | color: var(--foreground-primary); 530 | font-weight: 700; 531 | margin-bottom: 0.4rem; 532 | } 533 | 534 | .footer-link { color: var(--foreground-secondary); } 535 | 536 | .footer-link:hover { color: var(--accent); } 537 | 538 | .copyright { 539 | color: var(--foreground-secondary); 540 | font-size: var(--fs-4); 541 | text-align: center; 542 | padding: 1rem; 543 | border-top: 1px solid var(--action-primary); 544 | } 545 | 546 | .copyright a { 547 | color: var(--accent); 548 | font-weight: 500; 549 | } 550 | 551 | .copyright a:hover { text-decoration: underline; } 552 | 553 | 554 | 555 | 556 | 557 | /*-----------------------------------*\ 558 | #MEDIA QUERIES 559 | \*-----------------------------------*/ 560 | 561 | /** 562 | * responsive for larger than 550px screen 563 | */ 564 | 565 | @media (min-width: 550px) { 566 | 567 | :root { 568 | 569 | /** 570 | * typography 571 | */ 572 | 573 | --fs-base: 0.90rem; 574 | 575 | } 576 | 577 | 578 | /** 579 | * BLOG 580 | */ 581 | 582 | .blog-card { 583 | display: grid; 584 | grid-template-columns: 3fr 4fr; 585 | gap: 20px; 586 | } 587 | 588 | .blog-card-banner { 589 | display: block; 590 | overflow: hidden; 591 | border-radius: 5px; 592 | } 593 | 594 | .blog-banner-img { 595 | width: 100%; 596 | height: 100%; 597 | object-fit: cover; 598 | } 599 | 600 | } 601 | 602 | 603 | 604 | 605 | 606 | /** 607 | * responsive for larger than 650px screen 608 | */ 609 | 610 | @media (min-width: 650px) { 611 | 612 | :root { 613 | 614 | /** 615 | * typography 616 | */ 617 | 618 | --fs-1: 2.25rem; 619 | 620 | } 621 | 622 | 623 | 624 | /** 625 | * REUSED STYLE 626 | */ 627 | 628 | .container { padding: 0 30px; } 629 | 630 | 631 | 632 | /** 633 | * HEADER 634 | */ 635 | 636 | .navbar { padding: 30px 0; } 637 | 638 | 639 | 640 | /** 641 | * BLOG 642 | */ 643 | 644 | .blog .h2 { 645 | position: relative; 646 | text-align: left; 647 | padding-left: 2rem; 648 | } 649 | 650 | .blog .h2::before { 651 | content: ''; 652 | position: absolute; 653 | top: 0; 654 | left: 0; 655 | background: var(--action-primary); 656 | width: 5px; 657 | height: 100%; 658 | border-radius: 5px; 659 | } 660 | 661 | .blog-text, 662 | .profile-wrapper { display: block; } 663 | 664 | .blog-text { 665 | color: var(--foreground-secondary); 666 | font-size: var(--fs-4); 667 | display: -webkit-box; 668 | line-clamp: 3; 669 | -webkit-line-clamp: 3; 670 | -webkit-box-orient: vertical; 671 | overflow: hidden; 672 | margin-bottom: 1rem; 673 | } 674 | 675 | .blog .wrapper-flex { 676 | display: flex; 677 | justify-content: start; 678 | align-items: center; 679 | gap: 10px; 680 | } 681 | 682 | .profile-wrapper { 683 | width: 56px; 684 | height: 56px; 685 | background: var(--action-primary); 686 | padding: 3px; 687 | border-radius: 50%; 688 | } 689 | 690 | .profile-wrapper img { border-radius: 50%; } 691 | 692 | .blog .wrapper { 693 | flex-direction: column; 694 | align-items: start; 695 | gap: 0; 696 | } 697 | 698 | 699 | 700 | /** 701 | * FOOTER 702 | */ 703 | 704 | footer .container { 705 | padding: var(--py) 30px; 706 | grid-template-columns: 2fr 1fr 1fr; 707 | } 708 | 709 | footer .wrapper { text-align: left; } 710 | 711 | .footer-text { margin: 0; } 712 | 713 | } 714 | 715 | 716 | 717 | 718 | 719 | /** 720 | * responsive for larger than 768px screen 721 | */ 722 | 723 | @media (min-width: 768px) { 724 | 725 | /** 726 | * REUSED STYLE 727 | */ 728 | 729 | .container { max-width: 800px; } 730 | 731 | } 732 | 733 | 734 | 735 | 736 | 737 | /** 738 | * responsive for larger than 1024px screen 739 | */ 740 | 741 | @media (min-width: 1024px) { 742 | 743 | :root { 744 | 745 | /** 746 | * typography 747 | */ 748 | 749 | --fs-base: 1rem; 750 | --fs-1: 3rem; 751 | 752 | } 753 | 754 | 755 | 756 | /** 757 | * REUSED STYLE 758 | */ 759 | 760 | .container { max-width: 1150px; } 761 | 762 | 763 | 764 | /** 765 | * HEADER 766 | */ 767 | 768 | header .btn-group { display: none; } 769 | 770 | header .flex-wrapper { 771 | display: flex; 772 | gap: 30px; 773 | } 774 | 775 | .desktop-nav { 776 | display: flex; 777 | align-items: center; 778 | gap: 30px; 779 | } 780 | 781 | .desktop-nav .nav-link { 782 | color: var(--foreground-secondary); 783 | font-weight: 700; 784 | } 785 | 786 | .desktop-nav .nav-link:hover { color: var(--accent); } 787 | 788 | .theme-btn-desktop { 789 | position: relative; 790 | background: var(--background-secondary); 791 | color: var(--white); 792 | width: 52px; 793 | height: 26px; 794 | display: flex; 795 | justify-content: center; 796 | align-items: center; 797 | gap: 10px; 798 | border-radius: 100px; 799 | } 800 | 801 | .theme-btn-desktop.light { 802 | background: linear-gradient(45deg, hsl(7, 100%, 71%), hsl(46, 100%, 65%)); 803 | } 804 | 805 | .theme-btn-desktop.dark { 806 | background: linear-gradient(45deg, hsl(225, 100%, 60%), hsl(296, 80%, 40%)); 807 | } 808 | 809 | .theme-btn-desktop::before { 810 | content: ''; 811 | position: absolute; 812 | background: var(--white); 813 | width: 21px; 814 | height: 21px; 815 | border-radius: 30px; 816 | top: 50%; 817 | left: 3px; 818 | transform: translateY(-50%); 819 | box-shadow: 0 2px 10px -2px hsla(0, 0%, 0%, 0.05); 820 | z-index: 2; 821 | } 822 | 823 | .theme-btn-desktop.dark::before { left: calc(100% - 24px); } 824 | 825 | 826 | 827 | /** 828 | * HERO 829 | */ 830 | 831 | .hero { text-align: left; } 832 | 833 | .hero .container { 834 | display: grid; 835 | grid-template-columns: 1fr 1fr; 836 | align-items: center; 837 | gap: 50px; 838 | } 839 | 840 | .hero .btn-group { 841 | justify-content: start; 842 | gap: 30px; 843 | } 844 | 845 | .hero .right { 846 | position: relative; 847 | display: flex; 848 | justify-content: center; 849 | align-items: center; 850 | } 851 | 852 | .hero .pattern-bg { 853 | position: absolute; 854 | top: 50%; 855 | transform: translateY(-50%); 856 | width: 100%; 857 | height: 200px; 858 | background: url(../images/pattern.png); 859 | background-size: contain; 860 | opacity: 0.2; 861 | } 862 | 863 | .hero .img-box { 864 | position: relative; 865 | z-index: 2; 866 | } 867 | 868 | .hero-img { 869 | width: 100%; 870 | height: 100%; 871 | object-fit: contain; 872 | border-radius: 0 0 280px 230px; 873 | transform: translate(10px, -10px); 874 | } 875 | 876 | .hero .shape { 877 | position: absolute; 878 | top: 50%; 879 | left: 50%; 880 | border-radius: 50%; 881 | transform: translate(-50%, -42%) rotate(-20deg); 882 | } 883 | 884 | .hero .shape-1 { 885 | background: var(--accent); 886 | width: 90%; 887 | height: 90%; 888 | z-index: -1; 889 | } 890 | 891 | .hero .shape-2 { 892 | width: 92%; 893 | height: 92%; 894 | box-shadow: inset 0 -30px 0 var(--action-primary); 895 | z-index: 2; 896 | } 897 | 898 | 899 | 900 | /** 901 | * MAIN 902 | */ 903 | 904 | .main .container { 905 | display: grid; 906 | grid-template-columns: 5fr 2fr; 907 | gap: 60px; 908 | } 909 | 910 | 911 | 912 | /** 913 | * ASIDE 914 | */ 915 | 916 | .aside { 917 | display: block; 918 | align-self: stretch; 919 | } 920 | 921 | .aside .h2 { 922 | color: var(--foreground-secondary); 923 | margin-bottom: 3rem; 924 | text-align: center; 925 | line-height: 1.3; 926 | } 927 | 928 | .aside .wrapper { 929 | background: var(--background-primary); 930 | border-radius: 10px; 931 | padding: 40px; 932 | box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05); 933 | } 934 | 935 | .topics { margin-bottom: 3rem; } 936 | 937 | .topic-btn { 938 | display: flex; 939 | align-items: stretch; 940 | background: var(--background-primary); 941 | border-radius: 10px; 942 | box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05); 943 | overflow: hidden; 944 | } 945 | 946 | .topic-btn:not(:last-child) { margin-bottom: 1rem; } 947 | 948 | .topic-btn .icon-box { 949 | font-size: 22px; 950 | width: 70px; 951 | display: flex; 952 | justify-content: center; 953 | align-items: center; 954 | background: var(--action-primary); 955 | color: var(--foreground-secondary); 956 | } 957 | 958 | .topic-btn:hover .icon-box { 959 | background: var(--accent); 960 | color: var(--white); 961 | } 962 | 963 | .topic-btn ion-icon { --ionicon-stroke-width: 40px; } 964 | 965 | .topic-btn p { 966 | padding: 15px; 967 | color: var(--foreground-secondary); 968 | font-weight: 700; 969 | } 970 | 971 | .tags { margin-bottom: 3rem; } 972 | 973 | .tags .wrapper { 974 | display: flex; 975 | flex-wrap: wrap; 976 | gap: 0.2rem; 977 | } 978 | 979 | .tags .hashtag { 980 | background: var(--action-primary); 981 | color: var(--foreground-secondary); 982 | padding: 5px 10px; 983 | font-size: var(--fs-5); 984 | font-weight: 700; 985 | border-radius: 5px; 986 | } 987 | 988 | .tags .hashtag:hover { 989 | background: var(--foreground-secondary); 990 | color: var(--action-primary); 991 | } 992 | 993 | .contact { margin-bottom: 3rem; } 994 | 995 | .contact p { 996 | color: var(--foreground-secondary); 997 | margin-bottom: 1rem; 998 | } 999 | 1000 | .social-link { 1001 | display: flex; 1002 | justify-content: center; 1003 | align-items: center; 1004 | gap: 10px; 1005 | } 1006 | 1007 | .social-link .icon-box { 1008 | width: 45px; 1009 | height: 45px; 1010 | background: var(--action-secondary); 1011 | border-radius: 50%; 1012 | display: flex; 1013 | justify-content: center; 1014 | align-items: center; 1015 | font-size: 22px; 1016 | } 1017 | 1018 | .social-link .discord { color: hsl(235, 86%, 65%); } 1019 | 1020 | .social-link .twitter { color: hsl(203, 89%, 53%); } 1021 | 1022 | .social-link .facebook { color: hsl(220, 46%, 48%); } 1023 | 1024 | .social-link .icon-box:hover { 1025 | background: var(--accent); 1026 | color: var(--white); 1027 | } 1028 | 1029 | .newsletter { 1030 | position: sticky; 1031 | top: 3rem; 1032 | margin-bottom: 98px; 1033 | } 1034 | 1035 | .newsletter p { 1036 | color: var(--foreground-secondary); 1037 | margin-bottom: 1rem; 1038 | } 1039 | 1040 | .newsletter input { 1041 | border: none; 1042 | background: var(--action-primary); 1043 | display: block; 1044 | width: 100%; 1045 | padding: 0.5rem 1rem; 1046 | font: inherit; 1047 | color: var(--foreground-secondary); 1048 | border-radius: 5px; 1049 | margin-bottom: 1rem; 1050 | } 1051 | 1052 | .newsletter input::placeholder { color: inherit; } 1053 | 1054 | .newsletter input:focus { 1055 | outline: 2px solid; 1056 | outline-offset: 0; 1057 | } 1058 | 1059 | .newsletter .btn-primary { 1060 | margin-inline: auto; 1061 | margin: auto; /* fallback for margin-inline */ 1062 | } 1063 | 1064 | 1065 | 1066 | /** 1067 | * FOOTER 1068 | */ 1069 | 1070 | .footer-title { font-size: 1.125rem; } 1071 | 1072 | .footer-link { margin-bottom: 0.3rem; } 1073 | 1074 | } -------------------------------------------------------------------------------- /assets/css/style.min.css: -------------------------------------------------------------------------------- 1 | .light-theme{--background-primary:hsl(0, 0%, 100%);--background-secondary:hsl(0, 0%, 97%);--action-primary:hsl(214, 32%, 91%);--action-secondary:hsl(210, 38%, 95%);--foreground-primary:hsl(218, 23%, 23%);--foreground-secondary:hsl(216, 15%, 52%);--foreground-tertiary:hsl(214, 20%, 69%);--accent:hsl(229, 76%, 66%)}.dark-theme{--background-primary:hsl(218, 23%, 23%);--background-secondary:hsl(220, 26%, 14%);--action-primary:hsl(216, 15%, 52%);--action-secondary:hsl(218, 23%, 23%);--foreground-primary:hsl(210, 38%, 95%);--foreground-secondary:hsl(211, 25%, 84%);--foreground-tertiary:hsl(214, 20%, 69%);--accent:hsl(229, 76%, 66%)}:root{--white:hsl(0, 0%, 100%);--fs-base:0.85rem;--fs-1:1.875rem;--fs-2:1.5rem;--fs-3:1.25rem;--fs-4:0.875rem;--fs-5:0.75rem;--py:5rem}*,::after,::before{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none}li{list-style:none}button,img{display:block}a,span{display:inline-block}button{font:inherit;border:none;background:0 0;cursor:pointer}html{font-family:Inter,sans-serif;font-size:var(--fs-base);line-height:1.8}:focus{outline-offset:4px}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-thumb{background:var(--accent);border-radius:20px;border:4px solid}.light-theme::-webkit-scrollbar-thumb{border-color:#e5e5e5}.dark-theme::-webkit-scrollbar-thumb{border-color:#252e40}.light-theme::-webkit-scrollbar-track{background:#e5e5e5}.dark-theme::-webkit-scrollbar-track{background:#252e40}.h1,.h2,.h3,.h4{display:block;color:var(--foreground-primary)}.h1{font-size:var(--fs-1);font-weight:900}.h2{font-size:var(--fs-2);font-weight:700}.h3{font-size:var(--fs-3);font-weight:700}.h4{font-size:var(--fs-4);font-weight:700}.text-sm{font-size:var(--fs-4)}.text-tiny{font-size:var(--fs-5)}.container{margin-inline:auto;margin:auto;padding:0 15px}.btn{min-width:10rem;border-radius:100px}.btn-primary{background:var(--accent);color:var(--white);padding:.6875rem 1.1875rem}.btn-primary:hover{background:var(--foreground-secondary);color:var(--action-primary)}.btn-secondary{background:var(--action-secondary);color:var(--foreground-secondary);padding:.5rem 1rem;border:3px solid var(--foreground-tertiary)}.btn-secondary:hover{border-color:var(--accent)}.dark-theme .btn-primary:hover{color:var(--background-primary)}.dark-theme .blog-topic{background:var(--action-primary);color:var(--foreground-secondary)}.dark-theme .blog-topic:hover{background:var(--foreground-primary);color:var(--action-primary)}.dark-theme .load-more:hover{color:var(--white)}.dark-theme .aside .h2{color:var(--foreground-primary)}header{background:var(--background-primary)}header .flex-wrapper{display:none}.navbar{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 0}.logo-dark,.logo-light{display:none}.dark-theme .logo-dark,.light-theme .logo-light{display:block}header .btn-group{display:flex;align-items:center;gap:15px}.nav-close-btn,.nav-menu-btn,.theme-btn-mobile{background:var(--action-secondary);color:var(--foreground-tertiary);width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:25px}:is(.theme-btn-mobile,.nav-menu-btn,.nav-close-btn):hover{background:var(--accent);color:var(--white)}.theme-btn-mobile ion-icon{display:none}.theme-btn-mobile.dark .moon,.theme-btn-mobile.light .sun{display:block}.mobile-nav{position:fixed;inset:0;background:var(--background-primary);padding:70px 20px;overflow:auto;overscroll-behavior:contain;transform:translateX(100%);visibility:hidden;transition:.5s cubic-bezier(1,0,.3,.7);z-index:10}.mobile-nav.active{transform:translateX(0);visibility:visible}.nav-close-btn{position:absolute;top:20px;right:20px}.mobile-nav .wrapper{padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:1px solid var(--action-primary)}.mobile-nav .nav-title{margin-bottom:1rem}.mobile-nav .nav-item{margin-bottom:.5rem}.mobile-nav .nav-link{font-size:var(--fs-3);color:var(--foreground-secondary)}.mobile-nav .nav-link:hover{color:var(--accent)}.hero{background:var(--background-primary);padding-top:2rem;padding-bottom:var(--py);text-align:center}.hero .h1{margin-bottom:1rem;line-height:1.6}.hero b{color:var(--accent);font-weight:inherit}.hero .h3{color:var(--foreground-secondary);margin-bottom:2rem}.hero .btn-group{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;text-align:center}.hero .right{display:none}.main{background:var(--background-secondary);padding:var(--py) 0}.blog .h2{line-height:1.3;margin-bottom:3rem;text-align:center}.blog-card-group{margin-bottom:3rem}.blog-card{background:var(--background-primary);padding:10px;margin-bottom:1rem;border-radius:10px;box-shadow:0 10px 10px hsla(0,0%,0%,.05);transition:.25s ease}.blog-card:hover{transform:translateY(-2px);box-shadow:0 10px 10px hsla(0,0%,0%,.1)}.blog-card-banner{display:none}.blog-content-wrapper{padding:10px 5px}.blog-topic{background:var(--action-secondary);color:var(--foreground-secondary);font-weight:600;padding:.25rem 1rem;border-radius:5px;margin-bottom:1rem}.blog-topic:hover{background:var(--foreground-secondary);color:var(--action-secondary)}.blog-card .h3{line-height:1.4;margin-bottom:1rem}.blog-card .h3:hover{text-decoration:underline;text-decoration-thickness:2px}.blog-text,.profile-wrapper{display:none}.blog .wrapper{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px}.blog .h4{color:var(--foreground-secondary)}.blog .h4:hover{color:var(--accent)}.blog .text-sm{display:flex;align-items:center;gap:5px;color:var(--foreground-tertiary)}.blog .separator{background:var(--foreground-tertiary);margin-inline:3px;margin:0 3px;width:3px;height:3px;border-radius:3px}.blog ion-icon{--ionicon-stroke-width:50px}.load-more{margin-inline:auto;margin:auto;background:var(--foreground-secondary);color:var(--background-secondary);padding:.6875rem 1.1875rem}.load-more:hover{background:var(--accent)}.aside{display:none}footer{background:var(--background-primary)}footer .container{padding:var(--py) 15px;display:grid;grid-template-columns:1fr;gap:30px}footer .wrapper{text-align:center}.footer-logo{margin-bottom:10px}.footer-text{color:var(--foreground-secondary);max-width:300px;margin-inline:auto;margin:auto}.footer-title{color:var(--foreground-primary);font-weight:700;margin-bottom:.4rem}.footer-link{color:var(--foreground-secondary)}.footer-link:hover{color:var(--accent)}.copyright{color:var(--foreground-secondary);font-size:var(--fs-4);text-align:center;padding:1rem;border-top:1px solid var(--action-primary)}.copyright a{color:var(--accent);font-weight:500}.copyright a:hover{text-decoration:underline}@media (min-width:550px){:root{--fs-base:0.90rem}.blog-card{display:grid;grid-template-columns:3fr 4fr;gap:20px}.blog-card-banner{display:block;overflow:hidden;border-radius:5px}.blog-banner-img{width:100%;height:100%;object-fit:cover}}@media (min-width:650px){:root{--fs-1:2.25rem}.container{padding:0 30px}.navbar{padding:30px 0}.blog .h2{position:relative;text-align:left;padding-left:2rem}.blog .h2::before{content:'';position:absolute;top:0;left:0;background:var(--action-primary);width:5px;height:100%;border-radius:5px}.blog-text,.profile-wrapper{display:block}.blog-text{color:var(--foreground-secondary);font-size:var(--fs-4);display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:1rem}.blog .wrapper-flex{display:flex;justify-content:start;align-items:center;gap:10px}.profile-wrapper{width:56px;height:56px;background:var(--action-primary);padding:3px;border-radius:50%}.profile-wrapper img{border-radius:50%}.blog .wrapper{flex-direction:column;align-items:start;gap:0}footer .container{padding:var(--py) 30px;grid-template-columns:2fr 1fr 1fr}footer .wrapper{text-align:left}.footer-text{margin:0}}@media (min-width:768px){.container{max-width:800px}}@media (min-width:1024px){:root{--fs-base:1rem;--fs-1:3rem}.container{max-width:1150px}header .btn-group{display:none}header .flex-wrapper{display:flex;gap:30px}.desktop-nav{display:flex;align-items:center;gap:30px}.desktop-nav .nav-link{color:var(--foreground-secondary);font-weight:700}.desktop-nav .nav-link:hover{color:var(--accent)}.theme-btn-desktop{position:relative;background:var(--background-secondary);color:var(--white);width:52px;height:26px;display:flex;justify-content:center;align-items:center;gap:10px;border-radius:100px}.theme-btn-desktop.light{background:linear-gradient(45deg,#ff7c6b,#fed54c)}.theme-btn-desktop.dark{background:linear-gradient(45deg,#3265ff,#ac14b7)}.theme-btn-desktop::before{content:'';position:absolute;background:var(--white);width:21px;height:21px;border-radius:30px;top:50%;left:3px;transform:translateY(-50%);box-shadow:0 2px 10px -2px hsla(0,0%,0%,.05);z-index:2}.theme-btn-desktop.dark::before{left:calc(100% - 24px)}.hero{text-align:left}.hero .container{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px}.hero .btn-group{justify-content:start;gap:30px}.hero .right{position:relative;display:flex;justify-content:center;align-items:center}.hero .pattern-bg{position:absolute;top:50%;transform:translateY(-50%);width:100%;height:200px;background:url(../images/pattern.png);background-size:contain;opacity:.2}.hero .img-box{position:relative;z-index:2}.hero-img{width:100%;height:100%;object-fit:contain;border-radius:0 0 280px 230px;transform:translate(10px,-10px)}.hero .shape{position:absolute;top:50%;left:50%;border-radius:50%;transform:translate(-50%,-42%) rotate(-20deg)}.hero .shape-1{background:var(--accent);width:90%;height:90%;z-index:-1}.hero .shape-2{width:92%;height:92%;box-shadow:inset 0 -30px 0 var(--action-primary);z-index:2}.main .container{display:grid;grid-template-columns:5fr 2fr;gap:60px}.aside{display:block;align-self:stretch}.aside .h2{color:var(--foreground-secondary);margin-bottom:3rem;text-align:center;line-height:1.3}.aside .wrapper{background:var(--background-primary);border-radius:10px;padding:40px;box-shadow:0 5px 5px hsla(0,0%,0%,.05)}.topics{margin-bottom:3rem}.topic-btn{display:flex;align-items:stretch;background:var(--background-primary);border-radius:10px;box-shadow:0 5px 5px hsla(0,0%,0%,.05);overflow:hidden}.topic-btn:not(:last-child){margin-bottom:1rem}.topic-btn .icon-box{font-size:22px;width:70px;display:flex;justify-content:center;align-items:center;background:var(--action-primary);color:var(--foreground-secondary)}.topic-btn:hover .icon-box{background:var(--accent);color:var(--white)}.topic-btn ion-icon{--ionicon-stroke-width:40px}.topic-btn p{padding:15px;color:var(--foreground-secondary);font-weight:700}.tags{margin-bottom:3rem}.tags .wrapper{display:flex;flex-wrap:wrap;gap:.2rem}.tags .hashtag{background:var(--action-primary);color:var(--foreground-secondary);padding:5px 10px;font-size:var(--fs-5);font-weight:700;border-radius:5px}.tags .hashtag:hover{background:var(--foreground-secondary);color:var(--action-primary)}.contact{margin-bottom:3rem}.contact p{color:var(--foreground-secondary);margin-bottom:1rem}.social-link{display:flex;justify-content:center;align-items:center;gap:10px}.social-link .icon-box{width:45px;height:45px;background:var(--action-secondary);border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:22px}.social-link .discord{color:#5865f2}.social-link .twitter{color:#1ca0f1}.social-link .facebook{color:#4267b2}.social-link .icon-box:hover{background:var(--accent);color:var(--white)}.newsletter{position:sticky;top:3rem;margin-bottom:98px}.newsletter p{color:var(--foreground-secondary);margin-bottom:1rem}.newsletter input{border:none;background:var(--action-primary);display:block;width:100%;padding:.5rem 1rem;font:inherit;color:var(--foreground-secondary);border-radius:5px;margin-bottom:1rem}.newsletter input::placeholder{color:inherit}.newsletter input:focus{outline:2px solid;outline-offset:0}.newsletter .btn-primary{margin-inline:auto;margin:auto}.footer-title{font-size:1.125rem}.footer-link{margin-bottom:.3rem}} -------------------------------------------------------------------------------- /assets/images/author.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/author.png -------------------------------------------------------------------------------- /assets/images/blog-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/blog-1.png -------------------------------------------------------------------------------- /assets/images/blog-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/blog-10.png -------------------------------------------------------------------------------- /assets/images/blog-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/blog-2.png -------------------------------------------------------------------------------- /assets/images/blog-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/blog-3.png -------------------------------------------------------------------------------- /assets/images/blog-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/blog-4.png -------------------------------------------------------------------------------- /assets/images/blog-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/blog-5.png -------------------------------------------------------------------------------- /assets/images/blog-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/blog-6.png -------------------------------------------------------------------------------- /assets/images/blog-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/blog-7.png -------------------------------------------------------------------------------- /assets/images/blog-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/blog-8.png -------------------------------------------------------------------------------- /assets/images/blog-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/blog-9.png -------------------------------------------------------------------------------- /assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/favicon.ico -------------------------------------------------------------------------------- /assets/images/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/hero.png -------------------------------------------------------------------------------- /assets/images/logo-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/logo-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/devblog-personal-blog-website/c3147ce031539db214e241e0ed0b763f0a29c058/assets/images/pattern.png -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // navbar variables 4 | const nav = document.querySelector('.mobile-nav'); 5 | const navMenuBtn = document.querySelector('.nav-menu-btn'); 6 | const navCloseBtn = document.querySelector('.nav-close-btn'); 7 | 8 | 9 | // navToggle function 10 | const navToggleFunc = function () { nav.classList.toggle('active'); } 11 | 12 | navMenuBtn.addEventListener('click', navToggleFunc); 13 | navCloseBtn.addEventListener('click', navToggleFunc); 14 | 15 | 16 | 17 | // theme toggle variables 18 | const themeBtn = document.querySelectorAll('.theme-btn'); 19 | 20 | 21 | for (let i = 0; i < themeBtn.length; i++) { 22 | 23 | themeBtn[i].addEventListener('click', function () { 24 | 25 | // toggle `light-theme` & `dark-theme` class from `body` 26 | // when clicked `theme-btn` 27 | document.body.classList.toggle('light-theme'); 28 | document.body.classList.toggle('dark-theme'); 29 | 30 | for (let i = 0; i < themeBtn.length; i++) { 31 | 32 | // When the `theme-btn` is clicked, 33 | // it toggles classes between `light` & `dark` for all `theme-btn`. 34 | themeBtn[i].classList.toggle('light'); 35 | themeBtn[i].classList.toggle('dark'); 36 | 37 | } 38 | 39 | }) 40 | 41 | } -------------------------------------------------------------------------------- /assets/js/script.min.js: -------------------------------------------------------------------------------- 1 | "use strict";const nav=document.querySelector(".mobile-nav"),navMenuBtn=document.querySelector(".nav-menu-btn"),navCloseBtn=document.querySelector(".nav-close-btn"),navToggleFunc=function(){nav.classList.toggle("active")};navMenuBtn.addEventListener("click",navToggleFunc),navCloseBtn.addEventListener("click",navToggleFunc);const themeBtn=document.querySelectorAll(".theme-btn");for(let i=0;i 2 | 3 | 4 | 5 | 6 | 7 | 8 | DevBlog - Julia Walker's Personal Blog 9 | 10 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 33 | 34 |
35 | 36 |
37 | 38 | 132 | 133 |
134 | 135 |
136 | 137 | 138 | 139 | 140 | 141 |
142 | 143 | 146 | 147 |
148 | 149 |
150 | 151 |
152 | 153 |

154 | Hi, I'm Julia Walker. 155 |
Web Developer 156 |

157 | 158 |

159 | Specialized in a11y 160 | and Core Web Vitals 161 |

162 | 163 |
164 | Contact Me 165 | About Me 166 |
167 | 168 |
169 | 170 |
171 | 172 |
173 |
174 | Julia Walker 175 |
176 |
177 |
178 | 179 |
180 | 181 |
182 | 183 |
184 | 185 | 186 | 187 | 188 | 189 |
190 | 191 |
192 | 193 | 196 | 197 |
198 | 199 |

Latest Blog Post

200 | 201 |
202 | 203 |
204 | 205 |
206 | Building microservices with Dropwizard, MongoDB & Docker 208 |
209 | 210 |
211 | 212 | 213 | 214 |

215 | 216 | Building microservices with Dropwizard, MongoDB & Docker 217 | 218 |

219 | 220 |

221 | This NoSQL database oriented to documents (by documents like JSON) combines some of the features from 222 | relational 223 | databases, easy to use and the multi-platform is the best option for scale up and have fault 224 | tolerance, load balancing, 225 | map reduce, etc. 226 |

227 | 228 |
229 | 230 |
231 | Julia Walker 232 |
233 | 234 |
235 | Julia Walker 236 | 237 |

238 | 239 | 240 | 241 | 242 |

243 |
244 | 245 |
246 | 247 |
248 | 249 |
250 | 251 | 252 |
253 | 254 |
255 | Fast web page loading on a $20 feature phone 257 |
258 | 259 |
260 | 261 | 262 | 263 |

Fast web page loading on a $20 feature phone

264 | 265 |

266 | Feature phones are affordable (under $20-25), low-end devices enabling 100s of millions of users in 267 | developing countries 268 | to leverage the web. Think of them as a light version of a smart phone. 269 |

270 | 271 |
272 | 273 |
274 | Julia walker 275 |
276 | 277 |
278 | Julia Walker 279 | 280 |

281 | 282 | 283 | 284 | 285 |

286 |
287 | 288 |
289 | 290 |
291 | 292 |
293 | 294 | 295 |
296 | 297 |
298 | Accessibility Tips for Web Developers 300 |
301 | 302 |
303 | 304 | 305 | 306 |

Accessibility Tips for Web Developers

307 | 308 |

309 | It's awesome to build sites that are inclusive and accessible to everyone. There are at least six key 310 | areas of 311 | disability we can optimize for: visual, hearing, mobility, cognition, speech and neural. Many tools 312 | and resources can 313 | help here, even if you're totally new to web accessibility. 314 |

315 | 316 |
317 | 318 |
319 | Julia walker 320 |
321 | 322 |
323 | Julia Walker 324 | 325 |

326 | 327 | 328 | 329 | 330 |

331 |
332 | 333 |
334 | 335 |
336 | 337 |
338 | 339 | 340 |
341 | 342 |
343 | Dynamically Securing Databases using Hashicorp Vault 345 |
346 | 347 |
348 | 349 | 350 | 351 |

Dynamically Securing Databases using Hashicorp Vault

352 | 353 |

354 | Nowadays, it's hard to profoundly talk about security in the IT industry, since it has to be 355 | considered on so many 356 | different levels: from securing code chunks, securing containers, up to securing complex 357 | infrastructures and defining 358 | strong authorization and authentication policies across the enterprise. 359 |

360 | 361 |
362 | 363 |
364 | Julia walker 365 |
366 | 367 |
368 | Julia Walker 369 | 370 |

371 | 372 | 373 | 374 | 375 |

376 |
377 | 378 |
379 | 380 |
381 | 382 |
383 | 384 | 385 |
386 | 387 |
388 | Adaptive Loading - Improving Web Performance on low-end devices 391 |
392 | 393 |
394 | 395 | 396 | 397 |

Adaptive Loading - Improving Web Performance on low-end devices

398 | 399 |

400 | Adaptive Loading: Do not just respond based on screen size, adapt based on actual device hardware. 401 | Any user can have a slow experience. In a world with widely varying device capabilities, a "one-size" 402 | fits all 403 | experience may not always work. Sites that delight users on high-end devices can be unusable on 404 | low-end ones, 405 | particularly on median mobile and desktop hardware and in emerging markets. 406 |

407 | 408 |
409 | 410 |
411 | Julia walker 412 |
413 | 414 |
415 | Julia Walker 416 | 417 |

418 | 419 | 420 | 421 | 422 |

423 |
424 | 425 |
426 | 427 |
428 | 429 |
430 | 431 | 432 |
433 | 434 |
435 | Don't Develop Just for Yourself - A Developer's Checklist to Accessibility 438 |
439 | 440 |
441 | 442 | 443 | 444 |

Don't Develop Just for Yourself - A Developer's Checklist to Accessibility 445 |

446 | 447 |

448 | We, as developers, tend to develop sites unconsciously for people like ourselves. If we don't actively 449 | pay attention, 450 | the sites are often accessible only for certain types of people: Sighted mouse-users, who have good 451 | fine motor skills 452 | and are good at using computers. 453 |

454 | 455 |
456 | 457 |
458 | Julia walker 459 |
460 | 461 |
462 | Julia Walker 463 | 464 |

465 | 466 | 467 | 468 | 469 |

470 |
471 | 472 |
473 | 474 |
475 | 476 |
477 | 478 | 479 |
480 | 481 |
482 | Building a Restful CRUD API with Node JS, Express, and MongoDB 485 |
486 | 487 |
488 | 489 | 490 | 491 |

Building a Restful CRUD API with Node JS, Express, and MongoDB

492 | 493 |

494 | Application Programming Interface is the abbreviation for API. An API is a software interface that 495 | enables two apps to 496 | communicate with one another. In other words, an API is a messenger that sends your request to the 497 | provider and then 498 | returns the response to you. 499 |

500 | 501 |
502 | 503 |
504 | Julia walker 505 |
506 | 507 |
508 | Julia Walker 509 | 510 |

511 | 512 | 513 | 514 | 515 |

516 |
517 | 518 |
519 | 520 |
521 | 522 |
523 | 524 | 525 |
526 | 527 |
528 | Monitoring Performance with the PageSpeed Insights API 530 |
531 | 532 |
533 | 534 | 535 | 536 |

Monitoring Performance with the PageSpeed Insights API

537 | 538 |

539 | The PageSpeed Insights API provides free access to performance monitoring for web pages and returns 540 | data with 541 | suggestions for how to improve. The V5 API includes lab data from Lighthouse and real-world data from 542 | the Chrome User 543 | Experience Report (CrUX). 544 |

545 | 546 |
547 | 548 |
549 | Julia walker 550 |
551 | 552 |
553 | Julia Walker 554 | 555 |

556 | 557 | 558 | 559 | 560 |

561 |
562 | 563 |
564 | 565 |
566 | 567 |
568 | 569 | 570 |
571 | 572 |
573 | The best web accessibility tools for developers in 2021 575 |
576 | 577 |
578 | 579 | 580 | 581 |

The best web accessibility tools for developers in 2021 582 |

583 | 584 |

585 | The quality of the tools you use defines the speed with which you can diagnose and resolve problems. 586 | Each year the landscape changes dramatically in web technologies, and of late the tooling for 587 | accessibility is no 588 | exception. 589 |

590 | 591 |
592 | 593 |
594 | Julia walker 595 |
596 | 597 |
598 | Julia Walker 599 | 600 |

601 | 602 | 603 | 604 | 605 |

606 |
607 | 608 |
609 | 610 |
611 | 612 |
613 | 614 | 615 |
616 | 617 |
618 | How to connect a React frontend with a NodeJS/Express backend 621 |
622 | 623 |
624 | 625 | 626 | 627 |

How to connect a React frontend with a NodeJS/Express backend

628 | 629 |

630 | The MERN (MongoDB, Express, React, NodeJS) stack is very popular for making full stack applications, 631 | utilizing 632 | Javascript for both the backend and frontend as well as a document-oriented or non relational database 633 | (MongoDB), 634 | meaning that it's structured like JSON rather than a large excel sheet like SQL databases are. 635 |

636 | 637 |
638 | 639 |
640 | Julia walker 641 |
642 | 643 |
644 | Julia Walker 645 | 646 |

647 | 648 | 649 | 650 | 651 |

652 |
653 | 654 |
655 | 656 |
657 | 658 |
659 | 660 |
661 | 662 | 663 | 664 |
665 | 666 | 667 | 668 | 669 | 670 | 673 | 674 |
675 | 676 |
677 | 678 |

Topics

679 | 680 | 681 |
682 | 683 |
684 | 685 |

Database

686 | 687 | 688 | 689 |
690 | 691 |
692 | 693 |

Accessibility

694 | 695 | 696 | 697 |
698 | 699 |
700 | 701 |

Web Performance

702 | 703 | 704 |
705 | 706 |
707 | 708 |

Tags

709 | 710 |
711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 |
722 | 723 |
724 | 725 |
726 | 727 |

Let's Talk

728 | 729 |
730 | 731 |

732 | Do you want to learn more about how I can help your company overcome problems? Let us have a 733 | conversation. 734 |

735 | 736 | 757 | 758 |
759 | 760 |
761 | 762 | 781 | 782 |
783 | 784 |
785 | 786 |
787 | 788 |
789 | 790 | 791 | 792 | 793 | 794 | 797 | 798 | 866 | 867 | 868 | 869 | 870 | 871 | 874 | 875 | 876 | 879 | 880 | 881 | 882 | 883 | 884 | --------------------------------------------------------------------------------