package main templ HeadComponent(title string, description string) { { title } { children... } } templ BlogItem(header string, blog Blog, extra string) { @TerminalBorder(header, blog.Date.Format("January 2, 2006"), "bg-black/20 hover:bg-white/5 transition-colors duration-150 "+extra) {

{ 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 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 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) {
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 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) { @TerminalLayout(style, "/home/kyren/projects") { @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]") } } } } } } } 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) { }