Josh Writing Samples
Creative Systems Sample

Coded HTML Sample Page

This sample presents a structured snippet library designed to demonstrate how content models, reusable code patterns, and preview-oriented documentation can work together. Each entry includes a snippet name, a short purpose statement, a YAML example, and a visual representation of the resulting output. The goal is to show not just code literacy, but the ability to explain technical structures clearly for broader use.

Skills Demonstrated

  • HTML and CSS implementation
  • Structured content thinking
  • Technical explanation for mixed audiences
  • UI pattern documentation and reusable snippet presentation

Repository Overview

In many content systems, examples are more useful when they are both human-readable and implementation-friendly. YAML makes it easier to show underlying structure, while visual previews help audiences understand the intended output quickly. This format is especially useful for design systems, modular content libraries, playbooks, and internal publishing frameworks.

1. Hero Banner

A prominent page opener used to establish title, framing, and initial action.

YAML Example
component: hero_banner
title: "Build Better Knowledge Systems"
subtitle: "Clear structure helps people find, use, and trust information."
button_text: "Explore Samples"
button_link: "/samples/"
theme: "green"
Rendered Preview

Build Better Knowledge Systems

Clear structure helps people find, use, and trust information.

Explore Samples

Use this when a page needs strong orientation and a clear first action.

2. Callout Panel

A visual emphasis block for notable guidance, warnings, or key ideas.

YAML Example
component: callout_panel
style: "advisory"
headline: "Start with the reader's task"
body: "Useful communication begins with what the audience is trying to accomplish."
icon: "info"
Rendered Preview
Start with the reader's task
Useful communication begins with what the audience is trying to accomplish.

Callouts create scanning anchors and help reduce missed information.

3. Tag Group

A reusable metadata display for themes, skills, labels, or categories.

YAML Example
component: tag_group
label: "Skills Demonstrated"
tags:
  - "HTML"
  - "Content Design"
  - "Documentation"
  - "Structured Writing"
Rendered Preview

Skills Demonstrated

HTML Content Design Documentation Structured Writing

Tags help readers scan intent and can reinforce taxonomy across a site.

4. Feature Card

A compact content object for highlighting one distinct idea or offering.

YAML Example
component: feature_card
title: "Editorial Workflow"
description: "A repeatable process for intake, review, layout, and publication."
link_text: "Read Framework"
link_url: "/samples/community-newsletter-framework.html"
Rendered Preview

Editorial Workflow

A repeatable process for intake, review, layout, and publication.

Read Framework

Feature cards work well in sample galleries, dashboards, and content hubs.

5. Quote Block

A styled excerpt used to reinforce tone, principle, or key language.

YAML Example
component: quote_block
quote: "Clear communication is not about making ideas smaller. It is about making them easier to reach."
attribution: "Public Communication Sample"
Rendered Preview
“Clear communication is not about making ideas smaller. It is about making them easier to reach.”
Public Communication Sample

Quote blocks can create memorable moments and break up dense explanatory text.

6. Two-Column Comparison

A side-by-side layout for contrasting states, choices, or approaches.

YAML Example
component: comparison_block
left_title: "Ad Hoc Publishing"
left_body: "Late submissions, inconsistent formatting, rushed production."
right_title: "Structured Publishing"
right_body: "Defined inputs, reusable workflows, stable release rhythm."
Rendered Preview

Ad Hoc Publishing

Late submissions, inconsistent formatting, rushed production.

Structured Publishing

Defined inputs, reusable workflows, stable release rhythm.

Comparison blocks help explain transformation, process maturity, or tradeoffs.

7. Metric Tiles

A lightweight stats display for counts, KPIs, or outcome signals.

YAML Example
component: metrics_row
metrics:
  - value: "12"
    label: "Writing Samples"
  - value: "4"
    label: "Sample Groups"
  - value: "3"
    label: "Creative Systems Pieces"
Rendered Preview

12

Writing Samples

4

Sample Groups

3

Creative Systems Pieces

Metric tiles give structure to outcome-oriented pages and portfolio summaries.

8. Action Button Set

A grouped CTA module for simple next-step navigation.

YAML Example
component: action_set
buttons:
  - text: "View Resume"
    url: "/about/resume.html"
  - text: "Read Samples"
    url: "/samples/"
  - text: "Contact Me"
    url: "/contact.html"
Rendered Preview
View Resume Read Samples Contact Me

Button sets are useful when a page should funnel visitors toward a few clear actions.

9. Process Table

A tabular pattern for step, action, and rationale.

YAML Example
component: process_table
columns:
  - "Step"
  - "Action"
  - "Reason"
rows:
  - ["Submit", "Collect content", "Creates a stable intake point"]
  - ["Review", "Edit for clarity", "Improves consistency"]
  - ["Publish", "Release issue", "Delivers value to readers"]
Rendered Preview
Step Action Reason
Submit Collect content Creates a stable intake point
Review Edit for clarity Improves consistency
Publish Release issue Delivers value to readers

Tables help when readers need both order and explanation in one view.

10. Notice Banner

A compact announcement strip for updates, deadlines, or temporary guidance.

YAML Example
component: notice_banner
message: "New writing samples are being added this month."
priority: "standard"
dismissible: false
Rendered Preview
New writing samples are being added this month.

Banners are useful for timely notices that should sit above ordinary page content.

11. Profile Card

A reusable block for author, contributor, or speaker identity display.

YAML Example
component: profile_card
name: "Josh Bechtel"
role: "Technical Writer and Content Architect"
bio: "Builds structured systems that make information easier to govern and use."
cta_text: "About Me"
cta_link: "/about.html"
Rendered Preview

Josh Bechtel

Technical Writer and Content Architect

Builds structured systems that make information easier to govern and use.

About Me

Profile cards are useful on about pages, team pages, and contributor spotlights.

12. FAQ Block

A repeatable question-and-answer model for common reader needs.

YAML Example
component: faq_item
question: "Why use YAML in examples?"
answer: "Because it makes structure visible, readable, and easier to reuse across systems."
expanded: true
Rendered Preview

Why use YAML in examples?

Because it makes structure visible, readable, and easier to reuse across systems.

FAQ blocks are useful when readers are likely to arrive with repeated questions.

Closing Note

This page is intentionally designed as both a writing sample and a coded artifact. It demonstrates the ability to present technical structures in a readable way, maintain a consistent visual system, and translate reusable content patterns into an approachable interface. The result is not just code on a page, but a documented pattern library that reflects both writing discipline and implementation skill.