Merge branch 'dev'

.gitignore

@@ -43,8 +43,8 @@ Thumbs.db
 
 docs/CNAME
 
-*.avif
-*.webp
+# *.avif
+# *.webp
 
-/src/assets/img/*.jpeg
-/src/assets/img/*.jpg
+# /src/assets/img/*.jpeg
+# /src/assets/img/*.jpg

package.json

@@ -11,48 +11,48 @@
     "dev:ssr": "ng run dartegnians-portfolio:serve-ssr",
     "serve:ssr": "node dist/dartegnians-portfolio/server/main.js",
     "build:ssr": "ng build --configuration production && ng run dartegnians-portfolio:server",
-    "prerender": "bunx gulp compress && ng run dartegnians-portfolio:prerender",
+    "prerender": "ng run dartegnians-portfolio:prerender",
     "vercel-build": "npm run build:ssr",
     "scully-build": "ng build --configuration production && npx scully --noPrompt --project dartegnians-portfolio --scanRoutes",
     "local": "ng serve --disable-host-check --host 0.0.0.0",
-    "local-gulp": "bunx gulp compress && bunx gulp compressStories && ng serve --disable-host-check"
+    "local-gulp": "bunx gulp compress && ng serve --disable-host-check"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.1.1",
-    "@angular/common": "^18.1.1",
-    "@angular/compiler": "^18.1.1",
-    "@angular/core": "^18.1.1",
-    "@angular/forms": "^18.1.1",
-    "@angular/platform-browser": "^18.1.1",
-    "@angular/platform-browser-dynamic": "^18.1.1",
-    "@angular/platform-server": "^18.1.1",
-    "@angular/router": "^18.1.1",
-    "@angular/service-worker": "^18.1.1",
-    "@angular/ssr": "^18.1.1",
+    "@angular/animations": "^18.1.4",
+    "@angular/common": "^18.1.4",
+    "@angular/compiler": "^18.1.4",
+    "@angular/core": "^18.1.4",
+    "@angular/forms": "^18.1.4",
+    "@angular/platform-browser": "^18.1.4",
+    "@angular/platform-browser-dynamic": "^18.1.4",
+    "@angular/platform-server": "^18.1.4",
+    "@angular/router": "^18.1.4",
+    "@angular/service-worker": "^18.1.4",
+    "@angular/ssr": "^18.1.4",
     "@material/material-color-utilities": "^0.3.0",
     "bootstrap": "^5.3.3",
     "express": "^4.19.2",
     "idb": "^8.0.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",
-    "zone.js": "^0.14.8"
+    "zone.js": "^0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.1.1",
-    "@angular/cli": "^18.1.1",
-    "@angular/compiler-cli": "^18.1.1",
+    "@angular-devkit/build-angular": "^18.1.4",
+    "@angular/cli": "^18.1.4",
+    "@angular/compiler-cli": "^18.1.4",
     "@types/express": "^4.17.21",
     "@types/jasmine": "^5.1.4",
-    "@types/node": "^20.14.11",
+    "@types/node": "^20.14.15",
     "gulp": "^4.0.2",
     "gulp-sharp-responsive": "^0.4.1",
     "jasmine-core": "~5.2.0",
-    "karma": "^6.4.3",
+    "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.1",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   }
 }

src/app/interfaces/meta-tags.interface.ts

@@ -0,0 +1,8 @@
+export default interface MetaTags {
+	description: string;
+	keywords: string;
+	title: string;
+	image: string;
+	imageAlt: string;
+	favicons?: { type: string; sizes: string; href: string }[];
+}

src/app/services/meta.service.ts

@@ -0,0 +1,85 @@
+import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Meta, Title } from '@angular/platform-browser';
+import MetaTags from '@interfaces/meta-tags.interface';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class MetaService {
+	isBrowser: boolean = false;
+
+	constructor(
+		private meta: Meta,
+		private titleService: Title,
+		@Inject(PLATFORM_ID) private platformId: Object
+	) {
+		this.isBrowser = isPlatformBrowser(this.platformId);
+	}
+
+	updateSiteInfoMeta(metaTags: MetaTags) {
+		this.meta.updateTag({ name: 'description', content: metaTags.description });
+		this.meta.updateTag({ name: 'keywords', content: metaTags.keywords });
+		this.meta.updateTag({ property: 'og:title', content: metaTags.title });
+		this.meta.updateTag({ property: 'og:description', content: metaTags.description });
+		this.meta.updateTag({ property: 'og:image', content: metaTags.image });
+		this.meta.updateTag({ property: 'og:image:secure_url', content: metaTags.image });
+		this.meta.updateTag({ property: 'og:image:alt', content: metaTags.imageAlt });
+		this.meta.updateTag({ name: 'twitter:title', content: metaTags.title });
+		this.meta.updateTag({ name: 'twitter:description', content: metaTags.description });
+		this.meta.updateTag({ name: 'twitter:image', content: metaTags.image });
+
+		this.titleService.setTitle(metaTags.title);
+
+		if (metaTags.favicons) {
+			this.updateFavicons(metaTags.favicons);
+		}
+	}
+
+	updateSiteColorMeta(color: string) {
+		this.meta.updateTag({
+			name: "theme-color",
+			content: color
+		});
+	}
+
+	updateFavicons(favicons: { type: string; sizes: string; href: string }[]) {
+		if (this.isBrowser) {
+			// Remove existing favicons
+			const existingIcons = document.querySelectorAll("link[rel*='icon']");
+			existingIcons.forEach(icon => icon.remove());
+			this.writeFavicons(favicons);
+		}
+	}
+
+	writeFavicons(favicons: { type: string; sizes: string; href: string }[]) {
+		if (this.isBrowser) {
+			// Add new favicons
+			favicons.forEach(favicon => {
+				const link: HTMLLinkElement = document.createElement('link');
+				link.rel = 'icon';
+				link.type = favicon.type;
+				link.setAttribute('sizes', favicon.sizes); // Use setAttribute to handle read-only properties
+				link.href = favicon.href;
+				document.getElementsByTagName('head')[0].appendChild(link);
+			});
+		}
+	}
+
+	restoreOriginalSiteInfo() {
+		const metaTags = {
+			description: "The website and home page of Dartegnian Velarde—dartegnian.com. Includes a mood calendar, journal, MBTI, and other info.",
+			keywords: "Dartegnian, Dartegnian Velarde, Velarde Dartegnian, Dartegnian L. Velarde, Portfolio, Landing Page, About Me, Home Page, Mood Calendar, Journal, Web Journal, MBTI",
+			title: "Dartegnian L. Velarde | DevOps Engineer",
+			image: "https://dartegnian.com/assets/img/main-min-1024.jpg",
+			imageAlt: "Material You-style introduction banner for Dartegnian.com",
+			favicons: [
+				{ type: "image/png", sizes: "192x192", href: "/assets/icons/icon-192x192.png" },
+				{ type: "image/png", sizes: "32x32", href: "/assets/icons/favicon-32x32.png" },
+				{ type: "image/png", sizes: "16x16", href: "/assets/icons/favicon-16x16.png" }
+			]
+		};
+
+		this.updateSiteInfoMeta(metaTags);
+	}
+}

src/index.html

@@ -58,7 +58,7 @@
 		  "name": "Dartegnian L. Velarde",
 		  "jobTitle": "DevOps Engineer",
 		  "url": "https://dartegnian.com/",
-		  "description": "I’m an agile and determined DevOps engineer with a passion for curating innovative and responsive web applications.",
+		  "description": "I'm an agile, determined, AWS-certified DevOps engineer passionate about curating innovative and responsive web applications.",
 		  "image": "https://dartegnian.com/assets/img/me-min-1024.jpg",
 		  "sameAs": [
 			"https://www.instagram.com/dartegnian/",
@@ -69,22 +69,65 @@
 			"https://www.linkedin.com/in/dartegnian/",
 			"https://www.youtube.com/dartegnian"
 		  ],
-		  "email": "hello@dartegnian.com",
+		  "email": "contact@dartegnian.com",
 		  "gender": "Male",
 		  "nationality": "Filipino",
 		  "knowsLanguage": [
 			"English",
 			"Filipino"
 		  ],
-		  "interests": "Web Development, DevOps, Music",
 		  "alumniOf": [
 			{
 			  "@type": "EducationalOrganization",
-			  "name": "Asia Pacific College"
+			  "name": "Asia Pacific College",
+			  "url": "https://www.apc.edu.ph/"
 			},
 			{
 			  "@type": "EducationalOrganization",
-			  "name": "Integrated Montessori Center"
+			  "name": "Integrated Montessori Center",
+			  "url": "https://www.integratedmontessori.edu.ph/home/"
+			}
+		  ],
+		  "award": [
+			"AWS Certified Cloud Practitioner (2024-2027)",
+			"Most Inspirational Concept, NASA Space Apps (2017)",
+			"Champion, FEU Tamahack (2017)",
+			"1st place, Junior Microsoft Student Partner, Microsoft "Hack for a Change" (2017)",
+			"Best Rookie Public Speaker of the Year, APC Speaks (2016)",
+			"4th Place, Science and Health Writing, Division Secondary Schools Press Conference (2014)",
+			"10th Place, Science and Health Writing, Division Journalism Qualifiers Contest for Private Schools (2014)"
+		  ],
+		  "knowsAbout": ["DevOps", "Cloud Computing", "Server Management", "Angular", "Web Programming", "Web Development", "Front-end Development", "DevOps Engineering"]
+		}
+	</script>
+	<script type="application/ld+json">
+		{
+		  "@context": "https://schema.org",
+		  "@type": "BreadcrumbList",
+		  "itemListElement": [
+			{
+			  "@type": "ListItem",
+			  "position": 1,
+			  "name": "Home",
+			  "item": "https://dartegnian.com/"
+			},
+			{
+			  "@type": "ListItem",
+			  "position": 2,
+			  "name": "Blog",
+			  "item": "https://blog.dartegnian.com/"
+			},
+			{
+			  "@type": "ListItem",
+			  "position": 3,
+			  "name": "Portfolio",
+			  "item": "https://portfolio.dartegnian.com/"
+			},
+			{
+			  "@type": "ListItem",
+			  "position": 4,
+			  "name": "Web Stories",
+			  "item": "https://stories.dartegnian.com/"
 			}
 		  ]
 		}

src/robots.txt

@@ -1,4 +1,14 @@
 User-agent: *
 Disallow:
 
-Sitemap: https://portfolio.dartegnian.com/sitemap.xml
+Sitemap: https://dartegnian.com/sitemap.xml
+
+#         [NOW PLAYING]
+#
+#            BAHAMA
+#            aespa
+#
+#   0:39  ──O───────────  3:34
+#    ↻      ⊲  Ⅱ  ⊳      ↺
+#     Volume: ▁▂▃▄▅▆▇ 100%
+#

tsconfig.json

@@ -26,6 +26,9 @@
        "@components/*": [
         "src/app/components/*"
       ],
+      "@interfaces/*": [
+        "src/app/interfaces/*"
+      ],
       "@services/*": [
         "src/app/services/*"
       ]