feat: use Flippable to make chaotic Contact page

package.json

@@ -5,6 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"start": "vite --host",
+		"check": "tsc --noEmit",
 		"build": "tsc && vite build",
 		"serve": "vite preview",
 		"blog": "node scripts/blog.js"

src/pages/main/Contact.tsx

@@ -5,6 +5,7 @@ import Container from "../../components/Container";
 import { setupCursorTracking } from "../../util";
 import { ReactComponent as Logo } from "../../assets/logo.svg";
 import { DraggableButton } from "../../components/DraggableButton";
+import { Flippable } from "../../components/Flippable";
 
 const A = css`
 	text-decoration: none;
@@ -43,7 +44,13 @@ const CONTACT: Contact = {
 	"Blog": { value: "→", link: "https://MKRhere.com" },
 };
 
-const Home: React.FC = () => {
+// slightly random rotations within -20 to 20 degrees
+const cardRotations = Array.from({ length: 5 }, (_, i) => {
+	const rotation = Math.random() * 40 - 20;
+	return rotation;
+});
+
+const Contact: React.FC = () => {
 	const [contact, setContact] = useState<Contact>(CONTACT);
 
 	useEffect(() => {
@@ -89,113 +96,131 @@ const Home: React.FC = () => {
 				position: relative;
 			`}>
 			<h1>MKRhere</h1>
-			<DraggableButton
+			{cardRotations.map((r, i) => (
-				className={css`
+				<DraggableButton
-					width: 22rem;
+					key={i}
-					height: auto;
+					className={css`
-					aspect-ratio: 3 / 2;
+						width: 22rem;
-
+						height: auto;
-					bottom: 0rem;
+						aspect-ratio: 3 / 2;
-					background: var(--card-tags);
-					border-radius: 0.5rem;
-					transform: rotateZ(5deg);
-
-					position: absolute;
-					bottom: 0;
-					left: 0;
-
-					display: flex;
-					align-items: center;
-					justify-content: center;
-				`}>
-				<Logo width={100} />
-			</DraggableButton>
-			<DraggableButton
-				className={css`
-					width: 22rem;
-					height: auto;
-					aspect-ratio: 3 / 2;
-
-					margin-top: auto;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					gap: 1rem;
-					font-size: 1rem;
-
-					padding: 1rem 2.8em;
-					background: var(--card-bg);
-					border-radius: 0.5rem;
-					transform: rotateZ(-5deg);
-
-					position: absolute;
-					bottom: 0;
-					left: 0;
-
-					ul {
-						padding: 0;
-						display: flex;
-						flex-direction: column;
-						gap: 0.5rem;
-						max-width: 50vw;
-
-						li {
-							list-style: none;
-							min-width: 4rem;
-							max-width: 100%;
-						}
 
-						li a {
+						position: absolute;
-							display: block;
+						bottom: 0;
-							max-width: 100%;
+						left: 0;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-							overflow: hidden;
-						}
 
-						/* Blog entry */
+						rotate: ${r}deg;
-						li:last-child {
+
-							margin-block-start: 1rem;
+						padding: 0;
+						background: transparent;
+					`}
+					ref={setupCursorTracking}>
+					<Flippable
+						defaultSide={i === cardRotations.length - 1 ? "front" : "back"}
+						front={
+							<main
+								className={css`
+									height: 100%;
+									width: 100%;
+
+									overflow: hidden;
+									border-radius: 0.5rem;
+									background: var(--card-bg);
+
+									box-shadow: 0 0 50rem 0 rgba(0, 0, 0, 0.8);
+
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									gap: 1rem;
+									font-size: 1rem;
+
+									padding: 1rem 2.8em;
+
+									ul {
+										padding: 0;
+										display: flex;
+										flex-direction: column;
+										gap: 0.5rem;
+										max-width: 50vw;
+
+										li {
+											list-style: none;
+											min-width: 4rem;
+											max-width: 100%;
+										}
+
+										li a {
+											display: block;
+											max-width: 100%;
+											white-space: nowrap;
+											text-overflow: ellipsis;
+											overflow: hidden;
+										}
+
+										/* Blog entry */
+										li:last-child {
+											margin-block-start: 1rem;
+										}
+									}
+								`}>
+								<div className="dynamic-gradient" />
+								<ul
+									className={css`
+										text-align: right;
+									`}>
+									{Object.keys(contact).map(key => (
+										<li key={key}>
+											<b>{key}.</b>
+										</li>
+									))}
+								</ul>
+								<ul>
+									{Object.keys(contact).map(key => {
+										const value = contact[key];
+
+										return (
+											<li key={key}>
+												{value.link ? (
+													<a
+														className={A}
+														href={value.link}
+														target="_blank"
+														rel="noreferrer"
+														style={{ width: "fit-content" }}>
+														{value.value}
+													</a>
+												) : (
+													value.value
+												)}
+											</li>
+										);
+									})}
+								</ul>
+							</main>
 						}
-					}
+						back={
-				`}
+							<main
-				ref={setupCursorTracking}>
+								className={css`
-				<div className="dynamic-gradient" />
+									width: 100%;
-				<ul
+									height: 100%;
-					className={css`
+
-						text-align: right;
+									overflow: hidden;
-					`}>
+									border-radius: 0.5rem;
-					{Object.keys(contact).map(key => (
+									background: var(--card-active);
-						<li key={key}>
+									border: 1px solid var(--card-active-border);
-							<b>{key}.</b>
+
-						</li>
+									display: flex;
-					))}
+									align-items: center;
-				</ul>
+									justify-content: center;
-				<ul>
+								`}>
-					{Object.keys(contact).map(key => {
+								<Logo width={100} />
-						const value = contact[key];
+							</main>
-
+						}
-						return (
+					/>
-							<li key={key}>
+				</DraggableButton>
-								{value.link ? (
+			))}
-									<a
-										className={A}
-										href={value.link}
-										target="_blank"
-										rel="noreferrer"
-										style={{ width: "fit-content" }}>
-										{value.value}
-									</a>
-								) : (
-									value.value
-								)}
-							</li>
-						);
-					})}
-				</ul>
-			</DraggableButton>
 		</Container>
 	);
 };
 
-export default Home;
+export default Contact;