Init

app/routes/blog.myfirstpost.tsx

@@ -0,0 +1,52 @@
+import { MetaFunction } from "@remix-run/react";
+
+export const meta: MetaFunction = () => {
+	return [
+		{ title: "My first Post" },
+		{ name: "description", content: "This is my first post?" },
+		{
+			name: "keywords",
+			content: "Paul W, Paul W Portfolio, Paul W Profile, Paul W Remix",
+		},
+	];
+};
+
+export default function myfirstpost() {
+	return (
+		<div className="relative flex min-h-screen flex-col items-center justify-center p-8 overflow-hidden">
+			<div className="absolute inset-0 z-0">
+				<div className="h-full w-full bg-black">
+					<div
+						className="absolute inset-0"
+						style={{
+							backgroundImage:
+								"linear-gradient(#ffffff15 1px, transparent 1px), linear-gradient(90deg, #ffffff15 1px, transparent 1px)",
+							backgroundSize: "20px 20px",
+						}}
+					/>
+				</div>
+			</div>
+
+			<div className="relative z-10 flex flex-col items-center gap-8 max-w-6xl w-full">
+				{/* Hero */}
+				<div className="text-center">
+					<div className="flex items-center justify-center gap-3 mb-3">
+						<h1 className="text-6xl font-bold text-gray-100">
+							My First (useless) Blog Post
+						</h1>
+					</div>
+					<p className="text-xl text-gray-300 mt-4">
+						Somehow have to fill the empty space 🤷
+					</p>
+				</div>
+
+				<hr className="w-full border-t border-gray-700" />
+
+				{/* Content */}
+				<div className="flex flex-col gap-4">
+					<p className="text-lg text-gray-300">Sorry, no content to see!</p>
+				</div>
+			</div>
+		</div>
+	);
+}