feat: add wip page and dialog popup

app/components/view-popup.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { useNavigate } from "@remix-run/react";
+
+export function ViewPopup() {
+	let navigate = useNavigate();
+	const triggerRef = useRef<HTMLButtonElement>(null);
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			triggerRef.current?.click();
+		}, 5000);
+		return () => clearTimeout(timer);
+	}, []);
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button
+					variant="outline"
+					style={{ display: "none" }}
+					id="auto-dialog-trigger"
+					ref={triggerRef}
+				></Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>Change view</DialogTitle>
+					<DialogDescription>
+						Would you like to stick with a normal portfolio view or a more
+						exciting view?
+					</DialogDescription>
+				</DialogHeader>
+				<DialogFooter className="sm:justify-start">
+					<Button type="button" onClick={() => navigate("/fun")}>
+						Take me to fun land
+					</Button>
+					<DialogClose asChild>
+						<Button type="button" variant="secondary">
+							Stick to current view
+						</Button>
+					</DialogClose>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

app/routes/_index.tsx

@@ -5,7 +5,8 @@ import { ExperienceSection } from "@/components/experience-section";
 import { ProjectsSection } from "@/components/projects-section";
 import { ContactSection } from "@/components/contact-section";
 import { portfolioData } from "@/data/portfolio";
-import { BusinessSection } from "~/components/business-section";
+import { BusinessSection } from "@/components/business-section";
+import { ViewPopup } from "@/components/view-popup";
 
 export const meta: MetaFunction = () => {
 	return [
@@ -26,6 +27,7 @@ export default function Index() {
 			<ProjectsSection projects={portfolioData.projects} />
 			<BusinessSection businesses={portfolioData.businesses} />
 			<ContactSection profile={portfolioData.profile} />
+			<ViewPopup />
 		</div>
 	);
 }

app/routes/fun.tsx

@@ -0,0 +1,40 @@
+import { useNavigate } from "react-router-dom";
+
+export default function WipPage() {
+	const navigate = useNavigate();
+
+	return (
+		<div
+			style={{
+				minHeight: "100vh",
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				justifyContent: "center",
+				background: "#f5f5f5",
+			}}
+		>
+			<h1 style={{ fontSize: "3rem", color: "#333" }}>
+				🚧 Work In Progress 🚧
+			</h1>
+			<p style={{ fontSize: "1.25rem", color: "#666" }}>
+				This page is currently under construction. Please check back soon!
+			</p>
+			<button
+				style={{
+					marginTop: "2rem",
+					padding: "0.75rem 1.5rem",
+					fontSize: "1rem",
+					borderRadius: "5px",
+					border: "none",
+					background: "#333",
+					color: "#fff",
+					cursor: "pointer",
+				}}
+				onClick={() => navigate(-1)}
+			>
+				Go Back
+			</button>
+		</div>
+	);
+}