wall of fame, improve performance

src/lib/components/Footer.svelte

@@ -6,8 +6,8 @@
 	let developers = [
 		['Fufexan', 'Core Developer', 'cyan', 'https://github.com/fufexan'],
 		['NotAShelf', 'Core Member', 'teal', 'https://github.com/NotAShelf'],
-		['VDawg', 'Webdesign-and dev', 'green', 'https://github.com/Visual-Dawg'],
-		['System-x64', 'Webdev', 'lime', 'https://github.com/System-x64']
+		['VDawg', 'Webdesign-and dev', 'emerald', 'https://github.com/Visual-Dawg'],
+		['System-x64', 'Webdev', 'green', 'https://github.com/System-x64']
 	]
 	function createRole(role, color) {
 		return `<span class='text-${color}-500'><span class='text-${color}-600'>[ </span>${role}<span class='text-${color}-600'> ]</span></span>`
@@ -38,7 +38,7 @@
 				{/each}
 				<li>
 					<a href="https://github.com/hyprwm/Hyprland/graphs/contributors" target="_blank"
-						>and our <span class="text-indigo-400">fellow contributors</span></a
+						>and our <span class="text-indigo-500">fellow contributors</span></a
 					>
 				</li>
 			</ul>

src/routes/CommunitySlice.svelte

@@ -9,6 +9,7 @@
 	import { animateIn } from '$lib/Helper.mjs'
 	import { setContext } from 'svelte'
 	import Title from '$lib/components/Title.svelte'
+	import background from '$lib/images/community-bg.png'
 
 	let sectionElement
 	let isDraggingChan = false
@@ -174,7 +175,7 @@
 </script>
 
 <section
-	class="relative flex flex-col items-center w-screen overflow-hidden min-h-max h-[1100px] -mb-[200px] max-w-[100vw]"
+	class="relative flex flex-col items-center w-screen min-h-max h-[1100px] -mb-[200px]"
 	bind:this={sectionElement}
 >
 	<Title>
@@ -211,23 +212,8 @@
 				/>
 			{/each}
 		</div>
-
-		<div class="">
-			<!-- Background color blobs -->
-			<div
-				class="_bg-color bg-yellow-500 top-[146px] right-[17px] w-[359px] h-[207px] opacity-20"
-			/>
-			<div class="_bg-color bg-orange-500 top-[411px] right-0 w-[400px] h-[300px] opacity-30" />
-			<div
-				class="_bg-color bg-purple-500 opacity-30 w-[321px] h-[295px] top-[209px] left-[368px]"
-			/>
-			<div class="_bg-color bg-cyan-500 opacity-30 w-[363px] h-[250px] left-[402px] top-[462px]" />
-			<div class="_bg-color bg-red-500 opacity-30 w-[323px] h-[482px] left-[53px] top-[179px]" />
-			<div
-				class="_bg-color bg-fuchsia-500 opacity-30 w-[243px] h-[167px] left-[135px] top-[596px]"
-			/>
-		</div>
 	</div>
+	<img src={background} class="absolute top-0 w-[1400px] -z-10" alt="" aria-hidden="true" />
 </section>
 
 <style lang="postcss">
@@ -252,13 +238,4 @@
 			transition: scale 80ms;
 		}
 	}
-
-	._bg-color {
-		position: absolute;
-		pointer-events: none;
-		filter: blur(80px);
-		border-radius: 50%;
-		z-index: -50;
-		contain: strict;
-	}
 </style>

src/routes/FeaturesSlice.svelte

@@ -8,10 +8,14 @@
 	import { writable } from 'svelte/store'
 	import PluginsIcon from '~icons/gg/arrange-back'
 	import ShortcutsIcon from '~icons/gg/push-chevron-right-o'
-	import BleedingEdgeIcon from '~icons/gg/controller'
+	import TouchpadIcon from '~icons/gg/touchpad'
 	import Title from '$lib/components/Title.svelte'
 	import Hypractive from './Hypractive.svelte'
 	import { getIsMobile } from '$lib/Helper.mjs'
+	import configDefaultImage from '$lib/images/features/config default.png'
+	import tileDefaultImage from '$lib/images/features/tiling_default.png'
+	import configHoverImage from '$lib/images/features/config hover.png'
+	import tileHoverImage from '$lib/images/features/tiling_hover.png'
 
 	let isMobile = false
 
@@ -67,10 +71,9 @@
 			</p>
 
 			<div class="absolute _wrapper inset-0 select-none" aria-hidden>
