fix: ssr and make the hero actually readable

Author: cirex-web

pnpm-lock.yaml

@@ -7,7 +7,6 @@
 	--gradient-color-1: #{$gradient-color-1};
 	--gradient-color-2: #{$gradient-color-2};
 	--gradient-color-3: #{$gradient-color-3};
-	--gradient-color-4: #{$gradient-color-4};
 	--gradient-speed: #{$gradient-speed};
 }
 

src/components/Gradient/index.module.scss

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import isSafari from '../../utils/isSafari';
 import styles from './index.module.scss';
 
@@ -13,7 +13,7 @@ export interface SubGradientProps {
 }
 
 function AnimatedGradient({ className }: SubGradientProps) {
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (window?.Gradient != null) {
 			const gradient = new window.Gradient();
 			gradient.freqX = 14e-5;
@@ -33,22 +33,14 @@ function AnimatedGradient({ className }: SubGradientProps) {
 	);
 }
 
-const isSSR = () => typeof window === 'undefined';
-
-// Wrapper component to handle client-side only rendering
-function AnimatedGradientNoSSRWrapper(props: SubGradientProps) {
-	// Only render the AnimatedGradient component on the client-side
-	return !isSSR() ? <AnimatedGradient {...props} /> : null;
-}
-
 /**
  * Expanded gradient with a wave-masked bottom border.
  * Used in the home page with the hero icon
  */
 function ExpandedGradient({ className }: SubGradientProps) {
 	return (
 		<div className={clsx(styles.gradientContainer, className)}>
-			<AnimatedGradientNoSSRWrapper
+			<AnimatedGradient
 				className={clsx(
 					isSafari() ? styles.gradientSafari : styles.gradient,
 				)}

src/components/Gradient/index.tsx

@@ -25,9 +25,8 @@ $hero-gradient: linear-gradient(#0003, #000a 30%, #000e 60%, #000f 80%);
 
 .heroImage {
 	width: 25%;
-	svg {
-		mask: $hero-gradient;
-	}
+	filter: opacity(0.9);
+
 	@include down($breakpoint-sm) {
 		flex-direction: column;
 	}
@@ -36,6 +35,6 @@ $hero-gradient: linear-gradient(#0003, #000a 30%, #000e 60%, #000f 80%);
 .heroTitle {
 	color: $text-alt;
 	display: flex;
-	mask: $hero-gradient;
+	filter: opacity(0.9);
 	text-shadow: $text-shadow;
 }

src/components/Hero/index.module.scss

@@ -1,6 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Link from 'next/link';
 import { useState } from 'react';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
 import ScottyLabsIcon from '../../icons/ScottyLabsIcon';
 import Gradient from '../Gradient';
 import styles from './index.module.scss';
@@ -24,7 +25,7 @@ function Toolbar({ collapsed }: { collapsed: Boolean }) {
 			<div className={styles.navMobile}>
 				<div className={styles.navSandwich}>
 					<FontAwesomeIcon
-						icon="bars"
+						icon={faBars}
 						onClick={() =>
 							setMobileLinksVisible(!mobileLinksVisible)
 						}

src/components/Navbar/index.tsx

@@ -35,9 +35,7 @@ export default function Design() {
 							'illustrator',
 							'after-effects',
 						]}
-						description={
-							"Every year, ScottyLabs hosts Pittsburgh's largest hackathon TartanHacks. The event's logo, merchandise, advertisements and motion graphics are designed for a different theme and visual language"
-						}
+						description="Every year, ScottyLabs hosts Pittsburgh's largest hackathon TartanHacks. The event's logo, merchandise, advertisements and motion graphics are designed for a different theme and visual language"
 						image={
 							<Image
 								src="/design/tartanhacks.png"

src/pages/design.tsx

@@ -44,10 +44,9 @@ $carousel-circle-unfocused: #d9d9d9;
 $accent-color-primary: #2f80ed;
 $accent-color-darker: #2a72cf;
 
-$gradient-color-1: #f60101;
+$gradient-color-1: #0780ba;
 $gradient-color-2: #272a92;
-$gradient-color-3: #00e7d6;
-$gradient-color-4: #0780ba;
+$gradient-color-3: #25a4d2;
 $gradient-speed: 0.000003;
 
 $logo-hover-transition: 0.2s;