New blog post and a bunch of unrelated website changes

1 files changed, 255 insertions, 31 deletions

diff --git a/website.templ b/website.templ
index 1f4f636..88b8c40 100644
--- a/website.templ
+++ b/website.templ
@@ -5,7 +5,7 @@ templ HeadComponent(title string, description string) {
 		<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"/>
+		<link rel="icon" type="image/svg+xml" href="/public/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"/>
@@ -16,7 +16,7 @@ templ HeadComponent(title string, description string) {
 		<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" content="https://kyren.codes/public/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/copy.js" defer></script>
@@ -29,7 +29,7 @@ templ HeadComponent(title string, description string) {
 }
 
 templ BlogItem(header string, blog Blog, extra string) {
-	@TerminalBorder(header, blog.Date.Format("January 2, 2006"), extra) {
+	@TerminalBorder(header, blog.Date.Format("January 2, 2006"), "bg-black/20 hover:bg-white/5 transition-colors duration-150 "+extra) {
 		<span class="cursor-pointer group block">
 			<a href={ templ.SafeURL("/blogs/" + blog.Slug) } class="no-underline hover:no-underline">
 				<h1 class="text-[130%] font-bold text-(--accent) group-hover:underline">
@@ -61,10 +61,15 @@ templ TerminalStack(joined bool, extra string) {
 
 templ TerminalBorder(header string, footer string, extra string) {
 	<div class={ "relative flex px-3.5 py-(--ypad) pt-[calc(var(--ypad)+0.0625rem)] [--ypad:var(--border-py,0.875rem)] border-[0.1rem] border-solid border-[color:var(--alt)]", extra }>
-		<span class="absolute px-[0.625rem] text-[1rem] left-[0.625rem] top-[-0.75rem] bg-[var(--background)] text-[color:var(--alt)]">{ header }</span>
-		<span class="absolute px-[0.625rem] text-[1rem] left-[0.625rem] bottom-[-0.75rem] bg-[var(--background)] text-[color:var(--alt)]">{ footer }</span>
+		<span class="absolute px-[0.625rem] text-[1rem] left-[0.625rem] top-[-0.75rem] text-[color:var(--alt)] bg-[linear-gradient(to_bottom,var(--background),var(--cmp-bg,transparent))]">{ header }</span>
+		<span class="absolute px-[0.625rem] text-[1rem] left-[0.625rem] bottom-[-0.75rem] text-[color:var(--alt)] bg-[linear-gradient(to_bottom,#181825,var(--background))]">{ footer }</span>
 		{ children... }
 	</div>
+	// <div class={ "relative flex px-3.5 py-(--ypad) pt-[calc(var(--ypad)+0.0625rem)] [--ypad:var(--border-py,0.875rem)] border-[0.1rem] border-solid border-[color:var(--alt)]", extra }>
+	// 	<span class="bg-transparent absolute px-[0.625rem] text-[1rem] left-[0.625rem] top-[-0.75rem] bg-[var(--background)] text-[color:var(--alt)]">{ header }</span>
+	// 	<span class="bg-transparent absolute px-[0.625rem] text-[1rem] left-[0.625rem] bottom-[-0.75rem] bg-[var(--background)] text-[color:var(--alt)]">{ footer }</span>
+	// 	{ children... }
+	// </div>
 }
 
 templ CopyIcon() {
@@ -224,7 +229,7 @@ func footerClass(connected bool) string {
 templ SkillsPage(style Style) {
 	@TerminalLayout(style, "/home/kyren/skills.md") {
 		@TerminalStack(false, "") {
-			@TerminalBorder("Setup", "", "") {
+			@TerminalBorder("Info", "", "") {
 				<span>
 					$ fastfetch
 					@Fastfetch(fetchRows)
@@ -234,17 +239,223 @@ templ SkillsPage(style Style) {
 	}
 }
 
+type Project struct {
+	Slug       string       // e.g. "my-game"
+	Title      string       // e.g. "MyGame"
+	Category   string       // e.g. "Game written in Zig"
+	Desc       string       // 1-2 line description/pitch
+	Tags       []ProjectTag // ["Zig", "OpenGL", "Linux"]
+	Status     string
+	Icon       templ.Component
+	CgitURL    string // e.g. "https://cgit.yourdomain.com/my-game"
+	GithubURL  string // Fallback mirror link
+	IsFlagship bool
+	IsPinned   bool
+}
+
+type ProjectTag struct {
+	Name  string
+	Color string
+}
+
+type ProjectFLink struct {
+	URL  string
+	Icon templ.Component
+}
+
+var p Project = Project{
+	Slug:     "krypton",
+	Title:    "Krypton",
+	Category: "Programming Language Compiler",
+	Desc:     "A modern Minecraft creator event. As a developer, I helped with minor improvements to the cosmetics system. ",
+	Icon:     IconCpu("text-[#F5A670] self-center"),
+	Status:   "ON",
+	Tags: []ProjectTag{
+		// {"Programming Language", Color("--extra")},
+		// {"Compiler", Color("--extra")},
+		{"C", Color("text-[#5874FF]")},
+		{"LLVM", Color("text-[#FFFFFF]")},
+		// {"Java", Color("#F5A670")},
+	},
+	CgitURL:    "https://whatever",
+	GithubURL:  "",
+	IsFlagship: true,
+	IsPinned:   false,
+}
+
+templ FlagshipProject(project Project) {
+	<div class="relative border border-[var(--primary)]/40 rounded bg-white/[0.03] p-6 mb-10 shadow-[0_0_15px_rgba(0,0,0,0.3)]">
+		<!-- Header Bar -->
+		<div class="flex items-center justify-between pb-3 mb-4 border-b border-white/10 font-mono text-xs">
+			<div class="flex items-center gap-2">
+				<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
+				<span class="text-[var(--accent)] font-bold">FLAGSHIP BUILD</span>
+				<span class="text-zinc-500">|</span>
+				<span class="text-zinc-400">{ project.Status }</span>
+			</div>
+			<div class="flex gap-3 text-zinc-400">
+				if project.CgitURL != "" {
+					<a href={ templ.URL(project.CgitURL) } target="_blank" class="hover:text-[var(--primary)] transition-colors">[cgit]</a>
+				}
+				if project.GithubURL != "" {
+					<a href={ templ.URL(project.GithubURL) } target="_blank" class="hover:text-[var(--primary)] transition-colors">[github]</a>
+				}
+			</div>
+		</div>
+		<!-- Title & Category Line -->
+		<div class="flex items-baseline gap-3 mb-2">
+			<h2 class="text-2xl font-bold text-[var(--primary)]">
+				<a href={ templ.URL("/projects/" + project.Slug) } class="hover:underline">{ project.Title }</a>
+			</h2>
+			<span class="text-sm text-zinc-400 font-mono">{ project.Category }</span>
+		</div>
+		<!-- 1-2 Line Pitch -->
+		<p class="text-zinc-300 text-sm leading-relaxed mb-6 max-w-3xl">{ project.Desc }</p>
+		<!-- Tech Tags & Detail Link -->
+		<div class="flex flex-wrap items-center justify-between gap-4 pt-4 border-t border-white/5 font-mono text-xs">
+			<div class="flex flex-wrap gap-2">
+				for _, tag := range project.Tags {
+					<span class="px-2 py-0.5 rounded bg-white/5 border border-white/10 text-zinc-300">{ tag.Name }</span>
+				}
+			</div>
+			<a href={ templ.URL("/projects/" + project.Slug) } class="text-[var(--primary)] hover:translate-x-1 transition-transform inline-flex items-center gap-1">
+				View Project Details &rarr;
+			</a>
+		</div>
+	</div>
+}
+
+templ PinnedGrid(projects []Project) {
+	<div class="mb-12">
+		<div class="text-xs font-mono text-zinc-500 uppercase tracking-wider mb-4">
+			// Notable Projects</div>
+			<div class="grid grid-cols-1 md:grid-cols-6 gap-4">
+				for i, project := range projects {
+					<!-- Top 2 items take col-span-3 (50%), Bottom 3 items take col-span-2 (33%) -->
+					<div
+						class={ "group border border-white/10 rounded bg-white/[0.02] hover:bg-white/[0.05] hover:border-white/20 transition-all p-5 flex flex-col justify-between",
+                            templ.KV("md:col-span-3", i < 2), 
+                            templ.KV("md:col-span-2", i >= 2) }
+					>
+						<div>
+							<!-- Title + Description/Type Line -->
+							<div class="flex items-baseline justify-between gap-2 mb-2">
+								<h3 class="font-bold text-[var(--primary)] group-hover:text-[var(--accent)] transition-colors">
+									<a href={ templ.URL("/projects/" + project.Slug) } class="hover:underline">{ project.Title }</a>
+								</h3>
+								<span class="text-xs text-zinc-400 font-mono shrink-0">{ project.Category }</span>
+							</div>
+							<!-- Pitch -->
+							<p class="text-xs text-zinc-300 mb-4 line-clamp-2 leading-relaxed">{ project.Desc }</p>
+						</div>
+						<!-- Footer: Tags & Outbound Links -->
+						<div class="flex items-center justify-between pt-3 border-t border-white/5 text-[11px] font-mono">
+							<div class="flex flex-wrap gap-1">
+								for _, tag := range project.Tags {
+									<span class="text-zinc-400 bg-white/5 px-1.5 py-0.5 rounded border border-white/5">{ tag.Name }</span>
+								}
+							</div>
+							<div class="flex gap-2 text-zinc-400">
+								if project.CgitURL != "" {
+									<a href={ templ.URL(project.CgitURL) } target="_blank" class="hover:text-white">[cgit]</a>
+								}
+								if project.GithubURL != "" {
+									<a href={ templ.URL(project.GithubURL) } target="_blank" class="hover:text-white">[gh]</a>
+								}
+							</div>
+						</div>
+					</div>
+				}
+			</div>
+		</div>
+	</div>
+}
+
+templ IconLink(href string, label string, extra string) {
+	<a href={ templ.SafeURL(href) } target="_blank" rel="noopener noreferrer" aria-label={ label } title={ label } class={ "text-[90%] block p-[0.2rem] rounded-[0.4rem] transition-colors hover:bg-(--alt)/25" + " " + extra }>
+		{ children... }
+	</a>
+}
+
+templ IconGit(color string) {
+	@Icon(color) {
+		<line x1="6" x2="6" y1="3" y2="15"></line>
+		<circle cx="18" cy="6" r="3"></circle>
+		<circle cx="6" cy="18" r="3"></circle>
+		<path d="M18 9a9 9 0 0 1-9 9"></path>
+	}
+}
+
+templ IconGithub(color string) {
+	@Icon(color) {
+		<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
+		<path d="M9 18c-4.51 2-5-2-7-2"></path>
+	}
+}
+
+templ IconExternal(color string) {
+	@Icon(color) {
+		<path d="M15 3h6v6"></path>
+		<path d="M10 14 21 3"></path>
+		<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+	}
+}
+
+templ ProjectItem(project Project, extra string) {
+	<div>
+		@TerminalBorder("", "", "[--border-py:0.25rem] py-2 text-[80%] bg-black/20 hover:bg-white/5 transition-colors duration-150"+" "+extra) {
+			<div class="flex flex-col gap-[0.0625rem] w-full">
+				<div class="flex flex-wrap items-baseline gap-x-[1ch] gap-y-[0.4rem]">
+					@project.Icon
+					<a href={ templ.SafeURL("/projects/" + project.Slug) } class="text-[130%] font-bold text-(--accent)">{ project.Title }</a>
+					<span class="text-[80%] text-(--primary)">{ project.Category }</span>
+					for _, tag := range project.Tags {
+						<code class={ "text-[75%] px-[0.4rem] inline-block rounded-[0.3rem] border-[0.01rem] bg-(--alt)/25" + " " + tag.Color }>{ tag.Name }</code>
+					}
+					// for _, tag := range project.Tags {
+					// 	<code class="text-[75%] px-[0.4rem] inline-block rounded-[0.3rem] bg-(--extra)/70 text-(--background)">{ tag }</code>
+					// }
+					<span class="ml-auto flex items-center self-center">
+						@IconLink("https://git.example.com/foo", "git", "") {
+							@IconGit("text-(--primary)")
+						}
+						@IconLink("https://github.com/foo", "github", "") {
+							@IconGithub("text-(--secondary)")
+						}
+						@IconLink("https://example.com", "website", "") {
+							@IconExternal("text-(--accent)")
+						}
+					</span>
+				</div>
+				<p class="text-[95%]">{ project.Desc }</p>
+			</div>
+		}
+	</div>
+}
+
+func DoubleProject(project Project) Project {
+	project.Desc += project.Desc
+	return project
+}
+
 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>
+		@FlagshipProject(p)
+		// @PinnedGrid(projects)
+		// All projects
+		@ScrollBox("") {
+			@TerminalStack(false, "mt-[0.5rem]") {
+				for i := 0; i < 1; i++ {
+					for i, project := range projects {
+						if i % 2 == 0 {
+							@ProjectItem(DoubleProject(project), "my-[-0.15rem]")
+						} else {
+							@ProjectItem(project, "my-[-0.15rem]")
+						}
+					}
+				}
+			}
+		}
 	}
 }
 
@@ -258,14 +469,27 @@ templ NotFoundPage(style Style, path string) {
 				</span>
 			}
 			@TerminalBorder("", "", "") {
-				<div class="gap-[1ch]">
-					<span>{ ">" }</span>
-					<span class="text-(--secondary)">
-						@Link("/", false) {
-							{ "cd $HOME" }
-						}
-					</span>
-				</div>
+				<span>
+					<div class="gap-[1ch]">
+						<span>{ ">" }</span>
+						<span class="text-(--secondary)">
+							@Link("javascript:history.back()", false) {
+								{ "cd -" }
+							}
+						</span>
+						<span class="text-(--alt)">
+							# Previous page
+						</span>
+					</div>
+					<div class="gap-[1ch]">
+						<span>{ ">" }</span>
+						<span class="text-(--secondary)">
+							@Link("/", false) {
+								{ "cd $HOME" }
+							}
+						</span>
+					</div>
+				</span>
 			}
 		}
 	}
@@ -372,13 +596,13 @@ func row(icon func(color string) templ.Component, color, label, value string) Fe
 
 var fetchRows = []FetchRow{
 	// row(IconTerminal, "text-(--secondary)", "Terminal", "Ghostty & Zsh"),
-	row(IconCode, "text-(--accent)", "Main Language", "C"),
-	row(IconScriptLang, "text-(--accent)", "Scripting Langs", "Go and Python"),
-	row(IconDebugger, "text-[#F16265]", "Debugger", "Raddebugger"),
-	row(IconMonitor, "text-[#54D7A9]", "Operating System", "Fedora KDE Linux"),
-	row(IconEditor, "text-[#54D7A9]", "Text Editor", "Neovim"),
-	row(IconUptime, "text-[#D8C44B]", "Uptime", GetMyUptime()),
-	// row(IconCpu, "text-(--extra)", "Hardware", "..."),
+	row(IconCode, "--accent", "Main Language", "C"),
+	row(IconScriptLang, "--accent", "Scripting Langs", "Go and Python"),
+	row(IconDebugger, "#F16265", "Debugger", "Raddebugger"),
+	row(IconMonitor, "#54D7A9", "Operating System", "Fedora KDE Linux"),
+	row(IconEditor, "#54D7A9", "Text Editor", "Neovim"),
+	row(IconUptime, "#D8C44B", "Uptime", "Asleep"),
+	// row(IconCpu, "--extra", "Hardware", "..."),
 }
 
 func branch(i, n int) string {
@@ -414,7 +638,7 @@ templ Fastfetch(rows []FetchRow) {
 }
 
 templ Icon(color string) {
-	<svg width="1.1em" height="1.1em" class={ "shrink-0", color } viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+	<svg width="1.1em" height="1.1em" class={ "shrink-0", Color(color) } viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
 		{ children... }
 	</svg>
 }