Skip to content

Commit 33241f0

Browse files
theJawnnybottheJawnnybot
committed
Add blog section with first post: vibecoded app production readiness
- Create /blog/ index page with post listing - First post: '5 Things That Break When You Take a Vibecoded App to Production' - Targets keywords: vibe coding, fix vibecoded app, AI prototype production - Full BlogPosting schema for rich snippets - CTA for free project assessment - Add Blog link to main site nav (desktop + mobile) - Update sitemap with blog URLs
1 parent 0c1fcf5 commit 33241f0

File tree

4 files changed

+470
-0
lines changed

4 files changed

+470
-0
lines changed

‎blog/index.html‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Blog — Commit 451 | Software Engineering & Vibe Coding Insights</title>
7+
<meta name="description" content="Insights on mobile development, AI integration, vibe coding, and shipping production-ready software. From the team at Commit 451.">
8+
<meta name="robots" content="index, follow">
9+
<meta name="author" content="Commit 451 LLC">
10+
<meta name="keywords" content="software engineering blog, vibe coding, AI development, mobile app development, Android, iOS, production readiness">
11+
<link rel="canonical" href="https://commit451.com/blog/">
12+
<meta name="theme-color" content="#60d4c5">
13+
<meta name="color-scheme" content="dark">
14+
15+
<meta property="og:type" content="website">
16+
<meta property="og:title" content="Blog — Commit 451">
17+
<meta property="og:description" content="Insights on mobile development, AI integration, vibe coding, and shipping production-ready software.">
18+
<meta property="og:url" content="https://commit451.com/blog/">
19+
<meta property="og:image" content="https://commit451.com/images/avatar.png">
20+
<meta property="og:site_name" content="Commit 451">
21+
22+
<meta name="twitter:card" content="summary">
23+
<meta name="twitter:site" content="@Commit451">
24+
<meta name="twitter:title" content="Blog — Commit 451">
25+
<meta name="twitter:description" content="Insights on mobile development, AI integration, vibe coding, and shipping production-ready software.">
26+
27+
<link rel="icon" type="image/png" href="/favicon.png">
28+
29+
<link rel="preconnect" href="https://fonts.googleapis.com">
30+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
31+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
32+
33+
<script src="https://cdn.tailwindcss.com"></script>
34+
<script>
35+
tailwind.config = {
36+
theme: {
37+
extend: {
38+
colors: {
39+
brand: { teal: '#60d4c5', red: '#e74c3c' },
40+
dark: { 950: '#030712', 900: '#111827', 800: '#1f2937', 700: '#374151' }
41+
},
42+
fontFamily: {
43+
fira: ['"Fira Code"', 'monospace'],
44+
sans: ['Inter', 'system-ui', 'sans-serif']
45+
}
46+
}
47+
}
48+
}
49+
</script>
50+
51+
<style>
52+
html { scroll-behavior: smooth; }
53+
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
54+
</style>
55+
</head>
56+
<body class="bg-dark-950 text-gray-100 font-sans antialiased">
57+
58+
<div class="fixed inset-0 -z-10">
59+
<div class="absolute inset-0 bg-dark-950"></div>
60+
</div>
61+
62+
<!-- Navigation -->
63+
<nav class="fixed top-0 left-0 right-0 z-50 border-b border-dark-700/50 bg-dark-950/80 backdrop-blur-md">
64+
<div class="mx-auto max-w-6xl px-6 py-4 flex items-center justify-between">
65+
<a href="/" class="flex items-center gap-3 group">
66+
<img src="/images/avatar.png" alt="Commit 451 logo" width="36" height="36" class="rounded-full border border-dark-700 group-hover:border-brand-teal transition-colors">
67+
<span class="font-fira font-bold text-lg text-white group-hover:text-brand-teal transition-colors">Commit 451</span>
68+
</a>
69+
<div class="hidden sm:flex items-center gap-8 text-sm font-medium">
70+
<a href="/#work" class="text-gray-400 hover:text-brand-teal transition-colors">Work</a>
71+
<a href="/#about" class="text-gray-400 hover:text-brand-teal transition-colors">About</a>
72+
<a href="/blog/" class="text-brand-teal transition-colors">Blog</a>
73+
<a href="/#contact" class="rounded-lg border border-brand-teal/60 px-4 py-2 text-brand-teal hover:bg-brand-teal/10 transition-all">Contact</a>
74+
</div>
75+
</div>
76+
</nav>
77+
78+
<main class="pt-28 pb-24 px-6">
79+
<div class="mx-auto max-w-4xl">
80+
81+
<header class="text-center mb-16">
82+
<p class="text-sm font-fira font-bold text-brand-teal uppercase tracking-widest">Blog</p>
83+
<h1 class="mt-4 text-3xl sm:text-4xl font-bold tracking-tight text-white">Insights & Engineering Notes</h1>
84+
<p class="mt-4 text-lg text-gray-400 max-w-2xl mx-auto">
85+
Practical takes on mobile development, AI integration, vibe coding, and shipping software that actually works.
86+
</p>
87+
</header>
88+
89+
<!-- Post List -->
90+
<div class="space-y-8">
91+
92+
<!-- Post 1 -->
93+
<a href="/blog/vibecoded-app-production-ready/" class="block group rounded-2xl border border-dark-700/60 bg-dark-900/70 backdrop-blur-sm p-8 hover:border-brand-teal/40 transition-all duration-300">
94+
<div class="flex flex-wrap gap-2 mb-3">
95+
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Vibe Coding</span>
96+
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Production Readiness</span>
97+
</div>
98+
<h2 class="font-fira text-xl sm:text-2xl font-bold text-white group-hover:text-brand-teal transition-colors">
99+
5 Things That Break When You Take a Vibecoded App to Production
100+
</h2>
101+
<p class="mt-3 text-gray-400 leading-relaxed">
102+
Built an app with Cursor, Copilot, or Claude? It works on your machine. Here's what happens when real users find it — and how to fix the five most common issues before launch.
103+
</p>
104+
<div class="mt-4 flex items-center gap-3 text-sm text-gray-500">
105+
<time datetime="2026-03-12">March 12, 2026</time>
106+
<span>·</span>
107+
<span>8 min read</span>
108+
</div>
109+
</a>
110+
111+
</div>
112+
113+
</div>
114+
</main>
115+
116+
<!-- Footer -->
117+
<footer class="border-t border-dark-700/50 bg-dark-950/80 backdrop-blur-sm">
118+
<div class="mx-auto max-w-6xl px-6 py-8">
119+
<div class="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
120+
<p class="text-sm text-gray-500">&copy; 2026 Commit 451 LLC. All rights reserved.</p>
121+
<nav class="flex gap-6 text-sm" aria-label="Footer navigation">
122+
<a href="https://commit451.com/privacy" class="text-gray-500 hover:text-brand-teal transition-colors">Privacy</a>
123+
<a href="https://commit451.com/terms" class="text-gray-500 hover:text-brand-teal transition-colors">Terms</a>
124+
<a href="https://commit451.com/account-deletion" class="text-gray-500 hover:text-brand-teal transition-colors">Account Deletion</a>
125+
</nav>
126+
</div>
127+
</div>
128+
</footer>
129+
</body>
130+
</html>

0 commit comments

Comments
 (0)