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

update:metadata stuff

Browse Source
This commit is contained in:
kokopi
2026-03-08 04:12:09 +09:00
parent 3dfa4f4f60
commit 51ddf60aa5
14 changed files with 272 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/heads.templ Normal file
View File

@@ -0,0 +1,35 @@
package components
templ LayoutHeadMetadata() {
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="A software engineer's life."/>
<meta name="author" content="Derrick Gee"/>
<link rel="canonical" href="https://derrickgee.dev"/>
<link rel="manifest" href="/static/assets/favicon/manifest.webmanifest">
<link rel="apple-touch-icon" href="/static/assets/favicon/apple-touch-icon.png">
<link rel="icon" href="/static/assets/favicon/icon.svg" type="image/svg+xml">
<link rel="icon" href="/static/assets/favicon/favicon.ico" sizes="32x32">
// opengraph
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://derrickgee.dev"/>
<meta property="og:title" content="Derrick Gee — Software Engineer"/>
<meta property="og:description" content="A software engineer's life."/>
<meta property="og:image" content="https://derrickgee.dev/static/assets/og-card.webp"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:image:alt" content="Derrick Gee — Software Engineer"/>
<meta property="og:site_name" content="derrickgee.dev"/>
<meta property="og:locale" content="en_US"/>
// twitter
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:url" content="https://derrickgee.dev"/>
<meta name="twitter:title" content="Derrick Gee — Software Engineer"/>
<meta name="twitter:description" content="A software engineer's life."/>
<meta name="twitter:image" content="https://derrickgee.dev/static/assets/og-card.webp"/>
<meta name="robots" content="index, follow">
}

8
components/layout.templ
View File

