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

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

430
pages/index.templ
View File

@@ -5,245 +5,207 @@ import "personal-site/constants"
import "personal-site/components/icons"
templ heroSection() {
<section id="hero" class="pb-5">
<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"
>
available for work
</p>
<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
</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-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">
<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>
</svg>
Japan · US Citizen
</p>
<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 based in Japan, building things that
matter.
</p>
<div class="fade-up delay-4 flex items-center gap-3 flex-wrap">
<a
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"
>
View Projects
</a>
<a
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"
>
Experience
</a>
<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"
>
<svg width="15" height="15" 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>
Gitea
@icons.ArrowUpRight("size-3")
</a>
<a
href="https://github.com/kokopi-dev"
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">
<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>
<section id="hero" class="pb-5">
<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">
available for work
</p>
<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
</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-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">
<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>
</svg>
Japan · US Citizen
</p>
<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
matter.
</p>
<div class="fade-up delay-4 flex items-center gap-3 flex-wrap">
<a 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">
View Projects
</a>
<a 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">
Experience
</a>
<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">
<svg width="15" height="15" 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>
Gitea
@icons.ArrowUpRight("size-3")
</a>
<a href="https://github.com/kokopi-dev" 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">
<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() {
<section id="about" class="py-5">
<p
class="section-label font-mono text-[0.6875rem] font-semibold tracking-widest uppercase text-fg-300 mb-5 flex items-center gap-3"
>
about
</p>
<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"
>
<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,
from backend APIs to server-side rendering to the UI.
</p>
<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.
</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 whitespace-nowrap"
>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 whitespace-nowrap"
>
C#
/ Blazor
</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"
>Golang</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>
<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
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>
<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>
<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>
<section id="about" class="py-5">
<p
class="section-label font-mono text-[0.6875rem] font-semibold tracking-widest uppercase text-fg-300 mb-5 flex items-center gap-3">
about
</p>
<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">
<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,
from backend APIs to server-side rendering to the UI.
</p>
<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.
</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 whitespace-nowrap">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 whitespace-nowrap">
C#
/ Blazor
</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">Golang</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>
<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
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>
<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>
<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() {
<section id="experience" class="py-5">
<p
class="section-label font-mono text-[0.6875rem] font-semibold tracking-widest uppercase text-fg-300 mb-5 flex items-center gap-3"
>
experience
</p>
<div class="flex flex-col gap-3">
// westbold
<div
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>
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
<span
class="status-live inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.72_0.15_145)] mr-1"
></span>
Westbold · Remote
</p>
<p class="text-[0.9375rem] font-semibold mb-2">Full Stack Software Engineer</p>
</div>
<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Jul 2021 — Present</span>
</div>
<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
Full-stack development across customer-facing
workflows, frontend architecture, and internal tooling. Focused on improving usability, reducing
friction, and modernizing the codebase.
</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"
>C#</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>
<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
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>
<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>
<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>
</div>
</div>
// tenchijin
<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"
>
<div class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
<div>
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
<span class="inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.75_0_0)] mr-1"></span>
Tenchijin · Remote
</p>
<p class="text-[0.9375rem] font-semibold mb-2">Full Stack Software Engineer</p>
</div>
<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Dec 2020 — Sep 2021</span>
</div>
<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
Backend development with some frontend on an
enterprise satellite data platform. Improved performance, rewrote core services, and documented
workflows for faster onboarding.
</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"
>Django</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>
</div>
</div>
// hennge
<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"
>
<div class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
<div>
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
<span class="inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.75_0_0)] mr-1"></span>
Hennge · Hybrid
</p>
<p class="text-[0.9375rem] font-semibold mb-2">Software Engineer Intern</p>
</div>
<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Sep 2020 — Nov 2020</span>
</div>
<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
Contributed to a production enterprise email platform
and built internal proof-of-concept projects to explore cloud infrastructure.
</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>
<section id="experience" class="py-5">
<p
class="section-label font-mono text-[0.6875rem] font-semibold tracking-widest uppercase text-fg-300 mb-5 flex items-center gap-3">
experience
</p>
<div class="flex flex-col gap-3">
// westbold
<div
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>
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
<span
class="status-live inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.72_0.15_145)] mr-1"></span>
Westbold · Remote
</p>
<p class="text-[0.9375rem] font-semibold mb-2">Full Stack Software Engineer</p>
</div>
<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Jul 2021 — Present</span>
</div>
<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
Full-stack development across customer-facing
workflows, frontend architecture, and internal tooling. Focused on improving usability, reducing
friction, and modernizing the codebase.
</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">C#</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>
<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
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>
<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>
<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>
</div>
</div>
// tenchijin
<div
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>
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
<span class="inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.75_0_0)] mr-1"></span>
Tenchijin · Remote
</p>
<p class="text-[0.9375rem] font-semibold mb-2">Full Stack Software Engineer</p>
</div>
<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Dec 2020 — Sep 2021</span>
</div>
<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
Backend development with some frontend on an
enterprise satellite data platform. Improved performance, rewrote core services, and documented
workflows for faster onboarding.
</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">Django</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>
</div>
</div>
// hennge
<div
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>
<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
<span class="inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.75_0_0)] mr-1"></span>
Hennge · Hybrid
</p>
<p class="text-[0.9375rem] font-semibold mb-2">Software Engineer Intern</p>
</div>
<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Sep 2020 — Nov 2020</span>
</div>
<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
Contributed to a production enterprise email platform
and built internal proof-of-concept projects to explore cloud infrastructure.
</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() {
{{ params := constants.NewLayoutParams("Home") }}
@components.MainLayout(params) {
<style>
{{ params := constants.NewLayoutParams("Home") }}
@components.MainLayout(params) {
<style>
.hero-eyebrow::before {
content: '';
display: inline-block;
@@ -259,8 +221,8 @@ templ Index() {
background: var(--color-border-100);
}
</style>
@heroSection()
@aboutSection()
@expSection()
}
@heroSection()
@aboutSection()
@expSection()
}
}

108
pages/projects.templ
View File

@@ -3,46 +3,80 @@ package pages
import "personal-site/constants"
import "fmt"
import "personal-site/components"
import "personal-site/components/icons"
templ projectCard(idx int, project constants.Project) {
<a href={ project.Url } target="_blank"
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"
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">
<span class="text-sm font-medium">{ project.Name }</span>
</div>
<p class="text-zinc-500 text-xs leading-relaxed mb-3">{ project.Description }</p>
<div class="flex flex-wrap gap-1.5">
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>
}
</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">
<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"
stroke-linejoin="round"></path>
</svg>
</div>
</a>
<div
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) }
>
<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">
<span class="text-sm font-medium">{ project.Name }</span>
</div>
<p class="text-zinc-500 text-xs leading-relaxed mb-3">{ project.Description }</p>
<div class="flex flex-wrap gap-1.5 mb-3">
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>
}
</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
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) {
{{ params := constants.NewLayoutParams("Home") }}
@components.MainLayout(params) {
<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>
<h1 class="text-3xl font-semibold tracking-tight">Projects Directory</h1>
<p class="text-fg-200 text-sm leading-relaxed max-w-md">
A collection of projects built across different languages and frameworks.
Each runs as an independent service.
</p>
</div>
<hr class="border-base-100 fade-up" style="animation-delay:80ms" />
for idx, p := range projects {
@projectCard(idx, p)
}
}
{{ params := constants.NewLayoutParams("Home") }}
@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">
<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>
<p class="text-fg-200 text-sm leading-relaxed">
A collection of projects built across different languages and frameworks.
Each runs as an independent service.
</p>
</div>
<hr class="border-fg-300 fade-up" style="animation-delay:80ms"/>
for idx, p := range projects {
@projectCard(idx, p)
}
</div>
}
}