Hugging Face's logo

Spaces:
KaibanJS
/
KaibanJS-Blog-Posts
Running

App Files Community
AnthonyAlex commited on
Commit
6b5a30e
·
1 Parent(s): 3606e59

Refactor index.html and style.css for improved layout and design. Enhanced background effects, updated article presentation, and added responsive styles for better user experience.

Browse files
Files changed (2) hide show
  1. index.html +547 -181
  2. style.css +338 -18
index.html CHANGED
@@ -1,184 +1,550 @@
1
  <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>KaibanJS Blog Posts</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  <h1>KaibanJS Blog Posts</h1>
12
- <ul>
13
- <li>
14
- <strong>Beyond Python: AI Agents in JavaScript with KaibanJS</strong><br />
15
- <a href="https://huggingface.co/blog/darielnoel/ai-agents-javascript-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
16
- Read here
17
- </a>
18
- </li>
19
- <li>
20
- <strong>How Developers Are Using KaibanJS: 20+ Real-World AI Use Cases</strong><br />
21
- <a href="https://huggingface.co/blog/darielnoel/kaibanjs-use-cases" target="_blank" style="margin-bottom: 20px; display: inline-block;">
22
- Read here
23
- </a>
24
- </li>
25
- <li>
26
- <strong>Best AI Setups for Multi-Agent Workflows in KaibanJS</strong><br />
27
- <a href="https://huggingface.co/blog/darielnoel/multi-agent-workflows-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
28
- Read here
29
- </a>
30
- </li>
31
- <li>
32
- <strong>Prompt Engineering in Multi-Agent Systems with KaibanJS</strong><br />
33
- <a href="https://huggingface.co/blog/darielnoel/llm-prompt-engineering-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
34
- Read here
35
- </a>
36
- </li>
37
- <li>
38
- <strong>Bringing Multi-Agent AI to JavaScript with KaibanJS</strong><br />
39
- <a href="https://huggingface.co/blog/darielnoel/ai-multi-agent-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
40
- Read here
41
- </a>
42
- </li>
43
- <li>
44
- <strong>Automating Sports News Reporting with AI Agents in KaibanJS</strong><br />
45
- <a href="https://huggingface.co/blog/darielnoel/ai-agents-sports-news-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
46
- Read here
47
- </a>
48
- </li>
49
- <li>
50
- <strong>AI Agents for Hardware Optimization: Automating PC Gaming Performance with KaibanJS</strong><br />
51
- <a href="https://huggingface.co/blog/darielnoel/hardware-optimization-ai-agents-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
52
- Read here
53
- </a>
54
- </li>
55
- <li>
56
- <strong>AI Agents for Company Research: Automating Business Analysis with KaibanJS</strong><br />
57
- <a href="https://huggingface.co/blog/darielnoel/ai-multi-agent-company-research-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
58
- Read here
59
- </a>
60
- </li>
61
- <li>
62
- <strong>How AI Agents Use the Jina URL to Markdown Tool in KaibanJS for Smarter Web Scraping</strong><br />
63
- <a href="https://huggingface.co/blog/darielnoel/ai-agents-web-scraping-jina-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
64
- Read here
65
- </a>
66
- </li>
67
- <li>
68
- <strong>Integrating AI Multi-Agent Systems with the Make Webhook Tool in KaibanJS</strong><br />
69
- <a href="https://huggingface.co/blog/darielnoel/kaibanjs-ai-multi-agent-make-webhook" target="_blank" style="margin-bottom: 20px; display: inline-block;">
70
- Read here
71
- </a>
72
- </li>
73
- <li>
74
- <strong>AI Agents for Trip Planning: Automating Itinerary Generation with KaibanJS</strong><br />
75
- <a href="https://huggingface.co/blog/darielnoel/ai-agents-trip-planning-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
76
- Read here
77
- </a>
78
- </li>
79
- <li>
80
- <strong>Enhancing AI Agents with the TextFile RAG Search Tool in KaibanJS</strong><br />
81
- <a href="https://huggingface.co/blog/darielnoel/enhancing-ai-agents-textfile-rag-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
82
- Read here
83
- </a>
84
- </li>
85
- <li>
86
- <strong>AI Multi-Agent System Automation: Leveraging the Zapier Webhook Tool in KaibanJS</strong><br />
87
- <a href="https://huggingface.co/blog/darielnoel/multi-agent-automation-zapier-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
88
- Read here
89
- </a>
90
- </li>
91
- <li>
92
- <strong>Harnessing the PDF RAG Search Tool in KaibanJS: Empowering AI Agents for Advanced Document Analysis</strong><br />
93
- <a href="https://huggingface.co/blog/darielnoel/pdf-rag-search-tool-kaibanjs-ai-agents" target="_blank" style="margin-bottom: 20px; display: inline-block;">
94
- Read here
95
- </a>
96
- </li>
97
- <li>
98
- <strong>Revolutionizing Resume Creation with KaibanJS and Multi-Agent AI Systems</strong><br />
99
- <a href="https://huggingface.co/blog/darielnoel/ai-agents-resume-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
100
- Read here
101
- </a>
102
- </li>
103
- <li>
104
- <strong>Exploring the Website RAG Search Tool in KaibanJS: Empowering AI Agents for Semantic Web Analysis</strong><br />
105
- <a href="https://huggingface.co/blog/darielnoel/kaibanjs-website-rag-search" target="_blank" style="margin-bottom: 20px; display: inline-block;">
106
- Read here
107
- </a>
108
- </li>
109
- <li>
110
- <strong>Unleashing the Power of Simple RAG Search Tool in KaibanJS: Enhancing AI Agents for Knowledge Discovery</strong><br />
111
- <a href="https://huggingface.co/blog/darielnoel/simple-rag-kaibanjs-knowledge-discovery" target="_blank" style="margin-bottom: 20px; display: inline-block;">
112
- Read here
113
- </a>
114
- </li>
115
- <li>
116
- <strong>Unlocking the Power of Wolfram Alpha in KaibanJS: Enhancing AI Agents for Computational Excellence</strong><br />
117
- <a href="https://huggingface.co/blog/darielnoel/wolfram-alpha-kaibanjs-computational-excellence" target="_blank" style="margin-bottom: 20px; display: inline-block;">
118
- Read here
119
- </a>
120
- </li>
121
- <li>
122
- <strong>Empowering AI Agents with Neural Search: The Role of Exa in KaibanJS</strong><br />
123
- <a href="https://huggingface.co/blog/darielnoel/exa-search-kaibanjs-ai-agents" target="_blank" style="margin-bottom: 20px; display: inline-block;">
124
- Read here
125
- </a>
126
- </li>
127
- <li>
128
- <strong>Supercharging AI Agents in KaibanJS with Serper Search</strong><br />
129
- <a href="https://huggingface.co/blog/darielnoel/serper-google-search-api-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
130
- Read here
131
- </a>
132
- </li>
133
- <li>
134
- <strong>Enhancing AI Teamwork with Tavily Search in KaibanJS</strong><br />
135
- <a href="https://huggingface.co/blog/darielnoel/tavily-search-kaibanjs-integration" target="_blank" style="margin-bottom: 20px; display: inline-block;">
136
- Read here
137
- </a>
138
- </li>
139
- <li>
140
- <strong>Unlocking the Power of Web Scraping in KaibanJS with Firecrawl</strong><br />
141
- <a href="https://huggingface.co/blog/darielnoel/firecrawl-integration-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
142
- Read here
143
- </a>
144
- </li>
145
- <li>
146
- <strong>AI-Powered Content Creation for Release Notes Using KaibanJS</strong><br />
147
- <a href="https://huggingface.co/blog/darielnoel/ai-release-notes-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
148
- Read here
149
- </a>
150
- </li>
151
- <li>
152
- <strong>How to Automate Reddit Comment Generation with AI Agents in KaibanJS</strong><br />
153
- <a href="https://huggingface.co/blog/darielnoel/automating-reddit-comments-kaibanjs" target="_blank" style="margin-bottom: 20px; display: inline-block;">
154
- Read here
155
- </a>
156
- </li>
157
- <li>
158
- <strong>Introducing KaibanJS v0.13.0: Structured Output for Smarter Workflows</strong><br />
159
- <a href="https://huggingface.co/blog/darielnoel/kaibanjs-v0130-release" target="_blank" style="margin-bottom: 20px; display: inline-block;">
160
- Read here
161
- </a>
162
- </li>
163
- <li>
164
- <strong>AI Agents in Action: Managing GitHub Issues with KaibanJS</strong><br />
165
- <a href="https://huggingface.co/blog/darielnoel/kaibanjs-github-issues-integration" target="_blank" style="margin-bottom: 20px; display: inline-block;">
166
- Read here
167
- </a>
168
- </li>
169
- <li>
170
- <strong>Exploring the Power of KaibanJS v0.11.0</strong><br />
171
- <a href="https://huggingface.co/blog/darielnoel/kaibanjs-v0-11-0-release" target="_blank" style="margin-bottom: 20px; display: inline-block;">
172
- Read here
173
- </a>
174
- </li>
175
- <li>
176
- <strong>KaibanJS v0.10.0: Expanding AI Workflows with New Tools</strong><br />
177
- <a href="https://huggingface.co/blog/darielnoel/kaibanjs-v0-10-0-release" target="_blank" style="margin-bottom: 20px; display: inline-block;">
178
- Read here
179
- </a>
180
- </li>
181
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
182
  </div>
