summaryrefslogtreecommitdiff
path: root/website.templ
diff options
context:
space:
mode:
Diffstat (limited to 'website.templ')
-rw-r--r--website.templ286
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>
}
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-10 00:34:51 +0000