@@ -21,7 +21,7 @@ templ navbar(params *constants.LayoutParams) {
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://github.com" 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"
> >
<svg width="12" height="12" viewBox="0 0 32 32" fill="currentColor"> <svg width="12" height="12" viewBox="0 0 32 32" fill="currentColor">
@@ -32,7 +32,7 @@ templ navbar(params *constants.LayoutParams) {
gitea gitea
</a> </a>
<a <a
href="https://github.com" 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"
> >
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"> <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
@@ -47,12 +47,12 @@ templ navbar(params *constants.LayoutParams) {
</header> </header>
} }
templ MainLayout(params *constants.LayoutParams) { templ MainLayout(params *constants.LayoutParams) {
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> @LayoutHeadMetadata()
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href={ fmt.Sprintf("/static/css/app.css?v=%d", time.Now().Unix()) }/> <link rel="stylesheet" href={ fmt.Sprintf("/static/css/app.css?v=%d", time.Now().Unix()) }/>
<title>{ params.Title }</title> <title>{ params.Title }</title>
</head> </head>

191
ogcard.html Normal file
View File

@@ -0,0 +1,191 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>OG Card Preview</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #18181b;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: 'DM Sans', sans-serif;
}
.card {
width: 1200px;
height: 630px;
background: #09090b;
border: 1px solid #27272a;
border-radius: 16px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 64px 72px;
}
/* Subtle grid background */
.card::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
/* Glow accent top-right */
.card::after {
content: '';
position: absolute;
top: -120px;
right: -120px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(250,250,250,0.04) 0%, transparent 70%);
pointer-events: none;
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}
.monogram {
width: 52px;
height: 52px;
background: #09090b;
border: 1px solid #3f3f46;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'DM Mono', monospace;
font-size: 18px;
font-weight: 500;
color: #fafafa;
letter-spacing: 0.5px;
}
.badge {
font-family: 'DM Mono', monospace;
font-size: 12px;
color: #71717a;
letter-spacing: 0.08em;
border: 1px solid #27272a;
padding: 6px 14px;
border-radius: 999px;
}
.middle {
position: relative;
z-index: 1;
}
.name {
font-size: 72px;
font-weight: 600;
color: #fafafa;
letter-spacing: -2.5px;
line-height: 1;
margin-bottom: 20px;
}
.name span {
color: #3f3f46;
}
.tagline {
font-size: 22px;
font-weight: 300;
color: #71717a;
letter-spacing: -0.3px;
max-width: 520px;
line-height: 1.5;
}
.bottom {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}
.tags {
display: flex;
gap: 8px;
}
.tag {
font-family: 'DM Mono', monospace;
font-size: 12px;
color: #52525b;
border: 1px solid #27272a;
padding: 5px 12px;
border-radius: 6px;
letter-spacing: 0.04em;
}
.url {
font-family: 'DM Mono', monospace;
font-size: 13px;
color: #3f3f46;
letter-spacing: 0.04em;
}
/* Decorative corner lines */
.corner {
position: absolute;
width: 20px;
height: 20px;
z-index: 2;
}
.corner-tl { top: 20px; left: 20px; border-top: 1px solid #3f3f46; border-left: 1px solid #3f3f46; }
.corner-tr { top: 20px; right: 20px; border-top: 1px solid #3f3f46; border-right: 1px solid #3f3f46; }
.corner-bl { bottom: 20px; left: 20px; border-bottom: 1px solid #3f3f46; border-left: 1px solid #3f3f46; }
.corner-br { bottom: 20px; right: 20px; border-bottom: 1px solid #3f3f46; border-right: 1px solid #3f3f46; }
</style>
</head>
<body>
<div class="card">
<div class="corner corner-tl"></div>
<div class="corner corner-tr"></div>
<div class="corner corner-bl"></div>
<div class="corner corner-br"></div>
<div class="top">
<div class="monogram">dg</div>
<div class="badge">software engineer</div>
</div>
<div class="middle">
<div class="name">Building things<span>.</span></div>
<div class="tagline">Just a software engineer coding things on linux.</div>
</div>
<div class="bottom">
<div class="tags">
<div class="tag">python</div>
<div class="tag">golang</div>
<div class="tag">c#</div>
<div class="tag">typescript</div>
</div>
<div class="url">derrickgee.dev</div>
</div>
</div>
</body>
</html>

17
pages/index.templ
View File

@@ -23,8 +23,8 @@ templ heroSection() {
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-3 text-[0.9375rem] text-fg-200 max-w-120 leading-[1.7] mb-9">
I build full-stack web applications with a focus on developer experience and real-world impact. Python, C# Full-stack software engineer who ships — from backend APIs to polished frontends. Aligned with US timezones and based in Japan, building things that
Blazor, Go — and everything in between. 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
@@ -80,13 +80,11 @@ templ aboutSection() {
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 Python and C# Blazor full-stack software engineer. I work across the whole stack — backend APIs, I'm a full-stack software engineer specializing in Python and C# Blazor — I work across the whole stack,
server-side rendering, and polished frontends. I'm also a Linux and Neovim enthusiast who enjoys tinkering from backend APIs to server-side rendering to the UI.
with configs as much as shipping features.
</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">
When I'm not coding, I'm exploring new technologies that solve real-world problems. Currently based in 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.
Japan, working remotely.
</p> </p>
<div class="flex flex-wrap gap-1.5"> <div class="flex flex-wrap gap-1.5">
<span <span
@@ -104,9 +102,6 @@ templ aboutSection() {
<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
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"
>Hugo</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>
@@ -168,7 +163,7 @@ templ expSection() {
>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"
>Hugo</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>

BIN
static/assets/favicon/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
static/assets/favicon/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/assets/favicon/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/assets/favicon/icon-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
static/assets/favicon/icon-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
static/assets/favicon/icon-mask.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

23
static/assets/favicon/icon.svg Normal file
View File

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
<style>
rect.bg { fill: #09090b; }
text { fill: #fafafa; }
rect.border { fill: none; stroke: #3f3f46; stroke-width="1"; }
@media (prefers-color-scheme: light) {
rect.bg { fill: #fafafa; }
text { fill: #09090b; }
rect.border { stroke: #e4e4e7; }
}
</style>
<rect class="bg" width="32" height="32" rx="7"/>
<rect class="border" x="0.5" y="0.5" width="31" height="31" rx="6.5"/>
<text
x="16"
y="22"
font-family="Georgia, serif"
font-size="15"
font-weight="700"
text-anchor="middle"
letter-spacing="0.5"
>dg</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 680 B

12
static/assets/favicon/manifest.webmanifest Normal file
View File

@@ -0,0 +1,12 @@
{
"name": "dg",
"short_name": "dg",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
],
"theme_color": "#09090b",
"background_color": "#09090b",
"display": "standalone"
}

BIN
static/assets/og-card.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

2
tailwind.css
View File

@@ -16,7 +16,7 @@
--color-bg-300: oklch(0.15 0 0); --color-bg-300: oklch(0.15 0 0);
--color-bg-400: oklch(0.18 0 0); --color-bg-400: oklch(0.18 0 0);
--color-fg-100: oklch(0.97 0 0); --color-fg-100: oklch(0.92 0 0);
--color-fg-200: oklch(0.6 0 0); --color-fg-200: oklch(0.6 0 0);
--color-fg-300: oklch(0.4 0 0); --color-fg-300: oklch(0.4 0 0);