183
- </body>
184
- </html>
 
 
 
1
  <!doctype html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>KaibanJS Blog Posts</title>
8
+ <link rel="stylesheet" href="style.css" />
9
+ </head>
10
+
11
+ <body>
12
+ <!-- Background Effects -->
13
+ <div aria-hidden="true" class="bg-grid">
14
+ <div class="bg-blur bg-blur-purple"></div>
15
+ <div class="bg-blur bg-blur-cyan"></div>
16
+ </div>
17
+
18
+ <div class="bg-polygon" aria-hidden="true">
19
+ <div class="bg-polygon-shape"></div>
20
+ </div>
21
+
22
+ <div class="bg-pattern"></div>
23
+
24
+ <div class="container">
25
+ <header class="header">
26
  <h1>KaibanJS Blog Posts</h1>
27
+ <p class="subtitle">Discover the latest insights, tutorials, and use cases for building AI agents with
28
+ KaibanJS</p>
29
+ </header>
30
+
31
+ <div class="articles-grid">
32
+ <article class="article-card">
33
+ <div class="article-image">
34
+ <img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?w=400&h=250&fit=crop"
35
+ alt="AI Agents in JavaScript" />
36
+ </div>
37
+ <div class="article-content">
38
+ <h2 class="article-title">Beyond Python: AI Agents in JavaScript with KaibanJS</h2>
39
+ <div class="article-meta">
40
+ <span class="author">Dariel Noel</span>
41
+ <span class="date">January 15, 2024</span>
42
+ </div>
43
+ <a href="https://huggingface.co/blog/darielnoel/ai-agents-javascript-kaibanjs" target="_blank"
44
+ class="read-link">
45
+ Read Article →
46
+ </a>
47
+ </div>
48
+ </article>
49
+
50
+ <article class="article-card">
51
+ <div class="article-image">
52
+ <img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=250&fit=crop"
53
+ alt="AI Use Cases" />
54
+ </div>
55
+ <div class="article-content">
56
+ <h2 class="article-title">How Developers Are Using KaibanJS: 20+ Real-World AI Use Cases</h2>
57
+ <div class="article-meta">
58
+ <span class="author">Dariel Noel</span>
59
+ <span class="date">February 3, 2024</span>
60
+ </div>
61
+ <a href="https://huggingface.co/blog/darielnoel/kaibanjs-use-cases" target="_blank"
62
+ class="read-link">
63
+ Read Article →
64
+ </a>
65
+ </div>
66
+ </article>
67
+
68
+ <article class="article-card">
69
+ <div class="article-image">
70
+ <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=250&fit=crop"
71
+ alt="Multi-Agent Workflows" />
72
+ </div>
73
+ <div class="article-content">
74
+ <h2 class="article-title">Best AI Setups for Multi-Agent Workflows in KaibanJS</h2>
75
+ <div class="article-meta">
76
+ <span class="author">Dariel Noel</span>
77
+ <span class="date">February 18, 2024</span>
78
+ </div>
79
+ <a href="https://huggingface.co/blog/darielnoel/multi-agent-workflows-kaibanjs" target="_blank"
80
+ class="read-link">
81
+ Read Article →
82
+ </a>
83
+ </div>
84
+ </article>
85
+
86
+ <article class="article-card">
87
+ <div class="article-image">
88
+ <img src="https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=400&h=250&fit=crop"
89
+ alt="Prompt Engineering" />
90
+ </div>
91
+ <div class="article-content">
92
+ <h2 class="article-title">Prompt Engineering in Multi-Agent Systems with KaibanJS</h2>
93
+ <div class="article-meta">
94
+ <span class="author">Dariel Noel</span>
95
+ <span class="date">March 5, 2024</span>
96
+ </div>
97
+ <a href="https://huggingface.co/blog/darielnoel/llm-prompt-engineering-kaibanjs" target="_blank"
98
+ class="read-link">
99
+ Read Article →
100
+ </a>
101
+ </div>
102
+ </article>
103
+
104
+ <article class="article-card">
105
+ <div class="article-image">
106
+ <img src="https://images.unsplash.com/photo-1555255707-c07966088b7b?w=400&h=250&fit=crop"
107
+ alt="Multi-Agent AI" />
108
+ </div>
109
+ <div class="article-content">
110
+ <h2 class="article-title">Bringing Multi-Agent AI to JavaScript with KaibanJS</h2>
111
+ <div class="article-meta">
112
+ <span class="author">Dariel Noel</span>
113
+ <span class="date">March 22, 2024</span>
114
+ </div>
115
+ <a href="https://huggingface.co/blog/darielnoel/ai-multi-agent-kaibanjs" target="_blank"
116
+ class="read-link">
117
+ Read Article →
118
+ </a>
119
+ </div>
120
+ </article>
121
+
122
+ <article class="article-card">
123
+ <div class="article-image">
124
+ <img src="https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=400&h=250&fit=crop"
125
+ alt="Sports News" />
126
+ </div>
127
+ <div class="article-content">
128
+ <h2 class="article-title">Automating Sports News Reporting with AI Agents in KaibanJS</h2>
129
+ <div class="article-meta">
130
+ <span class="author">Dariel Noel</span>
131
+ <span class="date">April 8, 2024</span>
132
+ </div>
133
+ <a href="https://huggingface.co/blog/darielnoel/ai-agents-sports-news-kaibanjs" target="_blank"
134
+ class="read-link">
135
+ Read Article →
136
+ </a>
137
+ </div>
138
+ </article>
139
+
140
+ <article class="article-card">
141
+ <div class="article-image">
142
+ <img src="https://images.unsplash.com/photo-1527814050087-3793815479db?w=400&h=250&fit=crop"
143
+ alt="Hardware Optimization" />
144
+ </div>
145
+ <div class="article-content">
146
+ <h2 class="article-title">AI Agents for Hardware Optimization: Automating PC Gaming Performance with
147
+ KaibanJS</h2>
148
+ <div class="article-meta">
149
+ <span class="author">Dariel Noel</span>
150
+ <span class="date">April 25, 2024</span>
151
+ </div>
152
+ <a href="https://huggingface.co/blog/darielnoel/hardware-optimization-ai-agents-kaibanjs"
153
+ target="_blank" class="read-link">
154
+ Read Article →
155
+ </a>
156
+ </div>
157
+ </article>
158
+
159
+ <article class="article-card">
160
+ <div class="article-image">
161
+ <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=250&fit=crop"
162
+ alt="Company Research" />
163
+ </div>
164
+ <div class="article-content">
165
+ <h2 class="article-title">AI Agents for Company Research: Automating Business Analysis with KaibanJS
166
+ </h2>
167
+ <div class="article-meta">
168
+ <span class="author">Dariel Noel</span>
169
+ <span class="date">May 12, 2024</span>
170
+ </div>
171
+ <a href="https://huggingface.co/blog/darielnoel/ai-multi-agent-company-research-kaibanjs"
172
+ target="_blank" class="read-link">
173
+ Read Article →
174
+ </a>
175
+ </div>
176
+ </article>
177
+
178
+ <article class="article-card">
179
+ <div class="article-image">
180
+ <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=400&h=250&fit=crop"
181
+ alt="Web Scraping" />
182
+ </div>
183
+ <div class="article-content">
184
+ <h2 class="article-title">How AI Agents Use the Jina URL to Markdown Tool in KaibanJS for Smarter
185
+ Web Scraping</h2>
186
+ <div class="article-meta">
187
+ <span class="author">Dariel Noel</span>
188
+ <span class="date">May 28, 2024</span>
189
+ </div>
190
+ <a href="https://huggingface.co/blog/darielnoel/ai-agents-web-scraping-jina-kaibanjs"
191
+ target="_blank" class="read-link">
192
+ Read Article →
193
+ </a>
194
+ </div>
195
+ </article>
196
+
197
+ <article class="article-card">
198
+ <div class="article-image">
199
+ <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=250&fit=crop"
200
+ alt="Make Webhook" />
201
+ </div>
202
+ <div class="article-content">
203
+ <h2 class="article-title">Integrating AI Multi-Agent Systems with the Make Webhook Tool in KaibanJS
204
+ </h2>
205
+ <div class="article-meta">
206
+ <span class="author">Dariel Noel</span>
207
+ <span class="date">June 14, 2024</span>
208
+ </div>
209
+ <a href="https://huggingface.co/blog/darielnoel/kaibanjs-ai-multi-agent-make-webhook"
210
+ target="_blank" class="read-link">
211
+ Read Article →
212
+ </a>
213
+ </div>
214
+ </article>
215
+
216
+ <article class="article-card">
217
+ <div class="article-image">
218
+ <img src="https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=400&h=250&fit=crop"
219
+ alt="Trip Planning" />
220
+ </div>
221
+ <div class="article-content">
222
+ <h2 class="article-title">AI Agents for Trip Planning: Automating Itinerary Generation with KaibanJS
223
+ </h2>
224
+ <div class="article-meta">
225
+ <span class="author">Dariel Noel</span>
226
+ <span class="date">June 30, 2024</span>
227
+ </div>
228
+ <a href="https://huggingface.co/blog/darielnoel/ai-agents-trip-planning-kaibanjs" target="_blank"
229
+ class="read-link">
230
+ Read Article →
231
+ </a>
232
+ </div>
233
+ </article>
234
+
235
+ <article class="article-card">
236
+ <div class="article-image">
237
+ <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=400&h=250&fit=crop"
238
+ alt="TextFile RAG" />
239
+ </div>
240
+ <div class="article-content">
241
+ <h2 class="article-title">Enhancing AI Agents with the TextFile RAG Search Tool in KaibanJS</h2>
242
+ <div class="article-meta">
243
+ <span class="author">Dariel Noel</span>
244
+ <span class="date">July 16, 2024</span>
245
+ </div>
246
+ <a href="https://huggingface.co/blog/darielnoel/enhancing-ai-agents-textfile-rag-kaibanjs"
247
+ target="_blank" class="read-link">
248
+ Read Article →
249
+ </a>
250
+ </div>
251
+ </article>
252
+
253
+ <article class="article-card">
254
+ <div class="article-image">
255
+ <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=250&fit=crop"
256
+ alt="Zapier Webhook" />
257
+ </div>
258
+ <div class="article-content">
259
+ <h2 class="article-title">AI Multi-Agent System Automation: Leveraging the Zapier Webhook Tool in
260
+ KaibanJS</h2>
261
+ <div class="article-meta">
262
+ <span class="author">Dariel Noel</span>
263
+ <span class="date">August 2, 2024</span>
264
+ </div>
265
+ <a href="https://huggingface.co/blog/darielnoel/multi-agent-automation-zapier-kaibanjs"
266
+ target="_blank" class="read-link">
267
+ Read Article →
268
+ </a>
269
+ </div>
270
+ </article>
271
+
272
+ <article class="article-card">
273
+ <div class="article-image">
274
+ <img src="https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=400&h=250&fit=crop"
275
+ alt="PDF RAG" />
276
+ </div>
277
+ <div class="article-content">
278
+ <h2 class="article-title">Harnessing the PDF RAG Search Tool in KaibanJS: Empowering AI Agents for
279
+ Advanced Document Analysis</h2>
280
+ <div class="article-meta">
281
+ <span class="author">Dariel Noel</span>
282
+ <span class="date">August 18, 2024</span>
283
+ </div>
284
+ <a href="https://huggingface.co/blog/darielnoel/pdf-rag-search-tool-kaibanjs-ai-agents"
285
+ target="_blank" class="read-link">
286
+ Read Article →
287
+ </a>
288
+ </div>
289
+ </article>
290
+
291
+ <article class="article-card">
292
+ <div class="article-image">
293
+ <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=400&h=250&fit=crop"
294
+ alt="Resume Creation" />
295
+ </div>
296
+ <div class="article-content">
297
+ <h2 class="article-title">Revolutionizing Resume Creation with KaibanJS and Multi-Agent AI Systems
298
+ </h2>
299
+ <div class="article-meta">
300
+ <span class="author">Dariel Noel</span>
301
+ <span class="date">September 4, 2024</span>
302
+ </div>
303
+ <a href="https://huggingface.co/blog/darielnoel/ai-agents-resume-kaibanjs" target="_blank"
304
+ class="read-link">
305
+ Read Article →
306
+ </a>
307
+ </div>
308
+ </article>
309
+
310
+ <article class="article-card">
311
+ <div class="article-image">
312
+ <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=400&h=250&fit=crop"
313
+ alt="Website RAG" />
314
+ </div>
315
+ <div class="article-content">
316
+ <h2 class="article-title">Exploring the Website RAG Search Tool in KaibanJS: Empowering AI Agents
317
+ for Semantic Web Analysis</h2>
318
+ <div class="article-meta">
319
+ <span class="author">Dariel Noel</span>
320
+ <span class="date">September 20, 2024</span>
321
+ </div>
322
+ <a href="https://huggingface.co/blog/darielnoel/kaibanjs-website-rag-search" target="_blank"
323
+ class="read-link">
324
+ Read Article →
325
+ </a>
326
+ </div>
327
+ </article>
328
+
329
+ <article class="article-card">
330
+ <div class="article-image">
331
+ <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=400&h=250&fit=crop"
332
+ alt="Simple RAG" />
333
+ </div>
334
+ <div class="article-content">
335
+ <h2 class="article-title">Unleashing the Power of Simple RAG Search Tool in KaibanJS: Enhancing AI
336
+ Agents for Knowledge Discovery</h2>
337
+ <div class="article-meta">
338
+ <span class="author">Dariel Noel</span>
339
+ <span class="date">October 6, 2024</span>
340
+ </div>
341
+ <a href="https://huggingface.co/blog/darielnoel/simple-rag-kaibanjs-knowledge-discovery"
342
+ target="_blank" class="read-link">
343
+ Read Article →
344
+ </a>
345
+ </div>
346
+ </article>
347
+
348
+ <article class="article-card">
349
+ <div class="article-image">
350
+ <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=400&h=250&fit=crop"
351
+ alt="Wolfram Alpha" />
352
+ </div>
353
+ <div class="article-content">
354
+ <h2 class="article-title">Unlocking the Power of Wolfram Alpha in KaibanJS: Enhancing AI Agents for
355
+ Computational Excellence</h2>
356
+ <div class="article-meta">
357
+ <span class="author">Dariel Noel</span>
358
+ <span class="date">October 22, 2024</span>
359
+ </div>
360
+ <a href="https://huggingface.co/blog/darielnoel/wolfram-alpha-kaibanjs-computational-excellence"
361
+ target="_blank" class="read-link">
362
+ Read Article →
363
+ </a>
364
+ </div>
365
+ </article>
366
+
367
+ <article class="article-card">
368
+ <div class="article-image">
369
+ <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=250&fit=crop"
370
+ alt="Exa Search" />
371
+ </div>
372
+ <div class="article-content">
373
+ <h2 class="article-title">Empowering AI Agents with Neural Search: The Role of Exa in KaibanJS</h2>
374
+ <div class="article-meta">
375
+ <span class="author">Dariel Noel</span>
376
+ <span class="date">November 8, 2024</span>
377
+ </div>
378
+ <a href="https://huggingface.co/blog/darielnoel/exa-search-kaibanjs-ai-agents" target="_blank"
379
+ class="read-link">
380
+ Read Article →
381
+ </a>
382
+ </div>
383
+ </article>
384
+
385
+ <article class="article-card">
386
+ <div class="article-image">
387
+ <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=400&h=250&fit=crop"
388
+ alt="Serper Search" />
389
+ </div>
390
+ <div class="article-content">
391
+ <h2 class="article-title">Supercharging AI Agents in KaibanJS with Serper Search</h2>
392
+ <div class="article-meta">
393
+ <span class="author">Dariel Noel</span>
394
+ <span class="date">November 24, 2024</span>
395
+ </div>
396
+ <a href="https://huggingface.co/blog/darielnoel/serper-google-search-api-kaibanjs" target="_blank"
397
+ class="read-link">
398
+ Read Article →
399
+ </a>
400
+ </div>
401
+ </article>
402
+
403
+ <article class="article-card">
404
+ <div class="article-image">
405
+ <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=250&fit=crop"
406
+ alt="Tavily Search" />
407
+ </div>
408
+ <div class="article-content">
409
+ <h2 class="article-title">Enhancing AI Teamwork with Tavily Search in KaibanJS</h2>
410
+ <div class="article-meta">
411
+ <span class="author">Dariel Noel</span>
412
+ <span class="date">December 10, 2024</span>
413
+ </div>
414
+ <a href="https://huggingface.co/blog/darielnoel/tavily-search-kaibanjs-integration" target="_blank"
415
+ class="read-link">
416
+ Read Article →
417
+ </a>
418
+ </div>
419
+ </article>
420
+
421
+ <article class="article-card">
422
+ <div class="article-image">
423
+ <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=400&h=250&fit=crop"
424
+ alt="Firecrawl" />
425
+ </div>
426
+ <div class="article-content">
427
+ <h2 class="article-title">Unlocking the Power of Web Scraping in KaibanJS with Firecrawl</h2>
428
+ <div class="article-meta">
429
+ <span class="author">Dariel Noel</span>
430
+ <span class="date">December 26, 2024</span>
431
+ </div>
432
+ <a href="https://huggingface.co/blog/darielnoel/firecrawl-integration-kaibanjs" target="_blank"
433
+ class="read-link">
434
+ Read Article →
435
+ </a>
436
+ </div>
437
+ </article>
438
+
439
+ <article class="article-card">
440
+ <div class="article-image">
441
+ <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=400&h=250&fit=crop"
442
+ alt="Release Notes" />
443
+ </div>
444
+ <div class="article-content">
445
+ <h2 class="article-title">AI-Powered Content Creation for Release Notes Using KaibanJS</h2>
446
+ <div class="article-meta">
447
+ <span class="author">Dariel Noel</span>
448
+ <span class="date">January 11, 2025</span>
449
+ </div>
450
+ <a href="https://huggingface.co/blog/darielnoel/ai-release-notes-kaibanjs" target="_blank"
451
+ class="read-link">
452
+ Read Article →
453
+ </a>
454
+ </div>
455
+ </article>
456
+
457
+ <article class="article-card">
458
+ <div class="article-image">
459
+ <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400&h=250&fit=crop"
460
+ alt="Reddit Comments" />
461
+ </div>
462
+ <div class="article-content">
463
+ <h2 class="article-title">How to Automate Reddit Comment Generation with AI Agents in KaibanJS</h2>
464
+ <div class="article-meta">
465
+ <span class="author">Dariel Noel</span>
466
+ <span class="date">January 27, 2025</span>
467
+ </div>
468
+ <a href="https://huggingface.co/blog/darielnoel/automating-reddit-comments-kaibanjs" target="_blank"
469
+ class="read-link">
470
+ Read Article →
471
+ </a>
472
+ </div>
473
+ </article>
474
+
475
+ <article class="article-card">
476
+ <div class="article-image">
477
+ <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=250&fit=crop"
478
+ alt="KaibanJS v0.13.0" />
479
+ </div>
480
+ <div class="article-content">
481
+ <h2 class="article-title">Introducing KaibanJS v0.13.0: Structured Output for Smarter Workflows</h2>
482
+ <div class="article-meta">
483
+ <span class="author">Dariel Noel</span>
484
+ <span class="date">February 12, 2025</span>
485
+ </div>
486
+ <a href="https://huggingface.co/blog/darielnoel/kaibanjs-v0130-release" target="_blank"
487
+ class="read-link">
488
+ Read Article →
489
+ </a>
490
+ </div>
491
+ </article>
492
+
493
+ <article class="article-card">
494
+ <div class="article-image">
495
+ <img src="https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?w=400&h=250&fit=crop"
496
+ alt="GitHub Issues" />
497
+ </div>
498
+ <div class="article-content">
499
+ <h2 class="article-title">AI Agents in Action: Managing GitHub Issues with KaibanJS</h2>
500
+ <div class="article-meta">
501
+ <span class="author">Dariel Noel</span>
502
+ <span class="date">February 28, 2025</span>
503
+ </div>
504
+ <a href="https://huggingface.co/blog/darielnoel/kaibanjs-github-issues-integration" target="_blank"
505
+ class="read-link">
506
+ Read Article →
507
+ </a>
508
+ </div>
509
+ </article>
510
+
511
+ <article class="article-card">
512
+ <div class="article-image">
513
+ <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=250&fit=crop"
514
+ alt="KaibanJS v0.11.0" />
515
+ </div>
516
+ <div class="article-content">
517
+ <h2 class="article-title">Exploring the Power of KaibanJS v0.11.0</h2>
518
+ <div class="article-meta">
519
+ <span class="author">Dariel Noel</span>
520
+ <span class="date">March 15, 2025</span>
521
+ </div>
522
+ <a href="https://huggingface.co/blog/darielnoel/kaibanjs-v0-11-0-release" target="_blank"
523
+ class="read-link">
524
+ Read Article →
525
+ </a>
526
+ </div>
527
+ </article>
528
+
529
+ <article class="article-card">
530
+ <div class="article-image">
531
+ <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=250&fit=crop"
532
+ alt="KaibanJS v0.10.0" />
533
+ </div>
534
+ <div class="article-content">
535
+ <h2 class="article-title">KaibanJS v0.10.0: Expanding AI Workflows with New Tools</h2>
536
+ <div class="article-meta">
537
+ <span class="author">Dariel Noel</span>
538
+ <span class="date">April 1, 2025</span>
539
+ </div>
540
+ <a href="https://huggingface.co/blog/darielnoel/kaibanjs-v0-10-0-release" target="_blank"
541
+ class="read-link">
542
+ Read Article →
543
+ </a>
544
+ </div>
545
+ </article>
546
  </div>
