I'm Kelvin, a MarTech developer applying nearly a decade of software engineering experience to email development and marketing automation.
Based in Fairfield, Iowa. Available for fully remote roles.
MarTech Developer, focused on email and automation.
Watch video Placeholder video. Kelvin’s recording is coming soon.
I'll introduce my move into MarTech, explain how my engineering background supports the work, and walk through an example.
Email engineering Readable messages, responsive markup, and inspectable source.
Marketing automation Journey design with explicit permission, routing, and exit rules.
Internal tools & integrations Custom dashboards, APIs, and automations built around your team’s workflow.
Engineering foundation established. Building direct HubSpot and Klaviyo experience.
HTML5 
CSS 
JavaScript 
MJML 
Litmus 
Playwright 
HubSpot 
Klaviyo 
Shopify 
Google Analytics 4 
Google Tag Manager 
Google Search Console 
Mailchimp 
ActiveCampaign 
Laravel 
PHP 
React 
TypeScript 
Python 
ChatGPT 
Claude Code 
n8n 
Zapier 
Make.com 
PostgreSQL 
Pinecone 
Chroma 
Weaviate 
React Native 
Linux 
Ubuntu 
AWS 
Google Cloud 
SQLite 
MySQL 
Redis 
Docker 
API development & integrations Editorial newsletter
A garden journal with two reading modules that wrap naturally, even without media queries.
Compact indentation for easier reading.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="color-scheme" content="light" />
<title>Field Letter: Start with the light</title>
</head>
<body
style="
margin: 0;
background: #e9efec;
color: #202624;
font-family: Arial, sans-serif;
line-height: 1.6;
"
>
<div style="display: none; max-height: 0; overflow: hidden">
A simple observation before your next planting day.
</div>
<table
role="presentation"
width="100%"
cellpadding="0"
cellspacing="0"
style="width: 100%; border-collapse: collapse"
>
<tr>
<td align="center" style="padding: 16px 0">
<table
role="presentation"
class="email-shell"
width="100%"
cellpadding="0"
cellspacing="0"
style="
width: 100%;
max-width: 640px;
background: #fff;
border-collapse: collapse;
"
>
<tr>
<td
style="
padding: 32px 24px 16px;
color: #52605d;
font-size: 16px;
"
>
Field Letter / The garden journal
</td>
</tr>
<tr>
<td
style="
padding: 28px 24px;
background: #244c3b;
color: #fff;
"
>
<p style="margin: 0 0 18px; font-size: 16px">
A quieter start to the growing season
</p>
<h1
style="
font-family: Georgia, serif;
font-weight: normal;
font-size: 42px;
line-height: 1.1;
margin: 0 0 20px;
"
>
Start with the light.
</h1>
<p style="font-size: 18px; margin: 0">
Before you choose a seed, get to know the
place it will grow.
</p>
</td>
</tr>
<tr>
<td style="padding: 28px 24px">
<h2 style="font-size: 22px; margin: 0 0 12px">
One small task for this week
</h2>
<p style="margin: 0; font-size: 17px">
Visit your growing space in the morning, at
midday, and in the late afternoon. Notice
where the light settles. A few observations
can help you choose a plant that belongs
there.
</p>
</td>
</tr>
<tr>
<td
align="center"
style="
padding: 0 16px 24px;
font-size: 0;
text-align: center;
"
>
<!--[if mso]><table role="presentation" width="608" cellpadding="0" cellspacing="0"><tr><td width="304" valign="top"><![endif]-->
<div
style="
display: inline-block;
width: 100%;
max-width: 304px;
vertical-align: top;
text-align: left;
"
>
<table
role="presentation"
width="100%"
cellpadding="0"
cellspacing="0"
>
<tr>
<td style="padding: 8px">
<table
role="presentation"
width="100%"
>
<tr>
<td
style="
padding: 24px;
background: #edf1d9;
font-size: 17px;
"
>
<p
style="
margin: 0 0
16px;
font-size: 14px;
"
>
In practice
</p>
<h2
style="
font-size: 24px;
line-height: 1.2;
margin: 0 0
16px;
"
>
Keep a light
diary.
</h2>
<p
style="
margin: 0;
"
>
A pencil, a few
notes, and three
visits to the
same spot. Start
with
observation.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]></td><td width="304" valign="top"><![endif]-->
<div
style="
display: inline-block;
width: 100%;
max-width: 304px;
vertical-align: top;
text-align: left;
"
>
<table
role="presentation"
width="100%"
cellpadding="0"
cellspacing="0"
>
<tr>
<td style="padding: 8px">
<table
role="presentation"
width="100%"
>
<tr>
<td
style="
padding: 24px;
background: #f0e4d8;
font-size: 17px;
"
>
<p
style="
margin: 0 0
16px;
font-size: 14px;
"
>
A small
beginning
</p>
<h2
style="
font-size: 24px;
line-height: 1.2;
margin: 0 0
16px;
"
>
Make room for a
pot.
</h2>
<p
style="
margin: 0;
"
>
You do not need
a whole garden.
One container is
enough to learn
something.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
<tr>
<td style="padding: 8px 24px 36px">
<a
href="https://example.com/garden-notes"
style="
display: inline-block;
padding: 14px 22px;
background: #315d4b;
color: #fff;
font-size: 17px;
"
>Read the planting notes</a
>
<p style="margin: 24px 0 0; font-size: 17px">
Until next time,<br />The Field Letter
editors
</p>
</td>
</tr>
<tr>
<td
style="
padding: 28px 24px;
background: #244c3b;
color: #fff;
font-size: 14px;
"
>
Field Letter / Thoughtful things for growing
spaces.<br />Fictional portfolio example. No
order or message send.<br /><a
href="https://example.com/preferences"
style="color: #fff"
>Email preferences (example)</a
>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Field Letter / The garden journal A quieter start to the growing season Start with the light. Before you choose a seed, get to know the place it will grow. One small task for this week Visit your growing space in the morning, at midday, and in the late afternoon. Notice where the light settles. A few observations can help you choose a plant that belongs there. In practice: Keep a light diary. A pencil, a few notes, and three visits to the same spot. Start with observation. A small beginning: Make room for a pot. You do not need a whole garden. One container is enough to learn something. Read the planting notes https://example.com/garden-notes Until next time, The Field Letter editors Field Letter / Thoughtful things for growing spaces. Fictional portfolio example. No order or message send. Email preferences (example) https://example.com/preferences
Transactional email
A clear order confirmation that puts the purchase, total, and delivery information in one readable column.
Compact indentation for easier reading.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="color-scheme" content="light" />
<title>Field Letter: Order confirmed</title>
</head>
<body
style="
margin: 0;
background: #e9efec;
color: #202624;
font-family: Arial, sans-serif;
line-height: 1.6;
"
>
<div style="display: none; max-height: 0; overflow: hidden">
Your example order FL 1042 is confirmed.
</div>
<table
role="presentation"
width="100%"
cellpadding="0"
cellspacing="0"
style="width: 100%; border-collapse: collapse"
>
<tr>
<td align="center" style="padding: 16px 0">
<table
role="presentation"
class="email-shell"
width="100%"
cellpadding="0"
cellspacing="0"
style="
width: 100%;
max-width: 640px;
background: #fff;
border-collapse: collapse;
"
>
<tr>
<td
style="
padding: 32px 24px;
background: #e4edf3;
font-size: 16px;
color: #334c60;
"
>
Field Letter / Order FL 1042
</td>
</tr>
<tr>
<td style="padding: 32px 24px">
<p style="color: #52605d; margin: 0 0 16px">
Order confirmation
</p>
<h1
style="
font-family: Georgia, serif;
font-weight: normal;
font-size: 38px;
line-height: 1.15;
margin: 0 0 20px;
"
>
Your garden is on its way.
</h1>
<p style="font-size: 17px; margin: 0 0 24px">
Thanks, Alex. Your example order is
confirmed. We will send a separate update
when it ships.
</p>
<h2 style="font-size: 22px; margin: 0 0 18px">
Your order
</h2>
<table
width="100%"
style="
width: 100%;
border-collapse: collapse;
font-size: 16px;
"
>
<caption
style="
text-align: left;
padding-bottom: 12px;
"
>
Order FL 1042, October 20, 2026
</caption>
<tr>
<th
scope="col"
style="
text-align: left;
padding: 12px 0;
"
>
Item
</th>
<th
scope="col"
style="
text-align: right;
padding: 12px 0;
"
>
Price
</th>
</tr>
<tr>
<td style="padding: 12px 0">
<img
src="../images/products/basil.jpg"
alt="Fresh basil, illustrating the herb starter set"
width="120"
height="80"
style="
display: block;
width: 120px;
max-width: 100%;
height: auto;
margin: 0 0 12px;
border: 0;
"
/>Herb starter set × 1
</td>
<td style="text-align: right">
$24.00
</td>
</tr>
<tr>
<td style="padding: 12px 0">
Shipping
</td>
<td style="text-align: right">$5.00</td>
</tr>
<tr>
<th
scope="row"
style="
text-align: left;
padding: 16px 0;
"
>
Total paid
</th>
<td
style="
text-align: right;
font-weight: bold;
"
>
$29.00
</td>
</tr>
</table>
<p
style="
margin: 20px 0 28px;
font-size: 16px;
color: #52605d;
"
>
Illustrative prices. This fictional order
has no tax charge.
</p>
<a
href="https://example.com/orders/FL1042"
style="
display: inline-block;
padding: 14px 20px;
background: #334c60;
color: #fff;
font-size: 17px;
"
>View order details</a
>
<h2
style="font-size: 22px; margin: 32px 0 12px"
>
What happens next
</h2>
<p style="font-size: 17px; margin: 0 0 20px">
Example delivery window: October 24 to 27.
Tracking will be shared when the parcel is
ready.
</p>
<p style="font-size: 17px; margin: 0">
Need help with your order?
<a
href="https://example.com/support"
style="color: #334c60"
>Contact order support</a
>.
</p>
</td>
</tr>
<tr>
<td
style="
padding: 28px 24px;
background: #244c3b;
color: #fff;
font-size: 14px;
"
>
Field Letter / Thoughtful things for growing
spaces.<br />Fictional portfolio example. No
order or message send.<br /><a
href="https://example.com/preferences"
style="color: #fff"
>Email preferences (example)</a
>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Field Letter / Order FL 1042 Order confirmation Your garden is on its way. Thanks, Alex. Your example order is confirmed. We will send a separate update when it ships. Your order Order FL 1042, October 20, 2026 Herb starter set × 1: $24.00 Shipping: $5.00 Total paid: $29.00 Illustrative prices. This fictional order has no tax charge. View order details https://example.com/orders/FL1042 What happens next Example delivery window: October 24 to 27. Tracking will be shared when the parcel is ready. Need help with your order? Contact order support https://example.com/support Field Letter / Thoughtful things for growing spaces. Fictional portfolio example. No order or message send. Email preferences (example) https://example.com/preferences
Product photography: Markus Spiske and Annie Spratt. Photo credits.
Promotional campaign
A seasonal planting collection with a deliberate desktop composition and a mobile breakpoint.
Compact indentation for easier reading.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="color-scheme" content="light" />
<title>Field Letter: The spring collection</title>
<style>
@media only screen and (max-width: 620px) {
.email-shell {
width: 100% !important;
}
.product-column {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
.campaign-pad {
padding: 28px 20px !important;
}
.campaign-title {
font-size: 38px !important;
}
}
</style>
</head>
<body
style="
margin: 0;
background: #e9efec;
color: #202624;
font-family: Arial, sans-serif;
line-height: 1.6;
"
>
<div style="display: none; max-height: 0; overflow: hidden">
Two simple ways to begin growing at home.
</div>
<table
role="presentation"
width="100%"
cellpadding="0"
cellspacing="0"
style="width: 100%; border-collapse: collapse"
>
<tr>
<td align="center" style="padding: 16px 0">
<table
role="presentation"
class="email-shell"
width="600"
cellpadding="0"
cellspacing="0"
style="
width: 600px;
background: #fff;
border-collapse: collapse;
"
>
<tr>
<td style="padding: 28px 24px; font-size: 16px">
Field Letter / The spring collection
</td>
</tr>
<tr>
<td
class="campaign-pad"
style="padding: 48px 40px; background: #f0e4d8"
>
<p style="font-size: 16px; margin: 0 0 24px">
Good things can start small.
</p>
<h1
class="campaign-title"
style="
font-family: Georgia, serif;
font-weight: normal;
font-size: 54px;
line-height: 1.04;
margin: 0 0 24px;
"
>
A little room to grow.
</h1>
<p style="font-size: 18px; margin: 0 0 28px">
Make a sunny windowsill your next growing
space. Meet two simple ways to begin.
</p>
<a
href="https://example.com/spring"
style="
display: inline-block;
padding: 15px 22px;
background: #5b4334;
color: #fff;
font-size: 17px;
"
>Explore the collection</a
>
</td>
</tr>
<tr>
<td class="campaign-pad" style="padding: 32px 24px">
<table
role="presentation"
width="100%"
cellpadding="0"
cellspacing="0"
>
<tr>
<td
class="product-column"
width="50%"
valign="top"
style="width: 50%; padding: 12px"
>
<table
role="presentation"
width="100%"
>
<tr>
<td
style="
padding: 28px 20px;
background: #e9efdf;
"
>
<img
src="../images/products/basil.jpg"
alt="Fresh green basil growing in a wooden planter"
width="240"
height="160"
style="
display: block;
width: 100%;
max-width: 240px;
height: auto;
margin: 0 0 24px;
border: 0;
"
/>
<p
style="
font-size: 14px;
margin: 0 0 24px;
"
>
For the kitchen
window
</p>
<h2
style="
font-size: 26px;
line-height: 1.15;
margin: 0 0 16px;
"
>
The herb starter
</h2>
<p
style="
font-size: 17px;
margin: 0 0 20px;
"
>
Basil, parsley, and
a small daily
ritual.
</p>
<p
style="
font-size: 20px;
margin: 0 0 20px;
"
>
$24
</p>
<a
href="https://example.com/herb-starter"
style="
font-size: 16px;
color: #244c3b;
"
>Meet the herb
set</a
>
</td>
</tr>
</table>
</td>
<td
class="product-column"
width="50%"
valign="top"
style="width: 50%; padding: 12px"
>
<table
role="presentation"
width="100%"
>
<tr>
<td
style="
padding: 28px 20px;
background: #e4edf3;
"
>
<img
src="../images/products/terracotta-pots.jpg"
alt="Terracotta plant pots in a range of sizes"
width="240"
height="160"
style="
display: block;
width: 100%;
max-width: 240px;
height: auto;
margin: 0 0 24px;
border: 0;
"
/>
<p
style="
font-size: 14px;
margin: 0 0 24px;
"
>
For a favorite
corner
</p>
<h2
style="
font-size: 26px;
line-height: 1.15;
margin: 0 0 16px;
"
>
The everyday pot
</h2>
<p
style="
font-size: 17px;
margin: 0 0 20px;
"
>
A simple home for
something green.
</p>
<p
style="
font-size: 20px;
margin: 0 0 20px;
"
>
$18
</p>
<a
href="https://example.com/everyday-pot"
style="
font-size: 16px;
color: #244c3b;
"
>Explore the pot</a
>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p style="font-size: 16px; margin: 24px 12px 0">
Choose the place first. Find the light. Then
find something you would like to grow.
</p>
</td>
</tr>
<tr>
<td
style="
padding: 28px 24px;
background: #244c3b;
color: #fff;
font-size: 14px;
"
>
Field Letter / Thoughtful things for growing
spaces.<br />Fictional portfolio example. No
order or message send.<br /><a
href="https://example.com/preferences"
style="color: #fff"
>Email preferences (example)</a
>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Field Letter / The spring collection Good things can start small. A little room to grow. Make a sunny windowsill your next growing space. Meet two simple ways to begin. Explore the collection https://example.com/spring For the kitchen window: The herb starter Basil, parsley, and a small daily ritual. $24 Meet the herb set https://example.com/herb-starter For a favorite corner: The everyday pot A simple home for something green. $18 Explore the pot https://example.com/everyday-pot Choose the place first. Find the light. Then find something you would like to grow. Field Letter / Thoughtful things for growing spaces. Fictional portfolio example. No order or message send. Email preferences (example) https://example.com/preferences
Product photography: Markus Spiske and Annie Spratt. Photo credits.
The engineering behind the marketing. Selected work across WordPress, Shopify, WooCommerce, and custom applications.
Laravel, React & TypeScript
Built an integrated lead generation and marketing automation platform connecting lead capture, enrichment, CRM workflows, website previews, chatbot knowledge retrieval, and automated follow-up.
Explore project & screenshotsShopify & ecommerce
Shopify storefront work for a biological research supplier, focused on responsive ecommerce design, product discovery, intuitive navigation, and trust-building content.
Explore project & screenshotsWordPress & technical SEO
Custom WordPress platform built with PHP, ACF Pro, and reusable content templates to support 487+ localized service pages.
Explore project & screenshotsWordPress & editorial
WordPress content publishing project for Epoxyworks, a technical education magazine connected to WEST SYSTEM.
Explore project & screenshotsLearning & building
Five phases of deeper email and lifecycle practice. Each pairs a learning goal with something to build. Credentials below are planned.
2016 to today
From WordPress and PHP to ecommerce, AI products, and marketing systems.
2016
Started professional web development in agency environments, building the PHP and WordPress foundation that still supports my work today.
2017 to 2018
Started connecting code with interface quality. This is where design, typography, responsive layout, and user experience became part of how I build.
2019
Founded a boutique agency and shipped client websites while learning how to scope work, communicate clearly, and deliver under real business constraints.
2020
Moved beyond websites into product workflows by building browser tooling for ecommerce operations with my brother.
2021
Worked through faster moving product surfaces, including NFT launch systems, while continuing to sharpen WordPress, PHP, and modern frontend skills.
2022
After an intense run, I burned out and traveled. That chapter matters because it changed how I think about pace, focus, and the kind of work I want to build long term.
2023 to 2024
Started exploring an answer engine startup, experimenting with local models and the OpenAI API. Learned to connect models, retrieval, data, and automation into working products while continuing WordPress, Shopify, React, and TypeScript work.
2025 to now
Brought that AI and automation experience into Light Code Labs Dashboard, my clearest portfolio example of AI connected to a working product. Built with Laravel, Inertia, React, TypeScript, PostgreSQL, and Docker, it connects captured business leads with enrichment, RAG and vector embeddings, and dynamically generated websites and content.
Today
Applying that engineering and AI foundation to email development, marketing automation, and the systems that connect a business with its customers. AI remains part of my daily workflow for exploring ideas, building software, and connecting tools.
Explore the projects here, then take a closer look at my background, technical skills, and professional experience in my resume.
A 20 minute introduction to discuss a role, your team, and the technical work you need.
