ashxhart commited on
Commit
156e8cc
·
verified ·
1 Parent(s): 02216b6

Replace default static page with Vontra company page

Browse files
Files changed (2) hide show
  1. index.html +85 -17
  2. style.css +225 -17
index.html CHANGED
@@ -1,19 +1,87 @@
1
  <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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" />
6
+ <meta
7
+ name="description"
8
+ content="Vontra Labs builds compact AI systems and publishes measured PhaseMesh artifacts."
9
+ />
10
+ <title>Vontra Labs</title>
11
+ <link rel="stylesheet" href="style.css" />
12
+ </head>
13
+ <body>
14
+ <main class="shell">
15
+ <section class="hero" aria-label="Vontra Labs">
16
+ <div class="hero-copy">
17
+ <p class="eyebrow">Vontra Labs</p>
18
+ <h1>Compact AI systems, measured in public.</h1>
19
+ <p class="lede">
20
+ We build small local AI runtimes that trade blind scale for structure,
21
+ reproducibility, and useful artifacts.
22
+ </p>
23
+ <div class="actions" aria-label="Primary links">
24
+ <a class="button primary" href="https://huggingface.co/Vontra/PhaseMesh-Qwen3-4B">
25
+ PhaseMesh-Qwen3-4B
26
+ </a>
27
+ <a class="button" href="https://github.com/ashhart/PhaseMesh">
28
+ GitHub
29
+ </a>
30
+ </div>
31
+ </div>
32
+
33
+ <div class="signal" aria-hidden="true">
34
+ <div class="mesh-grid">
35
+ <span></span><span></span><span></span><span></span>
36
+ <span></span><span></span><span></span><span></span>
37
+ <span></span><span></span><span></span><span></span>
38
+ <span></span><span></span><span></span><span></span>
39
+ </div>
40
+ </div>
41
+ </section>
42
+
43
+ <section class="section">
44
+ <div>
45
+ <p class="section-label">Featured artifact</p>
46
+ <h2>PhaseMesh-Qwen3-4B</h2>
47
+ <p>
48
+ A PhaseMesh trace LM built from Qwen3-4B-Instruct coding and reasoning traces.
49
+ It is a fast specialist over a measured coverage set, not a raw Qwen checkpoint
50
+ or a general transformer replacement.
51
+ </p>
52
+ </div>
53
+ <div class="metrics" aria-label="PhaseMesh-Qwen3-4B metrics">
54
+ <article>
55
+ <strong>180</strong>
56
+ <span>Qwen traces</span>
57
+ </article>
58
+ <article>
59
+ <strong>65/65</strong>
60
+ <span>coverage eval</span>
61
+ </article>
62
+ <article>
63
+ <strong>~2.18 ms</strong>
64
+ <span>median PhaseMesh latency</span>
65
+ </article>
66
+ <article>
67
+ <strong>~4,966 ms</strong>
68
+ <span>live Qwen3-4B CUDA baseline</span>
69
+ </article>
70
+ </div>
71
+ </section>
72
+
73
+ <section class="section compact">
74
+ <div>
75
+ <p class="section-label">Research posture</p>
76
+ <h2>Useful artifacts over inflated claims.</h2>
77
+ </div>
78
+ <ul class="principles">
79
+ <li>Measured artifacts over vibes</li>
80
+ <li>Reproducible evals over screenshots</li>
81
+ <li>Small local systems over opaque dependency chains</li>
82
+ <li>Truthful limits over benchmark theatre</li>
83
+ </ul>
84
+ </section>
85
+ </main>
86
+ </body>
87
  </html>
style.css CHANGED
@@ -1,28 +1,236 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ :root {
2
+ color-scheme: dark;
3
+ --bg: #0c1117;
4
+ --panel: #121923;
5
+ --panel-strong: #172231;
6
+ --text: #eef5f8;
7
+ --muted: #9fb0bd;
8
+ --line: #243241;
9
+ --cyan: #73e3d4;
10
+ --green: #a8f0a5;
11
+ --ink: #071014;
12
+ }
13
+
14
+ * {
15
+ box-sizing: border-box;
16
+ }
17
+
18
  body {
19
+ margin: 0;
20
+ min-height: 100vh;
21
+ background: var(--bg);
22
+ color: var(--text);
23
+ font-family:
24
+ Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
25
+ sans-serif;
26
+ line-height: 1.5;
27
  }
28
 
29
+ a {
30
+ color: inherit;
31
+ }
32
+
33
+ .shell {
34
+ width: min(1120px, calc(100% - 32px));
35
+ margin: 0 auto;
36
+ padding: 48px 0;
37
  }
38
 
39
+ .hero {
40
+ display: grid;
41
+ grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
42
+ gap: 36px;
43
+ align-items: center;
44
+ min-height: 420px;
45
+ }
46
+
47
+ .eyebrow,
48
+ .section-label {
49
+ margin: 0 0 12px;
50
+ color: var(--cyan);
51
+ font-size: 0.78rem;
52
+ font-weight: 800;
53
+ letter-spacing: 0.12em;
54
+ text-transform: uppercase;
55
+ }
56
+
57
+ h1,
58
+ h2,
59
  p {
60
+ margin-top: 0;
61
+ }
62
+
63
+ h1 {
64
+ max-width: 780px;
65
+ margin-bottom: 20px;
66
+ font-size: clamp(2.6rem, 6vw, 5.8rem);
67
+ line-height: 0.95;
68
+ letter-spacing: 0;
69
  }
