diff --git a/layouts/partials/cards/project.html b/layouts/partials/cards/project.html
index 3f21d31..7c5f417 100644
--- a/layouts/partials/cards/project.html
+++ b/layouts/partials/cards/project.html
@@ -8,7 +8,13 @@
         <div>
           <div class="d-flex">
             {{ if .logo }}
-            <img class="card-img-xs" src="{{ .logo | relURL }}" alt="{{ .name }}" />
+
+            {{ $logoImage:= resources.Get .logo}}
+            {{ if $logoImage }}
+            {{ $logoImage := $logoImage.Fit "24x24" }}
+
+            <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+            {{ end }}
             {{ end }}
             <h5 class="card-title mb-0">{{ .name }}</h5>
           </div>
diff --git a/layouts/partials/cards/skill.html b/layouts/partials/cards/skill.html
index 4478e1e..bb3339f 100644
--- a/layouts/partials/cards/skill.html
+++ b/layouts/partials/cards/skill.html
@@ -2,8 +2,14 @@
   <a class="skill-card-link" href="{{ if .url }}{{ .url }}{{ else }}#{{ end }}">
     <div class="card">
       <div class="card-head d-flex">
-        {{ if .icon }}
-        <img class="card-img-xs" src="{{ .icon | relURL }}" alt="{{ .name }}" />
+        {{ if .logo }}
+
+        {{ $logoImage:= resources.Get .logo}}
+        {{ if $logoImage }}
+        {{ $logoImage := $logoImage.Fit "24x24" }}
+
+        <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+        {{ end }}
         {{ end }}
         <h5 class="card-title">{{ .name }}</h5>
       </div>
diff --git a/layouts/partials/helpers/get-author-image.html b/layouts/partials/helpers/get-author-image.html
index 8142ddc..6e336ea 100644
--- a/layouts/partials/helpers/get-author-image.html
+++ b/layouts/partials/helpers/get-author-image.html
@@ -14,4 +14,9 @@
         {{ end }}
     {{ end }}
 {{ end }}
-{{ return $authorImage }}
+{{ $authorImage:= resources.Get $authorImage}}
+{{ if $authorImage }}
+{{ $authorImage := $authorImage.Fit "120x120" }}
+{{ return $authorImage.RelPermalink }}
+{{ end }}
+
diff --git a/layouts/partials/helpers/get-hero.html b/layouts/partials/helpers/get-hero.html
index 72ef4ec..001a379 100644
--- a/layouts/partials/helpers/get-hero.html
+++ b/layouts/partials/helpers/get-hero.html
@@ -1,5 +1,15 @@
-{{ $heroImage:= "/assets/images/default-hero.jpg"}}
-{{ if  .Params.hero }}
-    {{ $heroImage = .Params.hero }}
+{{ $heroImage := .Page.Resources.GetMatch "hero.{jpg,png}"}}
+{{ .Scratch.Set "heroScratch" $heroImage }}
+
+{{ if not $heroImage }}
+
+{{ $heroImage:= resources.Get "default-hero.jpg"}}
+{{ .Scratch.Set "heroScratch" $heroImage }}
+
+{{ end }}
+
+{{ $heroImage := .Scratch.Get "heroScratch" }}
+{{ if $heroImage }}
+{{ $heroImage := $heroImage.Resize "148x" }}
+{{ return $heroImage.RelPermalink }}
 {{ end }}
-{{ return $heroImage }}
diff --git a/layouts/partials/navigators/navbar-2.html b/layouts/partials/navigators/navbar-2.html
index e057e21..a13339f 100644
--- a/layouts/partials/navigators/navbar-2.html
+++ b/layouts/partials/navigators/navbar-2.html
@@ -6,6 +6,17 @@
 {{ if site.Params.logo.inverted }}
   {{ $invertedLogo = site.Params.logo.inverted }}
 {{ end }}
