kokopi/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add:dotfiles page

Browse Source
This commit is contained in:
kokopi-dev
2026-03-10 05:13:44 +09:00
parent 7c46f8f8ee
commit 63699c2450
13 changed files with 373 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/icons/icons.templ
View File

@@ -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
View 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>
}

29
components/layout.templ
View File

@@ -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>

3
constants/projects.go
View File

@@ -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
} }

2
deploy.sh
View File

@@ -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
View File

@@ -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
View 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>
}
}

164
pages/index.templ
View File

@@ -5,141 +5,118 @@ 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-1 text-[clamp(2.25rem,6vw,3.25rem)] font-bold tracking-[-0.04em] leading-[1.05] mb-3"> <h1 class="fade-up delay-100 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-2 text-base font-normal text-fg-200 mb-2">Full Stack Software Engineer</p> <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 font-mono text-xs text-fg-300 flex items-center gap-1.5 mb-8"> <p class="fade-up delay-200 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-3 text-[0.9375rem] text-fg-200 max-w-120 leading-[1.7] mb-9"> <p class="fade-up delay-300 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 based in Japan, building things that Full-stack software engineer who ships — from backend APIs to polished frontends. Aligned with US timezones and
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 View Projects
</a> </a>
<a <a href="#experience"
href="#experience" 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">
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"
>
Experience Experience
</a> </a>
<a <a href="https://git.kokopi.dev/kokopi" target="_blank"
href="https://git.kokopi.dev/kokopi" 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">
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"
>
<svg width="15" height="15" viewBox="0 0 32 32" fill="currentColor"> <svg width="15" height="15" viewBox="0 0 32 32" fill="currentColor">
<path <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" 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> </path>
</svg> </svg>
Gitea Gitea
@icons.ArrowUpRight("size-3") @icons.ArrowUpRight("size-3")
</a> </a>
<a <a href="https://github.com/kokopi-dev" target="_blank"
href="https://github.com/kokopi-dev" 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">
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"
>
<svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"> <svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24">
<path <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" 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> </path>
</svg> </svg>
GitHub GitHub
@icons.ArrowUpRight("size-3") @icons.ArrowUpRight("size-3")
</a> </a>
</div> </div>
</section> </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"> <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, I'm a full-stack software engineer specializing in Python and C# Blazor — I work across the whole stack,
from backend APIs to server-side rendering to the UI. from backend APIs to server-side rendering to the UI.
</p> </p>
<p class="text-[0.9375rem] text-fg-200 leading-[1.75] mb-6"> <p class="text-[0.9375rem] text-fg-200 leading-[1.75] mb-6">
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. 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" 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>
>Python</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">
>
C# C#
/ Blazor / Blazor
</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" 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>
>Golang</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">FastAPI</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" 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>
>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>
>Javascript</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">Lua</span>
>Lua</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">Neovim</span>
>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>
>Linux</span>
</div> </div>
</div> </div>
</section> </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 class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
<div> <div>
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2"> <p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
<span <span
class="status-live inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.72_0.15_145)] mr-1" 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 Westbold · Remote
</p> </p>
<p class="text-[0.9375rem] font-semibold mb-2">Full Stack Software Engineer</p> <p class="text-[0.9375rem] font-semibold mb-2">Full Stack Software Engineer</p>
@@ -153,29 +130,22 @@ templ expSection() {
</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" 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>
>C#</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">Blazor</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" 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>
>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>
>Golang</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">Javascript</span>
>Javascript</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">Python</span>
>Python</span>
</div> </div>
</div> </div>
// tenchijin // tenchijin
<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" class="fade-up delay-100 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 class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
<div> <div>
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2"> <p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
@@ -193,20 +163,16 @@ templ expSection() {
</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" 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>
>Python</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">Django</span>
>Django</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">VueJS</span>
>VueJS</span>
</div> </div>
</div> </div>
// hennge // hennge
<div <div
class="fade-up delay-2 bg-bg-200 border border-border-100 rounded-lg p-5 transition-colors duration-200 hover:border-border-200" class="fade-up delay-200 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 class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
<div> <div>
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2"> <p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
@@ -223,27 +189,23 @@ templ expSection() {
</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" 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>
>Python</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">VueJS</span>
>VueJS</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">Terraform</span>
>Terraform</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">AWS</span>
>AWS</span>
</div> </div>
</div> </div>
</div> </div>
</section> </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()
} }
} }

60
pages/projects.templ
View File

@@ -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"> >
<a href={ project.Url } target="_blank" class="absolute inset-0 rounded-lg" aria-label={ project.Name }></a>
<div class="pointer-events-none relative z-10 flex-1 min-w-0">
<div class="flex items-center gap-2.5 mb-1.5"> <div class="flex items-center gap-2.5 mb-1.5">
<span class="text-sm font-medium">{ project.Name }</span> <span class="text-sm font-medium">{ project.Name }</span>
</div> </div>
<p class="text-zinc-500 text-xs leading-relaxed mb-3">{ project.Description }</p> <p class="text-zinc-500 text-xs leading-relaxed mb-3">{ project.Description }</p>
<div class="flex flex-wrap gap-1.5"> <div class="flex flex-wrap gap-1.5 mb-3">
for _, tag := range project.TechTags { for _, tag := range project.TechTags {
<span class="font-mono text-xs px-2 py-0.5 rounded-sm bg-zinc-800 text-fg-200">{ tag }</span> <span class="font-mono text-xs px-2 py-0.5 rounded-sm bg-zinc-800 text-fg-200">{ tag }</span>
} }
</div> </div>
if project.HostedOn != "" {
<p class="text-zinc-600 text-[0.6875rem] font-mono mb-3">
<span class="text-zinc-500">hosted on</span> { project.HostedOn }
</p>
}
if project.LinkGitea != "" || project.LinkGithub != "" {
<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>
<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"> 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"
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"> >
<path d="M2 12L12 2M12 2H5M12 2V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" @icons.ArrowUpRight("size-4")
stroke-linejoin="round"></path> </div>
</svg>
</div> </div>
</a>
} }
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="max-w-xl flex flex-col gap-4">
<div class="fade-up flex flex-col gap-3" style="animation-delay:0ms"> <div class="fade-up flex flex-col gap-3" style="animation-delay:0ms">
<p class="mono text-xs text-fg-200 tracking-widest uppercase">derrickgee.dev/projects</p> <p class="mono text-xs text-fg-200 tracking-widest uppercase">derrickgee.dev/projects</p>
<h1 class="text-3xl font-semibold tracking-tight">Projects Directory</h1> <h1 class="text-3xl font-semibold tracking-tight">Projects Directory</h1>
<p class="text-fg-200 text-sm leading-relaxed max-w-md"> <p class="text-fg-200 text-sm leading-relaxed">
A collection of projects built across different languages and frameworks. A collection of projects built across different languages and frameworks.
Each runs as an independent service. Each runs as an independent service.
</p> </p>
</div> </div>
<hr class="border-base-100 fade-up" style="animation-delay:80ms" /> <hr class="border-fg-300 fade-up" style="animation-delay:80ms"/>
for idx, p := range projects { for idx, p := range projects {
@projectCard(idx, p) @projectCard(idx, p)
} }
</div>
} }
} }

BIN
static/assets/images/dotfiles-1-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
static/assets/images/dotfiles-1-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
static/assets/images/dotfiles-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
static/assets/images/dotfiles-3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB