Fix: Update service worker configuration, web manifests, and SEO metadata for improved performance and accessibility

KosMaster87 · KosMaster87 · commit cdc50fed4deb · 2025-12-18T14:45:52.000-03:00
diff --git a/ngsw-config.json b/ngsw-config.json
@@ -23,11 +23,25 @@
       "updateMode": "prefetch",
       "resources": {
         "files": [
-          "/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)",
-          "/theme-light/*",
-          "/theme-dark/*"
+          "/assets/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif)",
+          "/fonts/**/*.(otf|ttf|woff|woff2)",
+          "/i18n/*.json",
+          "/theme-light/**/*.(png|svg)",
+          "/theme-dark/**/*.(png|svg)"
         ]
       }
     }
-  ]
+  ],
+  "dataGroups": [
+    {
+      "name": "api-contact",
+      "urls": ["/api/contact/**"],
+      "cacheConfig": {
+        "maxSize": 0,
+        "maxAge": "0u",
+        "strategy": "freshness"
+      }
+    }
+  ],
+  "navigationUrls": ["/**", "!/**/*.*", "!/**/*__*", "!/**/*__*/**"]
 }
diff --git a/public/manifest-dark.webmanifest b/public/manifest-dark.webmanifest
@@ -6,7 +6,7 @@
   "scope": "/",
   "display": "standalone",
   "orientation": "any",
-  "background_color": "#1a1a1a",
+  "background_color": "#000000",
   "theme_color": "#00bc8f",
   "categories": ["portfolio", "developer", "web development"],
   "lang": "en",