+{{ $mainLogo:= resources.Get $mainLogo}}
+{{ if $mainLogo }}
+{{ $mainLogo = $mainLogo.Resize "42x" }}
+{{ $mainLogo = $mainLogo.RelPermalink}}
+
+{{ end }}
+{{ $invertedLogo:= resources.Get $invertedLogo}}
+{{ if $invertedLogo }}
+{{ $invertedLogo = $invertedLogo.Resize "42x" }}
+{{ $invertedLogo = $invertedLogo.RelPermalink}}
+{{ end }}
 
 <nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
   <div class="container">
@@ -13,7 +24,7 @@
       <span class="navbar-toggler-icon"></span>
     </button>
     <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
-      <img src="{{ $mainLogo | relURL }}">
+      <img src="{{ $mainLogo  }}">
       {{- site.Title -}}
     </a>
     <button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
@@ -29,6 +40,6 @@
     </div>
   </div>
   <!-- Store the logo information in a hidden img for the JS -->
-  <img src="{{ $mainLogo | relURL }}" class="d-none" id="main-logo">
-  <img src="{{ $invertedLogo | relURL }}" class="d-none" id="inverted-logo">
+  <img src="{{ $mainLogo  }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo  }}" class="d-none" id="inverted-logo">
 </nav>
diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html
index f936796..cb9efd2 100644
--- a/layouts/partials/navigators/navbar.html
+++ b/layouts/partials/navigators/navbar.html
@@ -6,6 +6,17 @@
 {{ if site.Params.logo.inverted }}
   {{ $invertedLogo = site.Params.logo.inverted }}
 {{ end }}
+{{ $mainLogo:= resources.Get $mainLogo}}
+{{ if $mainLogo }}
+{{ $mainLogo = $mainLogo.Resize "42x" }}
+{{ $mainLogo = $mainLogo.RelPermalink}}
+
+{{ end }}
+{{ $invertedLogo:= resources.Get $invertedLogo}}
+{{ if $invertedLogo }}
+{{ $invertedLogo = $invertedLogo.Resize "42x" }}
+{{ $invertedLogo = $invertedLogo.RelPermalink}}
+{{ end }}
 
 {{ $sections:= site.Data.sections }}
 {{ if (index site.Data site.Language.Lang).sections }}
@@ -15,7 +26,7 @@
 <nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
   <div class="container">
     <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
-      <img src="{{ $invertedLogo | relURL }}" id="logo">
+      <img src="{{ $invertedLogo }}" id="logo">
       {{- site.Title -}}
     </a>
     <button
@@ -72,6 +83,6 @@
     </div>
   </div>
   <!-- Store the logo information in a hidden img for the JS -->
-  <img src="{{ $mainLogo | relURL }}" class="d-none" id="main-logo">
-  <img src="{{ $invertedLogo | relURL }}" class="d-none" id="inverted-logo">
+  <img src="{{ $mainLogo }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
 </nav>
diff --git a/layouts/partials/sections/achievements/entry.html b/layouts/partials/sections/achievements/entry.html
index 4f665ce..b2e6cb9 100644
--- a/layouts/partials/sections/achievements/entry.html
+++ b/layouts/partials/sections/achievements/entry.html
@@ -1,6 +1,16 @@
-<div
+{{ $achievementImage:= resources.Get .image}}
+{{ $achievementImageLg := ""}}
+{{ $achievementImageSm := ""}}
+
+{{ if $achievementImage }}
+{{ $achievementImageSm = $achievementImage.Resize "x300" }}
+{{ $achievementImageSm =  $achievementImageSm.RelPermalink }}
+{{ $achievementImageLg = $achievementImage.Resize "x1500" }}
+{{ $achievementImageLg =  $achievementImageLg.RelPermalink }}
+{{ end }}
+<div 
   class="achievement-entry text-center"
-  style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ .image | relURL }}');"
+  style="background-image: url('{{ $achievementImageSm }}');"
 >
   <i class="fas fa-search-plus" id="enlarge-icon"></i>
   <h4 class="title" id="achievement-title">{{ .title }}</h4>
