Fixed packages problem.

Author: Sapython

package-lock.json

@@ -16,7 +16,7 @@
     "deploy": "npm run prebuild && ng build --configuration production && npm run postbuild && npx scully -- --scanRoutes && firebase deploy --only hosting && lighthouse https://sapython-f016a.web.app/ --view && start https://sapython-f016a.web.app/",
     "postbuild": "gzip dist/static/*.*",
     "prebuild": "npm run cleanDist && npm run compressImages",
-    "compressImages":"gulp compressProjectImages compressAuthorImages compressPostImages compressUiImages compressPostHeaderImages",
+    "compressImages": "gulp compressProjectImages compressAuthorImages compressPostImages compressUiImages compressPostHeaderImages",
     "analyze": "source-map-explorer dist/SapythonBlog/**/*.js",
     "lint": "ng lint"
   },

package.json

@@ -78,16 +78,18 @@ <h2>
             <br>
             Blog Posts
         </h2>
-        <div class="posts uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider>
-            <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
-                <li *ngFor="let post of posts">
-                    <app-post-card [date]="post.date" [authorImage]="post.authorImage" [authorName]="post.authorName"
-                        [excerpt]="post.description" [title]="post.title || ''" [featuredImage]="post.featuredImage"
-                        [imageAlt]="post.title || ''" [url]="post.route"></app-post-card>
-                </li>
-            </ul>
-            <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
-            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
+        <div class="posts uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="autoplay: true">
+            <div class="uk-slider-container">
+                <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
+                    <li *ngFor="let post of posts">
+                        <app-post-card [date]="post.date" [authorImage]="post.authorImage" [authorName]="post.authorName"
+                            [excerpt]="post.description" [title]="post.title || ''" [featuredImage]="post.featuredImage"
+                            [imageAlt]="post.title || ''" [url]="post.route"></app-post-card>
+                    </li>
+                </ul>
+            </div>
+            <a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
+            <a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
         </div>
     </section>
     <section class="projects">

src/app/pages/home/home.component.html

@@ -252,6 +252,7 @@ main {
   }
   section.projects {
     padding: 50px;
+    padding-left: 200px;
     div.heading {
       color: var(--color-text);
       strong {
@@ -264,9 +265,8 @@ main {
       font-display: swap;
     }
     div.mainProjects {
-      margin: 100px;
       .projectSlider {
-        margin: 0 auto;
+        margin-bottom: 40px;
         border-radius: 20px;
         width: 70vw;
         height: 40vh;
@@ -290,7 +290,7 @@ main {
       }
     }
     div.showcaseProjects {
-      margin: 0 auto;
+      // margin: 0 auto;
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
       grid-template-rows: 1fr 1fr;

src/app/pages/home/home.component.scss

@@ -70,6 +70,10 @@ $SapythonBlog-theme: mat.define-light-theme((
   --color-text-light: #c2c2c2;
   --font-main:"CascadiyaCode";
   --font-secondary:"Amsterdam";
+  // New theme
+  --color-primary: #20232e;
+  --color-secondary: #2d2f38;
+  --color-tertiary: #14171d;
 }
 // Definitions end here
 html,