Skip to content

Commit 8b7de59

Browse files
tstrombergtstromberg
committed
groove-cards
1 parent 002f1b9 commit 8b7de59

File tree

6 files changed

+102
-88
lines changed

6 files changed

+102
-88
lines changed

‎src/about.njk‎

Lines changed: 37 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,61 @@
11
---
22
layout: base.njk
3-
title: The Band Behind the Groove
4-
description: Meet the team turning developer tools into instruments of pure productivity.
3+
title: Simple tools. Pure groove.
4+
description: Developer tools that amplify without getting in the way.
55
---
66

7-
<section class="page-header">
7+
<section class="hero" style="min-height: auto; padding: 6rem 0;">
88
<div class="container">
9-
<h1>Meet the Band</h1>
10-
<p class="tagline">Every great groove needs passionate musicians</p>
9+
<div class="hero-content">
10+
<h1 style="font-size: clamp(3rem, 8vw, 5rem); margin-bottom: 2rem;">We make coding feel like music again.</h1>
11+
<p class="tagline" style="font-size: 1.5rem; max-width: 700px; margin: 0 auto 3rem;">
12+
After 30 years in open source, one thing remains clear: Great tools disappear so developers can shine.
13+
</p>
14+
</div>
1115
</div>
1216
</section>
1317

14-
<section class="container">
15-
<div class="content-section" style="max-width: 800px; margin: 0 auto;">
16-
<p style="font-size: 1.5rem; line-height: 1.8; font-weight: 500; margin-bottom: 2rem; text-align: center; color: var(--color-accent);">
17-
<span aria-hidden="true">🎸</span> Remember when coding felt like jamming with your favorite band?
18-
</p>
19-
20-
<p style="font-size: 1.25rem; line-height: 1.8; margin-bottom: 3rem;">
21-
That feeling when everything just <em>flows</em>—your editor knows what you're thinking, your tools disappear into the background, and you're shipping features at the speed of inspiration. That's the groove we're bringing back.
22-
</p>
23-
24-
<div style="display: flex; align-items: center; gap: 3rem; margin-bottom: 3rem; flex-wrap: wrap;">
25-
<img src="/media/founder.jpg" alt="Thomas Stromberg" style="width: 200px; height: 200px; border-radius: 50%; object-fit: cover;">
26-
<div style="flex: 1; min-width: 300px;">
27-
<h2 style="margin-bottom: 1rem;"><span aria-hidden="true">🎹</span> Thomas Strömberg, Founder</h2>
28-
<p style="font-size: 1.125rem; line-height: 1.8;">
29-
After 30 years playing in the open source orchestra—from FreeBSD's early days to Kubernetes' main stage—I've learned what makes developers dance. Built Triage Party and malcontent because sometimes you gotta write your own sheet music.
30-
</p>
31-
<p style="font-size: 1.125rem; line-height: 1.8; margin-top: 1rem;">
32-
Former tours include: Google (datacenter automation), Equinix (open-source leadership), and Chainguard (founding the security band). Now? Helping every developer find their rhythm.
33-
</p>
34-
</div>
35-
</div>
36-
37-
<div style="background: #f8f8f8; padding: 2rem; border-radius: 16px; margin: 3rem 0;">
38-
<h2 style="font-size: 2rem; margin-bottom: 1.5rem; text-align: center; color: var(--color-accent);"><span aria-hidden="true">🎵</span> The codeGROOVE Sound</h2>
39-
<p style="font-size: 1.25rem; line-height: 1.8; text-align: center; margin-bottom: 0; font-weight: 500;">
40-
Simple, not complex. Flow, not friction.
18+
<section class="container" style="padding: 4rem 0;">
19+
<div style="max-width: 900px; margin: 0 auto;">
20+
<div style="text-align: center; margin-bottom: 5rem;">
21+
<img src="/media/founder.jpg" alt="Thomas Stromberg" style="width: 180px; height: 180px; border-radius: 50%; object-fit: cover; margin-bottom: 2rem;">
22+
<h2 style="font-size: 2rem; margin-bottom: 1.5rem; font-weight: 600;">Thomas Strömberg, Founder</h2>
23+
<p style="font-size: 1.375rem; line-height: 1.8; color: var(--color-gray-dark); max-width: 700px; margin: 0 auto;">
24+
From FreeBSD's early days to Kubernetes' main stage. Built Triage Party and malcontent.
25+
Former tours: Google (making large-scale computing trivial), Equinix, Chainguard. Now helping every developer find their rhythm through tools that respect craftsmanship.
4126
</p>
4227
</div>
4328

