chore: minor cleanup

src/components/DraggableButton.tsx

@@ -53,10 +53,6 @@ export const DraggableButton = React.forwardRef<
 
 		// Set position and clear any bottom/right values
 		el.style.position = "absolute";
-		// el.style.top = `${top}px`;
-		// el.style.left = `${left}px`;
-		// el.style.bottom = "unset";
-		// el.style.right = "unset";
 		el.style.transition = "none";
 
 		setPosition({ x: left, y: top });

src/components/Flippable.tsx

@@ -5,17 +5,17 @@ export interface FlippableProps {
 	front: React.ReactNode;
 	back: React.ReactNode;
 	className?: string;
-	defaultSide?: "front" | "back";
+	defaultFlipped?: boolean;
 }
 
 export const Flippable: React.FC<FlippableProps> = ({
 	front,
 	back,
 	className,
-	defaultSide,
+	defaultFlipped,
 }) => {
 	const ref = useRef<HTMLDivElement>(null);
-	const [isFlipped, setIsFlipped] = useState(defaultSide === "back");
+	const [isFlipped, setIsFlipped] = useState(defaultFlipped);
 	const mouseDownTime = useRef<number>(0);
 	const DRAG_THRESHOLD = 250; // milliseconds
 

src/pages/main/Contact.tsx

@@ -96,7 +96,7 @@ const Contact: React.FC = () => {
 				position: relative;
 			`}>
 			<h1>MKRhere</h1>
-			{cardRotations.map((r, i) => (
+			{cardRotations.map((rot, i) => (
 				<DraggableButton
 					key={i}
 					className={css`
@@ -108,14 +108,14 @@ const Contact: React.FC = () => {
 						bottom: 0;
 						left: 0;
 
-						rotate: ${r}deg;
+						rotate: ${rot}deg;
 
 						padding: 0;
 						background: transparent;
 					`}
 					ref={setupCursorTracking}>
 					<Flippable
-						defaultSide={i === cardRotations.length - 1 ? "front" : "back"}
+						defaultFlipped={i !== cardRotations.length - 1}
 						front={
 							<main
 								className={css`