package main import "flag" templ HeadComponent(title string, description string) { { title } { children... } } func Choose(chooseA bool, a string, b string) string { if chooseA { return a } else { return b } } templ BlogItem(header string, blog Blog, extra string) { @TerminalBorderForBlog(header, blog.Date.Format("January 2, 2006"), Choose(header == "", "bg-black/20 hover:bg-white/5 transition-colors duration-150", "")+" "+extra, header == "") {

{ blog.Title }

{ blog.Desc }

 } } templ Link(href string, newTab bool) { { children... } } templ TerminalStack(joined bool, extra string) {
*+*]:mt-[-0.1rem]", joined), templ.KV("gap-4", !joined), extra }> { children... }
} templ TerminalBorderForBlog(header string, footer string, extra string, enable bool) { if enable {
{ header } { footer } { children... }
} else { @TerminalBorder(header, footer, extra) { { children... } } } } templ TerminalBorder(header string, footer string, extra string) { //
// { header } // { footer } // { children... } //
{ header } { footer } { children... }
} templ CopyIcon() { } templ TerminalBorderWithCopy(header string, footer string, extra string, text string, href string, showLabel bool) { @TerminalBorder(header, footer, extra) {
if href != "" { { children... } } else { { children... } } if showLabel { }
} } templ CopyPre(text string, preClass string) { } templ NavLink(href string, label string) { { label } } templ Nav(path string) { } templ TerminalLayout(style Style, path string) { @HeadComponent(path, "My personal website") { }
@Nav(path) { children... }
} const fingerprint = `+--[ED25519 256]--+ | +. .. +.B| | + o..o . BB| | ..o oo.o =+E| | ... oo. + o.| | . S . = | | . . + o | | o o o . | | oo .o+ + | | ++ooo+= | +----[SHA256]-----+` const sshKey = "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIO7P9K9D5RkBk+JCRRS6AtHuTAc6cRpXfRfRMg/Kyren" templ HomePage(style Style, latestBlog *Blog) { @TerminalLayout(style, "/home/kyren/") {
@TerminalStack(true, "") { @TerminalBorder("Profile", "", "[--border-py:0.875rem]") {
picture @CopyPre(sshKey, "shrink-0 text-[0.675rem] leading-[normal]") { { fingerprint } }
} @TerminalBorderWithCopy("Email", "", "", "contact@kyren.codes", "mailto:contact@kyren.codes", false) { contact@kyren.codes } @TerminalBorder("Git Repos (main)", "", "") { @Link("https://git.kyren.codes", true) { git.kyren.codes } } @TerminalBorder("GitHub (secondary)", "", "") { @Link("https://github.com/kyren223", true) { github.com/Kyren223 } } @TerminalBorder("Discord", "", "") { @Link("https://discord.com/users/481884415090229258", true) { Kyren223 } } }
@TerminalBorder("Status", "", "") {
Working on @Link("/projects/krypton", false) { Krypton } | Learning Langdev & Compiler Design | Available for hire
} @TerminalBorder("About Me", "", "") { Hi! I'm Kyren, a softwarea engineer and game developer. I love working with low level languages and learning things deeply. I am also a terminal nerd and Linux enthusiast who uses NVIM btw. And when I am not coding, I am most likely playing video games, watching Anime, or solving Rubik's cubes fast. } @BlogItem("Latest Blog Post", *latestBlog, "")
@TerminalBorderWithCopy("SSH Key", "", footerClass(false), sshKey, "", true) { { sshKey } }
} } func footerClass(connected bool) string { style := "col-span-2 select-text [--border-py:0.5rem]" if connected { style += " mb-[0.30rem]" } return style } templ SkillsPage(style Style) { @TerminalLayout(style, "/home/kyren/skills.md") { @TerminalStack(false, "") { @TerminalBorder("Info", "", "") { $ fastfetch @Fastfetch(fetchRows) } } } } 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 } type ProjectTag struct { Name string Color string } type ProjectLink struct { URL string Icon templ.Component } type FlagshipInfo struct { Downloads []Download Version string Stats []Stat Snippet string } type Download struct { Label string // "Linux", "Windows" URL string Size string // "42 MB" } type Stat struct { Label string Value string } 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"), // Icon: IconKrypton(), 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: "", } var flagship FlagshipInfo = FlagshipInfo{ Version: "Sprout.0 2026-08-13", Downloads: []Download{ {"linux-amd64", "https://foobar", "23 MB"}, // {"linux-arm64", "https://foobar", "52 MB"}, // {"macos-arm64", "https://fooshit", "47 MB"}, {"windows-amd64", "https://fooshit", "65.7 MB"}, }, // Stats: []Stat{{"lines of code", "18.7k"}}, Snippet: ` io :: import "core/io"; main :: proc() { io.printf("Hello, %s", "world"); } `, } var versionBeforeDownloads = false const flagshipClasses = "[--border-py:1.25rem] border-(--accent)! bg-white/[0.03] shadow-[0_0_1.5rem_color-mix(in_srgb,var(--accent)_25%,transparent)]" templ FlagshipProject(project Project, extra string) { @TerminalBorder("", "", flagshipClasses+" "+extra) {
@project.Icon { project.Title } { project.Category } for _, tag := range project.Tags { { tag.Name } } @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)") }