-				<div
-					class="absolute text-[440px] -bottom-10 text-slate-500 _configure -right-40 md:right-0 font-mono"
-				>
-					{'<>'}
+				<div class="feature-image">
+					<img src={configDefaultImage} class="config-default" alt="" aria-hidden="true" />
+					<img src={configHoverImage} class="config-hover" alt="" aria-hidden="true" />
 				</div>
 			</div>
 		</FeatureCard>
@@ -79,10 +82,9 @@
 				Automatic tiling which just works. Supports multiple fine-tuneable layouts.
 			</p>
 			<div class="absolute _wrapper inset-0 select-none" aria-hidden>
-				<div
-					class="absolute text-[280px] text-slate-500 font-extrabold gap-y-4 [line-height:1] -z-10 bottom-[20px] tiling right-0 md:right-8 font-mono tiles"
-				>
-					<div class="tile" style={''}>[ ]</div>
+				<div class="feature-image">
+					<img src={tileDefaultImage} class="config-default" alt="" aria-hidden="true" />
+					<img src={tileHoverImage} class="config-hover" alt="" aria-hidden="true" />
 				</div>
 			</div>
 		</FeatureCard>
@@ -106,9 +108,12 @@
 			<ShortcutsIcon class="h-8 w-8" />
 			Global shortcuts for apps
 		</a>
-		<div class="icon-feature">
-			<BleedingEdgeIcon class="h-8 w-8" />Bleeding edge tech
-		</div>
+		<a
+			href="https://wiki.hyprland.org/Configuring/Variables/#gestures"
+			class="icon-feature hover:underline"
+		>
+			<TouchpadIcon class="h-8 w-8" />Touchpad gestures
+		</a>
 	</div>
 </section>
 
@@ -117,69 +122,31 @@
 		@apply flex items-center justify-center gap-3 font-bold text-slate-400;
 	}
 
