Add Minecraft game-style template (#33)

Author: Copilot

package-lock.json

@@ -38,6 +38,8 @@ function App() {
   const isNetflix = template === 'netflix'
   // threejs template gets sci-fi HUD navbar
   const isThreejs = template === 'threejs'
+  // minecraft template gets game UI styling
+  const isMinecraft = template === 'minecraft'
 
   const showSearch = (githubConfig as { showSearch?: boolean }).showSearch !== false
 
@@ -172,25 +174,31 @@ function App() {
       ? 'min-h-screen bg-[#141414] text-white'
       : isThreejs
         ? 'min-h-screen bg-[#050509] text-slate-50'
-        : 'min-h-screen bg-slate-50 text-slate-900 dark:bg-[#050509] dark:text-slate-50'
+        : isMinecraft
+          ? 'min-h-screen bg-[#1a1a2e] text-white'
+          : 'min-h-screen bg-slate-50 text-slate-900 dark:bg-[#050509] dark:text-slate-50'
   const headerClasses = isHacker
     ? 'sticky top-0 z-20 border-b border-green-900/60 bg-black/95 backdrop-blur font-mono'
     : isNetflix
       ? 'sticky top-0 z-20 border-b border-white/5 bg-[#141414]/95 backdrop-blur'
       : isThreejs
         ? 'sticky top-0 z-20 bg-[#050509]/80 backdrop-blur-md'
-        : theme === 'dark'
-          ? 'sticky top-0 z-20 border-b border-white/5 bg-[#050509]/90 backdrop-blur'
-          : 'sticky top-0 z-20 border-b border-slate-200 bg-slate-50/90 backdrop-blur'
+        : isMinecraft
+          ? 'sticky top-0 z-20 border-b-2 border-[#3b3b3b] bg-[#8b8b8b]/95 backdrop-blur'
+          : theme === 'dark'
+            ? 'sticky top-0 z-20 border-b border-white/5 bg-[#050509]/90 backdrop-blur'
+            : 'sticky top-0 z-20 border-b border-slate-200 bg-slate-50/90 backdrop-blur'
   const footerClasses = isHacker
     ? 'border-t border-green-900/60 bg-black py-4 text-xs text-green-900 font-mono'
     : isNetflix
       ? 'border-t border-white/5 bg-[#141414] py-6 text-xs text-[#999]'
       : isThreejs
         ? 'border-t border-blue-900/30 bg-gradient-to-b from-[#080c18] to-[#050509] py-6 text-xs text-slate-400'
-        : theme === 'dark'
-          ? 'border-t border-slate-800 bg-gradient-to-b from-[#111120] to-[#050509] py-6 text-xs text-slate-400'
-          : 'border-t border-slate-200 bg-gradient-to-b from-slate-50 to-slate-100 py-6 text-xs text-slate-600'
+        : isMinecraft
+          ? 'border-t-2 border-[#3b3b3b] bg-[#8b8b8b] py-6 text-xs text-[#3b3b3b]'
+          : theme === 'dark'
+            ? 'border-t border-slate-800 bg-gradient-to-b from-[#111120] to-[#050509] py-6 text-xs text-slate-400'
+            : 'border-t border-slate-200 bg-gradient-to-b from-slate-50 to-slate-100 py-6 text-xs text-slate-600'
 
   const navInitials = (() => {
     const name = (hero.title || '').trim()
@@ -348,7 +356,7 @@ function App() {
             <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3 sm:px-6 sm:py-4">
               <Link
                 to="/"
-                className={`inline-flex items-center gap-2 no-underline ${isHacker ? 'text-green-500' : isNetflix ? 'text-white' : 'text-slate-900 dark:text-slate-100'}`}
+                className={`inline-flex items-center gap-2 no-underline ${isHacker ? 'text-green-500' : isNetflix ? 'text-white' : isMinecraft ? 'text-white' : 'text-slate-900 dark:text-slate-100'}`}
                 aria-label={`${hero.title} home`}
               >
                 {isHacker ? (
@@ -358,6 +366,12 @@ function App() {
                   </span>
                 ) : isNetflix ? (
                   <span className="text-lg font-black text-[#e50914] tracking-tight">{navInitials}</span>
+                ) : isMinecraft ? (
+                  <span className="relative inline-block border-2 border-[#3b3b3b] bg-[#5c7a29] px-2 py-0.5 text-sm font-bold text-white drop-shadow-[1px_1px_0_#3f3f00]">
+                    <span className="pointer-events-none absolute inset-0 border-t border-l border-[#8acd32]" />
+                    <span className="pointer-events-none absolute inset-0 border-b border-r border-[#3a5a19]" />
+                    <span className="relative">{navInitials}</span>
+                  </span>
                 ) : (
                   <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-tr from-blue-600 to-cyan-400 text-xs font-semibold text-[#050509]" aria-hidden="true">
                     {navInitials}
@@ -386,6 +400,18 @@ function App() {
                   <Link to="/projects" className="transition hover:text-white">Projects</Link>
                   <a href={`${import.meta.env.BASE_URL}#stats`} className="transition hover:text-white">Stats</a>
                 </nav>
+              ) : isMinecraft ? (
+                <nav className="hidden md:flex items-center gap-1 text-xs font-bold" aria-label="Primary">
+                  {(['/', '/videos', '/blogs', '/projects'] as const).map((path, i) => {
+                    const labels = ['Home', 'Videos', 'Blogs', 'Projects']
+                    return (
+                      <Link key={path} to={path} className="relative border-2 border-[#3b3b3b] bg-[#6b6b6b] px-2.5 py-1 text-[#d4d4d4] transition-all hover:bg-[#555555] hover:text-white">
+                        {labels[i]}
+                      </Link>
+                    )
+                  })}
+                  <a href={`${import.meta.env.BASE_URL}#stats`} className="relative border-2 border-[#3b3b3b] bg-[#6b6b6b] px-2.5 py-1 text-[#d4d4d4] transition-all hover:bg-[#555555] hover:text-white">Stats</a>
+                </nav>
               ) : (
                 <nav className="hidden md:flex items-center gap-3 text-xs font-medium text-slate-700 dark:text-slate-300" aria-label="Primary">
                   <Link to="/" className="border-b border-transparent pb-0.5 transition-colors hover:border-slate-500 hover:text-slate-900 dark:hover:border-slate-400 dark:hover:text-slate-50">Home</Link>
@@ -408,7 +434,9 @@ function App() {
                       ? 'border-green-900 bg-green-950/40 text-green-600 hover:bg-green-900/30'
                       : isNetflix
                         ? 'border-white/10 bg-white/5 text-[#e5e5e5] hover:bg-white/10'
-                        : 'border-indigo-300/60 bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:bg-indigo-500/20'
+                        : isMinecraft
+                          ? 'border-[#3b3b3b] bg-[#5c7a29] text-white hover:bg-[#6b8e3e] rounded-none'
+                          : 'border-indigo-300/60 bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:bg-indigo-500/20'
                   }`}
                 >
                   <ForkIcon className="h-3 w-3 fill-current" />
@@ -421,7 +449,7 @@ function App() {
                 <button
                   type="button"
                   onClick={() => setMobileMenuOpen((prev) => !prev)}
-                  className={`flex h-8 w-8 items-center justify-center rounded-md transition ${isHacker ? 'text-green-700 hover:bg-green-900/20' : isNetflix ? 'text-white hover:bg-white/10' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'}`}
+                  className={`flex h-8 w-8 items-center justify-center rounded-md transition ${isHacker ? 'text-green-700 hover:bg-green-900/20' : isNetflix ? 'text-white hover:bg-white/10' : isMinecraft ? 'text-[#3b3b3b] hover:bg-[#6b6b6b]' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'}`}
                   aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
                 >
                   {mobileMenuOpen ? (
@@ -440,7 +468,7 @@ function App() {
             {/* Mobile dropdown menu */}
             {mobileMenuOpen && (
               <nav
-                className={`border-t md:hidden backdrop-blur ${isHacker ? 'border-green-900/60 bg-black/95 font-mono text-xs text-green-700' : isNetflix ? 'border-white/5 bg-[#141414]/95 text-sm text-[#e5e5e5]' : 'border-slate-200 bg-slate-50/95 dark:border-white/5 dark:bg-[#050509]/95'}`}
+                className={`border-t md:hidden backdrop-blur ${isHacker ? 'border-green-900/60 bg-black/95 font-mono text-xs text-green-700' : isNetflix ? 'border-white/5 bg-[#141414]/95 text-sm text-[#e5e5e5]' : isMinecraft ? 'border-[#3b3b3b] bg-[#8b8b8b]/95 text-sm text-[#3b3b3b] font-bold' : 'border-slate-200 bg-slate-50/95 dark:border-white/5 dark:bg-[#050509]/95'}`}
                 aria-label="Mobile navigation"
               >
                 <div className={`mx-auto flex max-w-5xl flex-col px-4 py-2 ${isHacker ? '' : isNetflix ? 'font-medium' : 'text-sm font-medium text-slate-700 dark:text-slate-300'}`}>

src/App.tsx

@@ -1,6 +1,6 @@
 import { githubConfig } from '../generated/githubData'
 
-export type TemplateName = 'minimal' | 'classic' | 'bento' | 'hacker' | 'netflix' | 'threejs'
+export type TemplateName = 'minimal' | 'classic' | 'bento' | 'hacker' | 'netflix' | 'threejs' | 'minecraft'
 
 export const DEFAULT_TEMPLATE: TemplateName = 'threejs'
 

src/lib/activeTemplate.ts

@@ -5,12 +5,14 @@ import BentoBlogPage from '../templates/bento/BlogPage'
 import HackerBlogPage from '../templates/hacker/BlogPage'
 import NetflixBlogPage from '../templates/netflix/BlogPage'
 import ThreejsBlogPage from '../templates/threejs/BlogPage'
+import MinecraftBlogPage from '../templates/minecraft/BlogPage'
 
 export default function BlogPage() {
   if (activeTemplate === 'classic') return <ClassicBlogPage />
   if (activeTemplate === 'bento') return <BentoBlogPage />
   if (activeTemplate === 'hacker') return <HackerBlogPage />
   if (activeTemplate === 'netflix') return <NetflixBlogPage />
   if (activeTemplate === 'threejs') return <ThreejsBlogPage />
+  if (activeTemplate === 'minecraft') return <MinecraftBlogPage />
   return <MinimalBlogPage />
 }

src/pages/BlogPage.tsx

@@ -5,12 +5,14 @@ import BentoBlogsPage from '../templates/bento/BlogsPage'
 import HackerBlogsPage from '../templates/hacker/BlogsPage'
 import NetflixBlogsPage from '../templates/netflix/BlogsPage'
 import ThreejsBlogsPage from '../templates/threejs/BlogsPage'
+import MinecraftBlogsPage from '../templates/minecraft/BlogsPage'
 
 export default function BlogsPage() {
   if (activeTemplate === 'classic') return <ClassicBlogsPage />
   if (activeTemplate === 'bento') return <BentoBlogsPage />
   if (activeTemplate === 'hacker') return <HackerBlogsPage />
   if (activeTemplate === 'netflix') return <NetflixBlogsPage />
   if (activeTemplate === 'threejs') return <ThreejsBlogsPage />
+  if (activeTemplate === 'minecraft') return <MinecraftBlogsPage />
   return <MinimalBlogsPage />
 }

src/pages/BlogsPage.tsx

@@ -5,12 +5,14 @@ import BentoHomePage from '../templates/bento/HomePage'
 import HackerHomePage from '../templates/hacker/HomePage'
 import NetflixHomePage from '../templates/netflix/HomePage'
 import ThreejsHomePage from '../templates/threejs/HomePage'
+import MinecraftHomePage from '../templates/minecraft/HomePage'
 
 export default function HomePage() {
   if (activeTemplate === 'classic') return <ClassicHomePage />
   if (activeTemplate === 'bento') return <BentoHomePage />
   if (activeTemplate === 'hacker') return <HackerHomePage />
   if (activeTemplate === 'netflix') return <NetflixHomePage />
   if (activeTemplate === 'threejs') return <ThreejsHomePage />
+  if (activeTemplate === 'minecraft') return <MinecraftHomePage />
   return <MinimalHomePage />
 }

src/pages/HomePage.tsx

@@ -5,12 +5,14 @@ import BentoProjectsPage from '../templates/bento/ProjectsPage'
 import HackerProjectsPage from '../templates/hacker/ProjectsPage'
 import NetflixProjectsPage from '../templates/netflix/ProjectsPage'
 import ThreejsProjectsPage from '../templates/threejs/ProjectsPage'
+import MinecraftProjectsPage from '../templates/minecraft/ProjectsPage'
 
 export default function ProjectsPage() {
   if (activeTemplate === 'classic') return <ClassicProjectsPage />
   if (activeTemplate === 'bento') return <BentoProjectsPage />
   if (activeTemplate === 'hacker') return <HackerProjectsPage />
   if (activeTemplate === 'netflix') return <NetflixProjectsPage />
   if (activeTemplate === 'threejs') return <ThreejsProjectsPage />
+  if (activeTemplate === 'minecraft') return <MinecraftProjectsPage />
   return <MinimalProjectsPage />
 }

src/pages/ProjectsPage.tsx

@@ -5,12 +5,14 @@ import BentoVideosPage from '../templates/bento/VideosPage'
 import HackerVideosPage from '../templates/hacker/VideosPage'
 import NetflixVideosPage from '../templates/netflix/VideosPage'
 import ThreejsVideosPage from '../templates/threejs/VideosPage'
+import MinecraftVideosPage from '../templates/minecraft/VideosPage'
 
 export default function VideosPage() {
   if (activeTemplate === 'classic') return <ClassicVideosPage />
   if (activeTemplate === 'bento') return <BentoVideosPage />
   if (activeTemplate === 'hacker') return <HackerVideosPage />
   if (activeTemplate === 'netflix') return <NetflixVideosPage />
   if (activeTemplate === 'threejs') return <ThreejsVideosPage />
+  if (activeTemplate === 'minecraft') return <MinecraftVideosPage />
   return <MinimalVideosPage />
 }

src/pages/VideosPage.tsx

@@ -0,0 +1,48 @@
+import { Link } from 'react-router-dom'
+import type { Blog } from '../../types/contentTypes'
+
+function stripMarkdown(text: string, maxLen: number): string {
+  const plain = text
+    .replace(/#{1,6}\s/g, '')
+    .replace(/\*\*([^*]+)\*\*/g, '$1')
+    .replace(/\*([^*]+)\*/g, '$1')
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+    .replace(/`[^`]+`/g, '')
+    .replace(/\n+/g, ' ')
+    .trim()
+  return plain.length <= maxLen ? plain : plain.slice(0, maxLen).trim() + '…'
+}
+
+export default function BlogCard({ blog, featured }: { blog: Blog; featured?: boolean }) {
+  const date = blog.createdAt?.slice(0, 10) ?? '????-??-??'
+  const excerpt = stripMarkdown(blog.content, 100)
+
+  return (
+    <Link
+      to={`/blog/${blog.id}`}
+      className="group relative block border-2 border-[#3b3b3b] bg-[#8b8b8b] p-3 transition-all hover:border-[#ffffff80] hover:-translate-y-0.5 active:translate-y-0"
+      style={{ imageRendering: 'pixelated' }}
+    >
+      {/* Highlight edge (top & left) */}
+      <div className="pointer-events-none absolute inset-0 border-t-2 border-l-2 border-[#c6c6c6]" />
+      {/* Shadow edge (bottom & right) */}
+      <div className="pointer-events-none absolute inset-0 border-b-2 border-r-2 border-[#555555]" />
+
+      <div className="relative flex items-start gap-2">
+        <span className="mt-0.5 shrink-0 text-[#5c7a29] text-lg leading-none">⬛</span>
+        <div className="min-w-0">
+          <p className="font-bold text-white drop-shadow-[2px_2px_0_#3f3f00]">
+            {featured && (
+              <span className="mr-1.5 bg-[#5c7a29] px-1 py-0.5 text-[10px] text-white uppercase tracking-wider">★ Featured</span>
+            )}
+            {blog.title || 'Untitled'}
+          </p>
+          {excerpt && (
+            <p className="mt-1 text-xs text-[#d4d4d4] line-clamp-2">{excerpt}</p>
+          )}
+          <p className="mt-1 text-[11px] text-[#a0a0a0]">{date}</p>
+        </div>
+      </div>
+    </Link>
+  )
+}