.

scripts/generate-blurred-images.sh

@@ -1,8 +1,22 @@
-find "./static/imgs/ricing_competitions/" -type f \
+parent_path=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
-   \( -iname "*.jpg" -o -iname "*.png" -o -iname "*.gif" -o -iname "*.bmp" -o -iname "*.jpeg" \) -print0 |
+
+cd "$parent_path"
+
+find "../static/imgs/ricing_competitions/" -type f \
+   \( -iname "*.jpg" -o -iname "*.png" -o -iname "*.gif" -o -iname "*.bmp" -o -iname "*.jpeg" -o -iname "*.webp" \) -not -name "generated_*" -print0 |
 while IFS= read -r -d '' filepath; do
+    echo "$filepath" gets blurred
+    
     directory=$(dirname "$filepath")
     filename=$(basename "$filepath")
     generated_filename="${directory}/generated_${filename}"
-    magick convert  -scale 10% -gaussian-blur 0x1 -modulate 100,300,100 -resize 1000% "$filepath" "$generated_filename"
+    brightness=$( convert $filepath -colorspace Gray -format "%[mean]" info: )
+    max_brightness="65535" # The possible maximum brightness possible from the previous command
+    brightness_threshold=$( python -c "print( $max_brightness * 0.5 )"  )
+    
+    # Adjust the brightness, make it brighter if dark, otherwise lighten it
+    brightness_boost=$( python -c "print( (1 - ($brightness / $brightness_threshold)) * 50 )" )
+    
+    magick convert  -scale 10%   -brightness-contrast ${brightness_boost}x20 -modulate 100,500,100 -gaussian-blur 0x20 -resize 1000%   "$filepath" "$generated_filename" 
+    # magick  "$generated_filename" "./hald-clut.png" -hald-clut "$generated_filename" 
 done

src/routes/wall_of_fame/+page.svelte

@@ -21,56 +21,66 @@
 			pretitel="#1"
 			dotfilesLink="https://github.com/end-4/dots-hyprland/tree/novelknock"
 			creatorProfilePicture="https://avatars.githubusercontent.com/u/97237370?s=24&v=4"
-			thumbnail="/imgs/ricingcomp2/end_4.jpg"
+			thumbnail="/imgs/ricing_competitions/2/end_4.webp"
-			blurredThumbnail="/imgs/ricingcomp2/end_4.jpg"
 		/>
 		<FamedRice
-			name="/ᐠ?_?ᐟ\ﾉ"
+			name="Unnamed"
 			creator="Flafy"
 			pretitel="#2"
 			dotfilesLink="https://github.com/Flafy"
 			creatorProfilePicture="https://avatars.githubusercontent.com/u/25975326?v=4"
-			thumbnail="/imgs/ricingcomp2/flafy.png"
+			thumbnail="/imgs/ricing_competitions/2/flafy.webp"
-			blurredThumbnail="/imgs/ricingcomp2/flafy.png"
 		/>
 		<FamedRice
-			name="Aurora"
+			name="Day and Night"
-			creator="flick0"
+			creator="Mathisbuilder"
 			pretitel="#3"
-			dotfilesLink="https://github.com/flick0/dotfiles"
+			dotfilesLink="https://github.com/MathisP75/summer-day-and-night"
-			creatorProfilePicture="https://avatars.githubusercontent.com/u/77581181?v=4&s=24"
+			creatorProfilePicture="https://avatars.githubusercontent.com/u/98901170?v=4"
-			thumbnail="/imgs/img4.webp"
+			thumbnail="/imgs/ricing_competitions/2/day-night.webp"
-			blurredThumbnail="/imgs/img4.webp"
 		/>
 	</Contest>
 
 	<Contest name="Winter" number={1}>
 		<FamedRice
-			name="/ᐠ!_!ᐟ\ﾉ"
+			name="Unnamed"
 			creator="Flafy"
 			pretitel="#1"
 			dotfilesLink="https://github.com/Flafy"
 			creatorProfilePicture="https://avatars.githubusercontent.com/u/25975326?v=4"
-			thumbnail="/imgs/ricingcomp1/flafy.png"
+			thumbnail="/imgs/ricing_competitions/1/flafy.webp"
-			blurredThumbnail="/imgs/ricingcomp1/flafy.png"
-		/>
-		<FamedRice
-			name="Novel Nock"
-			creator="end_4"
-			pretitel="#2"
-			dotfilesLink="https://github.com/end-4/dots-hyprland/tree/novelknock"
-			creatorProfilePicture="https://avatars.githubusercontent.com/u/97237370?s=24&v=4"
-			thumbnail="/imgs/ricingcomp2/end_4.jpg"
-			blurredThumbnail="/imgs/ricingcomp2/end_4.jpg"
 		/>
 		<FamedRice
 			name="Aurora"
 			creator="flick0"
