Refactor to CRT 3D portfolio

Author: Kinin-Code-Offical

README.md

@@ -1,6 +1,6 @@
 # Kinin Code
 
-Portfolio + full-stack landing site built with Next.js and an optional 3D model.
+edh.dev-inspired portfolio with a 3D retro computer + CRT terminal hero and scroll transition into 2D sections.
 
 ## Development
 
@@ -21,16 +21,60 @@ PowerShell starter:
 
 This opens `http://localhost:3000/?dev=1` and enables the live dev panel.
 
-## 3D Model
+## Content (single source of truth)
 
-Export the Blender model to GLB and place it here:
+Edit these files:
+
+```
+src/content/profile.ts
+src/content/projects.ts
+src/content/theme.ts
+src/content/pages/about.md
+src/content/pages/contact.md
+src/content/pages/title.md
+```
+
+Validate content:
+
+```bash
+npm run validate-content
+```
+
+## 3D Model (GLB)
+
+Place the model here:
 
 ```
 public/models/computer.glb
 ```
 
 If the model is missing, the hero uses a placeholder mesh.
 
+### Screen mesh requirement
+
+For the CRT terminal texture to map correctly, the screen mesh **must** be a separate object and named:
+
+- `Screen`, `Display`, or `Monitor` (case-insensitive)
+
+If no screen mesh is found, a fallback plane is attached and the dev panel shows:
+
+```
+screen mesh not found, using fallback plane
+```
+
+### Debug (`?dev=1`)
+
+The dev panel lists:
+- All mesh names in the GLB
+- The selected screen mesh name
+- Whether fallback plane is used
+
+## Terminal commands
+
+```
+help, ls, cd, pwd, show <file.md>, show -all, echo <text>, hello, mkdir <name>, touch <name>
+```
+
 ## Deploy (Cloud Run + Cloudflare)
 
 See `docs/deploy.md` for setup steps and GitHub Actions secrets.

package-lock.json

@@ -7,22 +7,25 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
-    "test": "vitest run"
+    "test": "vitest run",
+    "validate-content": "tsx scripts/validate-content.ts"
   },
   "dependencies": {
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "next": "16.1.5",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "three": "^0.182.0"
+    "three": "^0.182.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.1.5",
+    "tsx": "^4.21.0",
     "typescript": "^5",
     "vitest": "^4.0.18"
   }

package.json

@@ -0,0 +1,33 @@
+import { readFile } from "node:fs/promises";
+import { contentSchema } from "../src/content/schema";
+import { profile } from "../src/content/profile";
+import { projects } from "../src/content/projects";
+import { theme } from "../src/content/theme";
+
+const pages = ["about", "contact", "title"];
+
+const run = async () => {
+  const result = contentSchema.safeParse({ profile, projects, theme });
+
+  if (!result.success) {
+    console.error("Content schema validation failed:");
+    console.error(result.error.format());
+    process.exit(1);
+  }
+
+  for (const page of pages) {
+    const path = new URL(`../src/content/pages/${page}.md`, import.meta.url);
+    const text = await readFile(path, "utf8");
+    if (!text.trim()) {
+      console.error(`Page ${page}.md is empty.`);
+      process.exit(1);
+    }
+  }
+
+  console.log("Content validated successfully.");
+};
+
+run().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

scripts/validate-content.ts

@@ -1,31 +1,22 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { cookies } from "next/headers";
-import { copy } from "@/lib/i18n";
+import Markdown from "@/components/Markdown";
+import { getContent } from "@/lib/content";
 
 export const metadata: Metadata = {
   title: "About — Yamac",
-  description:
-    "About Yamac, an Electrical & Electronics student building full-stack projects.",
+  description: "About Yamac and the work in electronics + software.",
 };
 
 export default async function AboutPage() {
-  const cookieStore = await cookies();
-  const language = cookieStore.get("lang")?.value === "en" ? "en" : "tr";
-  const t = copy[language].pages.about;
-
+  const content = await getContent();
   return (
     <main className="simple-page">
       <section className="simple-card">
-        <p className="eyebrow">{t.eyebrow}</p>
-        <h1>{t.title}</h1>
-        <p className="simple-text">{t.body}</p>
+        <Markdown content={content.pages.about} />
         <div className="simple-actions">
-          <Link className="button primary" href="/">
-            {t.primary}
-          </Link>
-          <Link className="button ghost" href="/projects">
-            {t.secondary}
+          <Link className="button ghost" href="/">
+            Back
           </Link>
         </div>
       </section>

src/app/about/page.tsx

@@ -1,31 +1,27 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { cookies } from "next/headers";
 import ContactForm from "@/components/ContactForm";
-import { copy } from "@/lib/i18n";
+import Markdown from "@/components/Markdown";
+import { getContent } from "@/lib/content";
 
 export const metadata: Metadata = {
   title: "Contact — Yamac",
-  description: "Contact Yamac for projects and collaborations.",
+  description: "Get in touch with Yamac.",
 };
 
 export default async function ContactPage() {
-  const cookieStore = await cookies();
-  const language = cookieStore.get("lang")?.value === "en" ? "en" : "tr";
-  const t = copy[language].pages.contact;
+  const content = await getContent();
 
   return (
     <main className="simple-page">
       <section className="simple-card">
-        <p className="eyebrow">{t.eyebrow}</p>
-        <h1>{t.title}</h1>
-        <p className="simple-text">{t.body}</p>
-        <div className="contact-card">
-          <ContactForm labels={t.form} />
+        <Markdown content={content.pages.contact} />
+        <div className="contact-form">
+          <ContactForm labels={content.profile.contactForm} />
         </div>
         <div className="simple-actions">
           <Link className="button ghost" href="/">
-            {t.primary}
+            Back
           </Link>
         </div>
       </section>