feat: add Special Thanks section, minor changes

components/Hero/Hero.module.css

@@ -71,6 +71,11 @@
 	}
 }
 
+@media screen and (min-width: 2304px) {
+	.images .lightCircle::before {
+		display: none;
+	}
+}
 
 @media screen and (max-width: 1500px) {
 	.images {

components/TeamCard/TeamCard.js

@@ -2,6 +2,8 @@ import styles from './TeamCard.module.css';
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { Star } from 'phosphor-react';
+
 import classNames from 'classnames';
 
 /**
@@ -12,6 +14,7 @@ import classNames from 'classnames';
  * @param {string} pic - A link to the avatar image.
  * @param {string} link - A link to the user page for this user (e.g. github/gitlab/gitbucket/gitrekt profile, fedi account, personal website/blog, ...)
  * @param {boolean} compact - Whether the card should be compact (e.g. Special thanks section) or regular sized (e.g. The team section).
+ * @param {boolean} special - Shows a yellow border and a star sticker at the top of the card
  *
  * @example
  * <TeamCard name="Ash (pinklimes)" caption="greatest web developer, right after Charlotte" pic="https://limes.pink/assets/images/spinmii.gif" link="https://limes.pink" />
@@ -19,10 +22,17 @@ import classNames from 'classnames';
  */
 
 export default function TeamCard(ctx) {
-	const { name, caption, pic, link, compact, className } = ctx;
+	const { name, caption, pic, link, compact, special, className } = ctx;
 
 	return (
-		<Link href={link} className={classNames(styles.card, { [styles.compact]: compact }, className)}>
+		<Link
+			href={link}
+			className={classNames(
+				styles.card,
+				{ [styles.compact]: compact, [styles.special]: Boolean(special) },
+				className
+			)}
+		>
 			<div className={styles.imageWrapper}>
 				<Image src={pic} width={110} height={110} alt="" className={styles.image} />
 			</div>
@@ -30,6 +40,7 @@ export default function TeamCard(ctx) {
 				<h3>{name}</h3>
 				<p>{caption}</p>
 			</div>
+			{special && <Star size={32} weight="fill" className={styles.star} />}
 		</Link>
 	);
 }

components/TeamCard/TeamCard.module.css

@@ -1,6 +1,8 @@
+/* regular card */
+
 .card {
+	position: relative;
 	display: grid;
-	margin: 0.6rem;
 	padding: 1rem;
 	width: 100%;
 	max-width: 28rem;
@@ -18,19 +20,46 @@
 	box-shadow: 0 0 0 1px var(--bg-shade-3) inset;
 }
 
+.card.special {
+	box-shadow: 0 0 0 0.2rem var(--yellow-shade-1) inset;
+}
+
+.card.special .star {
+	position: absolute;
+	top: 0;
+	right: 0;
+	transform: translate(calc(50% - 0.1rem), calc(-50% + 0.1rem)) scale(1.25);
+	color: var(--yellow-shade-1);
+}
+
 .imageWrapper {
 	position: relative;
-	/* the .imageWrapper and .image radii differ to prevent a rendering bug where the image corners were glitchy */
-	border-radius: 0.6rem;
 	width: 110px;
 	height: 110px;
-	background-color: var(--accent-shade-3);
+}
+
+/*
+ * this garbage prevents a rendering bug when setting a simple bgcolor to the
+ * .imageWrapper where the corners would have a border. Just... deal with this.
+ */
+
+.imageWrapper::before {
+	content: '';
+	background-color: #fff;
+	display: block;
+	position: absolute;
+	width: 97%;
+	height: 97%;
+	top: 1.5%;
+	left: 1.5%;
+	border-radius: 0.6rem;
 }
 
 .image {
 	width: 100%;
 	height: 100%;
-	border-radius: 0.5rem;
+	border-radius: 0.6rem;
+	position: relative;
 }
 
 .text {
@@ -49,10 +78,54 @@
 	font-weight: 300;
 }
 
+/* compact card */
+
+.compact.card {
+	max-width: unset;
+	width: unset;
+	border-radius: 0.75rem;
+}
+
+.compact .imageWrapper {
+	width: 48px;
+	height: 48px;
+}
+
+.compact .imageWrapper::before {
+	border-radius: 100%;
+}
+
+.compact .image {
+	border-radius: 100%;
+	position: relative;
+	z-index: 2;
+}
+
+.compact .text {
+	flex-flow: row;
+	justify-content: start;
+	align-items: center;
+}
+
+.compact .text * {
+	margin: inherit;
+	line-height: 1;
+	font-size: inherit;
+	margin-right: 0.8ch;
+}
+
+.compact.card.special {
+	box-shadow: 0 0 0 0.1rem var(--yellow-shade-1) inset;
+}
+
+.compact.card.special .star {
+	transform: translate(calc(50% - 0.05rem), calc(-50% + 0.05rem));
+}
+
 @media screen and (max-width: 36rem) {
 	.card {
-		padding: .9rem;
-		border-radius: .7rem;
+		padding: 0.9rem;
+		border-radius: 0.7rem;
 	}
 
 	.imageWrapper {

next.config.js

@@ -13,19 +13,25 @@ const nextConfig = {
 				protocol: 'https',
 				hostname: 'github.com',
 				port: '',
-				pathname: '/*'
+				pathname: '/**'
 			},
 			{
 				protocol: 'https',
 				hostname: 'avatars.githubusercontent.com',
 				port: '',
-				pathname: '/u/*'
+				pathname: '/u/**'
+			},
+			{
+				protocol: 'https',
+				hostname: 'github.githubassets.com',
+				port: '',
+				pathname: '/images/**'
 			},
 			{
 				protocol: 'https',
 				hostname: 'cdn.discordapp.com',
 				port: '',
-				pathname: '/avatars/*'
+				pathname: '/avatars/**'
 			}
 		]
 	}

pages/index.js

@@ -41,14 +41,16 @@ export default function Home({ locale }) {
 	const router = useRouter();
 	return (
 		<main>
-			<Section style={{ minHeight: '100vh', padding: 0 }}>
+			<Section>
 				<Hero />
 			</Section>
+
 			<div id="showcase">
 				<Section className={styles.showcaseSection}>
 					<Title>What we make.</Title>
 					<Caption>Our project has many components. Here are some of them.</Caption>
 				</Section>
+
 				{locale.showcase.map((el, i) => {
 					return (
 						<ShowcaseSection
@@ -60,6 +62,7 @@ export default function Home({ locale }) {
 						/>
 					);
 				})}
+
 				<Section className={styles.showcaseTail} contentClassName={styles.content}>
 					<Image
 						src={wiiuchatImage}
@@ -68,6 +71,7 @@ export default function Home({ locale }) {
 						quality={100}
 						sizes="(max-width: 840px) 100vw, 700px"
 					/>
+
 					<div className={styles.text}>
 						<Title>And much more!</Title>
 						<Caption center>
@@ -86,14 +90,19 @@ export default function Home({ locale }) {
 					</div>
 				</Section>
 			</div>
+
 			<Section style={{ paddingBottom: '72px' }}>
 				<Title id="faq">{locale.faq.title}</Title>
 				<Caption>{locale.faq.text}</Caption>
 				<Faq questionObject={locale.faq.QAs} />
 			</Section>
+
 			<Section>
-				<Title center id="credits">{locale.credits.title}</Title>
+				<Title center id="credits">
+					{locale.credits.title}
+				</Title>
 				<Caption center>{locale.credits.text}</Caption>
+
 				<div className={styles.teamWrapper}>
 					{locale.credits.people.map((el, i) => {
 						return (
@@ -102,6 +111,57 @@ export default function Home({ locale }) {
 					})}
 				</div>
 			</Section>
+
+			<Section>
+				<Title id="special-thanks">{locale.specialThanks.title}</Title>
+				<Caption>{locale.specialThanks.text}</Caption>
+
+				<div className={styles.thanksAniWrap}>
+					<div className={styles.inner}>
+						<div className={styles.rowOne}>
+							{(() => {
+								let ar = locale.specialThanks.people;
+								ar = ar.slice(0, Math.round(ar.length / 2));
+								ar = ar.concat(ar).concat(ar);
+								return ar.map((el, i) => {
+									return (
+										<TeamCard
+											compact
+											special={el.special}
+											name={el.name}
+											caption={el.caption}
+											pic={el.picture}
+											link={el.github}
+											key={i}
+										/>
+									);
+								});
+							})()}
+						</div>
+
+						<div className={styles.rowTwo}>
+							{(() => {
+								let ar = locale.specialThanks.people;
+								ar = ar.slice(Math.round(ar.length / 2));
+								ar = ar.concat(ar).concat(ar);
+								return ar.map((el, i) => {
+									return (
+										<TeamCard
+											compact
+											special={el.special}
+											name={el.name}
+											caption={el.caption}
+											pic={el.picture}
+											link={el.github}
+											key={i}
+										/>
+									);
+								});
+							})()}
+						</div>
+					</div>
+				</div>
+			</Section>
 		</main>
 	);
 }

pages/index.module.css

@@ -54,10 +54,75 @@
 	display: flex;
 	justify-content: center;
 	flex-wrap: wrap;
-	margin: -10px;
+	gap: 1rem;
 	margin-top: 80px;
 }
 
+.thanksAniWrap {
+	position: relative;
+	transform: rotate(-5deg);
+	margin-top: 2rem;
+}
+
+.thanksAniWrap .inner {
+	overflow: hidden;
+}
+
+.thanksAniWrap::before {
+	content: '';
+	position: absolute;
+}
+
+.thanksAniWrap::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	width: 110%;
+	left: -5%;
+	height: 100%;
+	background: linear-gradient(
+		90deg,
+		var(--bg-shade-1) 5%,
+		rgba(27, 31, 59, 0) 25%,
+		rgba(27, 31, 59, 0) 75%,
+		var(--bg-shade-1) 95%
+	);
+	z-index: 1;
+	pointer-events: none;
+}
+
+.thanksAniWrap .rowOne,
+.thanksAniWrap .rowTwo {
+	display: inline-grid;
+	width: max-content;
+	grid-auto-columns: 1fr;
+	grid-auto-flow: column;
+	gap: 1rem;
+	margin-bottom: 1rem;
+	white-space: nowrap;
+}
+
+.thanksAniWrap .rowOne {
+	animation: infiniteScroll 25s linear infinite;
+	position: relative;
+	left: -100%;
+}
+
+.thanksAniWrap .rowTwo {
+	animation: infiniteScroll 30s linear infinite reverse;
+	position: relative;
+	right: 100%;
+}
+
+@keyframes infiniteScroll {
+	0% {
+		transform: translate3d(0);
+	}
+	100% {
+		transform: translate3d(calc(100% / -3), 0, 0);
+	}
+}
+
 @media screen and (max-width: 840px) {
 	.showcaseTail {
 		padding: 90px 0;

styles/globals.css

@@ -25,6 +25,8 @@
 	--green-shade-1: #59c9a5;
 
 	--red-shade-1: #a9375b;
+
+	--yellow-shade-1: #abbf3b;
 }
 
 body {