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,34 +96,38 @@ const Home: React.FC = () => {
 				position: relative;
 			`}>
 			<h1>MKRhere</h1>
+			{cardRotations.map((r, i) => (
 				<DraggableButton
+					key={i}
 					className={css`
 						width: 22rem;
 						height: auto;
 						aspect-ratio: 3 / 2;
 
-					bottom: 0rem;
-					background: var(--card-tags);
-					border-radius: 0.5rem;
-					transform: rotateZ(5deg);
-
 						position: absolute;
 						bottom: 0;
 						left: 0;
 
-					display: flex;
+						rotate: ${r}deg;
-					align-items: center;
+
-					justify-content: center;
+						padding: 0;
-				`}>
+						background: transparent;
-				<Logo width={100} />
+					`}
-			</DraggableButton>
+					ref={setupCursorTracking}>
-			<DraggableButton
+					<Flippable
+						defaultSide={i === cardRotations.length - 1 ? "front" : "back"}
+						front={
+							<main
 								className={css`
-					width: 22rem;
+									height: 100%;
-					height: auto;
+									width: 100%;
-					aspect-ratio: 3 / 2;
+
+									overflow: hidden;
+									border-radius: 0.5rem;
+									background: var(--card-bg);
+
+									box-shadow: 0 0 50rem 0 rgba(0, 0, 0, 0.8);
 
-					margin-top: auto;
 									display: flex;
 									align-items: center;
 									justify-content: center;
@@ -124,13 +135,6 @@ const Home: React.FC = () => {
 									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;
@@ -158,8 +162,7 @@ const Home: React.FC = () => {
 											margin-block-start: 1rem;
 										}
 									}
-				`}
+								`}>
-				ref={setupCursorTracking}>
 								<div className="dynamic-gradient" />
 								<ul
 									className={css`
@@ -193,9 +196,31 @@ const Home: React.FC = () => {
 										);
 									})}
 								</ul>
+							</main>
+						}
+						back={
+							<main
+								className={css`
+									width: 100%;
+									height: 100%;
+
+									overflow: hidden;
+									border-radius: 0.5rem;
+									background: var(--card-active);
+									border: 1px solid var(--card-active-border);
+
+									display: flex;
+									align-items: center;
+									justify-content: center;
+								`}>
+								<Logo width={100} />
+							</main>
+						}
+					/>
 				</DraggableButton>
+			))}
 		</Container>
 	);
 };
 
-export default Home;
+export default Contact;