@@ -81,10 +81,10 @@
   ],
   "shortcuts": [
     {
-      "name": "Projects",
-      "short_name": "Projects",
-      "description": "View my latest development projects",
-      "url": "/projects",
+      "name": "About",
+      "short_name": "About",
+      "description": "Learn more about my skills and experience",
+      "url": "/#about",
       "icons": [
         {
           "src": "/theme-dark/icon-192.png",
@@ -94,10 +94,23 @@
       ]
     },
     {
-      "name": "About",
-      "short_name": "About",
-      "description": "Learn more about my skills and experience",
-      "url": "/about",
+      "name": "Skills",
+      "short_name": "Skills",
+      "description": "Explore my technical skills and expertise",
+      "url": "/#skills",
+      "icons": [
+        {
+          "src": "/theme-dark/icon-192.png",
+          "sizes": "192x192",
+          "type": "image/png"
+        }
+      ]
+    },
+    {
+      "name": "Projects",
+      "short_name": "Projects",
+      "description": "View my latest development projects",
+      "url": "/#projects",
       "icons": [
         {
           "src": "/theme-dark/icon-192.png",
@@ -110,7 +123,7 @@
       "name": "Contact",
       "short_name": "Contact",
       "description": "Get in touch for collaboration opportunities",
-      "url": "/contact",
+      "url": "/#contact",
       "icons": [
         {
           "src": "/theme-dark/icon-192.png",
diff --git a/public/manifest-light.webmanifest b/public/manifest-light.webmanifest
@@ -6,7 +6,7 @@
   "scope": "/",
   "display": "standalone",
   "orientation": "any",
-  "background_color": "#fffcf3",
+  "background_color": "#ffffff",
   "theme_color": "#00bc8f",
   "categories": ["portfolio", "developer", "web development"],
   "lang": "en",
@@ -81,10 +81,10 @@
   ],
   "shortcuts": [
     {
-      "name": "Projects",
-      "short_name": "Projects",
-      "description": "View my latest development projects",
-      "url": "/projects",
+      "name": "About",
+      "short_name": "About",
+      "description": "Learn more about my skills and experience",
+      "url": "/#about",
       "icons": [
         {
           "src": "/theme-light/icon-192.png",
@@ -94,10 +94,23 @@
       ]
     },
     {
-      "name": "About",
-      "short_name": "About",
-      "description": "Learn more about my skills and experience",
-      "url": "/about",
+      "name": "Skills",
+      "short_name": "Skills",
+      "description": "Explore my technical skills and expertise",
+      "url": "/#skills",
+      "icons": [
+        {
+          "src": "/theme-light/icon-192.png",
+          "sizes": "192x192",
+          "type": "image/png"
+        }
+      ]
+    },
+    {
+      "name": "Projects",
+      "short_name": "Projects",
+      "description": "View my latest development projects",
+      "url": "/#projects",
       "icons": [
         {
           "src": "/theme-light/icon-192.png",
@@ -110,7 +123,7 @@
       "name": "Contact",
       "short_name": "Contact",
       "description": "Get in touch for collaboration opportunities",
-      "url": "/contact",
+      "url": "/#contact",
       "icons": [
         {
           "src": "/theme-light/icon-192.png",
diff --git a/src/app/core/services/seo.service.ts b/src/app/core/services/seo.service.ts
@@ -15,6 +15,7 @@ export interface PageMetadata {
   ogDescription?: string;
   ogImage?: string;
   ogUrl?: string;
+  robots?: string;
 }
 
 @Injectable({
@@ -57,6 +58,11 @@ export class SeoService {
     if (metadata.ogUrl) {
       this.metaService.updateTag({ property: 'og:url', content: metadata.ogUrl });
     }
+
+    // Robots meta tag (for noindex, nofollow)
+    if (metadata.robots) {
+      this.metaService.updateTag({ name: 'robots', content: metadata.robots });
+    }
   }
 
   /**
diff --git a/src/app/layout/footer/footer.component.html b/src/app/layout/footer/footer.component.html
@@ -49,6 +49,7 @@ <h4 class="app-footer__social-heading">{{ footerData().socialHeading }}</h4>
           <a
             [href]="social.url"
             [attr.aria-label]="social.ariaLabel"
+            [attr.title]="'Visit my ' + social.name + ' profile'"
             [class]="'social-link social-link--' + social.hoverColor"
             target="_blank"
             rel="noopener noreferrer"
diff --git a/src/app/layout/header/header.component.html b/src/app/layout/header/header.component.html
@@ -11,6 +11,7 @@
           (keyup.space)="navigateToHome()"
           role="button"
           tabindex="0"
+          title="Go to homepage"
         >
           <img class="header__logo-icon" [src]="logoPath()" alt="dev2k Logo" draggable="false" />
           <span class="header__logo-text">dev2k</span>
@@ -78,7 +79,7 @@
           appNoScroll
         />
 
-        <label class="header__burger" for="menuToggle">
+        <label class="header__burger" for="menuToggle" title="Toggle menu">
           <span class="header__burger-line"></span>
           <span class="header__burger-line"></span>
           <span class="header__burger-line"></span>
diff --git a/src/app/shared/components/buttons/icon-button/icon-button.html b/src/app/shared/components/buttons/icon-button/icon-button.html
@@ -1,4 +1,10 @@
-<button [type]="type()" class="icon-button" (click)="onClick()" [attr.aria-label]="ariaLabel()">
+<button
+  [type]="type()"
+  class="icon-button"
+  (click)="onClick()"
+  [attr.aria-label]="ariaLabel()"
+  [attr.title]="ariaLabel()"
+>
   <img
     [src]="arrowImage"
     [class.icon-button__arrow--dark]="isDark()"
diff --git a/src/app/shared/components/buttons/nav-button/nav-button.component.ts b/src/app/shared/components/buttons/nav-button/nav-button.component.ts
@@ -44,7 +44,7 @@ export class NavButtonComponent {
       const route = Array.isArray(link) ? link[0] : link;
       this.navigationService.navigateToSection(frag, route);
     } else {
-      this.navigationService.navigateToHome();
+      this.navigationService.navigateToRoute(link);
     }
   }
 }
diff --git a/src/app/shared/components/buttons/project-button/project-button.component.ts b/src/app/shared/components/buttons/project-button/project-button.component.ts
@@ -18,6 +18,7 @@ import { SmoothScrollService } from '../../../../core/services';
       type="button"
       (click)="handleClick()"
       (focus)="handleFocus($event)"
+      [attr.title]="label()"
     >
       {{ label() }}
     </button>
diff --git a/src/app/shared/components/language-switcher/language-switcher.component.html b/src/app/shared/components/language-switcher/language-switcher.component.html
@@ -4,6 +4,7 @@
     (click)="toggleDropdown()"
     [attr.aria-expanded]="isDropdownOpen()"
     [attr.aria-label]="'Language: ' + getCurrentLanguageData()?.label"
+    title="Change language"
   >
     <img
       [src]="getCurrentLanguageData()?.flag"
diff --git a/src/app/shared/components/theme-switcher/theme-switcher.component.html b/src/app/shared/components/theme-switcher/theme-switcher.component.html
@@ -4,6 +4,7 @@
     (click)="toggleDropdown()"
     [attr.aria-expanded]="isDropdownOpen()"
     aria-label="Theme selector"
+    title="Switch theme"
   >
     @if (currentTheme() === 'light') {
     <img src="assets/images/theme/light-mode.svg" alt="Light mode" width="20" height="20" />
diff --git a/src/app/shared/pages/not-found-page/not-found-page.component.ts b/src/app/shared/pages/not-found-page/not-found-page.component.ts
@@ -28,6 +28,7 @@ export class NotFoundPageComponent implements OnInit {
         'The page you are looking for could not be found. Return to homepage or explore other sections.',
       ogTitle: '404 - Page Not Found',
       ogUrl: 'https://portfolio.dev2k.org/404',
+      robots: 'noindex, nofollow',
     });
 
     this.scrollService.triggerPageFlash();
diff --git a/src/index.html b/src/index.html
@@ -39,8 +39,11 @@
       content="Professional portfolio showcasing modern web development projects and skills"
     />
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://yourportfolio.dev" />
-    <meta property="og:image" content="assets/screenshots/desktop-home.png" />
+    <meta property="og:url" content="https://portfolio.dev2k.org" />
+    <meta
+      property="og:image"
+      content="https://portfolio.dev2k.org/assets/screenshots/desktop-home.png"
+    />
 
     <!-- Twitter Card Meta -->
     <meta name="twitter:card" content="summary_large_image" />
@@ -49,7 +52,10 @@
       name="twitter:description"
       content="Professional portfolio showcasing modern web development projects and skills"
     />
-    <meta name="twitter:image" content="assets/screenshots/desktop-home.png" />
+    <meta
+      name="twitter:image"
+      content="https://portfolio.dev2k.org/assets/screenshots/desktop-home.png"
+    />
   </head>
   <body>
     <app-root></app-root>

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@ export interface PageMetadata {`
`15`	`15`	`ogDescription?: string;`
`16`	`16`	`ogImage?: string;`
`17`	`17`	`ogUrl?: string;`
	`18`	`+ robots?: string;`
`18`	`19`	`}`
`19`	`20`
`20`	`21`	`@Injectable({`
`@@ -57,6 +58,11 @@ export class SeoService {`
`57`	`58`	`if (metadata.ogUrl) {`
`58`	`59`	`this.metaService.updateTag({ property: 'og:url', content: metadata.ogUrl });`
`59`	`60`	`}`
	`61`	`+`
	`62`	`+ // Robots meta tag (for noindex, nofollow)`
	`63`	`+ if (metadata.robots) {`
	`64`	`+ this.metaService.updateTag({ name: 'robots', content: metadata.robots });`
	`65`	`+ }`
`60`	`66`	`}`
`61`	`67`
`62`	`68`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ export class NavButtonComponent {`
`44`	`44`	`const route = Array.isArray(link) ? link[0] : link;`
`45`	`45`	`this.navigationService.navigateToSection(frag, route);`
`46`	`46`	`} else {`
`47`		`- this.navigationService.navigateToHome();`
	`47`	`+ this.navigationService.navigateToRoute(link);`
`48`	`48`	`}`
`49`	`49`	`}`
`50`	`50`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@ import { SmoothScrollService } from '../../../../core/services';`
`18`	`18`	`type="button"`
`19`	`19`	`(click)="handleClick()"`
`20`	`20`	`(focus)="handleFocus($event)"`
	`21`	`+ [attr.title]="label()"`
`21`	`22`	`>`
`22`	`23`	`{{ label() }}`
`23`	`24`	`</button>`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`	`(click)="toggleDropdown()"`
`5`	`5`	`[attr.aria-expanded]="isDropdownOpen()"`
`6`	`6`	`[attr.aria-label]="'Language: ' + getCurrentLanguageData()?.label"`
	`7`	`+ title="Change language"`
`7`	`8`	`>`
`8`	`9`	`<img`
`9`	`10`	`[src]="getCurrentLanguageData()?.flag"`