-	._configure {
-		@apply bg-gradient-to-tl from-pink-500  to-blue-500 bg-clip-text text-blue-700;
-		line-height: 1;
-		z-index: -1;
-		transition: all 850ms ease-in-out;
-		color: rgb(255, 121, 170);
-		opacity: 0.4;
-		color: transparent;
-		text-shadow:
-			10px -10px 40px theme(colors.pink.700 / 20),
-			5px 5px 20px cyan,
-			-10px 10px 40px theme(colors.blue.700 / 20);
-		filter: saturate(2) drop-shadow(8px 8px 20px theme(colors.pink.700))
-			drop-shadow(-8px -8px 20px theme(colors.blue.700));
+	.feature-image {
+		position: absolute;
+		inset: 0 0 0 0;
+		opacity: 0.5;
 
-		._wrapper:hover & {
-			color: transparent;
-			opacity: 0.6;
-			filter: saturate(2) drop-shadow(8px 8px 12px theme(colors.pink.700))
-				drop-shadow(-8px -8px 12px theme(colors.blue.700));
-			text-shadow:
-				15px -15px 40px theme(colors.pink.700 / 80),
-				8px 8px 20px cyan,
-				-15px 15px 40px theme(colors.blue.700 / 40);
+		& img {
+			width: 800px;
+			height: 800px;
+			position: absolute;
+			right: -200px;
+			top: -209px;
+			transition: opacity 1500ms ease-in-out;
+			pointer-events: none;
 		}
 	}
-
-	.tile {
-		/* Animate a pulse animation for the glow effect */
-		/* Use different colors for the different windows */
-		background: radial-gradient(ellipse, var(--color1, cyan) 50%, var(--color2, magenta));
-		background-clip: text;
-		color: transparent;
-		letter-spacing: -55px;
-		text-shadow:
-			-5px 5px 8px color-mix(in srgb, var(--color1, magenta), transparent 90%),
-			5px -5px 8px color-mix(in srgb, color-mix(in srgb, var(--color1, rgb(0, 187, 255)), black 20%), transparent
-						10%),
-			0px 0px 15px var(--color2, magenta);
-
-		filter: saturate(1) drop-shadow(8px 8px 24px var(--color2, blue))
-			drop-shadow(
-				-8px -8px 24px color-mix(in srgb, var(--color1, rgb(0, 187, 255)), rgba(0, 0, 0, 0.056) 80%)
-			);
-		opacity: 0.4;
-		transition: all 850ms ease-in-out;
-
-		._wrapper:hover & {
-			opacity: 0.7;
-			text-shadow:
-				-15px 15px 0px color-mix(in srgb, var(--color1, cyan), transparent 60%),
-				15px -15px 8px color-mix(in srgb, color-mix(in srgb, var(--colo1r, magenta), rgb(0, 0, 111)
-								50%), transparent 30%),
-				0px 0px 15px var(--color2, magenta);
-
-			filter: saturate(2) drop-shadow(8px 8px 24px var(--color2, blue))
-				drop-shadow(
-					-8px -8px 24px color-mix(in srgb, var(--color1, magenta), rgba(0, 0, 0, 0.056) 20%)
-				);
-		}
+	.config-hover {
+		opacity: 0;
 	}
-
-	.tiles {
-		filter: drop-shadow(0px 0px 5px rgb(0, 191, 255));
+	._wrapper:hover {
+		& .config-default {
+			opacity: 0;
+		}
+		& .config-hover {
+			opacity: 1 !important;
+			filter: saturate(1.5);
+		}
 	}
 </style>

src/routes/Navbar.svelte

@@ -11,6 +11,8 @@
 	function toggleExpanded() {
 		isExpanded = !isExpanded
 	}
+
+	//! TODO close mobile menu on navigation
 </script>
 
 <header

src/routes/PreviewRiceSlice.svelte

@@ -17,8 +17,6 @@
 	let isMuted = true
 	let isPaused = false
 
-	$: console.log({ isVisible })
-
 	function toggleMute() {
 		isMuted = !isMuted
 	}
@@ -45,7 +43,7 @@
 >
 	<div
 		class={clsx(
-			'rounded-xl group  relative overflow-hidden border-sky-400 border-2  transition-all [transition-duration:1460ms] mx-3 shadow-2xl shadow-cyan-400/40',
+			'rounded-xl group  relative  border-sky-400 border-2  transition-all [transition-duration:1460ms] mx-3 shadow-2xl shadow-cyan-400/40',
 			!isVisible && 'opacity-20 scale-90'
 		)}
 		role="banner"
@@ -67,6 +65,7 @@
 			src={previewRice}
 			disablepictureinpicture="true"
 			disableremoteplayback="true"
+			class="rounded-xl"
 			loop
 			muted={isMuted}
 			preload="auto"
@@ -98,7 +97,13 @@
 				</div>
 			{/if}
 		</div>
+
+		<a
+			class="px-3 pt-2 block absolute -bottom-7 left-0 max-w-max text-sm text-slate-100/70 hover:underline"
+			href="https://github.com/end-4/">Setup by @end_4</a
+		>
 	</div>
+
 	<div class="preview-rice-bg overflow-x-hidden" aria="hidden" />
 </section>
 

src/routes/wall_of_fame/+page.svelte

@@ -1,7 +1,76 @@
-<div class="h-screen flex items-center justify-center p-8 overflow-hidden">
-	<img
-		src="https://i.giphy.com/media/H8w9SE95izloQ/giphy.webp"
-		alt="Under construction"
-		class="w-full max-w-4xl"
-	/>
-</div>
+<script lang="ts">
+	import Title from '$lib/components/Title.svelte'
+	import Contest from './Contest.svelte'
+	import FamedRice from './FamedRice.svelte'
+</script>
+
+<section class="min-h-screen flex flex-col gap-14 items-center justify-center p-8 overflow-hidden">
+	<div class="h-[50vh] min-h-min flex flex-col items-center justify-center">
+		<Title>
+			<h1 slot="title">Wall of fame</h1>
+			<div slot="subtitle">
+				The chronicles of the triumphant<br /> from bygone rice contests held within our Discord
+			</div>
+		</Title>
+	</div>
+
+	<Contest name="Summer" number={2}>
+		<FamedRice
+			name="Novel Nock"
+			creator="end_4"
+			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"
+			blurredThumbnail="/imgs/ricingcomp2/end_4.jpg"
+		/>
+		<FamedRice
+			name="/ᐠ?_?ᐟ\ﾉ"
+			creator="Flafy"
+			pretitel="#2"
+			dotfilesLink="https://github.com/Flafy"
+			creatorProfilePicture="https://avatars.githubusercontent.com/u/25975326?v=4"
+			thumbnail="/imgs/ricingcomp2/flafy.png"
+			blurredThumbnail="/imgs/ricingcomp2/flafy.png"
+		/>
+		<FamedRice
+			name="Aurora"
+			creator="flick0"
+			pretitel="#3"
+			dotfilesLink="https://github.com/flick0/dotfiles"
+			creatorProfilePicture="https://avatars.githubusercontent.com/u/77581181?v=4&s=24"
+			thumbnail="/imgs/img4.webp"
+			blurredThumbnail="/imgs/img4.webp"
+		/>
+	</Contest>
+
+	<Contest name="Winter" number={1}>
+		<FamedRice
+			name="/ᐠ!_!ᐟ\ﾉ"
+			creator="Flafy"
+			pretitel="#1"
+			dotfilesLink="https://github.com/Flafy"
+			creatorProfilePicture="https://avatars.githubusercontent.com/u/25975326?v=4"
+			thumbnail="/imgs/ricingcomp1/flafy.png"
+			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"
+			dotfilesLink="https://github.com/flick0/dotfiles"
+			creatorProfilePicture="https://avatars.githubusercontent.com/u/77581181?v=4&s=24"
+			thumbnail="/imgs/img4.webp"
+			blurredThumbnail="/imgs/img4.webp"
+		/>
+	</Contest>
+</section>

src/routes/wall_of_fame/Contest.svelte

@@ -0,0 +1,50 @@
+<script>
+	/** @type {string} */
+	export let name
+	/** @type {number} */
+	export let number
+</script>
+
+<section class="flex flex-col mt-24">
+	<div class="relative mb-24">
+		<div class="mix-blend-color-dodge p-6 flex items-center flex-col">
+			<div class="text-2xl font-bold text-slate-300/80">Contest #{number}</div>
+			<h2 class="text-9xl text-slate-200/80 text-center font-bold">{name}</h2>
+		</div>
+
+		<div class="background" aria-hidden="true"></div>
+	</div>
+
+	<div class="flex flex-col gap-40">
+		<slot />
+	</div>
+</section>
+
+<style lang="postcss">
+	.background {
+		position: absolute;
+		top: 150px;
+		left: 50%;
+		translate: -50% -50%;
+		width: 100vw;
+		height: 1000px;
+		z-index: -10;
+		background: radial-gradient(
+				140px 100px at 50% 45%,
+				var(--color, theme(colors.cyan.500)),
+				transparent
+			),
+			radial-gradient(
+				145px 110px at 50% 45%,
+				var(--color, theme(colors.blue.500 / 80%)) 80%,
+				transparent
+			),
+			radial-gradient(210px 140px, var(--color, theme(colors.blue.600)), transparent),
+			radial-gradient(300px 200px, var(--color, theme(colors.sky.600)), transparent),
+			radial-gradient(600px 220px, var(--color, theme(colors.blue.700)), transparent);
+
+		& ::after {
+			content: ' ';
+		}
+	}
+</style>

src/routes/wall_of_fame/FamedRice.svelte

@@ -0,0 +1,51 @@
+<script>
+	/** @type {string} */
+	export let name
+	/** @type {string} */
+	export let creator
+	/** @type {string} */
+	export let dotfilesLink
+	/** @type {string} */
+	export let creatorProfilePicture
+	/** @type {string} */
+	export let thumbnail
+	/** @type {string} */
+	export let blurredThumbnail
+	/** @type {string} */
+	export let pretitel
+</script>
+
+<div class="flex flex-col gap-14">
+	<div class="flex justify-center items-center flex-col">
+		<div class="text-lg font-bold mb-2">{pretitel}</div>
+		<h3 class="text-6xl hover:text-slate-200 mb-6 font-bold">
+			<a href={dotfilesLink} target="_blank">{name}</a>
+		</h3>
+		<a class="flex gap-3 group" href={dotfilesLink} target="_blank">
+			<img
+				src={creatorProfilePicture}
+				class="rounded-full h-6 aspect-square"
+				alt={creator + ' profile picture'}
+			/>
+			<div class="font-medium text-lg transition-colors group-hover:text-white text-slate-300">
+				{creator}
+			</div>
+		</a>
+	</div>
+
+	<div class="px-6 sm:px-8 w-full max-w-[1100px] relative">
+		<a class="" href={dotfilesLink} target="_blank">
+			<img
+				src={thumbnail}
+				alt={`${name} by ${creator} thumbnail`}
+				class="rounded-lg hover:scale-[1.01] duration-300 transition-transform w-full"
+			/>
+		</a>
+		<img
+			src={blurredThumbnail}
+			aria-hidden="true"
+			class="absolute pointer-events-none -bottom-5 -z-10 opacity-20 inset-x-0 w-full rounded-lg"
+			alt={`${name} by ${creator} thumbnail`}
+		/>
+	</div>
+</div>

tailwind.config.js

@@ -28,6 +28,8 @@ export default {
 		'text-cyan-600',
 		'text-green-500',
 		'text-green-600',
+		'text-emerald-500',
+		'text-emerald-600',
 		'text-lime-500',
 		'text-lime-600'
 	]