package main 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 InfoPage(style Style) { @TerminalLayout(style, "/home/kyren/info.md") { @TerminalStack(false, "") { @TerminalBorder("Info", "", "") { $ fastfetch @Fastfetch(fetchRows) } } } } type Project struct { Slug string Title string Category string Desc string Icon templ.Component Tags []ProjectTag Links []ProjectLink Link string } type ProjectTag struct { Name string Color string } type ProjectLink struct { Icon templ.Component Label string URL string } type FlagshipInfo struct { Downloads []Download Version string Stats []Stat Snippet string } type Download struct { Label string // "Linux", "Windows" URL string Size string // "42 MB" Enabled bool } type Stat struct { Label string Value string } 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)] bg-black/20 hover:bg-white/10 transition-colors duration-150" templ FlagshipProject(project Project, extra string) { @TerminalBorder("", "", flagshipClasses+" "+extra) {
@project.Icon { project.Title } { project.Category } for _, tag := range project.Tags { { tag.Name } } for _, link := range project.Links { @IconLink(link.URL, link.Label, "") { @link.Icon } }

{ 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(download Download) { if download.Enabled { @IconArchive("text-(--secondary)") } else { @IconArchive("text-(--alt)") } { download.Label } if download.Size != "" { { download.Size } } } templ IconArchive(color string) { @Icon(color) { } } 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] scale-150") { } // { "\uf192" } } func projectURL(p Project) string { if p.Link != "" { return p.Link } return "/projects/" + p.Slug } 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 } // } for _, link := range project.Links { @IconLink(link.URL, link.Label, "") { @link.Icon } }

{ 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, path) { @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) { } } templ IconEko(color string) { @Icon(color) { } } templ IconTrident(color string) { @Icon(color) { } } templ IconDotfiles(color string) { @Icon(color) { } } templ IconVideo(color string) { @Icon(color) { // } } templ IconJetbrains(color string) { @Icon(color) { } } templ IconDocs(color string) { @Icon(color) { } } templ IconReleases(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, "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", "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) { } templ BlogPage(style Style, blog Blog, prev *Blog, next *Blog) { @TerminalLayout(style, blog.Title) { @ScrollBox("") { @BlogItem("", blog, "mb-[1rem]")
@templ.Raw(blog.HTML)
@BlogNav("Previous Blog", prev, "") @BlogNav("Next Blog", next, "")
} } } templ BlogNav(label string, blog *Blog, extra string) { if blog != nil { @TerminalBorder(label, "", "min-w-0 "+extra) { vim ~/blogs/{ blog.Slug } } } else {
} }