Skip to content

Commit d8b897e

Browse files
Technical-1claudehappy-otter
committed
Redesign OG preview image with centered layout
Match the MasterCode/NATO-trainer design style: centered content, larger text (82px title, 34px tagline), icon box, background keyword watermarks, corner brackets, and feature pills in centered rows. Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
1 parent 0ddd730 commit d8b897e

3 files changed

Lines changed: 154 additions & 149 deletions

File tree

‎.portfolio/preview.png‎

67.5 KB
Loading

‎og-gen/generate.mjs‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,9 @@ async function generateImages() {
1515
await new Promise(r => setTimeout(r, 1000));
1616

1717
const outputPath = path.join(__dirname, '..', '.portfolio', 'preview.png');
18-
const element = await page.$('.og-card');
19-
if (element) {
20-
await element.screenshot({ path: outputPath, type: 'png' });
21-
console.log('Generated: ' + outputPath);
22-
} else {
23-
console.error('Could not find .og-card element');
24-
process.exit(1);
25-
}
18+
await page.screenshot({ path: outputPath, type: 'png' });
19+
console.log('Generated: ' + outputPath);
20+
2621
await page.close();
2722
await browser.close();
2823
}

‎og-gen/og-home.html‎

Lines changed: 151 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -4,179 +4,189 @@
44
<meta charset="UTF-8">
55
<style>
66
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');
7-
* { margin: 0; padding: 0; box-sizing: border-box; }
8-
.og-card {
7+
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
html, body {
915
width: 1200px;
1016
height: 630px;
11-
background: #0a0a0f;
12-
position: relative;
17+
min-height: 630px;
18+
max-height: 630px;
19+
margin: 0;
20+
padding: 0;
1321
overflow: hidden;
22+
}
23+
24+
body {
25+
background: linear-gradient(135deg, #030712 0%, #0c1524 50%, #030712 100%);
26+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
1427
display: flex;
1528
flex-direction: column;
16-
padding: 60px 70px;
17-
font-family: 'Inter', system-ui, sans-serif;
29+
align-items: center;
30+
justify-content: center;
31+
position: relative;
1832
}
19-
.og-card::before {
20-
content: '';
33+
34+
/* Background keywords - left side */
35+
.bg-words {
2136
position: absolute;
22-
inset: 0;
23-
background-image:
24-
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
25-
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
26-
background-size: 40px 40px;
37+
font-size: 32px;
38+
font-weight: 700;
39+
color: rgba(59, 130, 246, 0.07);
40+
letter-spacing: 8px;
41+
text-transform: uppercase;
42+
font-family: 'JetBrains Mono', monospace;
2743
}
28-
.glow-1 {
44+
.bg-left { left: 30px; }
45+
.bg-right { right: 30px; text-align: right; }
46+
.bg-words:nth-child(1) { top: 30px; }
47+
.bg-words:nth-child(2) { top: 90px; }
48+
.bg-words:nth-child(3) { top: 150px; }
49+
.bg-words:nth-child(4) { top: 210px; }
50+
.bg-words:nth-child(5) { top: 270px; }
51+
.bg-words:nth-child(6) { top: 30px; }
52+
.bg-words:nth-child(7) { top: 90px; }
53+
.bg-words:nth-child(8) { top: 150px; }
54+
.bg-words:nth-child(9) { top: 210px; }
55+
.bg-words:nth-child(10) { top: 270px; }
56+
57+
/* Corner brackets */
58+
.corner {
2959
position: absolute;
30-
top: -120px;
31-
right: -80px;
32-
width: 500px;
33-
height: 500px;
34-
background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
35-
pointer-events: none;
60+
width: 60px;
61+
height: 60px;
62+
border: 3px solid rgba(59, 130, 246, 0.3);
3663
}
37-
.glow-2 {
38-
position: absolute;
39-
bottom: -150px;
40-
left: -100px;
41-
width: 600px;
42-
height: 600px;
43-
background: radial-gradient(circle, rgba(249, 115, 22, 0.10) 0%, transparent 70%);
44-
pointer-events: none;
64+
.corner-tl { top: 25px; left: 25px; border-right: none; border-bottom: none; }
65+
.corner-tr { top: 25px; right: 25px; border-left: none; border-bottom: none; }
66+
.corner-bl { bottom: 25px; left: 25px; border-right: none; border-top: none; }
67+
.corner-br { bottom: 25px; right: 25px; border-left: none; border-top: none; }
68+
69+
/* Main content container */
70+
.logo-container {
71+
display: flex;
72+
flex-direction: column;
73+
align-items: center;
74+
justify-content: center;
75+
z-index: 10;
76+
flex: 1;
77+
width: 100%;
78+
padding: 40px 0;
4579
}
46-
.top-section {
47-
position: relative;
48-
z-index: 1;
80+
81+
/* Icon box */
82+
.icon-box {
83+
width: 130px;
84+
height: 130px;
85+
background: linear-gradient(145deg, #1a2332, #0d1520);
86+
border: 4px solid rgba(249, 115, 22, 0.5);
87+
border-radius: 26px;
4988
display: flex;
5089
align-items: center;
51-
gap: 20px;
52-
margin-bottom: 28px;
90+
justify-content: center;
91+
margin-bottom: 12px;
92+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
93+
}
94+
95+
.icon-text {
96+
font-size: 70px;
97+
line-height: 1;
5398
}
54-
.icon { font-size: 52px; line-height: 1; }
55-
.title {
56-
font-size: 64px;
99+
100+
/* App name */
101+
.app-name {
102+
font-size: 82px;
57103
font-weight: 900;
58-
color: #ffffff;
104+
color: #f97316;
59105
letter-spacing: -2px;
60-
line-height: 1;
106+
margin-bottom: 6px;
107+
font-family: 'Inter', sans-serif;
61108
}
109+
110+
/* Tagline */
62111
.tagline {
63-
position: relative;
64-
z-index: 1;
65-
font-size: 26px;
112+
font-size: 34px;
113+
color: rgba(255, 255, 255, 0.9);
114+
margin-bottom: 22px;
66115
font-weight: 500;
67-
color: rgba(255,255,255,0.6);
68-
line-height: 1.4;
69-
margin-bottom: 40px;
70-
max-width: 700px;
71-
}
72-
.command-block {
73-
position: relative;
74-
z-index: 1;
75-
background: rgba(255,255,255,0.05);
76-
border: 1px solid rgba(255,255,255,0.08);
77-
border-radius: 12px;
78-
padding: 20px 28px;
79-
margin-bottom: 40px;
80-
display: inline-flex;
81-
align-items: center;
82-
gap: 12px;
116+
text-align: center;
83117
}
84-
.prompt {
85-
color: rgba(59, 130, 246, 0.8);
86-
font-family: 'JetBrains Mono', monospace;
87-
font-size: 22px;
88-
font-weight: 500;
89-
}
90-
.command {
91-
color: rgba(255,255,255,0.85);
92-
font-family: 'JetBrains Mono', monospace;
93-
font-size: 22px;
94-
font-weight: 500;
95-
}
96-
.tools-row {
97-
position: relative;
98-
z-index: 1;
118+
119+
/* Feature pills */
120+
.pills-container {
99121
display: flex;
100-
gap: 12px;
101122
flex-wrap: wrap;
102-
margin-top: auto;
103-
margin-bottom: 0;
123+
justify-content: center;
124+
gap: 12px;
125+
max-width: 900px;
126+
margin-bottom: 14px;
104127
}
105-
.tool-pill {
106-
display: flex;
107-
align-items: center;
108-
gap: 8px;
109-
padding: 10px 20px;
110-
background: rgba(255,255,255,0.06);
111-
border: 1px solid rgba(255,255,255,0.08);
112-
border-radius: 100px;
113-
font-size: 16px;
114-
font-weight: 600;
115-
color: rgba(255,255,255,0.7);
128+
129+
.pill {
130+
padding: 10px 22px;
131+
border: 2px solid rgba(59, 130, 246, 0.4);
132+
border-radius: 30px;
133+
color: rgba(255, 255, 255, 0.9);
134+
font-size: 20px;
135+
font-weight: 500;
136+
background: rgba(59, 130, 246, 0.08);
116137
font-family: 'Inter', sans-serif;
117138
}
118-
.tool-pill .dot {
119-
width: 8px;
120-
height: 8px;
121-
border-radius: 50%;
122-
flex-shrink: 0;
123-
}
124-
.dot-blue { background: #3b82f6; }
125-
.dot-orange { background: #f97316; }
126-
.dot-green { background: #22c55e; }
127-
.dot-purple { background: #a855f7; }
128-
.dot-pink { background: #ec4899; }
129-
.bottom-bar {
130-
position: absolute;
131-
bottom: 0;
132-
left: 0;
133-
right: 0;
134-
height: 4px;
135-
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #f97316);
136-
}
137-
.badge {
138-
position: relative;
139-
z-index: 1;
140-
display: inline-flex;
141-
align-items: center;
142-
gap: 8px;
143-
padding: 6px 14px;
144-
background: rgba(55, 118, 171, 0.12);
145-
border: 1px solid rgba(55, 118, 171, 0.3);
146-
border-radius: 6px;
147-
font-size: 14px;
148-
font-weight: 600;
149-
color: #60a5fa;
139+
140+
/* Bottom code tagline */
141+
.code-tagline {
150142
font-family: 'JetBrains Mono', monospace;
151-
margin-bottom: 20px;
152-
letter-spacing: 0.5px;
143+
font-size: 24px;
144+
color: rgba(59, 130, 246, 0.7);
145+
margin-top: 10px;
153146
}
154147
</style>
155148
</head>
156149
<body>
157-
<div class="og-card">
158-
<div class="glow-1"></div>
159-
<div class="glow-2"></div>
160-
<div class="badge">PYTHON CLI TOOL</div>
161-
<div class="top-section">
162-
<span class="icon">&#9889;</span>
163-
<span class="title">quickforge</span>
164-
</div>
165-
<div class="tagline">
166-
Modern Python project bootstrapper with 2025's best toolchain. One command, production-ready.
167-
</div>
168-
<div class="command-block">
169-
<span class="prompt">$</span>
170-
<span class="command">quickforge new myproject</span>
150+
<!-- Background keywords - left side -->
151+
<div class="bg-words bg-left">RUFF</div>
152+
<div class="bg-words bg-left">PYTEST</div>
153+
<div class="bg-words bg-left">TYPER</div>
154+
<div class="bg-words bg-left">PYDANTIC</div>
155+
<div class="bg-words bg-left">JINJA2</div>
156+
157+
<!-- Background keywords - right side -->
158+
<div class="bg-words bg-right">UV</div>
159+
<div class="bg-words bg-right">HATCH</div>
160+
<div class="bg-words bg-right">PYRIGHT</div>
161+
<div class="bg-words bg-right">PRE-COMMIT</div>
162+
<div class="bg-words bg-right">GITHUB</div>
163+
164+
<!-- Corner brackets -->
165+
<div class="corner corner-tl"></div>
166+
<div class="corner corner-tr"></div>
167+
<div class="corner corner-bl"></div>
168+
<div class="corner corner-br"></div>
169+
170+
<!-- Main content -->
171+
<div class="logo-container">
172+
<div class="icon-box">
173+
<span class="icon-text">&#9889;</span>
171174
</div>
172-
<div class="tools-row">
173-
<div class="tool-pill"><span class="dot dot-orange"></span>uv</div>
174-
<div class="tool-pill"><span class="dot dot-blue"></span>ruff</div>
175-
<div class="tool-pill"><span class="dot dot-purple"></span>basedpyright</div>
176-
<div class="tool-pill"><span class="dot dot-green"></span>pytest</div>
177-
<div class="tool-pill"><span class="dot dot-pink"></span>pre-commit</div>
175+
<div class="app-name">quickforge</div>
176+
<div class="tagline">Modern Python Project Bootstrapper</div>
177+
178+
<div class="pills-container">
179+
<span class="pill">uv</span>
180+
<span class="pill">ruff</span>
181+
<span class="pill">basedpyright</span>
182+
<span class="pill">pytest</span>
183+
<span class="pill">pre-commit</span>
184+
<span class="pill">GitHub Actions</span>
185+
<span class="pill">Docker</span>
186+
<span class="pill">MkDocs</span>
178187
</div>
179-
<div class="bottom-bar"></div>
188+
189+
<div class="code-tagline">$ quickforge new myproject</div>
180190
</div>
181191
</body>
182192
</html>

0 commit comments

Comments
 (0)