547
+ </div>
548
+ </body>
549
+
550
+ </html>
style.css CHANGED
@@ -1,28 +1,348 @@
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
  body {
8
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
9
+ 'Helvetica Neue', Arial, sans-serif;
10
+ background: #0f172a;
11
+ min-height: 100vh;
12
+ padding: 2rem 1rem;
13
+ line-height: 1.6;
14
+ color: #333;
15
+ position: relative;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ /* Background Effects */
20
+ .bg-grid {
21
+ position: absolute;
22
+ z-index: 0;
23
+ top: 0;
24
+ right: 0;
25
+ bottom: 0;
26
+ left: 0;
27
+ opacity: 0.4;
28
+ overflow: hidden;
29
+ display: grid;
30
+ grid-template-columns: repeat(2, 1fr);
31
+ gap: 0;
32
+ transform: translateX(-13rem);
33
+ pointer-events: none;
34
+ }
35
+
36
+ .bg-blur {
37
+ width: 100%;
38
+ height: 9rem;
39
+ filter: blur(106px);
40
+ border-radius: 50%;
41
+ }
42
+
43
+ .bg-blur-cyan {
44
+ margin-left: -13rem;
45
+ }
46
+
47
+ .bg-blur-purple {
48
+ background: linear-gradient(to bottom right, #a855f7, #c084fc);
49
+ }
50
+
51
+ .bg-blur-cyan {
52
+ background: linear-gradient(to right, #06b6d4, #0ea5e9);
53
+ }
54
+
55
+ .bg-polygon {
56
+ position: absolute;
57
+ left: 0;
58
+ right: 0;
59
+ top: calc(100% - 13rem);
60
+ z-index: -10;
61
+ transform: translate3d(0, 0, 0);
62
+ overflow: hidden;
63
+ pointer-events: none;
64
+ }
65
+
66
+ @media (min-width: 640px) {
67
+ .bg-polygon {
68
+ top: calc(100% - 30rem);
69
+ }
70
+ }
71
+
72
+ .bg-polygon-shape {
73
+ position: relative;
74
+ left: calc(50% + 3rem);
75
+ aspect-ratio: 1155 / 678;
76
+ width: 36.125rem;
77
+ transform: translateX(-50%);
78
+ background: linear-gradient(to top right, #ff80b5, #9089fc);
79
+ opacity: 0.3;
80
+ clip-path: polygon(
81
+ 74.1% 44.1%,
82
+ 100% 61.6%,
83
+ 97.5% 26.9%,
84
+ 85.5% 0.1%,
85
+ 80.7% 2%,
86
+ 72.5% 32.5%,
87
+ 60.2% 62.4%,
88
+ 52.4% 68.1%,
89
+ 47.5% 58.3%,
90
+ 45.2% 34.5%,
91
+ 27.5% 76.7%,
92
+ 0.1% 64.9%,
93
+ 17.9% 100%,
94
+ 27.6% 76.8%,
95
+ 76.1% 97.7%,
96
+ 74.1% 44.1%
97
+ );
98
+ filter: blur(3rem);
99
+ }
100
+
101
+ @media (min-width: 640px) {
102
+ .bg-polygon-shape {
103
+ left: calc(50% + 36rem);
104
+ width: 72.1875rem;
105
+ }
106
+ }
107
+
108
+ .bg-pattern {
109
+ position: absolute;
110
+ z-index: 10;
111
+ top: 0;
112
+ right: 0;
113
+ bottom: 0;
114
+ left: 0;
115
+ mask-image: linear-gradient(to bottom, transparent, black);
116
+ -webkit-mask-image: linear-gradient(to bottom, transparent, black);
117
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(15 23 42 / 0.04)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
118
+ pointer-events: none;
119
+ }
120
+
121
+ .container {
122
+ max-width: 1400px;
123
+ margin: 0 auto;
124
+ position: relative;
125
+ z-index: 1;
126
+ }
127
+
128
+ .header {
129
+ text-align: center;
130
+ margin-bottom: 3rem;
131
+ color: white;
132
+ position: relative;
133
+ z-index: 2;
134
+ }
135
+
136
+ .header h1 {
137
+ font-size: 3rem;
138
+ font-weight: 700;
139
+ margin-bottom: 1rem;
140
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
141
+ letter-spacing: -0.02em;
142
+ }
143
+
144
+ .subtitle {
145
+ font-size: 1.25rem;
146
+ opacity: 0.95;
147
+ font-weight: 300;
148
+ max-width: 600px;
149
+ margin: 0 auto;
150
+ }
151
+
152
+ .articles-grid {
153
+ display: grid;
154
+ grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
155
+ gap: 2rem;
156
+ margin-top: 2rem;
157
+ position: relative;
158
+ z-index: 2;
159
+ }
160
+
161
+ .article-card {
162
+ background: white;
163
+ border-radius: 16px;
164
+ overflow: hidden;
165
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
166
+ transition: all 0.3s ease;
167
+ display: flex;
168
+ flex-direction: column;
169
+ height: 100%;
170
+ }
171
+
172
+ .article-card:hover {
173
+ transform: translateY(-8px);
174
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
175
+ }
176
+
177
+ .article-image {
178
+ width: 100%;
179
+ height: 200px;
180
+ overflow: hidden;
181
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
182
+ position: relative;
183
+ }
184
+
185
+ .article-image img {
186
+ width: 100%;
187
+ height: 100%;
188
+ object-fit: cover;
189
+ transition: transform 0.3s ease;
190
+ }
191
+
192
+ .article-card:hover .article-image img {
193
+ transform: scale(1.1);
194
+ }
195
+
196
+ .article-content {
197
+ padding: 1.5rem;
198
+ flex: 1;
199
+ display: flex;
200
+ flex-direction: column;
201
+ }
202
+
203
+ .article-title {
204
+ font-size: 1.25rem;
205
+ font-weight: 600;
206
+ margin-bottom: 1rem;
207
+ color: #1a202c;
208
+ line-height: 1.4;
209
+ flex: 1;
210
+ }
211
+
212
+ .article-meta {
213
+ display: flex;
214
+ align-items: center;
215
+ gap: 1rem;
216
+ margin-bottom: 1.25rem;
217
+ font-size: 0.875rem;
218
+ color: #718096;
219
+ flex-wrap: wrap;
220
+ }
221
+
222
+ .author {
223
+ display: flex;
224
+ align-items: center;
225
+ font-weight: 500;
226
+ }
227
+
228
+ .author::before {
229
+ content: '👤';
230
+ margin-right: 0.5rem;
231
+ font-size: 1rem;
232
+ }
233
+
234
+ .date {
235
+ display: flex;
236
+ align-items: center;
237
+ }
238
+
239
+ .date::before {
240
+ content: '📅';
241
+ margin-right: 0.5rem;
242
+ font-size: 1rem;
243
+ }
244
+
245
+ .read-link {
246
+ display: inline-flex;
247
+ align-items: center;
248
+ padding: 0.75rem 1.5rem;
249
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
250
+ color: white;
251
+ text-decoration: none;
252
+ border-radius: 8px;
253
+ font-weight: 600;
254
+ font-size: 0.9375rem;
255
+ transition: all 0.3s ease;
256
+ margin-top: auto;
257
+ width: fit-content;
258
+ }
259
+
260
+ .read-link:hover {
261
+ background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
262
+ transform: translateX(4px);
263
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
264
+ }
265
+
266
+ .read-link:active {
267
+ transform: translateX(2px);
268
+ }
269
+
270
+ /* Responsive Design */
271
+ @media (max-width: 768px) {
272
+ .header h1 {
273
+ font-size: 2rem;
274
+ }
275
+
276
+ .subtitle {
277
+ font-size: 1rem;
278
+ }
279
+
280
+ .articles-grid {
281
+ grid-template-columns: 1fr;
282
+ gap: 1.5rem;
283
+ }
284
+
285
+ .article-card {
286
+ border-radius: 12px;
287
+ }
288
+
289
+ .article-image {
290
+ height: 180px;
291
+ }
292
+
293
+ .article-content {
294
+ padding: 1.25rem;
295
+ }
296
+
297
+ .article-title {
298
+ font-size: 1.125rem;
299
+ }
300
+ }
301
+
302
+ @media (max-width: 480px) {
303
+ body {
304
+ padding: 1rem 0.5rem;
305
+ }
306
+
307
+ .header {
308
+ margin-bottom: 2rem;
309
+ }
310
+
311
+ .header h1 {
312
+ font-size: 1.75rem;
313
+ }
314
+
315
+ .article-meta {
316
+ font-size: 0.8125rem;
317
+ }
318
+
319
+ .read-link {
320
+ padding: 0.625rem 1.25rem;
321
+ font-size: 0.875rem;
322
+ }
323
  }
324
 
325
+ /* Smooth scrolling */
326
+ html {
327
+ scroll-behavior: smooth;
328
  }
329
 
330
+ /* Loading state for images */
331
+ .article-image img {
332
+ background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
333
+ background-size: 200% 100%;
334
+ animation: loading 1.5s infinite;
335
  }
336
 
337
+ @keyframes loading {
338
+ 0% {
339
+ background-position: 200% 0;
340
+ }
341
+ 100% {
342
+ background-position: -200% 0;
343
+ }
344
  }
345
 
346
+ .article-image img[src] {
347
+ animation: none;
348
  }