Initial iteration

1 files changed, 77 insertions, 70 deletions

diff --git a/website.templ b/website.templ
index a3f137a..face9f9 100644
--- a/website.templ
+++ b/website.templ
@@ -1,81 +1,88 @@
 package main
 
-import "fmt"
+templ HeadComponent(title string, description string) {
+	<head>
+		<meta charset="UTF-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+		<meta name="color-scheme" content="dark"/>
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
+		<meta name="darkreader-lock"/>
+		<meta name="robots" content="index, follow, noarchive"/>
+		<meta name="keywords" content="Kyren223, Krypton, Compiler, Minecraft, Developer, Language, Langdev, Gamedev, Game, Software, Software Engineer, Game developer"/>
+		<meta name="author" content="Kyren223"/>
+		<meta name="description" content={ description }/>
+		<title>{ title }</title>
+		<meta property="og:title" content={ title }/>
+		<meta property="og:description" content={ description }/>
+		<meta property="og:type" content="website"/>
+		<meta property="og:url" content="https://kyren.codes/"/>
+		<meta property="og:image" content="https://kyren.codes/image.png"/>
+		<meta property="og:image:alt" content="a cyan sphere with a dark background"/>
+		<meta property="og:site_name" content="Kyren's Website"/>
+		<script src="/public/theme.js" defer></script>
+		<link rel="stylesheet" href="/public/style.css"/>
+		{ children... }
+	</head>
+}
+
+templ NavLink(href string, label string) {
+	<a href={ templ.SafeURL(href) } class="text-(--primary) hover:text-(--accent)">{ label }</a>
+}
 
-// 1. Shared Base Layout Component
-templ PageLayout(title string) {
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8"/>
-        <title>{ title }</title>
-        <style>
-            body { font-family: monospace; background: #0f172a; color: #f8fafc; padding: 2rem; line-height: 1.5; }
-            nav a { color: #38bdf8; margin-right: 1rem; text-decoration: none; }
-            nav a:hover { text-decoration: underline; }
-            .card { background: #1e293b; padding: 1rem; border-radius: 8px; margin-top: 1rem; border: 1px solid #334155; }
-            .badge-active { color: #4ade80; }
-            .badge-inactive { color: #f87171; }
-        </style>
-        <link rel="stylesheet" href="/public/style.css"/>
-    </head>
-    <body>
-        <nav>
-            <a href="/">/home</a>
-            <a href="/about">/about</a>
-            <a href="/items">/items</a>
-        </nav>
-        <hr style="border-color: #334155; margin: 1rem 0;"/>
-        { children... }
-    </body>
-    </html>
+templ NavComponent(path string) {
+	<nav class="flex justify-between gap-10 p-4 mb-[1.5625rem] border-2 border-(--alt) text-[1.375rem]">
+		<span>{ path }</span>
+		<span class="flex gap-[1ch]">
+			@NavLink("/", "home")
+			for _, dir := range []string{"skills", "projects", "blogs"} {
+				@NavLink("/"+dir, dir)
+			}
+			@NavLink("/shell", "shell")
+		</span>
+	</nav>
 }
 
-// 2. Page 1: Home
-templ HomePage() {
-    @PageLayout("Home") {
-        <h1>Home</h1>
-        <p>Go server running with Templ templates and Air hot-reloading.</p>
-    }
+templ TerminalLayout(style Style, path string) {
+	<!DOCTYPE html>
+	<html lang="en" style={ styleToCss(style) }>
+		@HeadComponent(path, "My personal website") {
+			<link rel="stylesheet" href="/public/styles/terminal.css"/>
+		}
+		<body>
+			<main class="w-[75rem] h-[40rem] p-8 border-[0.2rem] border-(--text) overflow-hidden text-[1.125rem]">
+				@NavComponent(path)
+				{ children... }
+			</main>
+		</body>
+	</html>
 }
 
-// 3. Page 2: About
-templ AboutPage() {
-    @PageLayout("About") {
-        <h1 class="text-3xl font-bold underline">About</h1>
-        <p>Single-binary web app using Go's standard library net/http.</p>
-    }
+templ HomePage(style Style) {
+	@TerminalLayout(style, "/home/kyren/") {
+		<div id="content" class="w-0 h-0 invisible sm:w-full sm:h-full sm:visible">
+			<h1>Home</h1>
+			<p>Go server running with Templ templates and Air hot-reloading.</p>
+		</div>
+	}
 }
 
-// Data struct for dynamic rendering
-type Item struct {
-    Name   string
-    Active bool
+templ SkillsPage(style Style) {
+	@TerminalLayout(style, "/home/kyren/skills.md") {
+		<h1 class="text-3xl font-bold">About</h1>
+		<p>Single-binary web app using Go's standard library net/http.</p>
+	}
 }
 
-// 4. Page 3: Dynamic Data (Conditionals + Loops)
-templ ItemsPage(items []Item) {
-    @PageLayout("Items") {
-        <h1>Items</h1>
-        <div class="card">
-            if len(items) == 0 {
-                <p>No items in database.</p>
-            } else {
-                <ul>
-                    for _, item := range items {
-                        <li>
-                            <span>{ item.Name }</span>
-                            if item.Active {
-                                <span class="badge-active"> [ACTIVE]</span>
-                            } else {
-                                <span class="badge-inactive"> [INACTIVE]</span>
-                            }
-                        </li>
-                    }
-                </ul>
-            }
-        </div>
-        <p style="color: #94a3b8; font-size: 0.8rem; margin-top: 1rem;">
-            { fmt.Sprintf("Total items processed: %d", len(items)) }
-        </p>
-    }
+templ ProjectsPage(style Style, projects []Project) {
+	@TerminalLayout(style, "/home/kyren/projects") {
+		<h1>Items</h1>
+		<div class="card">
+			<ul>
+				<li>
+					<span>foo</span>
+					<span class="badge-active">[ACTIVE]</span>
+				</li>
+			</ul>
+		</div>
+	}
+}