44-
<h2 style="text-align: center; margin: 3rem 0 2rem; font-size: 2.5rem;">Why Developers Trust the Groove</h2>
45-
<div class="funk-divider"></div>
46-
47-
<div class="feature-grid" style="margin: 3rem 0;">
48-
<div class="card" style="text-align: center;">
49-
<div style="font-size: 3rem; margin-bottom: 1rem;" aria-hidden="true">🏆</div>
50-
<h3>30 Years of Open Source</h3>
51-
<p>From FreeBSD to Firefox to Kubernetes. We've been in the band since the beginning.</p>
29+
<div class="feature-grid" style="margin: 4rem 0;">
30+
<div class="card groove-card">
31+
<h3 style="font-size: 1.5rem; margin-bottom: 1rem;">🏆 Battle-Tested</h3>
32+
<p>30 years building tools that actually ship. From datacenter automation at Google to founding teams at Chainguard.</p>
5233
</div>
53-
<div class="card" style="text-align: center;">
54-
<div style="font-size: 3rem; margin-bottom: 1rem;" aria-hidden="true">🚀</div>
55-
<h3>Battle-Tested at Scale</h3>
56-
<p>Google. Chainguard. Equinix. We've performed on the biggest stages in tech.</p>
34+
<div class="card groove-card">
35+
<h3 style="font-size: 1.5rem; margin-bottom: 1rem;">🎵 Philosophy</h3>
36+
<p>Empathy, purpose, and craftsmanship. Tools should amplify human capability without getting in the way. Less process, more pride.</p>
5737
</div>
58-
<div class="card" style="text-align: center;">
59-
<div style="font-size: 3rem; margin-bottom: 1rem;" aria-hidden="true">🛠️</div>
60-
<h3>Tools That Actually Ship</h3>
61-
<p>Triage Party. malcontent. Real tools solving real problems for thousands of developers.</p>
38+
<div class="card groove-card">
39+
<h3 style="font-size: 1.5rem; margin-bottom: 1rem;">🚀 Impact</h3>
40+
<p>Thousands of developers use our tools daily. Because life's too short for bad developer experience.</p>
6241
</div>
63-
<div class="card" style="text-align: center;">
64-
<div style="font-size: 3rem; margin-bottom: 1rem;" aria-hidden="true">💡</div>
65-
<h3>AI-Powered, Human-Centered</h3>
66-
<p>We're riding the AI wave to amplify what small teams can accomplish—without the hype.</p>
42+
<div class="card groove-card">
43+
<h3 style="font-size: 1.5rem; margin-bottom: 1rem;">🎸 Vision</h3>
44+
<p>Software engineers at heart are craftspeople. We build tools that let developers be proud of what they create, throughout their career.</p>
6745
</div>
6846
</div>
6947

70-
<div style="background: var(--color-primary-soft); padding: 3rem; border-radius: 16px; margin: 3rem 0; text-align: center;">
71-
<h2 style="font-size: 2.5rem; margin-bottom: 1.5rem; color: var(--color-secondary);">
72-
"Time is your most limited resource"
73-
</h2>
74-
<p style="font-size: 1.5rem; line-height: 1.8; margin-bottom: 2rem; font-weight: 500;">
75-
We exist to save it. Less debugging. More shipping. More groove.
48+
<div style="background: var(--color-primary-soft); padding: 3rem; border-radius: var(--border-radius-large); text-align: center; margin: 4rem 0;">
49+
<p style="font-size: 2rem; font-weight: 600; margin-bottom: 1rem; color: var(--color-secondary);">
50+
"Time is your most limited resource."
7651
</p>
77-
<p style="font-size: 1.25rem; line-height: 1.8; margin-bottom: 0;">
78-
<strong>Because life's too short for bad developer tools.</strong>
52+
<p style="font-size: 1.375rem; line-height: 1.8;">
53+
We exist to save it. Because the best way to motivate developers is with empathy, purpose, and a sense of craftsmanship—not excessive process and deadlines.
7954
</p>
8055
</div>
8156

82-
<div style="text-align: center; padding: 4rem 0;">
83-
<h2 style="font-size: 2.5rem; margin-bottom: 1.5rem; color: var(--color-accent);">
84-
Ready to Join the Band? <span aria-hidden="true">🎸</span>
85-
</h2>
86-
<p style="font-size: 1.5rem; margin-bottom: 2rem; font-weight: 500;">
87-
Let's turn your development chaos into pure harmony.
88-
</p>
89-
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
90-
<a href="/products/" class="cta-button">See Our Instruments</a>
91-
<a href="/contact/" class="cta-button" style="background: var(--color-accent); color: white;">Start Jamming</a>
92-
</div>
57+
<div style="text-align: center;">
58+
<a href="/contact/" class="cta-button" style="font-size: 1.25rem; padding: 1rem 3rem;">Find Your Groove</a>
9359
</div>
9460
</div>
9561
</section>