{ project.Desc }

if len(flagship.Downloads) > 0 || flagship.Version != "" {
if versionBeforeDownloads { @VersionTag(project) } for _, d := range flagship.Downloads { @DownloadButton(d) } if !versionBeforeDownloads { @VersionTag(project) }
} if len(flagship.Stats) > 0 {
for _, stat := range flagship.Stats { { stat.Value } { stat.Label } }
}
if flagship.Snippet != "" {
example @CopyPre(flagship.Snippet, "text-[80%] leading-[normal]") { { flagship.Snippet } }
}
} } templ VersionTag(project Project) { if flagship.Version != "" { { flagship.Version } // changelog } } templ DownloadButton(d Download) { @IconArchive("text-(--secondary)") { d.Label } if d.Size != "" { { d.Size } } } templ IconArchive(color string) { @Icon(color) { } } const flagshipClassesV4 = "[--border-py:1.25rem] border-(--accent)! bg-white/[0.03] shadow-[0_0_1.5rem_color-mix(in_srgb,var(--accent)_25%,transparent)]" templ FlagshipProjectV4(project Project, extra string) { @TerminalBorder("", "", flagshipClasses+" "+extra) {
@project.Icon { project.Title } { project.Category } for _, tag := range project.Tags { { tag.Name } } @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)") }

{ project.Desc }

if len(project.Downloads) > 0 || project.Version != "" {
for _, d := range project.Downloads { @DownloadButton(d) } if project.Version != "" { { project.Version } }
} if len(project.Stats) > 0 {
for _, stat := range project.Stats { { stat.Value } { stat.Label } }
}
if project.Snippet != "" {
example @CopyPre(project.Snippet, "text-[80%] leading-[normal]") { { project.Snippet } }
}
} } templ DownloadButtonV4(d Download) { @IconDownload("text-(--primary)") { d.Label } } templ IconDownload(color string) { @Icon(color) { } } const flagshipClassesV3 = "[--border-py:1.25rem] border-(--primary)! bg-white/[0.03] shadow-[0_0_1.5rem_color-mix(in_srgb,var(--primary)_25%,transparent)]" templ FlagshipProjectV3(project Project, extra string) { @TerminalBorder("", "", flagshipClasses+" "+extra) {
@project.Icon { project.Title } { project.Version } { project.Category } for _, tag := range project.Tags { { tag.Name } } @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)") }

{ project.Desc }

if project.Install != "" { @CopyPre(project.Install, "text-[85%] leading-[normal]") { { "$ " + project.Install } } } if project.Devlog != nil { { "latest devlog: " + project.Devlog.Title } }
if project.Snippet != "" {
example @CopyPre(project.Snippet, "text-[80%] leading-[normal]") { { project.Snippet } }
}
} } templ FlagshipProjectV2(project Project, extra string) { @TerminalBorder(project.Version, "", flagshipClasses+" "+extra) {
@project.Icon { project.Title } { project.Category } for _, tag := range project.Tags { { tag.Name } } @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)") }

{ project.Desc }

for i, stage := range project.Pipeline { if i > 0 { → } { stage } }
for _, stat := range project.Stats {
{ stat.Value } { stat.Label }
}
if project.Snippet != "" {
example @CopyPre(project.Snippet, "text-[80%] leading-[normal]") { { project.Snippet } }
}
} } templ FlagshipProjectV1(project Project) {
FLAGSHIP BUILD | { project.Status }
if project.CgitURL != "" { [cgit] } if project.GithubURL != "" { [github] }

{ project.Title }

{ project.Category }

{ project.Desc }

for _, tag := range project.Tags { { tag.Name } }
View Project Details →
} templ PinnedGrid(projects []Project) {
// Notable Projects
for i, project := range projects {
= 2) } >

