Laravel, React & TypeScript
Light Code Labs
Built an integrated lead generation and marketing automation platform connecting lead capture, enrichment, CRM workflows, website previews, chatbot knowledge retrieval, and automated follow-up.
ExploreI build websites, apps, and connected workflows.
I'm Kelvin, a full stack developer with 10 years building websites, applications, and connected workflows with PHP, Laravel, and React. I care about form and function together: practical systems, thoughtful interfaces, and the details that make software look good and feel intuitive to use.
Selected work
Light Code Labs
Laravel, React & TypeScriptA Laravel platform connecting lead capture, enrichment, CRM workflows, and automated follow-up.
-
Laravel -
React -
TypeScript -
PostgreSQL -
Docker
Field Letter
Email & lifecycleA controlled HubSpot lifecycle, from capture and consent to nurture and sales handoff.
-
HubSpot - TypeScript
-
MJML - HubL
- HTML email
SunnySide 24/7 AC
WordPress & technical SEOCustom WordPress platform built with PHP, ACF Pro, and reusable content templates to support 487+ localized service pages.
-
WordPress -
PHP - ACF Pro
Innovative Research
Shopify & ecommerceShopify storefront work for a biological research supplier, focused on responsive ecommerce design, product discovery, intuitive navigation, and trust-building content.
-
Shopify
Field Letter: Speed to Lead
Automation & integrationsA controlled Zapier lead response workflow connecting HubSpot qualification and consent to scoped opportunities, Slack alerts and independently received Gmail acknowledgments.
-
Zapier - HubSpot
-
Gmail -
Slack - TypeScript
- PostgreSQL
- Docker
What I bring to your team.
01
Websites & ecommerce
Responsive websites and storefronts with thoughtful layouts, clear content hierarchy, and practical paths to the next step.
02
Applications & integrations
Custom applications that connect thoughtful interfaces with reliable databases, APIs, and background workflows.
03
Marketing Technology & AI Automation
Lead capture, CRM workflows, n8n automation, and email development built on a full stack foundation.
The toolkit behind the work.
PHP, Laravel, React, and WordPress form my development foundation. Building direct HubSpot and Klaviyo experience alongside that work.
-
Figma -
Sketch -
Photoshop -
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
Experience that carries forward.
- Building for the web since
- 2016
- Years with PHP, Laravel & MySQL
- 7+
- Client websites supported at Perfect Afternoon
- More than 50
- Localized SunnySide service pages
- 487+
Websites & applications
The engineering behind the marketing. Selected work across WordPress, Shopify, WooCommerce, and custom applications.
Shopify & ecommerce
Innovative Research
Shopify storefront work for a biological research supplier, focused on responsive ecommerce design, product discovery, intuitive navigation, and trust-building content.
Explore
WordPress & technical SEO
SunnySide 24/7 AC
Custom WordPress platform built with PHP, ACF Pro, and reusable content templates to support 487+ localized service pages.
Explore
WordPress & editorial
Epoxyworks
WordPress content publishing project for Epoxyworks, a technical education magazine connected to WEST SYSTEM.
ExploreMore work to explore
All work
Invoice and receipt processor
Automation & integrationsWorkflow concept, not a runtime capture.
I built a TypeScript document workflow that validates extracted fields, holds uncertain receipts for review and reconciles accounting writes before replay.
Implemented-
Trigger.dev - TypeScript
- Apple Vision
- Poppler
Review Monitor
Automation & integrationsWorkflow diagram from the project evidence.
Real reviews become traceable support tasks and recurring themes, with every public response kept under human control.
Implemented- n8n
- Node.js
- PostgreSQL
- HubSpot
Woody’s Traction
WooCommerce & ecommerce UXWordPress and WooCommerce ecommerce work for a powersports brand.
Professional work- WordPress
-
WooCommerce
John E. Green
WordPress maintenance & performanceWordPress maintenance and performance optimization for a mechanical contracting and fire suppression company.
Professional work- WordPress
-
PageSpeed Insights
DiSC Profiles 4u
WooCommerce & product educationWordPress and WooCommerce ecommerce project for a professional assessment and training brand.
Professional work- WordPress
- WooCommerce
Cottage Inn
Restaurant websiteWebsite work for Cottage Inn Gourmet Pizza, bringing menu discovery, deals, catering, locations, and online ordering entry points together.
Professional work- WordPress
No projects in this category.
Marketing technology, connected to the product
Explore email development and a controlled lifecycle implementation alongside my web and application work.
Marketing technology & CRM
Connected capture, consent, nurture and ecommerce journeys.
Field Letter: Customer Lifecycle System
A HubSpot developer-account implementation connecting tagged lead capture, consent, responsive email, native nurture, automatic sales handoff, native scoring, A/B testing and reporting. Inspect the controlled execution, reliability tests and actual email artifacts.
Explore
Morning Beam Coffee: Ecommerce Lifecycle
A Shopify and Klaviyo customer journey connecting consent, checkout recovery, purchase context, and responsive email, verified with controlled test recipients.
ExploreAI automations
Human review, connected outputs and recoverable processing.
Zapier · HubSpot · Saved controlled evidence
Field Letter: Speed to Lead
A controlled Zapier lead response workflow connecting HubSpot qualification and consent to scoped opportunities, Slack alerts and independently received Gmail acknowledgments.
Five original replies received, four within 60 seconds. Both later public-demo replies missed the target. No business lift measured.
Explore
Support inbox triage
A controlled support workflow that turns Gmail requests into HubSpot tickets, unsent reply drafts and urgent Slack alerts, with a person in control of sending.
Connected tests verified tickets, unsent drafts and an urgent alert. Follow-up reused its ticket and preserved a reviewer-edited reply.
Explore
Brand voice email checker
- Reusable review skill
- Brand profiles
- HTML
- Python
Catch off-brand email wording before approval, with clear fixes a marketing manager can review.
See the pushy wording beside the approved revision, and how the checker protects the offer while suggesting changes.
ExploreEmail development
Responsive messages, personalization and inspectable source.
Welcome
Your Lead Response Checklist
Checklist delivery and a practical first review.
- Responsive strategy
- MJML responsive email
- Actual Field Letter lifecycle template
- HubL personalization and fallback
- Controlled developer-account project
Source
Compact indentation for easier reading.
<!--
templateType: email
isAvailableForNewContent: true
label: Field Letter Automation | welcome
-->
<!doctype html>
<html lang="en" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Your Lead Response Checklist</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 { width:100% !important; max-width: 100%; }
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
</style>
<style type="text/css">
@media only screen and (max-width:479px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}
</style>
<style type="text/css">
@media only screen and (max-width:480px) { .headline div { font-size:34px !important; line-height:39px !important; } }
</style>
</head>
<body style="word-spacing:normal;background-color:#e9efec;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Five checks for a clearer path from enquiry to appointment.</div>
<div aria-label="Your Lead Response Checklist" aria-roledescription="email" role="article" lang="en" dir="auto" style="word-spacing:normal;background-color:#e9efec;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:24px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:26px;text-align:center;color:#52605d;">Practical notes on lead response for home service teams</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#fffdf8" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#fffdf8;background-color:#fffdf8;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#fffdf8;background-color:#fffdf8;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:28px 28px 24px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:544px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Georgia, Times New Roman, serif;font-size:26px;line-height:32px;text-align:left;color:#153a2a;">Field Letter</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:11px;letter-spacing:2px;line-height:26px;text-align:left;color:#52605d;">AUTOMATION</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#244c3b" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#244c3b;background-color:#244c3b;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#244c3b;background-color:#244c3b;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:30px 28px 34px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:544px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:0;padding-bottom:16px;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:11px;letter-spacing:1px;line-height:26px;text-align:left;color:#e1eadc;">YOUR CHECKLIST · FIELD NOTES 01</div>
</td>
</tr>
<tr>
<td align="left" class="headline" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Georgia, Times New Roman, serif;font-size:42px;line-height:47px;text-align:left;color:#ffffff;">Give every enquiry a next step.</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:600px;">
<img alt="A home service technician and coordinator reviewing a job handoff" src="/images/work/field-letter/home-service-handoff.jpg" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600" height="auto">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:32px 28px 24px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:544px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:0;padding-bottom:16px;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:26px;text-align:left;color:#263c39;">Hi there,</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:26px;text-align:left;color:#263c39;">Your checklist is ready. Use it to follow five recent enquiries from the first message to the appointment handoff. You do not need to change tools to start.</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0 28px 12px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:544px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Georgia, Times New Roman, serif;font-size:27px;line-height:34px;text-align:left;color:#153a2a;">Start with five recent enquiries</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:16px 28px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:544px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0 0 16px;word-break:break-word;">
<p style="border-top:solid 1px #d4ded4;font-size:1px;margin:0px auto;width:100%;">
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #d4ded4;font-size:1px;margin:0px auto;width:544px;" role="presentation" width="544px" ><tr><td style="height:0;line-height:0;">
</td></tr></table><![endif]-->
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;padding-bottom:5px;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:26px;text-align:left;color:#52605d;">01</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;padding-bottom:6px;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;line-height:26px;text-align:left;color:#263c39;">Find the source</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:26px;text-align:left;color:#263c39;">Could you tell where each enquiry came from and what the customer needed?</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:16px 28px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:544px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0 0 16px;word-break:break-word;">
<p style="border-top:solid 1px #d4ded4;font-size:1px;margin:0px auto;width:100%;">
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #d4ded4;font-size:1px;margin:0px auto;width:544px;" role="presentation" width="544px" ><tr><td style="height:0;line-height:0;">
</td></tr></table><![endif]-->
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;padding-bottom:5px;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:26px;text-align:left;color:#52605d;">02</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;padding-bottom:6px;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;line-height:26px;text-align:left;color:#263c39;">Name the owner</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:26px;text-align:left;color:#263c39;">Was one person responsible for the next response, with a clear fallback when they were unavailable?</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:16px 28px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:544px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0 0 16px;word-break:break-word;">
<p style="border-top:solid 1px #d4ded4;font-size:1px;margin:0px auto;width:100%;">
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #d4ded4;font-size:1px;margin:0px auto;width:544px;" role="presentation" width="544px" ><tr><td style="height:0;line-height:0;">
</td></tr></table><![endif]-->
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;padding-bottom:5px;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:26px;text-align:left;color:#52605d;">03</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;padding-bottom:6px;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;line-height:26px;text-align:left;color:#263c39;">Follow the handoff</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:26px;text-align:left;color:#263c39;">Could the next person see the last conversation, next action and appointment details?</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:16px 28px 28px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:544px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="background-color:#f1f2e9;vertical-align:top;padding:20px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:24px;text-align:left;color:#263c39;">The full checklist also covers response expectations and outcome visibility. A blank answer is a useful place to start, not a reason to buy another tool.</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0 28px 16px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:544px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tbody>
<tr>
<td align="center" bgcolor="#244c3b" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:16px 24px;background:#244c3b;" valign="middle">
<a href="https://247794066.hs-sites-na2.com/en/lead-response-checklist?utm_source=hubspot&utm_medium=email&utm_campaign=lead_response_welcome" style="display: inline-block; background: #244c3b; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; line-height: 120%; margin: 0; text-decoration: none; text-transform: none; padding: 16px 24px; mso-padding-alt: 0px; border-radius: 4px;" target="_blank">
Open your checklist
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0 28px 32px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:544px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:21px;text-align:left;color:#52605d;">The checklist is available regardless of marketing permission.</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;padding-top:24px;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:26px;text-align:left;color:#263c39;">Field Letter Automation<br>Lead response systems for home service businesses.</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:24px 28px 32px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:544px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="left" class="footer" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:20px;text-align:left;color:#52605d;">Simulated postal footer<br>Field Letter Automation<br>100 Example Lane<br>Demo City, ZZ 00000<br>Fictional location<br><br><a href="https://kelvinperez.com/work/hubspot-growth-engine/#project-gallery" style="color: #52605d; text-decoration: underline;">Preference center demonstration (portfolio evidence)</a><br><br>Fictional portfolio company in a developer test environment. Illustrative photography. You are receiving this message as part of a controlled test.</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>Text
Your Lead Response Checklist Hi there, Your checklist is ready. Use it to follow five recent enquiries from the first message to the appointment handoff. You do not need to change tools to start. Start with five recent enquiries 1. Find the source Could you tell where each enquiry came from and what the customer needed? 2. Name the owner Was one person responsible for the next response, with a clear fallback when they were unavailable? 3. Follow the handoff Could the next person see the last conversation, next action and appointment details? The full checklist also covers response expectations and outcome visibility. A blank answer is a useful place to start, not a reason to buy another tool. Open your checklist https://247794066.hs-sites-na2.com/en/lead-response-checklist?utm_source=hubspot&utm_medium=email&utm_campaign=lead_response_welcome Simulated postal footer Field Letter Automation 100 Example Lane Demo City, ZZ 00000 Fictional location Preference center demonstration (portfolio evidence): https://kelvinperez.com/work/hubspot-growth-engine/#project-gallery Fictional developer-test company.
Static preview from the Field Letter lifecycle template. The source view shows this resolved fixture; original HubSpot source is available in the gallery.
A decade in the making.
2016 to today
From WordPress and PHP to ecommerce, AI products, and marketing systems.
-
2016
WordPress and PHP foundation
Started professional web development in agency environments, building the PHP and WordPress foundation that still supports my work today.
- Custom WordPress themes and client websites
- PHP, CSS, jQuery, Git, and production CMS work
- Collaboration with designers, marketers, and business owners
-
2017 to 2018
Interface design and frontend craft
This is where I began honing my eye for design. Working with Photoshop, Sketch, and Figma, I studied UI/UX fundamentals and became more intentional about how an interface looks, communicates, and feels to use.
- Advanced Custom Fields and structured WordPress content
- UI/UX design, color theory, typography, and visual hierarchy
- Responsive layouts, spacing, feedback, and interaction details
- Modern JavaScript, Sass, reusable components, and page systems
-
2019
ViViFi agency work
Founded a boutique agency and shipped client websites while learning how to scope work, communicate clearly, and deliver under real business constraints.
- WordPress builds for small businesses and creatives
- Client communication, revisions, launch work, and support
- Reusable starter patterns for faster delivery
-
2020
Chrome extension product work
Moved beyond websites into product workflows by building browser tooling for ecommerce operations with my brother.
- Chrome extension development
- Browser automation workflows tied to business operations
- Early product thinking around subscriptions, onboarding, and support
-
2021
Light Code Labs and NFT systems
Worked through faster moving product surfaces, including NFT launch systems, while continuing to sharpen WordPress, PHP, and modern frontend skills.
- Technical systems for high traffic launch moments
- Light Code Labs as the ongoing studio identity
- React, TypeScript, and product architecture exploration
-
2022
Burnout, travel, and reset
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.
- Travel through Peru, Thailand, Cambodia, Laos, and India
- A reset around health, discipline, and direction
- A clearer preference for useful product work over hype cycles
- Began experimenting with generative AI in late 2022
-
2023 to 2024
Applied AI and product exploration
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.
- Retrieval augmented generation (RAG), vector embeddings, and vector databases
- Voice agent prototypes and visual automation workflows with n8n
- Connecting APIs, retrieval, and business data into useful product workflows
- Continued ecommerce, WordPress performance, and local SEO work
- By late 2024, increasingly used ChatGPT and terminal workflows to turn ideas into working software
-
2025 to now
Laravel platforms and AI product systems
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.
- Laravel dashboard, queues, jobs, policies, and product workflows
- Chrome extension lead capture feeding the Laravel application
- Docker, staging, production, Hetzner hosting, and operational tooling
- ChatGPT, terminal based coding tools, and specification driven implementation
- Local tools and prototypes alongside ongoing agent and integration experiments
-
Today
Email and marketing automation
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.
- Responsive HTML email development
- Agent workflows, specification driven development, and review of the resulting code
- Inspectable work and clear technical decisions
- A continued focus on useful, maintainable systems
My experience, in one place.
Explore 10 years of development experience, combining responsive interfaces with applications, ecommerce, integrations, and automation.
Let's talk about your team.
A short introduction to discuss the role and the work you need.