package main
templ HeadComponent(title string, description string) {
{ title }
{ 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() {
@IconCopy("text-[#ffffff]")
@IconCheckmark("text-[#46d46c]")
}
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 {
copied
}
@CopyIcon()
{ children... }
copied
}
templ NavLink(href string, label string) {
{ label }
}
templ Nav(path string) {
{ path }
@NavLink("/", "home")
for _, dir := range []string{"projects", "blogs"} {
@NavLink("/"+dir, dir)
}
@NavLink("/shell", "shell")
}
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]") {
@CopyPre(sshKey, "shrink-0 text-[0.675rem] leading-[1.32]") {
{ 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
}
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) {
{ children... }
}
templ IconGit(color string) {
@Icon(color) {
}
// { "\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 {
//
// }
for _, link := range project.Links {
@IconLink(link.URL, link.Label, "") {
@link.Icon
}
}
{ project.Desc }
}
$ 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) {
}
templ BlogsPage(style Style, blogs []Blog) {
@TerminalLayout(style, "/home/kyren/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 IconDotfiles(color string) {
@Icon(color) {
}
}
templ IconDocs(color string) {
@Icon(color) {
for i, row := range rows {
{ branch(i, len(rows)) }
@row.Icon
{ row.Label }
{ row.Value }
}
}
templ Icon(color string) {
{ children... }
}
templ BlogPage(style Style, blog Blog, prev *Blog, next *Blog) {
@TerminalLayout(style, "/home/kyren/blogs/"+blog.Slug) {
@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 {
}
}
templ ShellPage(style Style) {
@TerminalLayout(style, "/bin/bash") {
@ScrollBox("") {
@ShellEntry("fastfetch", Fastfetch(fetchRows))
}
}
}
templ ShellLines(lines []string) {
for _, line := range lines {
{ line }
}
}
templ ShellEntry(cmd string, output templ.Component) {
@TerminalBorder("$ "+cmd, "", "") {
@output
}
}
templ ShellText(text string) {
{ text }
}
templ ShellHelp(names []string) {
for _, name := range names {
{ name }
}
}
@CopyPre(sshKey, "shrink-0 text-[0.675rem] leading-[1.32]") {
{ 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
}
}
}