‎src/contact.njk‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,29 +23,29 @@ description: Ready to turn your dev chaos into pure harmony? Drop us a line!
2323
</div>
2424

2525
<div class="feature-grid" style="margin-bottom: 3rem;">
26-
<div class="card text-center">
26+
<div class="card groove-card text-center">
2727
<div style="font-size: 2.5rem; margin-bottom: 1rem;">🚀</div>
2828
<h3>See a Demo</h3>
2929
<p>Watch how Ready to Review turns your PR chaos into collaborative flow. Real-time reviews that actually save time.</p>
3030
</div>
31-
<div class="card text-center">
31+
<div class="card groove-card text-center">
3232
<div style="font-size: 2.5rem; margin-bottom: 1rem;">🎯</div>
3333
<h3>Discuss Your Workflow</h3>
3434
<p>Every team has unique challenges. Tell us what's slowing you down and we'll show you the path to 10x velocity.</p>
3535
</div>
36-
<div class="card text-center">
36+
<div class="card groove-card text-center">
3737
<div style="font-size: 2.5rem; margin-bottom: 1rem;">🔒</div>
3838
<h3>Enterprise & Compliance</h3>
3939
<p>SOC 2? ISO 27001? We speak compliance fluently and build security into everything. Let's talk requirements.</p>
4040
</div>
41-
<div class="card text-center">
41+
<div class="card groove-card text-center">
4242
<div style="font-size: 2.5rem; margin-bottom: 1rem;">🤝</div>
4343
<h3>Partnership Opportunities</h3>
4444
<p>Building something complementary? Let's explore how we can amplify each other's impact.</p>
4545
</div>
4646
</div>
4747

48-
<div style="background: var(--color-primary-soft); padding: 3rem; border-radius: 16px; text-align: center; margin-bottom: 3rem;">
48+
<div class="groove-card" style="background: var(--color-primary-soft); padding: 3rem; text-align: center; margin-bottom: 3rem;">
4949
<h2 style="font-size: 2rem; margin-bottom: 2rem; color: var(--color-secondary);">Ready to Start the Conversation?</h2>
5050
<a href="#" class="cta-button" onclick="sendEmail(); return false;" style="font-size: 1.25rem; padding: 1rem 2.5rem;">
5151
🎤 Drop the Beat

‎src/css/main.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -455,6 +455,54 @@ a:hover {
455455
overflow: hidden;
456456
}
457457

