Hugging Face's logo

Spaces:
SupraLabs
/
Blog
Running

App Files Community
1
LH-Tech-AI commited on
Commit
bb8b49a
·
verified ·
1 Parent(s): f3b9a01

Create harley-ml-joined-us.html

Browse files
Files changed (1) hide show
  1. harley-ml-joined-us.html +253 -0
harley-ml-joined-us.html ADDED
@@ -0,0 +1,253 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>@Harley-ml joined us | SupraLabs Blog</title>
7
+ <style>
8
+ :root {
9
+ --bg: #0f0f0f;
10
+ --surface: #1a1a1a;
11
+ --border: #333;
12
+ --text: #e0e0e0;
13
+ --accent: #536bfe;
14
+ --muted: #888;
15
+ --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
16
+ }
17
+ * { margin: 0; padding: 0; box-sizing: border-box; }
18
+ body {
19
+ background-color: var(--bg);
20
+ color: var(--text);
21
+ font-family: 'Inter', -apple-system, sans-serif;
22
+ line-height: 1.6;
23
+ padding: 2rem;
24
+ }
25
+ code, pre, .mono { font-family: var(--font-mono); }
26
+ .container { max-width: 900px; margin: 0 auto; }
27
+ header {
28
+ border-bottom: 2px solid var(--border);
29
+ padding-bottom: 2rem;
30
+ margin-bottom: 3rem;
31
+ display: flex;
32
+ justify-content: space-between;
33
+ align-items: flex-end;
34
+ }
35
+ .logo-area h1 {
36
+ font-size: 1.2rem;
37
+ text-transform: uppercase;
38
+ letter-spacing: 2px;
39
+ color: var(--accent);
40
+ line-height: 1;
41
+ display: flex;
42
+ align-items: center;
43
+ gap: 10px;
44
+ }
45
+ .logo-area a { text-decoration: none; color: inherit; }
46
+ .logo-area {
47
+ display: flex;
48
+ align-items: center;
49
+ gap: 10px;
50
+ font-weight: bold;
51
+ font-size: 1.2rem;
52
+ }
53
+ nav a {
54
+ color: var(--text);
55
+ text-decoration: none;
56
+ margin-left: 1.5rem;
57
+ font-size: 0.9rem;
58
+ border-bottom: 1px solid transparent;
59
+ }
60
+ nav a:hover { border-bottom: 1px solid var(--accent); }
61
+ .post-header { margin-bottom: 3rem; }
62
+ .post-header h2 {
63
+ font-size: 3rem;
64
+ line-height: 1.1;
65
+ margin-bottom: 1rem;
66
+ font-weight: 800;
67
+ }
68
+ .post-meta {
69
+ font-family: var(--font-mono);
70
+ color: var(--accent);
71
+ font-size: 0.9rem;
72
+ margin-bottom: 2rem;
73
+ }
74
+ .post-content {
75
+ background: var(--surface);
76
+ border: 1px solid var(--border);
77
+ padding: 3rem;
78
+ margin-bottom: 4rem;
79
+ }
80
+ .post-content h2 {
81
+ font-size: 1.8rem;
82
+ margin: 2.5rem 0 1rem 0;
83
+ color: var(--accent);
84
+ }
85
+ .post-content h2:first-child { margin-top: 0; }
86
+ .post-content p {
87
+ margin-bottom: 1.5rem;
88
+ font-size: 1.1rem;
89
+ color: var(--text);
90
+ }
91
+ .post-content ul {
92
+ margin-bottom: 1.5rem;
93
+ padding-left: 1.5rem;
94
+ }
95
+ .post-content li { margin-bottom: 0.5rem; font-size: 1.1rem; }
96
+ .post-content strong { color: #fff; }
97
+ .post-content code {
98
+ background: #111;
99
+ border: 1px solid var(--border);
100
+ padding: 2px 6px;
101
+ border-radius: 3px;
102
+ font-size: 0.95em;
103
+ color: var(--accent);
104
+ }
105
+ .code-block {
106
+ background: #111;
107
+ border: 1px solid var(--border);
108
+ padding: 1.5rem;
109
+ margin: 2rem 0;
110
+ overflow-x: auto;
111
+ font-family: var(--font-mono);
112
+ font-size: 0.88rem;
113
+ line-height: 1.7;
114
+ color: #ccc;
115
+ }
116
+ .code-block .comment { color: var(--muted); }
117
+ .code-block .keyword { color: var(--accent); }
118
+ .callout {
119
+ border-left: 3px solid var(--accent);
120
+ background: #111;
121
+ padding: 1rem 1.5rem;
122
+ margin: 2rem 0;
123
+ font-family: var(--font-mono);
124
+ font-size: 0.95rem;
125
+ color: #ccc;
126
+ }
127
+ .callout span {
128
+ display: block;
129
+ color: var(--muted);
130
+ font-size: 0.8rem;
131
+ margin-bottom: 0.4rem;
132
+ }
133
+ .output-example {
134
+ border: 1px solid var(--border);
135
+ background: #111;
136
+ padding: 1.5rem;
137
+ margin: 1.5rem 0;
138
+ }
139
+ .output-example .prompt-label {
140
+ font-family: var(--font-mono);
141
+ font-size: 0.75rem;
142
+ color: var(--accent);
143
+ margin-bottom: 0.4rem;
144
+ }
145
+ .output-example .prompt-text {
146
+ font-weight: 700;
147
+ color: #fff;
148
+ margin-bottom: 1rem;
149
+ font-size: 1rem;
150
+ }
151
+ .output-example .output-label {
152
+ font-family: var(--font-mono);
153
+ font-size: 0.75rem;
154
+ color: var(--muted);
155
+ margin-bottom: 0.4rem;
156
+ }
157
+ .output-example .output-text {
158
+ color: var(--text);
159
+ font-size: 0.95rem;
160
+ font-style: italic;
161
+ line-height: 1.7;
162
+ }
163
+ .table-wrap { overflow-x: auto; margin: 2rem 0; }
164
+ table {
165
+ width: 100%;
166
+ border-collapse: collapse;
167
+ font-family: var(--font-mono);
168
+ font-size: 0.9rem;
169
+ }
170
+ th {
171
+ background: #111;
172
+ color: var(--accent);
173
+ padding: 0.75rem 1rem;
174
+ text-align: left;
175
+ border: 1px solid var(--border);
176
+ }
177
+ td {
178
+ padding: 0.7rem 1rem;
179
+ border: 1px solid var(--border);
180
+ color: var(--text);
181
+ }
182
+ tr:nth-child(even) td { background: #111; }
183
+ .tags { display: flex; gap: 0.5rem; margin-top: 2rem; flex-wrap: wrap; }
184
+ .tag {
185
+ font-family: var(--font-mono);
186
+ font-size: 0.7rem;
187
+ padding: 2px 8px;
188
+ border: 1px solid var(--border);
189
+ border-radius: 4px;
190
+ color: var(--muted);
191
+ }
192
+ footer {
193
+ margin-top: 6rem;
194
+ padding-bottom: 2rem;
195
+ font-size: 0.8rem;
196
+ color: var(--muted);
197
+ text-align: center;
198
+ }
199
+ @media (max-width: 600px) {
200
+ .post-header h2 { font-size: 2rem; }
201
+ .post-content { padding: 1.5rem; }
202
+ header { flex-direction: column; align-items: flex-start; gap: 1rem; }
203
+ nav a { margin-left: 0; margin-right: 1rem; }
204
+ }
205
+ </style>
206
+ </head>
207
+ <body>
208
+
209
+ <div class="container">
210
+ <header>
211
+ <div class="logo-area" style="font-size: 1.5em;">
212
+ <a href="./index.html"><h1><img src="./image.png" style="height: 2em"> SupraLabs_</h1></a>
213
+ </div>
214
+ <nav>
215
+ <a href="./index.html#news">News</a>
216
+ <a href="https://huggingface.co/SupraLabs" target="blank">HuggingFace</a>
217
+ <a href="./index.html#hardware">Hardware</a>
218
+ </nav>
219
+ </header>
220
+
221
+ <article>
222
+ <div class="post-header">
223
+ <div class="post-meta">// 2026-05-17 | Team</div>
224
+ <h2>@Harley-ml joined us<br>We are increasing our team!</h2>
225
+ </div>
226
+
227
+ <div class="post-content">
228
+
229
+ <h2>We have a new team member!<br>@Harley-ml</h2>
230
+ <p>He also makes small models. And now he is here. With us. At SupraLabs.</p>
231
+
232
+ <h2>Why this is important</h2>
233
+ <p>Making cool small models that revolutionize the world of ML isn't easy. Two persons aren't enough. Three persons are. That's why we are "hunting" for other people to join us!</p>
234
+
235
+ <h2>Final thought</h2>
236
+ <p>Yes, today's blog isn't long. But it's important. @Harley-ml joined us and that's great. With his help we will keep making our models better.<br>
237
+ We are still searching people to join us. So feel free to ask!</p>
238
+
239
+ <div class="tags">
240
+ <span class="tag">#join</span>
241
+ <span class="tag">#team</span>
242
+ <span class="tag">#harley-ml</span>
243
+ </div>
244
+ </div>
245
+ </article>
246
+
247
+ <footer>
248
+ <p class="mono">&copy; 2026 SupraLabs // Built for the community.</p>
249
+ </footer>
250
+ </div>
251
+
252
+ </body>
253
+ </html>