{ project.Title }

{ project.Category }

{ project.Desc }

for _, tag := range project.Tags { { tag.Name } }
if project.CgitURL != "" { [cgit] } if project.GithubURL != "" { [gh] }
}
} templ IconLink(href string, label string, extra string) { { children... } } templ IconGit(color string) { @Icon(color) { } } templ IconGithub(color string) { @Icon(color) { } } templ IconExternal(color string) { @Icon(color) { } } templ IconKrypton() { @Icon("text-[#00f1ff]") { } // { "\uf192" } } templ ProjectItem(project Project, extra string) {
@TerminalBorder("", "", "[--border-py:0.25rem] py-2 text-[80%] bg-black/20 hover:bg-white/5 transition-colors duration-150"+" "+extra) {
@project.Icon { project.Title } { project.Category } for _, tag := range project.Tags { { tag.Name } } // for _, tag := range project.Tags { // { tag } // } @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)") }

{ project.Desc }

}
} func DoubleProject(project Project) Project { project.Desc += project.Desc return project } templ ProjectsPage(style Style, projects []Project, pinned int) { @TerminalLayout(style, "/home/kyren/projects") { @FlagshipProject(projects[0], "mb-[1.5rem]") @ScrollBox("") { @TerminalStack(false, "mt-[0.5rem]") { for i := 0; i < 1; i++ { for i, project := range projects[1:] { if i < pinned { @ProjectItem(project, "my-[-0.15rem] border-(--text)") } else { @ProjectItem(project, "my-[-0.15rem]") } } } } } } } templ NotFoundPage(style Style, path string) { @TerminalLayout(style, "404") { @TerminalStack(true, "") { @TerminalBorder("Shell", "", "") {

$ cd ~{ path }

"{ path[1:] }": No such file or directory (os error 2)

} @TerminalBorder("", "", "") {
{ ">" } @Link("javascript:history.back()", false) { { "cd -" } } # Previous page
{ ">" } @Link("/", false) { { "cd $HOME" } }
} } } } templ ScrollBox(extra string) {
{ children... }
} templ BlogsPage(style Style, blogs []Blog) { @TerminalLayout(style, "blogs") { @TerminalBorder("Shell", "", "mb-[1rem]") { $ ls -lh ~/blogs } @ScrollBox("") { @TerminalStack(false, "mt-[0.5rem]") { for i := 0; i < 1; i++ { for _, blog := range blogs { @BlogItem("", blog, "mb-[1rem]") } } } } } } type FetchRow struct { Icon templ.Component Color string // tailwind text color class, used for the icon and label Label string Value string } templ IconMonitor(color string) { @Icon(color) { } } templ IconTerminal(color string) { @Icon(color) { } } templ IconCode(color string) { @Icon(color) { } } templ IconCpu(color string) { @Icon(color) { } } templ IconScriptLang(color string) { @Icon(color) { } } templ IconEditor(color string) { @Icon(color) { } } templ IconDebugger(color string) { @Icon(color) { } } templ IconKeyboard(color string) { @Icon(color) { } } templ IconUptime(color string) { @Icon(color) { } } func row(icon func(color string) templ.Component, color, label, value string) FetchRow { return FetchRow{Icon: icon(color), Color: color, Label: label, Value: value} } var fetchRows = []FetchRow{ // row(IconTerminal, "text-(--secondary)", "Terminal", "Ghostty & Zsh"), 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 { switch { case n == 1: return "─" case i == 0: return "┌" case i == n-1: return "└" default: return "├" } } templ Fastfetch(rows []FetchRow) {
for i, row := range rows { { branch(i, len(rows)) } @row.Icon { row.Label } { row.Value } }
} templ Icon(color string) { }