add:dotfiles page
This commit is contained in:
kokopi-dev
@@ -12,3 +12,19 @@ templ ArrowUpRight(className string) {
|
|||||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"></path>
|
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"></path>
|
||||||
</svg>
|
</svg>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
templ Github(className string) {
|
||||||
|
<svg class={ className } viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|
||||||
|
templ Gitea(className string) {
|
||||||
|
<svg class={ className } viewBox="0 0 32 32" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M16 0C7.163 0 0 7.163 0 16c0 8.836 7.163 16 16 16 8.836 0 16-7.163 16-16C32 7.163 24.837 0 16 0zm7.68 21.155a1.06 1.06 0 01-1.458.387l-4.514-2.607a1.842 1.842 0 01-.638.223v4.017a1.06 1.06 0 01-2.12 0v-4.017a1.842 1.842 0 01-1.3-1.787 1.843 1.843 0 011.842-1.842c.347 0 .671.097.948.264l4.418-2.551a1.06 1.06 0 011.457.387 1.06 1.06 0 01-.387 1.457l-4.418 2.551c.01.09.016.181.016.274 0 .093-.006.184-.016.274l4.514 2.607a1.06 1.06 0 01.387 1.457l-.731-.695zm-13.512-8.24a1.06 1.06 0 011.457-.387l4.418 2.551c.277-.167.601-.264.948-.264.347 0 .671.097.948.264l4.418-2.551a1.06 1.06 0 011.457.387 1.06 1.06 0 01-.387 1.457l-4.418 2.551c.01.09.016.181.016.274a1.843 1.843 0 01-1.842 1.842 1.843 1.843 0 01-1.842-1.842c0-.093.006-.184.016-.274l-4.418-2.551a1.06 1.06 0 01-.387-1.457h.616z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|||||||
16
components/image.templ
Normal file
16
components/image.templ
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
package components
|
||||||
|
|
||||||
|
templ Image(src, alt, caption string) {
|
||||||
|
<figure class="w-full">
|
||||||
|
<img
|
||||||
|
src={ src }
|
||||||
|
alt={ alt }
|
||||||
|
class="w-full h-auto rounded-lg object-cover"
|
||||||
|
/>
|
||||||
|
if caption != "" {
|
||||||
|
<figcaption class="mt-2 text-center font-mono text-[0.6875rem] text-fg-300">
|
||||||
|
{ caption }
|
||||||
|
</figcaption>
|
||||||
|
}
|
||||||
|
</figure>
|
||||||
|
}
|
||||||
@@ -4,43 +4,38 @@ import (
|
|||||||
"fmt"
|
"fmt"
|
||||||
"personal-site/constants"
|
"personal-site/constants"
|
||||||
"time"
|
"time"
|
||||||
|
"personal-site/components/icons"
|
||||||
)
|
)
|
||||||
|
|
||||||
templ navbar(params *constants.LayoutParams) {
|
templ navbar(params *constants.LayoutParams) {
|
||||||
<header class="sticky top-0 z-50 w-full border-b border-zinc-800 bg-bg-100/80 backdrop-blur-sm">
|
<header class="sticky top-0 z-50 w-full border-b border-zinc-800 bg-bg-100/80 backdrop-blur-sm">
|
||||||
<div class="max-w-3xl mx-auto h-12 flex items-center justify-between">
|
<div class="max-w-3xl mx-auto px-4 h-12 flex items-center justify-between">
|
||||||
<a
|
<a
|
||||||
href="/"
|
href="/"
|
||||||
class="font-mono text-xs text-fg-200 tracking-widest uppercase hover:text-fg-100 transition-colors duration-150"
|
class="font-mono text-xs text-fg-200 tracking-widest uppercase hover:text-fg-100 transition-colors duration-150 shrink-0"
|
||||||
>
|
>
|
||||||
{ params.NavTitle }
|
{ params.NavTitle }
|
||||||
</a>
|
</a>
|
||||||
<nav class="flex items-center gap-5">
|
<nav class="flex items-center gap-4">
|
||||||
<a
|
<a
|
||||||
href="/projects"
|
href="/projects"
|
||||||
class="text-xs text-fg-300 hover:text-fg-100 transition-colors duration-150"
|
class="text-xs text-fg-300 hover:text-fg-100 transition-colors duration-150"
|
||||||
>projects</a>
|
>projects</a>
|
||||||
<a
|
<a
|
||||||
href="https://git.kokopi.dev/kokopi/personal-site"
|
href="https://git.kokopi.dev/kokopi/personal-site"
|
||||||
class="text-xs text-fg-300 hover:text-fg-100 transition-colors duration-150 flex items-center gap-1.5"
|
class="text-xs text-fg-300 hover:text-fg-100 transition-colors duration-150 flex items-center gap-1.5 sm:p-0 p-0.5"
|
||||||
|
aria-label="Gitea"
|
||||||
>
|
>
|
||||||
<svg width="12" height="12" viewBox="0 0 32 32" fill="currentColor">
|
@icons.Gitea("size-4 shrink-0")
|
||||||
<path
|
<span class="hidden sm:inline">gitea</span>
|
||||||
d="M16 0C7.163 0 0 7.163 0 16c0 8.836 7.163 16 16 16 8.836 0 16-7.163 16-16C32 7.163 24.837 0 16 0zm7.68 21.155a1.06 1.06 0 01-1.458.387l-4.514-2.607a1.842 1.842 0 01-.638.223v4.017a1.06 1.06 0 01-2.12 0v-4.017a1.842 1.842 0 01-1.3-1.787 1.843 1.843 0 011.842-1.842c.347 0 .671.097.948.264l4.418-2.551a1.06 1.06 0 011.457.387 1.06 1.06 0 01-.387 1.457l-4.418 2.551c.01.09.016.181.016.274 0 .093-.006.184-.016.274l4.514 2.607a1.06 1.06 0 01.387 1.457l-.731-.695zm-13.512-8.24a1.06 1.06 0 011.457-.387l4.418 2.551c.277-.167.601-.264.948-.264.347 0 .671.097.948.264l4.418-2.551a1.06 1.06 0 011.457.387 1.06 1.06 0 01-.387 1.457l-4.418 2.551c.01.09.016.181.016.274a1.843 1.843 0 01-1.842 1.842 1.843 1.843 0 01-1.842-1.842c0-.093.006-.184.016-.274l-4.418-2.551a1.06 1.06 0 01-.387-1.457h.616z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
gitea
|
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://github.com/kokopi-dev/personal-site"
|
href="https://github.com/kokopi-dev/personal-site"
|
||||||
class="text-xs text-fg-300 hover:text-fg-100 transition-colors duration-150 flex items-center gap-1.5"
|
class="text-xs text-fg-300 hover:text-fg-100 transition-colors duration-150 flex items-center gap-1.5 sm:p-0 p-0.5"
|
||||||
|
aria-label="GitHub"
|
||||||
>
|
>
|
||||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
@icons.Github("size-4 shrink-0")
|
||||||
<path
|
<span class="hidden sm:inline">github</span>
|
||||||
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
github
|
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -5,4 +5,7 @@ type Project struct {
|
|||||||
Name string
|
Name string
|
||||||
Description string
|
Description string
|
||||||
TechTags []string
|
TechTags []string
|
||||||
|
LinkGitea string
|
||||||
|
LinkGithub string
|
||||||
|
HostedOn string
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ echo "Pulling latest code..."
|
|||||||
git pull
|
git pull
|
||||||
|
|
||||||
echo "Building and restarting containers..."
|
echo "Building and restarting containers..."
|
||||||
docker compose up -d --build
|
docker compose up -d --build --remove-orphans
|
||||||
|
|
||||||
echo "Cleaning up old images..."
|
echo "Cleaning up old images..."
|
||||||
docker image prune -f
|
docker image prune -f
|
||||||
|
|||||||
16
main.go
16
main.go
@@ -27,13 +27,19 @@ func setupRoutesAndMiddleware() *gin.Engine {
|
|||||||
{
|
{
|
||||||
Url: "https://derrickgee.dev/projects/support-ticket-demo",
|
Url: "https://derrickgee.dev/projects/support-ticket-demo",
|
||||||
Name: "Support Ticket System",
|
Name: "Support Ticket System",
|
||||||
Description: "",
|
Description: "A sample of a robust support ticket system with the option to OAuth for database access. Authenticated users will be able to see other user created tickets. Guest mode will store tickets locally in your browser.",
|
||||||
|
HostedOn: "Home Server",
|
||||||
|
LinkGitea: "https://git.kokopi.dev/kokopi/personal-support-ticket-system",
|
||||||
|
LinkGithub: "https://github.com/kokopi-dev/personal-support-ticket-system",
|
||||||
TechTags: []string{"typescript", "react", "fastify", "tailwindcss", "sqlite", "vite", "bun"},
|
TechTags: []string{"typescript", "react", "fastify", "tailwindcss", "sqlite", "vite", "bun"},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
Url: "/projects/dotfiles",
|
Url: "/projects/dotfiles",
|
||||||
Name: "Linux Dotfiles",
|
Name: "Linux Dotfiles",
|
||||||
Description: "Configurations for Linux",
|
Description: "Configurations for Linux",
|
||||||
|
HostedOn: "",
|
||||||
|
LinkGitea: "https://git.kokopi.dev/kokopi/dotfiles",
|
||||||
|
LinkGithub: "https://github.com/kokopi-dev/dotfiles",
|
||||||
TechTags: []string{"Linux", "Lua", "Bash", "Python"},
|
TechTags: []string{"Linux", "Lua", "Bash", "Python"},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@@ -41,10 +47,10 @@ func setupRoutesAndMiddleware() *gin.Engine {
|
|||||||
page := pages.ProjectPage(projects)
|
page := pages.ProjectPage(projects)
|
||||||
page.Render(c.Request.Context(), c.Writer)
|
page.Render(c.Request.Context(), c.Writer)
|
||||||
})
|
})
|
||||||
// r.GET("/projects/dotfiles", func(c *gin.Context) {
|
r.GET("/projects/dotfiles", func(c *gin.Context) {
|
||||||
// page := pages.Dotfiles()
|
page := pages.Dotfiles()
|
||||||
// page.Render(c.Request.Context(), c.Writer)
|
page.Render(c.Request.Context(), c.Writer)
|
||||||
// })
|
})
|
||||||
r.NoRoute(handlers.NotFoundHandler)
|
r.NoRoute(handlers.NotFoundHandler)
|
||||||
return r
|
return r
|
||||||
}
|
}
|
||||||
|
|||||||
47
pages/dotfiles.templ
Normal file
47
pages/dotfiles.templ
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
package pages
|
||||||
|
|
||||||
|
import (
|
||||||
|
"personal-site/components"
|
||||||
|
"personal-site/components/icons"
|
||||||
|
"personal-site/constants"
|
||||||
|
)
|
||||||
|
|
||||||
|
templ Dotfiles() {
|
||||||
|
{{ params := constants.NewLayoutParams("Dotfiles") }}
|
||||||
|
@components.MainLayout(params) {
|
||||||
|
<div class="flex flex-col gap-6">
|
||||||
|
<div class="fade-up flex flex-col gap-3" style="animation-delay:0ms">
|
||||||
|
<h1 class="text-3xl font-semibold tracking-tight">Dotfiles</h1>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a
|
||||||
|
href="https://git.kokopi.dev/kokopi/dotfiles"
|
||||||
|
target="_blank"
|
||||||
|
class="pointer-events-auto inline-flex items-center gap-1.5 px-3.5 py-2 rounded-md text-sm font-medium bg-zinc-800 text-fg-200 border border-zinc-700 hover:border-zinc-500 hover:text-fg-100 transition-all duration-150"
|
||||||
|
>
|
||||||
|
@icons.Gitea("size-5")
|
||||||
|
Gitea
|
||||||
|
@icons.ArrowUpRight("size-4")
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://github.com/kokopi-dev/dotfiles"
|
||||||
|
target="_blank"
|
||||||
|
class="pointer-events-auto inline-flex items-center gap-1.5 px-3.5 py-2 rounded-md text-sm font-medium bg-zinc-800 text-fg-200 border border-zinc-700 hover:border-zinc-500 hover:text-fg-100 transition-all duration-150"
|
||||||
|
>
|
||||||
|
@icons.Github("size-5")
|
||||||
|
GitHub
|
||||||
|
@icons.ArrowUpRight("size-4")
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-fg-200 text-sm leading-relaxed">
|
||||||
|
I have been using Linux since 2017, and have gone through several distros. Pretty early on, I have only used window managers (wm) and Arch Linux. Over time, I have gone through bspwm on x11, hyprland on wayland, and mangowc on wayland. Since getting into programming, I have also strictly used only vim + neovim for hobby projects.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<hr class="border-fg-300 fade-up" style="animation-delay:80ms"/>
|
||||||
|
@components.Image("/static/assets/images/dotfiles-1-1.webp", "dotfiles-1-1", "Arch Linux with mangowc, showing fastfetch")
|
||||||
|
@components.Image("/static/assets/images/dotfiles-1-2.webp", "dotfiles-1-2", "Arch Linux with mangowc, showing neovim and a custom rofi launcher")
|
||||||
|
@components.Image("/static/assets/images/dotfiles-2.webp", "dotfiles-2", "Arch Linux with hyprland")
|
||||||
|
@components.Image("/static/assets/images/dotfiles-3.webp", "dotfiles-3", "Arch Linux with bspwm")
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -5,245 +5,207 @@ import "personal-site/constants"
|
|||||||
import "personal-site/components/icons"
|
import "personal-site/components/icons"
|
||||||
|
|
||||||
templ heroSection() {
|
templ heroSection() {
|
||||||
<section id="hero" class="pb-5">
|
<section id="hero" class="pb-5">
|
||||||
<p
|
<p
|
||||||
class="hero-eyebrow fade-up font-mono text-xs font-medium text-fg-200 tracking-[0.08em] uppercase flex items-center gap-2 mb-5"
|
class="hero-eyebrow fade-up font-mono text-xs font-medium text-fg-200 tracking-[0.08em] uppercase flex items-center gap-2 mb-5">
|
||||||
>
|
available for work
|
||||||
available for work
|
</p>
|
||||||
</p>
|
<h1 class="fade-up delay-100 text-[clamp(2.25rem,6vw,3.25rem)] font-bold tracking-[-0.04em] leading-[1.05] mb-3">
|
||||||
<h1 class="fade-up delay-1 text-[clamp(2.25rem,6vw,3.25rem)] font-bold tracking-[-0.04em] leading-[1.05] mb-3">
|
Derrick Gee
|
||||||
Derrick Gee
|
</h1>
|
||||||
</h1>
|
<p class="fade-up delay-200 text-base font-normal text-fg-200 mb-2">Full Stack Software Engineer</p>
|
||||||
<p class="fade-up delay-2 text-base font-normal text-fg-200 mb-2">Full Stack Software Engineer</p>
|
<p class="fade-up delay-200 font-mono text-xs text-fg-300 flex items-center gap-1.5 mb-8">
|
||||||
<p class="fade-up delay-2 font-mono text-xs text-fg-300 flex items-center gap-1.5 mb-8">
|
<svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
<svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
<path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||||
<path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
<path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||||
<path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
</svg>
|
||||||
</svg>
|
Japan · US Citizen
|
||||||
Japan · US Citizen
|
</p>
|
||||||
</p>
|
<p class="fade-up delay-300 text-[0.9375rem] text-fg-200 max-w-120 leading-[1.7] mb-9">
|
||||||
<p class="fade-up delay-3 text-[0.9375rem] text-fg-200 max-w-120 leading-[1.7] mb-9">
|
Full-stack software engineer who ships — from backend APIs to polished frontends. Aligned with US timezones and
|
||||||
Full-stack software engineer who ships — from backend APIs to polished frontends. Aligned with US timezones and based in Japan, building things that
|
based in Japan, building things that
|
||||||
matter.
|
matter.
|
||||||
</p>
|
</p>
|
||||||
<div class="fade-up delay-4 flex items-center gap-3 flex-wrap">
|
<div class="fade-up delay-4 flex items-center gap-3 flex-wrap">
|
||||||
<a
|
<a href="/projects"
|
||||||
href="/projects"
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium bg-fg-100 text-bg-100 border border-transparent no-underline transition-opacity duration-150 hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-100">
|
||||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium bg-fg-100 text-bg-100 border border-transparent no-underline transition-opacity duration-150 hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-100"
|
View Projects
|
||||||
>
|
</a>
|
||||||
View Projects
|
<a href="#experience"
|
||||||
</a>
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium bg-transparent text-fg-100 border border-border-100 no-underline transition-all duration-150 hover:bg-bg-300 hover:border-border-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-100">
|
||||||
<a
|
Experience
|
||||||
href="#experience"
|
</a>
|
||||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium bg-transparent text-fg-100 border border-border-100 no-underline transition-all duration-150 hover:bg-bg-300 hover:border-border-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-100"
|
<a href="https://git.kokopi.dev/kokopi" target="_blank"
|
||||||
>
|
class="inline-flex items-center gap-2 p-1.5 rounded-lg text-[0.8125rem] font-medium bg-transparent text-fg-200 no-underline transition-all duration-150 hover:text-fg-100 hover:bg-bg-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-100">
|
||||||
Experience
|
<svg width="15" height="15" viewBox="0 0 32 32" fill="currentColor">
|
||||||
</a>
|
<path
|
||||||
<a
|
d="M16 0C7.163 0 0 7.163 0 16c0 8.836 7.163 16 16 16 8.836 0 16-7.163 16-16C32 7.163 24.837 0 16 0zm7.68 21.155a1.06 1.06 0 01-1.458.387l-4.514-2.607a1.842 1.842 0 01-.638.223v4.017a1.06 1.06 0 01-2.12 0v-4.017a1.842 1.842 0 01-1.3-1.787 1.843 1.843 0 011.842-1.842c.347 0 .671.097.948.264l4.418-2.551a1.06 1.06 0 011.457.387 1.06 1.06 0 01-.387 1.457l-4.418 2.551c.01.09.016.181.016.274 0 .093-.006.184-.016.274l4.514 2.607a1.06 1.06 0 01.387 1.457l-.731-.695zm-13.512-8.24a1.06 1.06 0 011.457-.387l4.418 2.551c.277-.167.601-.264.948-.264.347 0 .671.097.948.264l4.418-2.551a1.06 1.06 0 011.457.387 1.06 1.06 0 01-.387 1.457l-4.418 2.551c.01.09.016.181.016.274a1.843 1.843 0 01-1.842 1.842 1.843 1.843 0 01-1.842-1.842c0-.093.006-.184.016-.274l-4.418-2.551a1.06 1.06 0 01-.387-1.457h.616z">
|
||||||
href="https://git.kokopi.dev/kokopi"
|
</path>
|
||||||
target="_blank"
|
</svg>
|
||||||
class="inline-flex items-center gap-2 p-1.5 rounded-lg text-[0.8125rem] font-medium bg-transparent text-fg-200 no-underline transition-all duration-150 hover:text-fg-100 hover:bg-bg-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-100"
|
Gitea
|
||||||
>
|
@icons.ArrowUpRight("size-3")
|
||||||
<svg width="15" height="15" viewBox="0 0 32 32" fill="currentColor">
|
</a>
|
||||||
<path
|
<a href="https://github.com/kokopi-dev" target="_blank"
|
||||||
d="M16 0C7.163 0 0 7.163 0 16c0 8.836 7.163 16 16 16 8.836 0 16-7.163 16-16C32 7.163 24.837 0 16 0zm7.68 21.155a1.06 1.06 0 01-1.458.387l-4.514-2.607a1.842 1.842 0 01-.638.223v4.017a1.06 1.06 0 01-2.12 0v-4.017a1.842 1.842 0 01-1.3-1.787 1.843 1.843 0 011.842-1.842c.347 0 .671.097.948.264l4.418-2.551a1.06 1.06 0 011.457.387 1.06 1.06 0 01-.387 1.457l-4.418 2.551c.01.09.016.181.016.274 0 .093-.006.184-.016.274l4.514 2.607a1.06 1.06 0 01.387 1.457l-.731-.695zm-13.512-8.24a1.06 1.06 0 011.457-.387l4.418 2.551c.277-.167.601-.264.948-.264.347 0 .671.097.948.264l4.418-2.551a1.06 1.06 0 011.457.387 1.06 1.06 0 01-.387 1.457l-4.418 2.551c.01.09.016.181.016.274a1.843 1.843 0 01-1.842 1.842 1.843 1.843 0 01-1.842-1.842c0-.093.006-.184.016-.274l-4.418-2.551a1.06 1.06 0 01-.387-1.457h.616z"
|
class="inline-flex items-center gap-2 p-1.5 rounded-lg text-[0.8125rem] font-medium bg-transparent text-fg-200 no-underline transition-all duration-150 hover:text-fg-100 hover:bg-bg-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-100">
|
||||||
></path>
|
<svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24">
|
||||||
</svg>
|
<path
|
||||||
Gitea
|
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z">
|
||||||
@icons.ArrowUpRight("size-3")
|
</path>
|
||||||
</a>
|
</svg>
|
||||||
<a
|
GitHub
|
||||||
href="https://github.com/kokopi-dev"
|
@icons.ArrowUpRight("size-3")
|
||||||
target="_blank"
|
</a>
|
||||||
class="inline-flex items-center gap-2 p-1.5 rounded-lg text-[0.8125rem] font-medium bg-transparent text-fg-200 no-underline transition-all duration-150 hover:text-fg-100 hover:bg-bg-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-100"
|
</div>
|
||||||
>
|
</section>
|
||||||
<svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path
|
|
||||||
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
GitHub
|
|
||||||
@icons.ArrowUpRight("size-3")
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
templ aboutSection() {
|
templ aboutSection() {
|
||||||
<section id="about" class="py-5">
|
<section id="about" class="py-5">
|
||||||
<p
|
<p
|
||||||
class="section-label font-mono text-[0.6875rem] font-semibold tracking-widest uppercase text-fg-300 mb-5 flex items-center gap-3"
|
class="section-label font-mono text-[0.6875rem] font-semibold tracking-widest uppercase text-fg-300 mb-5 flex items-center gap-3">
|
||||||
>
|
about
|
||||||
about
|
</p>
|
||||||
</p>
|
<div
|
||||||
<div
|
class="fade-up bg-bg-200 border border-border-100 rounded-lg p-5 transition-all duration-200 hover:border-border-200 hover:bg-bg-300">
|
||||||
class="fade-up bg-bg-200 border border-border-100 rounded-lg p-5 transition-all duration-200 hover:border-border-200 hover:bg-bg-300"
|
<p class="text-[0.9375rem] text-fg-200 leading-[1.75] mb-5">
|
||||||
>
|
I'm a full-stack software engineer specializing in Python and C# Blazor — I work across the whole stack,
|
||||||
<p class="text-[0.9375rem] text-fg-200 leading-[1.75] mb-5">
|
from backend APIs to server-side rendering to the UI.
|
||||||
I'm a full-stack software engineer specializing in Python and C# Blazor — I work across the whole stack,
|
</p>
|
||||||
from backend APIs to server-side rendering to the UI.
|
<p class="text-[0.9375rem] text-fg-200 leading-[1.75] mb-6">
|
||||||
</p>
|
I'm also a Linux and Neovim enthusiast, which means I care just as much about the craft of writing code as I
|
||||||
<p class="text-[0.9375rem] text-fg-200 leading-[1.75] mb-6">
|
do about shipping it.
|
||||||
I'm also a Linux and Neovim enthusiast, which means I care just as much about the craft of writing code as I do about shipping it.
|
</p>
|
||||||
</p>
|
<div class="flex flex-wrap gap-1.5">
|
||||||
<div class="flex flex-wrap gap-1.5">
|
<span
|
||||||
<span
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap">Python</span>
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
|
<span
|
||||||
>Python</span>
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap">
|
||||||
<span
|
C#
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
|
/ Blazor
|
||||||
>
|
</span>
|
||||||
C#
|
<span
|
||||||
/ Blazor
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap">Golang</span>
|
||||||
</span>
|
<span
|
||||||
<span
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap">FastAPI</span>
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
|
<span
|
||||||
>Golang</span>
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap">Tailwindcss</span>
|
||||||
<span
|
<span
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap">Javascript</span>
|
||||||
>FastAPI</span>
|
<span
|
||||||
<span
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap">Lua</span>
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
|
<span
|
||||||
>Tailwindcss</span>
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap">Neovim</span>
|
||||||
<span
|
<span
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap">Linux</span>
|
||||||
>Javascript</span>
|
</div>
|
||||||
<span
|
</div>
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
|
</section>
|
||||||
>Lua</span>
|
|
||||||
<span
|
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
|
|
||||||
>Neovim</span>
|
|
||||||
<span
|
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
|
|
||||||
>Linux</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
templ expSection() {
|
templ expSection() {
|
||||||
<section id="experience" class="py-5">
|
<section id="experience" class="py-5">
|
||||||
<p
|
<p
|
||||||
class="section-label font-mono text-[0.6875rem] font-semibold tracking-widest uppercase text-fg-300 mb-5 flex items-center gap-3"
|
class="section-label font-mono text-[0.6875rem] font-semibold tracking-widest uppercase text-fg-300 mb-5 flex items-center gap-3">
|
||||||
>
|
experience
|
||||||
experience
|
</p>
|
||||||
</p>
|
<div class="flex flex-col gap-3">
|
||||||
<div class="flex flex-col gap-3">
|
// westbold
|
||||||
// westbold
|
<div
|
||||||
<div
|
class="fade-up bg-bg-200 border border-border-100 rounded-lg p-5 transition-colors duration-200 hover:border-border-200">
|
||||||
class="fade-up bg-bg-200 border border-border-100 rounded-lg p-5 transition-colors duration-200 hover:border-border-200"
|
<div class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
|
||||||
>
|
<div>
|
||||||
<div class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
|
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
|
||||||
<div>
|
<span
|
||||||
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
|
class="status-live inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.72_0.15_145)] mr-1"></span>
|
||||||
<span
|
Westbold · Remote
|
||||||
class="status-live inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.72_0.15_145)] mr-1"
|
</p>
|
||||||
></span>
|
<p class="text-[0.9375rem] font-semibold mb-2">Full Stack Software Engineer</p>
|
||||||
Westbold · Remote
|
</div>
|
||||||
</p>
|
<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Jul 2021 — Present</span>
|
||||||
<p class="text-[0.9375rem] font-semibold mb-2">Full Stack Software Engineer</p>
|
</div>
|
||||||
</div>
|
<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
|
||||||
<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Jul 2021 — Present</span>
|
Full-stack development across customer-facing
|
||||||
</div>
|
workflows, frontend architecture, and internal tooling. Focused on improving usability, reducing
|
||||||
<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
|
friction, and modernizing the codebase.
|
||||||
Full-stack development across customer-facing
|
</p>
|
||||||
workflows, frontend architecture, and internal tooling. Focused on improving usability, reducing
|
<div class="flex flex-wrap gap-1.5">
|
||||||
friction, and modernizing the codebase.
|
<span
|
||||||
</p>
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100">C#</span>
|
||||||
<div class="flex flex-wrap gap-1.5">
|
<span
|
||||||
<span
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100">Blazor</span>
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
|
<span
|
||||||
>C#</span>
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100">Tailwindcss</span>
|
||||||
<span
|
<span
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100">Golang</span>
|
||||||
>Blazor</span>
|
<span
|
||||||
<span
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100">Javascript</span>
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
|
<span
|
||||||
>Tailwindcss</span>
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100">Python</span>
|
||||||
<span
|
</div>
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
|
</div>
|
||||||
>Golang</span>
|
// tenchijin
|
||||||
<span
|
<div
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
|
class="fade-up delay-100 bg-bg-200 border border-border-100 rounded-lg p-5 transition-colors duration-200 hover:border-border-200">
|
||||||
>Javascript</span>
|
<div class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
|
||||||
<span
|
<div>
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
|
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
|
||||||
>Python</span>
|
<span class="inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.75_0_0)] mr-1"></span>
|
||||||
</div>
|
Tenchijin · Remote
|
||||||
</div>
|
</p>
|
||||||
// tenchijin
|
<p class="text-[0.9375rem] font-semibold mb-2">Full Stack Software Engineer</p>
|
||||||
<div
|
</div>
|
||||||
class="fade-up delay-1 bg-bg-200 border border-border-100 rounded-lg p-5 transition-colors duration-200 hover:border-border-200"
|
<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Dec 2020 — Sep 2021</span>
|
||||||
>
|
</div>
|
||||||
<div class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
|
<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
|
||||||
<div>
|
Backend development with some frontend on an
|
||||||
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
|
enterprise satellite data platform. Improved performance, rewrote core services, and documented
|
||||||
<span class="inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.75_0_0)] mr-1"></span>
|
workflows for faster onboarding.
|
||||||
Tenchijin · Remote
|
</p>
|
||||||
</p>
|
<div class="flex flex-wrap gap-1.5">
|
||||||
<p class="text-[0.9375rem] font-semibold mb-2">Full Stack Software Engineer</p>
|
<span
|
||||||
</div>
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100">Python</span>
|
||||||
<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Dec 2020 — Sep 2021</span>
|
<span
|
||||||
</div>
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100">Django</span>
|
||||||
<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
|
<span
|
||||||
Backend development with some frontend on an
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100">VueJS</span>
|
||||||
enterprise satellite data platform. Improved performance, rewrote core services, and documented
|
</div>
|
||||||
workflows for faster onboarding.
|
</div>
|
||||||
</p>
|
// hennge
|
||||||
<div class="flex flex-wrap gap-1.5">
|
<div
|
||||||
<span
|
class="fade-up delay-200 bg-bg-200 border border-border-100 rounded-lg p-5 transition-colors duration-200 hover:border-border-200">
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
|
<div class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
|
||||||
>Python</span>
|
<div>
|
||||||
<span
|
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
|
<span class="inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.75_0_0)] mr-1"></span>
|
||||||
>Django</span>
|
Hennge · Hybrid
|
||||||
<span
|
</p>
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
|
<p class="text-[0.9375rem] font-semibold mb-2">Software Engineer Intern</p>
|
||||||
>VueJS</span>
|
</div>
|
||||||
</div>
|
<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Sep 2020 — Nov 2020</span>
|
||||||
</div>
|
</div>
|
||||||
// hennge
|
<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
|
||||||
<div
|
Contributed to a production enterprise email platform
|
||||||
class="fade-up delay-2 bg-bg-200 border border-border-100 rounded-lg p-5 transition-colors duration-200 hover:border-border-200"
|
and built internal proof-of-concept projects to explore cloud infrastructure.
|
||||||
>
|
</p>
|
||||||
<div class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
|
<div class="flex flex-wrap gap-1.5">
|
||||||
<div>
|
<span
|
||||||
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100">Python</span>
|
||||||
<span class="inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.75_0_0)] mr-1"></span>
|
<span
|
||||||
Hennge · Hybrid
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100">VueJS</span>
|
||||||
</p>
|
<span
|
||||||
<p class="text-[0.9375rem] font-semibold mb-2">Software Engineer Intern</p>
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100">Terraform</span>
|
||||||
</div>
|
<span
|
||||||
<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Sep 2020 — Nov 2020</span>
|
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100">AWS</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
|
</div>
|
||||||
Contributed to a production enterprise email platform
|
</div>
|
||||||
and built internal proof-of-concept projects to explore cloud infrastructure.
|
</section>
|
||||||
</p>
|
|
||||||
<div class="flex flex-wrap gap-1.5">
|
|
||||||
<span
|
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
|
|
||||||
>Python</span>
|
|
||||||
<span
|
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
|
|
||||||
>VueJS</span>
|
|
||||||
<span
|
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
|
|
||||||
>Terraform</span>
|
|
||||||
<span
|
|
||||||
class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
|
|
||||||
>AWS</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
templ Index() {
|
templ Index() {
|
||||||
{{ params := constants.NewLayoutParams("Home") }}
|
{{ params := constants.NewLayoutParams("Home") }}
|
||||||
@components.MainLayout(params) {
|
@components.MainLayout(params) {
|
||||||
<style>
|
<style>
|
||||||
.hero-eyebrow::before {
|
.hero-eyebrow::before {
|
||||||
content: '';
|
content: '';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -259,8 +221,8 @@ templ Index() {
|
|||||||
background: var(--color-border-100);
|
background: var(--color-border-100);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@heroSection()
|
@heroSection()
|
||||||
@aboutSection()
|
@aboutSection()
|
||||||
@expSection()
|
@expSection()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,46 +3,80 @@ package pages
|
|||||||
import "personal-site/constants"
|
import "personal-site/constants"
|
||||||
import "fmt"
|
import "fmt"
|
||||||
import "personal-site/components"
|
import "personal-site/components"
|
||||||
|
import "personal-site/components/icons"
|
||||||
|
|
||||||
templ projectCard(idx int, project constants.Project) {
|
templ projectCard(idx int, project constants.Project) {
|
||||||
<a href={ project.Url } target="_blank"
|
<div
|
||||||
class="group rounded-lg px-5 py-4 flex items-start justify-between gap-4 fade-up bg-[#111113] border border-zinc-800 transition-all duration-150 ease-in-out hover:border-zinc-600 hover:bg-[#18181b] hover:-translate-y-0.5"
|
class="group relative rounded-lg px-5 py-4 flex items-start justify-between gap-4 fade-up bg-[#111113] border border-zinc-800 transition-all duration-150 ease-in-out hover:border-zinc-600 hover:bg-[#18181b] hover:-translate-y-0.5"
|
||||||
style={ fmt.Sprintf("animation-delay: %dms", idx*30) }>
|
style={ fmt.Sprintf("animation-delay: %dms", idx*30) }
|
||||||
<div class="flex-1 min-w-0">
|
>
|
||||||
<div class="flex items-center gap-2.5 mb-1.5">
|
<a href={ project.Url } target="_blank" class="absolute inset-0 rounded-lg" aria-label={ project.Name }></a>
|
||||||
<span class="text-sm font-medium">{ project.Name }</span>
|
<div class="pointer-events-none relative z-10 flex-1 min-w-0">
|
||||||
</div>
|
<div class="flex items-center gap-2.5 mb-1.5">
|
||||||
<p class="text-zinc-500 text-xs leading-relaxed mb-3">{ project.Description }</p>
|
<span class="text-sm font-medium">{ project.Name }</span>
|
||||||
<div class="flex flex-wrap gap-1.5">
|
</div>
|
||||||
for _, tag := range project.TechTags {
|
<p class="text-zinc-500 text-xs leading-relaxed mb-3">{ project.Description }</p>
|
||||||
<span class="font-mono text-xs px-2 py-0.5 rounded-sm bg-zinc-800 text-fg-200">{ tag }</span>
|
<div class="flex flex-wrap gap-1.5 mb-3">
|
||||||
}
|
for _, tag := range project.TechTags {
|
||||||
</div>
|
<span class="font-mono text-xs px-2 py-0.5 rounded-sm bg-zinc-800 text-fg-200">{ tag }</span>
|
||||||
</div>
|
}
|
||||||
<div
|
</div>
|
||||||
class="arrow text-fg-200 mt-0.5 shrink-0 opacity-0 group-hover:opacity-100 transition-all duration-150 ease-in-out">
|
if project.HostedOn != "" {
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
<p class="text-zinc-600 text-[0.6875rem] font-mono mb-3">
|
||||||
<path d="M2 12L12 2M12 2H5M12 2V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
<span class="text-zinc-500">hosted on</span> { project.HostedOn }
|
||||||
stroke-linejoin="round"></path>
|
</p>
|
||||||
</svg>
|
}
|
||||||
</div>
|
if project.LinkGitea != "" || project.LinkGithub != "" {
|
||||||
</a>
|
<div class="flex items-center gap-2">
|
||||||
|
if project.LinkGitea != "" {
|
||||||
|
<a
|
||||||
|
href={ templ.URL(project.LinkGitea) }
|
||||||
|
target="_blank"
|
||||||
|
class="pointer-events-auto inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[0.6875rem] font-medium bg-zinc-800 text-fg-200 border border-zinc-700 hover:border-zinc-500 hover:text-fg-100 transition-all duration-150"
|
||||||
|
>
|
||||||
|
@icons.Gitea("size-4")
|
||||||
|
Gitea
|
||||||
|
@icons.ArrowUpRight("size-3")
|
||||||
|
</a>
|
||||||
|
}
|
||||||
|
if project.LinkGithub != "" {
|
||||||
|
<a
|
||||||
|
href={ templ.URL(project.LinkGithub) }
|
||||||
|
target="_blank"
|
||||||
|
class="pointer-events-auto inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[0.6875rem] font-medium bg-zinc-800 text-fg-200 border border-zinc-700 hover:border-zinc-500 hover:text-fg-100 transition-all duration-150"
|
||||||
|
>
|
||||||
|
@icons.Github("size-4")
|
||||||
|
GitHub
|
||||||
|
@icons.ArrowUpRight("size-3")
|
||||||
|
</a>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="arrow relative z-10 text-fg-200 mt-0.5 shrink-0 opacity-0 group-hover:opacity-100 transition-all duration-150 ease-in-out"
|
||||||
|
>
|
||||||
|
@icons.ArrowUpRight("size-4")
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
templ ProjectPage(projects []constants.Project) {
|
templ ProjectPage(projects []constants.Project) {
|
||||||
{{ params := constants.NewLayoutParams("Home") }}
|
{{ params := constants.NewLayoutParams("Home") }}
|
||||||
@components.MainLayout(params) {
|
@components.MainLayout(params) {
|
||||||
<div class="fade-up flex flex-col gap-3" style="animation-delay:0ms">
|
<div class="max-w-xl flex flex-col gap-4">
|
||||||
<p class="mono text-xs text-fg-200 tracking-widest uppercase">derrickgee.dev/projects</p>
|
<div class="fade-up flex flex-col gap-3" style="animation-delay:0ms">
|
||||||
<h1 class="text-3xl font-semibold tracking-tight">Projects Directory</h1>
|
<p class="mono text-xs text-fg-200 tracking-widest uppercase">derrickgee.dev/projects</p>
|
||||||
<p class="text-fg-200 text-sm leading-relaxed max-w-md">
|
<h1 class="text-3xl font-semibold tracking-tight">Projects Directory</h1>
|
||||||
A collection of projects built across different languages and frameworks.
|
<p class="text-fg-200 text-sm leading-relaxed">
|
||||||
Each runs as an independent service.
|
A collection of projects built across different languages and frameworks.
|
||||||
</p>
|
Each runs as an independent service.
|
||||||
</div>
|
</p>
|
||||||
<hr class="border-base-100 fade-up" style="animation-delay:80ms" />
|
</div>
|
||||||
for idx, p := range projects {
|
<hr class="border-fg-300 fade-up" style="animation-delay:80ms"/>
|
||||||
@projectCard(idx, p)
|
for idx, p := range projects {
|
||||||
}
|
@projectCard(idx, p)
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
static/assets/images/dotfiles-1-1.webp
Normal file
BIN
static/assets/images/dotfiles-1-1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
static/assets/images/dotfiles-1-2.webp
Normal file
BIN
static/assets/images/dotfiles-1-2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
static/assets/images/dotfiles-2.webp
Normal file
BIN
static/assets/images/dotfiles-2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
static/assets/images/dotfiles-3.webp
Normal file
BIN
static/assets/images/dotfiles-3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Reference in New Issue
Block a user