-			pretitel="#3"
+			pretitel="#2 (ex aequo)"
-			dotfilesLink="https://github.com/flick0/dotfiles"
+			dotfilesLink="https://github.com/flick0/dotfiles/tree/aurora"
-			creatorProfilePicture="https://avatars.githubusercontent.com/u/77581181?v=4&s=24"
+			creatorProfilePicture="https://avatars.githubusercontent.com/u/77581181?s=48&v=4"
-			thumbnail="/imgs/img4.webp"
+			thumbnail="/imgs/ricing_competitions/1/flicko.webp"
-			blurredThumbnail="/imgs/img4.webp"
+		/>
+		<FamedRice
+			name="Apatheia"
+			creator="amadeus"
+			pretitel="#2 (ex aequo)"
+			dotfilesLink="https://github.com/AmadeusWM/dotfiles-hyprland"
+			creatorProfilePicture="https://avatars.githubusercontent.com/u/63149896?s=48&v=4"
+			thumbnail="/imgs/ricing_competitions/1/amadeus.webp"
+		/>
+		<FamedRice
+			name="Unnamed"
+			creator="Lyasm"
+			pretitel="#3 (ex aequo)"
+			dotfilesLink="#"
+			creatorProfilePicture="https://avatars.githubusercontent.com/u/111616244?s=48&v=4"
+			thumbnail="/imgs/ricing_competitions/1/lyasm.webp"
+		/>
+		<FamedRice
+			name="Unnamed"
+			creator="lauroro"
+			pretitel="#3 (ex aequo)"
+			dotfilesLink="https://github.com/lauroro/hyprland-dotfiles"
+			creatorProfilePicture="https://avatars.githubusercontent.com/u/88981092?s=48&v=4"
+			thumbnail="/imgs/ricing_competitions/1/lauroro.webp"
 		/>
 	</Contest>
 </section>

src/routes/wall_of_fame/FamedRice.svelte

@@ -9,10 +9,18 @@
 	export let creatorProfilePicture
 	/** @type {string} */
 	export let thumbnail
-	/** @type {string} */
+	/**
-	export let blurredThumbnail
+	 * Specify the blurred background image to be used.
+	 * Defaults to `"generated_<thumbnail>"`
+	 * @type {string | undefined} */
+	export let blurredThumbnail = undefined
 	/** @type {string} */
 	export let pretitel
+
+	let background =
+		blurredThumbnail ??
+		// Get the `generated_<filename>` if blurredThumbnail is not set manually
+		`${thumbnail.substring(0, thumbnail.lastIndexOf('/'))}/generated_${thumbnail.split('/').at(-1)}`
 </script>
 
 <div class="flex flex-col gap-14">
@@ -41,11 +49,48 @@
 				class="rounded-lg hover:scale-[1.01] duration-300 transition-transform w-full"
 			/>
 		</a>
-		<img
+		<!-- wide background -->
-			src={blurredThumbnail}
+		<!-- <img
+			src={background}
 			aria-hidden="true"
-			class="absolute pointer-events-none -bottom-5 -z-10 opacity-20 inset-x-0 w-full rounded-lg"
+			class="background"
+			alt={`${name} by ${creator} thumbnail`}
+		/> -->
+		<!-- blur background -->
+		<img
+			src={background}
+			aria-hidden="true"
+			class="background-blurred"
 			alt={`${name} by ${creator} thumbnail`}
 		/>
 	</div>
 </div>
+
+<style lang="postcss">
+	.background {
+		position: absolute;
+		opacity: 0.4;
+		min-width: calc(200% + 400px);
+		height: calc(100% + 200px);
+		pointer-events: none;
+		inset: 0px 0 0 -200px;
+		translate: 0px -50%;
+		z-index: -10;
+		background: red;
+
+		mask-image: radial-gradient(closest-side, black, transparent);
+	}
+	.background-blurred {
+		position: absolute;
+		opacity: 0.3;
+		min-width: calc(120% + 400px);
+		height: calc(120% + 200px);
+		pointer-events: none;
+		top: -55%;
+		left: 50%;
+		translate: -50%;
+		z-index: -10;
+
+		mask-image: radial-gradient(farthest-side, black, transparent);
+	}
+</style>