diff --git a/static/images/portfolio/freelancing/pawel-czerwinski-mrCMyoadfBM-unsplash.jpg b/assets/images/portfolio/freelancing/pawel-czerwinski-mrCMyoadfBM-unsplash.jpg
similarity index 100%
rename from static/images/portfolio/freelancing/pawel-czerwinski-mrCMyoadfBM-unsplash.jpg
rename to assets/images/portfolio/freelancing/pawel-czerwinski-mrCMyoadfBM-unsplash.jpg
diff --git a/static/images/portfolio/freelancing/spenser-sembrat-esoj35vCKS8-unsplash.jpg b/assets/images/portfolio/freelancing/spenser-sembrat-esoj35vCKS8-unsplash.jpg
similarity index 100%
rename from static/images/portfolio/freelancing/spenser-sembrat-esoj35vCKS8-unsplash.jpg
rename to assets/images/portfolio/freelancing/spenser-sembrat-esoj35vCKS8-unsplash.jpg
diff --git a/static/images/portfolio/nature/helenium-8985687_1280.jpg b/assets/images/portfolio/nature/helenium-8985687_1280.jpg
similarity index 100%
rename from static/images/portfolio/nature/helenium-8985687_1280.jpg
rename to assets/images/portfolio/nature/helenium-8985687_1280.jpg
diff --git a/static/images/portfolio/nature/karsten-winegeart-AW76trwVU08-unsplash.jpg b/assets/images/portfolio/nature/karsten-winegeart-AW76trwVU08-unsplash.jpg
similarity index 100%
rename from static/images/portfolio/nature/karsten-winegeart-AW76trwVU08-unsplash.jpg
rename to assets/images/portfolio/nature/karsten-winegeart-AW76trwVU08-unsplash.jpg
diff --git a/static/images/portfolio/nature/nataliya-melnychuk-V5s-XShdujI-unsplash.jpg b/assets/images/portfolio/nature/nataliya-melnychuk-V5s-XShdujI-unsplash.jpg
similarity index 100%
rename from static/images/portfolio/nature/nataliya-melnychuk-V5s-XShdujI-unsplash.jpg
rename to assets/images/portfolio/nature/nataliya-melnychuk-V5s-XShdujI-unsplash.jpg
diff --git a/static/images/portfolio/nature/plums-8932336_1280.jpg b/assets/images/portfolio/nature/plums-8932336_1280.jpg
similarity index 100%
rename from static/images/portfolio/nature/plums-8932336_1280.jpg
rename to assets/images/portfolio/nature/plums-8932336_1280.jpg
diff --git a/static/images/portfolio/test-category/street-food-9587641_1280.png b/assets/images/portfolio/test-category/street-food-9587641_1280.png
similarity index 100%
rename from static/images/portfolio/test-category/street-food-9587641_1280.png
rename to assets/images/portfolio/test-category/street-food-9587641_1280.png
diff --git a/static/images/portfolio/test-category/vadim-sadovski-rvkk2qqfE4M-unsplash.jpg b/assets/images/portfolio/test-category/vadim-sadovski-rvkk2qqfE4M-unsplash.jpg
similarity index 100%
rename from static/images/portfolio/test-category/vadim-sadovski-rvkk2qqfE4M-unsplash.jpg
rename to assets/images/portfolio/test-category/vadim-sadovski-rvkk2qqfE4M-unsplash.jpg
diff --git a/static/images/profile.png b/assets/images/profile.png
similarity index 100%
rename from static/images/profile.png
rename to assets/images/profile.png
diff --git a/static/img/logo.svg b/assets/img/logo.svg
similarity index 100%
rename from static/img/logo.svg
rename to assets/img/logo.svg
diff --git a/assets/js/portfolio-page.js b/assets/js/portfolio-page.js
new file mode 100644
index 0000000..861858c
--- /dev/null
+++ b/assets/js/portfolio-page.js
@@ -0,0 +1,173 @@
+// Portfolio page filters / masonry grid renderer.
+// Extracted from inline <script> in layouts/portfolio/portfolio.html.
+
+(async () => {
+  const gridEl = document.getElementById('portfolioGrid');
+  if (!gridEl) return;
+
+  const url = gridEl.getAttribute('data-json-url');
+  if (!url) return;
+
+  const resp = await fetch(url);
+  const data = await resp.json();
+
+  const filtersEl = document.getElementById('portfolioFilters');
+  const formatSelect = document.getElementById('formatSelect');
+  const orientationSelect = document.getElementById('orientationSelect');
+  const cameraSelect = document.getElementById('cameraSelect');
+  const colorSelect = document.getElementById('colorSelect');
+
+  const formats = new Set();
+  const cameras = new Set();
+  const colors = new Set();
+
+  (data.portfolio_metadata.category_list || []).forEach(cat => {
+    const btn = document.createElement('button');
+    btn.className = 'filter-btn';
+    btn.dataset.filter = cat;
+    btn.textContent = cat.charAt(0).toUpperCase() + cat.slice(1);
+    filtersEl.appendChild(btn);
+  });
+
+  (data.images || []).forEach(img => {
+    formats.add(img.pkb_format);
+    if (img.pkb_exif_model) cameras.add(img.pkb_exif_model);
+    (img.pkb_dominant_colors || []).forEach(c => colors.add(c));
+  });
+
+  [...formats].sort().forEach(fmt => {
+    const option = document.createElement('option');
+    option.value = fmt;
+    option.textContent = (fmt || '').toUpperCase();
+    formatSelect.appendChild(option);
+  });
+
+  [...cameras].sort().forEach(cam => {
+    const option = document.createElement('option');
+    option.value = cam;
+    option.textContent = cam;
+    cameraSelect.appendChild(option);
+  });
+
+  [...colors].sort().forEach(clr => {
+    const option = document.createElement('option');
+    option.value = clr;
+    option.textContent = clr;
+    colorSelect.appendChild(option);
+  });
+
+  const statsEl = document.getElementById('portfolioStats');
+  statsEl.innerHTML = `
+    <span class="stat-item"><strong>${data.portfolio_metadata.total_images}</strong> Images</span>
+    <span class="stat-item"><strong>${(data.portfolio_metadata.category_list || []).length}</strong> Categories</span>
+  `;
+
+  function getColumnCount() {
+    if (window.innerWidth < 600) return 1;
+    if (window.innerWidth < 900) return 2;
+    if (window.innerWidth < 1200) return 3;
+    return 4;
+  }
+
+  function distributeToColumns(items, colCount) {
+    const cols = Array.from({ length: colCount }, () => []);
+    items.forEach((item, idx) => {
+      cols[idx % colCount].push(item);
+    });
+    return cols;
+  }
+
+  function renderGrid(category, format, orientation, camera, color) {
+    const filtered = (data.images || []).filter(img => {
+      const catMatch = category === 'all' || img.pkb_category === category;
+      const fmtMatch = format === 'all' || img.pkb_format === format;
+      const oriMatch = orientation === 'all' || img.pkb_orientation === orientation;
+      const camMatch = camera === 'all' || img.pkb_exif_model === camera;
+      const clrMatch = color === 'all' || (img.pkb_dominant_colors || []).includes(color);
+      return catMatch && fmtMatch && oriMatch && camMatch && clrMatch;
+    });
+
+    const colCount = getColumnCount();
+    const columns = distributeToColumns(filtered, colCount);
+
+    gridEl.innerHTML = columns.map(colImgs => `
+      <div class="masonry-column">
+        ${colImgs.map(img => {
+          const width = img.pkb_original_width || 1;
+          const height = img.pkb_original_height || 1;
+          const thumb = img.pkb_thumbnail_300_300 || {};
+          return `
+            <div class="portfolio-item" data-category="${img.pkb_category}" data-format="${img.pkb_format}" style="width: 100%;">
+              <div class="item-container" style="aspect-ratio: ${width} / ${height}; width: 100%;">
+                <img class="portfolio-image" src="${thumb.url || ''}" alt="${img.pkb_filename || ''}" loading="lazy" style="width: 100%; height: 100%;" />
+                <div class="item-overlay">
+                  <div class="item-info">
+                    <span class="item-category">${img.pkb_category}</span>
+                    <span class="item-dimensions">${width}×${height}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          `;
+        }).join('')}
+      </div>
+    `).join('');
+
+    gridEl.querySelectorAll('.portfolio-image').forEach(img => {
+      if (img.complete) {
+        img.classList.add('loaded');
+      } else {
+        img.addEventListener('load', () => img.classList.add('loaded'));
+        img.addEventListener('error', () => img.classList.add('error'));
+      }
+    });
+  }
+
+  let activeCategory = 'all';
+  let activeFormat = 'all';
+  let activeOrientation = 'all';
+  let activeCamera = 'all';
+  let activeColor = 'all';
+
+  renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
+
+  filtersEl.querySelectorAll('.filter-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      filtersEl.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      activeCategory = btn.dataset.filter;
+      renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
+    });
+  });
+
+  formatSelect.addEventListener('change', e => {
+    activeFormat = e.target.value;
+    renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
+  });
+
+  orientationSelect.addEventListener('change', e => {
+    activeOrientation = e.target.value;
+    renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
+  });
+
+  cameraSelect.addEventListener('change', e => {
+    activeCamera = e.target.value;
+    renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
+  });
+
+  colorSelect.addEventListener('change', e => {
+    activeColor = e.target.value;
+    renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
+  });
+
+  let resizeTimeout;
+  window.addEventListener('resize', () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
+    }, 150);
+  });
+
+  const loading = document.getElementById('portfolioLoading');
+  if (loading) loading.style.display = 'none';
+})();
diff --git a/exampleSite/config/_default/hugo.toml b/exampleSite/config/_default/hugo.toml
index 7aa9143..e0cd958 100644
--- a/exampleSite/config/_default/hugo.toml
+++ b/exampleSite/config/_default/hugo.toml
@@ -36,9 +36,4 @@ title        = "PKB-theme Demo"
 
     [[module.imports.mounts]]
       source = "archetypes"