70
 
71
+ h2 {
72
+ margin-bottom: 12px;
73
+ font-size: clamp(1.6rem, 3vw, 2.35rem);
74
+ line-height: 1.05;
75
+ letter-spacing: 0;
 
76
  }
77
 
78
+ .lede,
79
+ .section p {
80
+ max-width: 720px;
81
+ color: var(--muted);
82
+ font-size: 1.08rem;
83
+ }
84
+
85
+ .actions {
86
+ display: flex;
87
+ flex-wrap: wrap;
88
+ gap: 12px;
89
+ margin-top: 28px;
90
+ }
91
+
92
+ .button {
93
+ display: inline-flex;
94
+ align-items: center;
95
+ justify-content: center;
96
+ min-height: 44px;
97
+ padding: 0 18px;
98
+ border: 1px solid var(--line);
99
+ border-radius: 8px;
100
+ background: var(--panel);
101
+ color: var(--text);
102
+ font-weight: 750;
103
+ text-decoration: none;
104
+ }
105
+
106
+ .button.primary {
107
+ border-color: transparent;
108
+ background: var(--cyan);
109
+ color: var(--ink);
110
+ }
111
+
112
+ .signal {
113
+ position: relative;
114
+ min-height: 330px;
115
+ border: 1px solid var(--line);
116
+ border-radius: 8px;
117
+ overflow: hidden;
118
+ background:
119
+ linear-gradient(135deg, rgba(115, 227, 212, 0.10), transparent 42%),
120
+ var(--panel);
121
+ }
122
+
123
+ .signal::before {
124
+ content: "";
125
+ position: absolute;
126
+ inset: 0;
127
+ background-image:
128
+ linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
129
+ linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
130
+ background-size: 28px 28px;
131
+ }
132
+
133
+ .mesh-grid {
134
+ position: absolute;
135
+ inset: 32px;
136
+ display: grid;
137
+ grid-template-columns: repeat(4, 1fr);
138
+ gap: 16px;
139
+ }
140
+
141
+ .mesh-grid span {
142
+ display: block;
143
+ min-height: 48px;
144
+ border: 1px solid rgba(115, 227, 212, 0.28);
145
+ border-radius: 8px;
146
+ background: rgba(115, 227, 212, 0.08);
147
+ box-shadow: 0 0 22px rgba(115, 227, 212, 0.12) inset;
148
+ }
149
+
150
+ .mesh-grid span:nth-child(3n + 1) {
151
+ background: rgba(168, 240, 165, 0.09);
152
+ border-color: rgba(168, 240, 165, 0.24);
153
+ }
154
+
155
+ .section {
156
+ display: grid;
157
+ grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1fr);
158
+ gap: 28px;
159
+ padding: 32px 0;
160
+ border-top: 1px solid var(--line);
161
+ }
162
+
163
+ .section.compact {
164
+ grid-template-columns: minmax(0, 0.7fr) minmax(300px, 1fr);
165
+ }
166
+
167
+ .metrics {
168
+ display: grid;
169
+ grid-template-columns: repeat(2, minmax(0, 1fr));
170
+ gap: 12px;
171
+ }
172
+
173
+ .metrics article {
174
+ min-height: 118px;
175
+ padding: 18px;
176
+ border: 1px solid var(--line);
177
+ border-radius: 8px;
178
+ background: var(--panel);
179
+ }
180
+
181
+ .metrics strong {
182
+ display: block;
183
+ margin-bottom: 8px;
184
+ color: var(--green);
185
+ font-size: 1.7rem;
186
+ line-height: 1;
187
+ white-space: nowrap;
188
+ }
189
+
190
+ .metrics span,
191
+ .principles {
192
+ color: var(--muted);
193
+ }
194
+
195
+ .principles {
196
+ display: grid;
197
+ gap: 10px;
198
+ margin: 0;
199
+ padding-left: 20px;
200
+ }
201
+
202
+ @media (max-width: 820px) {
203
+ .shell {
204
+ width: min(100% - 24px, 720px);
205
+ padding: 30px 0;
206
+ }
207
+
208
+ .hero,
209
+ .section,
210
+ .section.compact {
211
+ grid-template-columns: 1fr;
212
+ }
213
+
214
+ .hero {
215
+ min-height: auto;
216
+ }
217
+
218
+ .signal {
219
+ min-height: 220px;
220
+ }
221
+ }
222
+
223
+ @media (max-width: 520px) {
224
+ .actions,
225
+ .metrics {
226
+ grid-template-columns: 1fr;
227
+ }
228
+
229
+ .actions {
230
+ display: grid;
231
+ }
232
+
233
+ .button {
234
+ width: 100%;
235
+ }
236
  }