@@ -8,4 +18,6 @@
     <h4>{{ .title }}</h4>
     <p>{{ .summary | markdownify }}</p>
   </div>
+  <span style="background-image: url('{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
+<span  style="background-image: url('{{ $achievementImageLg }}');" class="d-none" id="LargeImage"></span>
 </div>
diff --git a/layouts/partials/sections/home.html b/layouts/partials/sections/home.html
index 4bf85e2..5cad876 100644
--- a/layouts/partials/sections/home.html
+++ b/layouts/partials/sections/home.html
@@ -15,23 +15,94 @@
   {{ $sections = (index site.Data site.Language.Lang).sections }}
 {{ end }}
 
-{{ $backgroundImage:= "/assets/images/default-background.jpg" }}
+{{ $backgroundImage:= "/images/default-background.jpg" }}
 {{ if site.Params.background }}
   {{ $backgroundImage = site.Params.background }}
 {{ end }}
 
-{{ $authorImage:= "/assets/images/default-avatar.png" }}
+
+{{ $authorImage:= "/images/default-avatar.png" }}
 {{ if $author.image }}
   {{ $authorImage = $author.image }}
 {{ end }}
+{{ $authorImage := resources.Get $authorImage }}
+{{ $authorImage := $authorImage.Fit "148x148" }}
+
+{{/* get file that matches the filename as specified as src="" in shortcode */}}
+{{ $src := resources.Get $backgroundImage }}
+
+{{/* set image sizes, these are hardcoded for now, x dictates that images are resized to this width */}}
+
+{{ $tinyw := default "500x" }}
+{{ $smallw := default "800x" }}
+{{ $mediumw := default "1200x" }}
+{{ $largew := default "1500x" }}
+
+{{/* resize the src image to the given sizes */}}
+
+{{ $tiny := $src.Resize $tinyw }}
+{{ $small := $src.Resize $smallw }}
+{{ $medium := $src.Resize $mediumw }}
+{{ $large := $src.Resize $largew }}
+
+{{/* only use images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
+{{/* set the sizes attribute to (min-width: 35em) 1200px, 100vw unless overridden in shortcode */}}
+
+{{ if lt $src.Width "500" }}
+{{ $tiny := $src}}
+{{ $small := $src}}
+{{ $medium := $src}}
+{{ $large := $src}}
+
+{{ end }}
+{{ if lt $src.Width "800" }}
+{{ $small := $src}}
+{{ $medium := $src}}
+{{ $large := $src}}
+{{ end }}
+{{ if lt $src.Width "1200" }}
+{{ $medium := $src}}
+{{ $large := $src}}
+{{ end }}
+{{ if lt $src.Width "1500" }}
+{{ $large := $src}}
+{{ end }}
 
 <div class="container-fluid home" id="home">
+  <style>
+    /* 0 to 299 */
+    #homePageBackgroundImageDivStyled {
+        background-image: url('{{ $tiny.RelPermalink }}'); 
+    }
+    /* 300 to X */
+    @media (min-width: 500px) and (max-width: 800px) { /* or 301 if you want really the same as previously.  */
+      #homePageBackgroundImageDivStyled {   
+            background-image: url('{{ $small.RelPermalink }}');
+        }
+    }
+    @media (min-width: 801px) and (max-width: 1200px) { /* or 301 if you want really the same as previously.  */
+      #homePageBackgroundImageDivStyled {   
+            background-image: url('{{ $medium.RelPermalink }}');
+        }
+    }
+    @media (min-width: 1201px) and (max-width: 1500px) { /* or 301 if you want really the same as previously.  */
+      #homePageBackgroundImageDivStyled {   
+            background-image: url('{{ $large.RelPermalink }}');
+        }
+    }
+    @media (min-width: 1501px) { /* or 301 if you want really the same as previously.  */
+      #homePageBackgroundImageDivStyled {   
+            background-image: url('{{ $src.RelPermalink }}');
+        }
+    }
+    </style>
+    <span class="on-the-fly-behavior"></span>
   <div