-      target = "archetypes"
-
-    # Mount portfolio images to the correct assets path
-    [[module.mounts]]
-      source = "static/images/portfolio"
-      target = "assets/images/portfolio"
\ No newline at end of file
+      target = "archetypes"
\ No newline at end of file
diff --git a/layouts/page/about.html b/layouts/page/about.html
index 3bd2fb2..92c896e 100644
--- a/layouts/page/about.html
+++ b/layouts/page/about.html
@@ -9,11 +9,22 @@
   <div class="about-profile-container">
     <div class="about-left-column">
       <div class="profile-image">
-        <img src="{{ with .Site.Params.contact.profilepicture }}{{ . | absURL }}{{ else }}{{ "images/profile.png" | absURL }}{{ end }}" 
-             alt="Profile Picture" 
-             width="240" 
-             height="240"
-             loading="lazy">
+        {{ $profileSrc := site.Params.contact.profilepicture | default "images/profile.png" }}
+        {{ $profileImg := resources.Get $profileSrc }}
+        {{ if $profileImg }}
+          {{ $profile := $profileImg.Resize "200x webp" }}
+          <img src="{{ $profile.RelPermalink }}"
+               alt="Profile Picture"
+               width="{{ $profile.Width }}"
+               height="{{ $profile.Height }}"
+               loading="lazy">
+        {{ else }}
+          <img src="{{ $profileSrc | absURL }}"
+               alt="Profile Picture"
+               width="240"
+               height="240"
+               loading="lazy">
+        {{ end }}
       </div>
       <h2 class="profile-name">{{ .Site.Params.contact.profilename | default "Your Name" }}</h2>
       <p class="profile-description">{{ .Site.Params.about.profiledescription | default "A short description about yourself." }}</p>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index c4f6d6b..01fd75f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,8 +1,9 @@
 <!-- layouts/partials/header.html -->
 <div class="header-container">
   <div class="header-left">