458+
/* Unified Groove Card - Monochrome Funky Style */
459+
.groove-card {
460+
background: var(--color-white);
461+
border: 3px solid var(--color-secondary);
462+
border-bottom: 6px solid var(--color-secondary);
463+
border-right: 6px solid var(--color-secondary);
464+
border-radius: 0; /* Sharp corners for funky look */
465+
padding: calc(var(--spacing-unit) * 2.5);
466+
box-shadow: 6px 6px 0 var(--color-secondary); /* Hard black shadow */
467+
transition: all 0.2s ease;
468+
position: relative;
469+
overflow: visible; /* Allow elements to break bounds */
470+
}
471+
472+
.groove-card:hover {
473+
transform: translate(-2px, -2px);
474+
box-shadow: 8px 8px 0 var(--color-secondary);
475+
}
476+
477+
/* Optional: Add slight rotation for extra funkiness */
478+
.groove-card:nth-child(odd) {
479+
transform: rotate(-0.5deg);
480+
}
481+
482+
.groove-card:nth-child(even) {
483+
transform: rotate(0.5deg);
484+
}
485+
486+
.groove-card:nth-child(odd):hover {
487+
transform: rotate(-0.5deg) translate(-2px, -2px);
488+
}
489+
490+
.groove-card:nth-child(even):hover {
491+
transform: rotate(0.5deg) translate(-2px, -2px);
492+
}
493+
494+
/* Groove card typography enhancements */
495+
.groove-card h3 {
496+
font-family: var(--font-primary);
497+
font-size: 1.5rem;
498+
font-weight: 700;
499+
margin-bottom: 1rem;
500+
}
501+
502+
.groove-card p {
503+
line-height: 1.7;
504+
}
505+
458506
.card::before {
459507
content: '';
460508
position: absolute;

‎src/open-source.njk‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,19 @@ description: Real tools for real developers. Always open, always free.
1818
</p>
1919

2020
<div class="feature-grid mt-4">
21-
<div class="card">
21+
<div class="card groove-card">
2222
<h3>🚀 For Contributors</h3>
2323
<p>Fix that annoying bug. Add that missing feature. Your contributions ship to production, not into a black hole. Integrate with your existing CI/CD workflows.</p>
2424
</div>
25-
<div class="card">
25+
<div class="card groove-card">
2626
<h3>🏢 For Enterprises</h3>
2727
<p>Complete source code access for security audits. Deploy in air-gapped environments. Customize to match your compliance requirements.</p>
2828
</div>
29-
<div class="card">
29+
<div class="card groove-card">
3030
<h3>🛡️ For Open Source Projects</h3>
3131
<p>No more commercial tools pulling the rug out with license changes. Fork and self-host if needed. Community governance where your voice matters.</p>
3232
</div>
33-
<div class="card">
33+
<div class="card groove-card">
3434
<h3>🔍 For Everyone</h3>
3535
<p>Debug that weird edge case by reading the source. Learn from battle-tested code. Trust what you can verify. Tools that outlive their creators.</p>
3636
</div>

‎src/products.njk‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ description: Real-time code reviews that preserve your flow state. Friendly robo
1414
<section class="container">
1515
<div class="content-section" style="max-width: 700px; margin: 0 auto; text-align: center;">
1616

17-
<div style="background: white; border: 4px solid black; border-bottom: 8px solid black; border-right: 8px solid black; box-shadow: 8px 8px 0 black; padding: 60px 40px; margin-bottom: 50px; transform: rotate(-0.5deg);">
17+
<div class="groove-card" style="padding: 60px 40px; margin-bottom: 50px; max-width: 100%;">
1818

1919
<h2 style="font-size: 2.8rem; margin-bottom: 30px; line-height: 1.2;">
2020
Real-time reviews.<br>
21-
<span style="background: #ffff00; padding: 0 10px;">Zero friction.</span>
21+
<span style="background: var(--color-primary); padding: 0 10px;">Zero friction.</span>
2222
</h2>
2323

2424
<p style="font-size: 1.4rem; line-height: 1.8; margin-bottom: 40px;">
@@ -40,7 +40,7 @@ description: Real-time code reviews that preserve your flow state. Friendly robo
4040

4141
<div style="margin: 60px 0;">
4242
<p style="font-size: 1.6rem; font-weight: bold; margin-bottom: 10px;">
43-
<span style="background: #ffff00; padding: 5px 15px; border: 3px solid black; display: inline-block; transform: skew(-2deg);">
43+
<span style="background: var(--color-primary); padding: 5px 15px; border: 3px solid var(--color-secondary); display: inline-block; transform: skew(-2deg);">
4444
Coming Soon
4545
</span>
4646
</p>

‎src/security.njk‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ description: Security that amplifies your development without getting in the way
2525
This isn't ideology—it's what we've observed across thousands of projects. Many eyeballs make all bugs shallow, but only when those eyes can actually comprehend what they're seeing.
2626
</p>
2727

28-
<div class="card" style="margin-bottom: 3rem; background: var(--color-gray-light);">
28+
<div class="groove-card" style="margin-bottom: 3rem;">
2929
<h2 style="color: var(--color-secondary); margin-bottom: 1.5rem;">🛡️ Found Something? Let's Fix It Together</h2>
3030
<p style="margin: 1.5rem 0; font-size: 1.125rem;">We believe in transparent security. If you've discovered a vulnerability, we want to hear from you—and we'll work with you to fix it fast.</p>
3131
<div style="display: grid; gap: 1rem; margin-top: 2rem;">
@@ -39,19 +39,19 @@ description: Security that amplifies your development without getting in the way
3939
<div class="funk-divider"></div>
4040

4141
<div class="feature-grid" style="margin-top: 3rem;">
42-
<div class="card">
42+
<div class="groove-card">
4343
<h3>🎸 Simple = Secure</h3>
4444
<p>Complex platforms create new problems. Our tools work like instruments—you already know how to play them. No mysterious black boxes, no vendor lock-in, just tools that do what they say.</p>
4545
</div>
46-
<div class="card">
46+
<div class="groove-card">
4747
<h3>🥁 Minimal Surface, Maximum Protection</h3>
4848
<p>We only store what's absolutely necessary for your workflow. Less data means less risk, and more time for you to focus on building instead of worrying.</p>
4949
</div>
50-
<div class="card">
50+
<div class="groove-card">
5151
<h3>🎹 Transparent by Design</h3>
5252
<p>Open architectures let your security team actually understand what's happening. When everyone can see the code, vulnerabilities get spotted and fixed faster.</p>
5353
</div>
54-
<div class="card">
54+
<div class="groove-card">
5555
<h3>🎵 Continuous Improvement</h3>
5656
<p>Security isn't a feature you ship once—it's a practice. We patch fast, communicate clearly, and keep your tools secure without disrupting your flow.</p>
5757
</div>

0 commit comments

Comments
 (0)