229 lines
14 KiB
Plaintext
229 lines
14 KiB
Plaintext
package pages
|
|
|
|
import "personal-site/components"
|
|
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-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>
|
|
}
|
|
|
|
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-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>
|
|
.hero-eyebrow::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 1px;
|
|
background: var(--color-fg-300);
|
|
}
|
|
|
|
.section-label::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--color-border-100);
|
|
}
|
|
</style>
|
|
@heroSection()
|
|
@aboutSection()
|
|
@expSection()
|
|
}
|
|
}
|