-    <a href="{{ .Site.Home.RelPermalink }}" class="logo-link" aria-label="Home">
-      <img src="{{ "img/logo.svg" | relURL }}" alt="Site Logo" class="site-logo" width="40" height="40">
+    <a href="{{ site.Home.RelPermalink }}" class="logo-link" aria-label="Home">
+      {{ $logo := resources.Get "img/logo.svg" | minify | fingerprint }}
+      <img src="{{ $logo.RelPermalink }}" alt="Site Logo" class="site-logo" width="40" height="40">
     </a>
     
     <button id="burger-menu" class="burger-button" aria-label="Toggle menu" aria-expanded="false">
diff --git a/layouts/portfolio/portfolio.html b/layouts/portfolio/portfolio.html
index 04753f1..4cffb8c 100644
--- a/layouts/portfolio/portfolio.html
+++ b/layouts/portfolio/portfolio.html
@@ -73,169 +73,10 @@ <h3 class="metadata-title">Image Details</h3>
     </div>
   </div>
 
-  <!-- Load external JS for portfolio logic -->
-  <script src="/assets/js/portfolio.js"></script>
+  {{/* Bundle portfolio JS via Hugo Pipes (js.Build → minify → fingerprint, deferred). */}}
+  {{ $portfolio := resources.Get "js/portfolio.js" | js.Build (dict "minify" true) | fingerprint }}
+  <script src="{{ $portfolio.RelPermalink }}" integrity="{{ $portfolio.Data.Integrity }}" defer></script>
 