+    id="homePageBackgroundImageDivStyled"
     class="background container-fluid"
-    style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $backgroundImage | relURL }}');"
   ></div>
   <div class="container content text-center">
-    <img src="{{ $authorImage | relURL }}"
+    <img src="{{ $authorImage.RelPermalink }}"
       class="rounded-circle mx-auto d-block img-fluid"
     />
     <h1 class="greeting"> {{ $author.greeting }} {{ $name }}</h1>
diff --git a/layouts/shortcodes/rimg.html b/layouts/shortcodes/rimg.html
new file mode 100644
index 0000000..3b07819
--- /dev/null
+++ b/layouts/shortcodes/rimg.html
@@ -0,0 +1,53 @@
+{{/* Combination of code taken from: https://alexlakatos.com/web/2020/07/17/hugo-image-processing/ & https://dev.to/stereobooster/responsive-images-for-hugo-dn9}}
+
+{{/* get file that matches the filename as specified as src="" in shortcode */}}
+{{ $src := resources.GetMatch (.Get "src") }}
+
+{{ if in (.Get "src") "http" }}
+<img src="{{$src}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
+{{ else }}
+{{ if in (.Get "src") ".gif" }}
+<img src="{{$src.RelPermalink}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
+{{ else }}
+{{/* set image sizes, these are hardcoded for now */}}
+
+{{ $tinyw := default "500x" }}
+{{ $smallw := default "800x" }}
+{{ $mediumw := default "1200x" }}
+{{ $largew := default "1500x" }}
+
+{{/* resize the src image to the given sizes */}}
+
+{{ $tiny := $src.Resize $tinyw }}
+{{ $small := $src.Resize $smallw }}
+{{ $medium := $src.Resize $mediumw }}
+{{ $large := $src.Resize $largew }}
+
+{{/* add the processed images to the scratch */}}
+
+
+{{/* only use images smaller than or equal to the src (original) image size */}}
+<img
+{{ with .Get "sizes" }}sizes='{{.}}'{{ else }}{{ end }}
+      srcset='
+      {{ if ge $src.Width "500" }}
+        {{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
+      {{ end }}
+      {{ if ge $src.Width "800" }}
+        {{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
+      {{ end }}
+      {{ if ge $src.Width "1200" }}
+        {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
+      {{ end }}
+      {{ if ge $src.Width "1500" }}
+        {{ with $large.RelPermalink }}, {{.}} 1500w {{ end }}
+      {{ end }}'
+      {{ if .Get (print $medium) }}
+        src="{{ $medium.RelPermalink }}"
+      {{ else }}
+        src="{{ $src.RelPermalink }}"
+      {{ end }}
+      
+      {{ with .Get "alt" }}alt='{{.}}'{{ end }}>
+{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/static/assets/js/home.js b/static/assets/js/home.js
index fd248b4..fe93469 100644
--- a/static/assets/js/home.js
+++ b/static/assets/js/home.js
@@ -329,6 +329,19 @@ var projectCards;
           this.parentElement.classList.toggle("col-lg-12");
           this.parentElement.classList.toggle("col-md-12");
           this.parentElement.classList.toggle("col-sm-12");
+          if (this.children["SmallImage"].hasAttribute("active")) {
+            let mainLogo = this.children["LargeImage"].getAttribute("Style");
+            this.children["LargeImage"].setAttribute("active",true);
+            this.children["SmallImage"].removeAttribute("active");
+
+            this.setAttribute("Style", mainLogo);
+          } else {
+            let mainLogo = this.children["SmallImage"].getAttribute("Style");
+            this.children["SmallImage"].setAttribute("active",true);
+            this.children["LargeImage"].removeAttribute("active");
+            this.setAttribute("Style", mainLogo);
+          }
+         
           if (this.children["caption"] != undefined) {
             this.children["caption"].classList.toggle("hidden");
           }