Frontend Development
Pixel-perfect implementations with Astro, React, and Tailwind. Performance budgets, accessibility, and responsive design baked in.
Docs
Services01
Icon grid of services or capabilities
Live preview
What I do
End-to-end web development — from first wireframe to production deploy. I partner with designers, agencies, and founders who value quality over shortcuts.
Marketing Sites
High-converting landing pages and multi-page marketing sites. SEO-ready, CMS-connected, and easy for your team to update.
Headless CMS
Sanity, Contentful, or Markdown — structured content models, preview workflows, and editor-friendly Studio setups.
Performance & SEO
Core Web Vitals optimization, semantic markup, structured data, and sitemaps. Sites that rank and load fast.
File: src/blocks/services/Services01.astro
Icon grid of services or capabilities (sm:grid-cols-2).
Config (blocks.ts → services)
services: {
heading: "What I do",
subheading: "End-to-end web development…",
items: [
{
icon: "code",
title: "Frontend Development",
description: "Astro, React, and Tailwind…",
},
{
icon: "layout",
title: "Marketing Sites",
description: "High-converting landing pages…",
},
],
},Icon names match Icon.astro — code, layout, stack, bolt, etc.
Add to a page
---
import Services01 from "@/blocks/services/Services01.astro";
---
<Services01 />Inline:
<Services01
heading="What we offer"
items={[
{ icon: "bolt", title: "Fast delivery", description: "Ship in weeks, not months." },
]}
/>Props
| Prop | Config key | Notes |
|---|---|---|
sectionId |
— | Default "services" |
heading |
services.heading |
|
subheading |
services.subheading |
|
items |
services.items |
{ icon?, title?, description? }[] |