Skip to content

Commit 3bc2fb5

Browse files
glennmichael123claude
glennmichael123
and
claude
committed
feat: add achievements.stx example — single-file coach profile site
Server-rendered single .stx file for Pawel's coaching achievements page. Demonstrates: script server, @foreach with nested loops, Crosswind utilities, zero client JS. Launch with: ./stx dev examples/achievements.stx Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 582afbf commit 3bc2fb5

1 file changed

Lines changed: 149 additions & 0 deletions

File tree

‎examples/achievements.stx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<script server>
2+
const coach = {
3+
name: 'Pawel Kalinowski',
4+
title: 'Endurance Coach & Marathon Specialist',
5+
bio: 'USATF-certified distance running coach with 12+ years of experience preparing athletes for marathons, ultramarathons, and multi-sport endurance events. From first-time marathoners to Boston qualifiers.',
6+
location: 'Austin, TX',
7+
email: 'pawel@endurancelab.co',
8+
}
9+
10+
const stats = [
11+
{ value: '340+', label: 'Athletes Coached' },
12+
{ value: '92%', label: 'Race Completion Rate' },
13+
{ value: '48', label: 'Boston Qualifiers' },
14+
{ value: '12', label: 'Years Coaching' },
15+
]
16+
17+
const achievements = [
18+
{
19+
year: '2024',
20+
items: [
21+
{ title: 'Austin Marathon — 14 Athletes Qualified for Boston', description: 'Largest single-race BQ group in program history. Average improvement of 18 minutes over previous PR.' },
22+
{ title: 'Coached First Sub-3:00 Female Marathoner', description: 'Sarah Chen ran 2:58:12 at Chicago Marathon after 16-month build with periodized training.' },
23+
{ title: 'Launched Group Training Program', description: 'Scaled from 1-on-1 coaching to structured group training. 60 athletes in first cohort, 94% retention.' },
24+
],
25+
},
26+
{
27+
year: '2023',
28+
items: [
29+
{ title: 'Western States 100 — 3 Finishers', description: 'All three athletes finished under 24 hours. First ultra coaching cohort.' },
30+
{ title: 'USATF Level 2 Endurance Certification', description: 'Completed advanced certification in endurance event training and periodization.' },
31+
{ title: 'Trail Running Clinic Series', description: '8-week clinic covering terrain, nutrition, and altitude. 45 participants across 3 sessions.' },
32+
],
33+
},
34+
{
35+
year: '2022',
36+
items: [
37+
{ title: 'NYC Marathon — Team of 22 Finishers', description: 'Largest team entry. 8 first-time marathoners, all finished. Average time: 4:12.' },
38+
{ title: 'Started Online Coaching Platform', description: 'Expanded beyond local Austin market. Athletes in 12 states within first 6 months.' },
39+
{ title: 'Marathon Training Guide Published', description: '16-week structured plan downloaded 5,000+ times. Featured in RunnersWorld.' },
40+
],
41+
},
42+
{
43+
year: '2021',
44+
items: [
45+
{ title: 'Return to In-Person Coaching', description: 'Post-pandemic rebuild. Grew roster from 15 to 80 athletes in 8 months.' },
46+
{ title: 'Partnered with Austin Track Club', description: 'Became official marathon prep coach. Access to track facilities and group workouts.' },
47+
],
48+
},
49+
]
50+
51+
const certifications = [
52+
'USATF Level 2 — Endurance',
53+
'RRCA Certified Running Coach',
54+
'NASM Certified Personal Trainer',
55+
'Precision Nutrition Level 1',
56+
'TrainingPeaks Certified Coach',
57+
'First Aid / CPR / AED',
58+
]
59+
60+
const specialties = [
61+
{ name: 'Marathon Prep', description: '16–20 week periodized plans for all levels' },
62+
{ name: 'Boston Qualifying', description: 'Targeted pace work and race strategy' },
63+
{ name: 'Ultra & Trail', description: '50K to 100-mile event preparation' },
64+
{ name: 'Injury Comeback', description: 'Gradual return-to-running programs' },
65+
{ name: 'First Marathon', description: 'Couch-to-marathon in 6–9 months' },
66+
{ name: 'Group Training', description: 'Structured cohorts with accountability' },
67+
]
68+
</script>
69+
70+
<div class="max-w-4xl mx-auto px-6 py-16">
71+
72+
<!-- Header -->
73+
<div class="text-center mb-16">
74+
<div class="w-24 h-24 rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 mx-auto mb-6 flex items-center justify-center text-white text-3xl font-bold shadow-lg shadow-emerald-500/20">PK</div>
75+
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">{{ coach.name }}</h1>
76+
<p class="text-lg text-emerald-600 dark:text-emerald-400 font-medium mb-3">{{ coach.title }}</p>
77+
<p class="text-gray-500 dark:text-gray-400 max-w-2xl mx-auto leading-relaxed">{{ coach.bio }}</p>
78+
<div class="flex items-center justify-center gap-4 mt-4 text-sm text-gray-400 dark:text-gray-500">
79+
<span>{{ coach.location }}</span>
80+
<span>&middot;</span>
81+
<a href="mailto:{{ coach.email }}" class="text-emerald-600 dark:text-emerald-400 hover:underline">{{ coach.email }}</a>
82+
</div>
83+
</div>
84+
85+
<!-- Stats -->
86+
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-16">
87+
@foreach (stats as stat)
88+
<div class="text-center p-5 rounded-xl bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800">
89+
<div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ stat.value }}</div>
90+
<div class="text-xs uppercase tracking-wide font-medium text-gray-500 dark:text-gray-400 mt-1">{{ stat.label }}</div>
91+
</div>
92+
@endforeach
93+
</div>
94+
95+
<!-- Specialties -->
96+
<div class="mb-16">
97+
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6">Coaching Specialties</h2>
98+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
99+
@foreach (specialties as s)
100+
<div class="p-4 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50">
101+
<div class="font-semibold text-sm text-gray-900 dark:text-white mb-1">{{ s.name }}</div>
102+
<div class="text-xs text-gray-500 dark:text-gray-400">{{ s.description }}</div>
103+
</div>
104+
@endforeach
105+
</div>
106+
</div>
107+
108+
<!-- Achievements Timeline -->
109+
<div class="mb-16">
110+
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-8">Achievements</h2>
111+
@foreach (achievements as group)
112+
<div class="mb-10">
113+
<div class="flex items-center gap-3 mb-4">
114+
<span class="text-sm font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10 px-3 py-1 rounded-full">{{ group.year }}</span>
115+
<div class="flex-1 h-px bg-gray-200 dark:bg-gray-800"></div>
116+
</div>
117+
@foreach (group.items as item)
118+
<div class="ml-4 pl-4 pb-6 border-l-2 border-gray-200 dark:border-gray-800 last:pb-0">
119+
<h3 class="font-semibold text-gray-900 dark:text-white text-sm mb-1">{{ item.title }}</h3>
120+
<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">{{ item.description }}</p>
121+
</div>
122+
@endforeach
123+
</div>
124+
@endforeach
125+
</div>
126+
127+
<!-- Certifications -->
128+
<div class="mb-16">
129+
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Certifications</h2>
130+
<div class="flex flex-wrap gap-2">
131+
@foreach (certifications as cert)
132+
<span class="px-3 py-1.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700">{{ cert }}</span>
133+
@endforeach
134+
</div>
135+
</div>
136+
137+
<!-- CTA -->
138+
<div class="text-center p-8 rounded-2xl bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 border border-emerald-200 dark:border-emerald-800/30">
139+
<h2 class="text-lg font-bold text-gray-900 dark:text-white mb-2">Ready to train?</h2>
140+
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Whether it's your first 5K or your next Boston qualifier, let's build a plan.</p>
141+
<a href="mailto:{{ coach.email }}" class="inline-block px-6 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold rounded-lg transition-colors">Get in Touch</a>
142+
</div>
143+
144+
<!-- Footer -->
145+
<div class="text-center mt-12 text-xs text-gray-400 dark:text-gray-600">
146+
Built with <a href="https://github.com/stacksjs/stx" class="hover:text-emerald-500 transition-colors">STX</a>
147+
</div>
148+
149+
</div>

0 commit comments

Comments
 (0)