-  <script>
-  (async () => {
-    const gridEl = document.getElementById('portfolioGrid');
-    const url = gridEl.getAttribute('data-json-url');
-    const resp = await fetch(url);
-    const data = await resp.json();
-
-    const filtersEl = document.getElementById('portfolioFilters');
-    const formatSelect = document.getElementById('formatSelect');
-    const orientationSelect = document.getElementById('orientationSelect');
-    const cameraSelect = document.getElementById('cameraSelect');
-    const colorSelect = document.getElementById('colorSelect');
-
-    const formats = new Set();
-    const cameras = new Set();
-    const colors = new Set();
-
-    data.portfolio_metadata.category_list.forEach(cat => {
-      const btn = document.createElement('button');
-      btn.className = 'filter-btn';
-      btn.dataset.filter = cat;
-      btn.textContent = cat.charAt(0).toUpperCase() + cat.slice(1);
-      filtersEl.appendChild(btn);
-    });
-
-    data.images.forEach(img => {
-      formats.add(img.pkb_format);
-      if (img.pkb_exif_model) cameras.add(img.pkb_exif_model);
-      (img.pkb_dominant_colors || []).forEach(c => colors.add(c));
-    });
-
-    [...formats].sort().forEach(fmt => {
-      const option = document.createElement('option');
-      option.value = fmt;
-      option.textContent = fmt.toUpperCase();
-      formatSelect.appendChild(option);
-    });
-
-    [...cameras].sort().forEach(cam => {
-      const option = document.createElement('option');
-      option.value = cam;
-      option.textContent = cam;
-      cameraSelect.appendChild(option);
-    });
-
-    [...colors].sort().forEach(clr => {
-      const option = document.createElement('option');
-      option.value = clr;
-      option.textContent = clr;
-      colorSelect.appendChild(option);
-    });
-
-    const statsEl = document.getElementById('portfolioStats');
-    statsEl.innerHTML = `
-      <span class="stat-item"><strong>${data.portfolio_metadata.total_images}</strong> Images</span>
-      <span class="stat-item"><strong>${data.portfolio_metadata.category_list.length}</strong> Categories</span>
-    `;
-
-    function getColumnCount() {
-      if (window.innerWidth < 600) return 1;
-      if (window.innerWidth < 900) return 2;
-      if (window.innerWidth < 1200) return 3;
-      return 4;
-    }
-
-    function distributeToColumns(items, colCount) {
-      const cols = Array.from({ length: colCount }, () => []);
-      items.forEach((item, idx) => {
-        cols[idx % colCount].push(item);
-      });
-      return cols;
-    }
-
-    function renderGrid(category, format, orientation, camera, color) {
-      const filtered = data.images.filter(img => {
-        const catMatch = category === 'all' || img.pkb_category === category;
-        const fmtMatch = format === 'all' || img.pkb_format === format;
-        const oriMatch = orientation === 'all' || img.pkb_orientation === orientation;
-        const camMatch = camera === 'all' || img.pkb_exif_model === camera;
-        const clrMatch = color === 'all' || (img.pkb_dominant_colors || []).includes(color);
-        return catMatch && fmtMatch && oriMatch && camMatch && clrMatch;
-      });
-
-      const colCount = getColumnCount();
-      const columns = distributeToColumns(filtered, colCount);
-
-      gridEl.innerHTML = columns.map(colImgs => `
-        <div class="masonry-column">
-          ${colImgs.map(img => {
-            const width = img.pkb_original_width || 1;
-            const height = img.pkb_original_height || 1;
-            return `
-              <div class="portfolio-item" data-category="${img.pkb_category}" data-format="${img.pkb_format}" style="width: 100%;">
-                <div class="item-container" style="aspect-ratio: ${width} / ${height}; width: 100%;">
-                  <img class="portfolio-image" src="${img.pkb_thumbnail_300_300.url}" alt="${img.pkb_filename}" loading="lazy" style="width: 100%; height: 100%;" />
-                  <div class="item-overlay">
-                    <div class="item-info">
-                      <span class="item-category">${img.pkb_category}</span>
-                      <span class="item-dimensions">${width}×${height}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            `;
-          }).join('')}
-        </div>
-      `).join('');
-
-      gridEl.querySelectorAll('.portfolio-image').forEach(img => {
-        if (img.complete) {
-          img.classList.add('loaded');
-        } else {
-          img.addEventListener('load', () => img.classList.add('loaded'));
-          img.addEventListener('error', () => img.classList.add('error'));
-        }
-      });
-    }
-
-    let activeCategory = 'all';
-    let activeFormat = 'all';
-    let activeOrientation = 'all';
-    let activeCamera = 'all';
-    let activeColor = 'all';
-
-    renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
-
-    filtersEl.querySelectorAll('.filter-btn').forEach(btn => {
-      btn.addEventListener('click', () => {
-        filtersEl.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        activeCategory = btn.dataset.filter;
-        renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
-      });
-    });
-
-    formatSelect.addEventListener('change', e => {
-      activeFormat = e.target.value;
-      renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
-    });
-
-    orientationSelect.addEventListener('change', e => {
-      activeOrientation = e.target.value;
-      renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
-    });
-
-    cameraSelect.addEventListener('change', e => {
-      activeCamera = e.target.value;
-      renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
-    });
-
-    colorSelect.addEventListener('change', e => {
-      activeColor = e.target.value;
-      renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
-    });
-
-    window.addEventListener('resize', () => {
-      renderGrid(activeCategory, activeFormat, activeOrientation, activeCamera, activeColor);
-    });
-
-    document.getElementById('portfolioLoading').style.display = 'none';
-  })();
-  </script>
+  {{ $portfolioPage := resources.Get "js/portfolio-page.js" | js.Build (dict "minify" true) | fingerprint }}
+  <script src="{{ $portfolioPage.RelPermalink }}" integrity="{{ $portfolioPage.Data.Integrity }}" defer></script>
 {{ end }}
diff --git a/layouts/portfolio/single.json b/layouts/portfolio/single.json
index 8c07391..b5950c4 100644
--- a/layouts/portfolio/single.json
+++ b/layouts/portfolio/single.json
@@ -4,7 +4,7 @@
   "portfolio_metadata" (dict
     "total_images" 0
     "supported_formats" (slice)
-    "generated_at" (now.Format "2006-01-02T15:04:05Z07:00")
+    "generated_at" (time.Format "2006-01-02T15:04:05Z07:00" now)
     "hugo_version" hugo.Version
     "pkb_schema_version" "1.0.0"
     "category_list" (slice)
@@ -121,7 +121,7 @@
   "portfolio_metadata" (dict
     "total_images" (len $portfolioImages)
     "supported_formats" $supportedFormats
-    "generated_at" (now.Format "2006-01-02T15:04:05Z07:00")
+    "generated_at" (time.Format "2006-01-02T15:04:05Z07:00" now)
     "hugo_version" hugo.Version
     "pkb_schema_version" "1.0.0"
     "category_list" $categoryList
diff --git a/static/netlify.toml b/static/netlify.toml
deleted file mode 100644
index e69de29..0000000