Hugging Face's logo

Spaces:
Sternbauer
/
codecrafting-pixelwizard
Running

App Files Community
Sternbauer commited on
Commit
ea87eec
·
verified ·
1 Parent(s): 34489f2

Redesign my website

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +309 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codecrafting Pixelwizard
3
- emoji: 🦀
4
- colorFrom: blue
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: CodeCrafting PixelWizard 🧙‍♂️
3
+ colorFrom: red
4
+ colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,310 @@
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.0">
6
+ <title>Matt Rothenberg - Designer & Developer</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+ .gradient-text {
18
+ background: linear-gradient(90deg, #6366F1, #EC4899);
19
+ -webkit-background-clip: text;
20
+ background-clip: text;
21
+ color: transparent;
22
+ }
23
+ .project-card:hover {
24
+ transform: translateY(-5px);
25
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-gray-50 text-gray-900">
30
+ <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-10"></div>
31
+
32
+ <div class="container mx-auto px-4 py-16 max-w-5xl">
33
+ <!-- Hero Section -->
34
+ <header class="flex flex-col md:flex-row items-center gap-8 mb-20">
35
+ <div class="w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border-4 border-white shadow-lg">
36
+ <img src="https://mattrothenberg.com/_astro/dither-matt.BPItm1_v_2foEWr.webp" alt="Matt Rothenberg" class="w-full h-full object-cover">
37
+ </div>
38
+ <div class="flex-1">
39
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Matt Rothenberg</h1>
40
+ <p class="text-xl md:text-2xl text-gray-600 mb-6">
41
+ New York-based <span class="gradient-text font-medium">designer</span>, <span class="gradient-text font-medium">developer</span>, and <span class="gradient-text font-medium">serial tinkerer</span>.
42
+ </p>
43
+ <p class="text-gray-500 flex items-center gap-2">
44
+ <i data-feather="coffee"></i> Strong coffee enthusiast
45
+ <span class="mx-2">•</span>
46
+ <i data-feather="code"></i> Unfinished side projects
47
+ <span class="mx-2">•</span>
48
+ <i data-feather="camera"></i> <a href="https://instagram.com/rothenbizzle" class="text-indigo-600 hover:text-indigo-800">Sharp photos</a>
49
+ </p>
50
+ </div>
51
+ </header>
52
+
53
+ <!-- Employment Section -->
54
+ <section class="mb-20">
55
+ <h2 class="text-3xl font-bold mb-8 flex items-center gap-3">
56
+ <span class="gradient-text">I'm employable</span>
57
+ <i data-feather="briefcase"></i>
58
+ </h2>
59
+
60
+ <div class="grid md:grid-cols-2 gap-8">
61
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
62
+ <div class="flex items-center gap-4 mb-4">
63
+ <div class="w-12 h-12 rounded-md bg-indigo-50 flex items-center justify-center">
64
+ <img src="https://replicate.com/static/images/favicon/favicon-32x32.png" alt="Replicate" class="w-6 h-6">
65
+ </div>
66
+ <div>
67
+ <h3 class="font-bold text-lg">Replicate</h3>
68
+ <p class="text-gray-500 text-sm">Current</p>
69
+ </div>
70
+ </div>
71
+ <p class="text-gray-600">Making machine learning accessible to all software engineers.</p>
72
+ </div>
73
+
74
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
75
+ <div class="flex items-center gap-4 mb-4">
76
+ <div class="w-12 h-12 rounded-md bg-gray-50 flex items-center justify-center">
77
+ <img src="https://github.githubassets.com/favicons/favicon.png" alt="GitHub" class="w-6 h-6">
78
+ </div>
79
+ <div>
80
+ <h3 class="font-bold text-lg">GitHub Next</h3>
81
+ <p class="text-gray-500 text-sm">Previous</p>
82
+ </div>
83
+ </div>
84
+ <p class="text-gray-600">Explored the future of software development and shipped products like Copilot and GitHub Blocks.</p>
85
+ </div>
86
+
87
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
88
+ <div class="flex items-center gap-4 mb-4">
89
+ <div class="w-12 h-12 rounded-md bg-blue-50 flex items-center justify-center">
90
+ <img src="https://clearbit.com/favicon.ico" alt="Clearbit" class="w-6 h-6">
91
+ </div>
92
+ <div>
93
+ <h3 class="font-bold text-lg">Clearbit</h3>
94
+ <p class="text-gray-500 text-sm">Previous</p>
95
+ </div>
96
+ </div>
97
+ <p class="text-gray-600">Led development of their core design system.</p>
98
+ </div>
99
+
100
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
101
+ <div class="flex items-center gap-4 mb-4">
102
+ <div class="w-12 h-12 rounded-md bg-purple-50 flex items-center justify-center">
103
+ <img src="https://www.heroku.com/favicon.ico" alt="Heroku" class="w-6 h-6">
104
+ </div>
105
+ <div>
106
+ <h3 class="font-bold text-lg">Heroku</h3>
107
+ <p class="text-gray-500 text-sm">Previous</p>
108
+ </div>
109
+ </div>
110
+ <p class="text-gray-600">Worked on web and command-line interfaces for managed data services.</p>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Open Source Projects -->
116
+ <section class="mb-20">
117
+ <h2 class="text-3xl font-bold mb-8 flex items-center gap-3">
118
+ <span class="gradient-text">I code for fun</span>
119
+ <i data-feather="github"></i>
120
+ </h2>
121
+
122
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
123
+ <div class="project-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition-all duration-300">
124
+ <div class="flex justify-between items-start mb-4">
125
+ <h3 class="font-bold text-lg">Tailwind CSS</h3>
126
+ <span class="text-sm bg-gray-100 px-2 py-1 rounded">90,443 ★</span>
127
+ </div>
128
+ <p class="text-gray-600 text-sm mb-4">A utility-first CSS framework for rapid UI development.</p>
129
+ <a href="https://github.com/tailwindlabs/tailwindcss" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center gap-1">
130
+ View on GitHub <i data-feather="external-link" class="w-3 h-3"></i>
131
+ </a>
132
+ </div>
133
+
134
+ <div class="project-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition-all duration-300">
135
+ <div class="flex justify-between items-start mb-4">
136
+ <h3 class="font-bold text-lg">Storybook</h3>
137
+ <span class="text-sm bg-gray-100 px-2 py-1 rounded">87,876 ★</span>
138
+ </div>
139
+ <p class="text-gray-600 text-sm mb-4">Build component driven UIs faster.</p>
140
+ <a href="https://github.com/storybookjs/storybook" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center gap-1">
141
+ View on GitHub <i data-feather="external-link" class="w-3 h-3"></i>
142
+ </a>
143
+ </div>
144
+
145
+ <div class="project-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition-all duration-300">
146
+ <div class="flex justify-between items-start mb-4">
147
+ <h3 class="font-bold text-lg">Chakra UI</h3>
148
+ <span class="text-sm bg-gray-100 px-2 py-1 rounded">39,767 ★</span>
149
+ </div>
150
+ <p class="text-gray-600 text-sm mb-4">Simple, modular and accessible component library.</p>
151
+ <a href="https://github.com/chakra-ui/chakra-ui" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center gap-1">
152
+ View on GitHub <i data-feather="external-link" class="w-3 h-3"></i>
153
+ </a>
154
+ </div>
155
+
156
+ <div class="project-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition-all duration-300">
157
+ <div class="flex justify-between items-start mb-4">
158
+ <h3 class="font-bold text-lg">Ariakit</h3>
159
+ <span class="text-sm bg-gray-100 px-2 py-1 rounded">8,411 ★</span>
160
+ </div>
161
+ <p class="text-gray-600 text-sm mb-4">Toolkit for building accessible web apps.</p>
162
+ <a href="https://github.com/ariakit/ariakit" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center gap-1">
163
+ View on GitHub <i data-feather="external-link" class="w-3 h-3"></i>
164
+ </a>
165
+ </div>
166
+
167
+ <div class="project-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition-all duration-300">
168
+ <div class="flex justify-between items-start mb-4">
169
+ <h3 class="font-bold text-lg">Vue Overdrive</h3>
170
+ <span class="text-sm bg-gray-100 px-2 py-1 rounded">680 ★</span>
171
+ </div>
172
+ <p class="text-gray-600 text-sm mb-4">Super easy magic-move transitions for Vue.js.</p>
173
+ <a href="https://github.com/mattrothenberg/vue-overdrive" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center gap-1">
174
+ View on GitHub <i data-feather="external-link" class="w-3 h-3"></i>
175
+ </a>
176
+ </div>
177
+ </div>
178
+ </section>
179
+
180
+ <!-- Freelance Section -->
181
+ <section class="mb-20">
182
+ <h2 class="text-3xl font-bold mb-8 flex items-center gap-3">
183
+ <span class="gradient-text">I freelance</span>
184
+ <i data-feather="dollar-sign"></i>
185
+ </h2>
186
+
187
+ <div class="bg-white p-8 rounded-xl shadow-md border border-gray-100">
188
+ <p class="text-gray-600 mb-6">
189
+ I've freelanced for and provide ongoing advisory/consulting services to some wonderful clients.
190
+ If you need frontend help – whether it's prototyping, building a design system, or making a
191
+ content-managed website with technology like Astro, Remix, or Next.js and a headless CMS like Dato –
192
+ then I'm your guy.
193
+ </p>
194
+
195
+ <p class="font-medium text-gray-700 mb-4">Let's add your logo to the list:</p>
196
+
197
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
198
+ <div class="h-24 bg-gray-50 rounded-lg flex items-center justify-center border border-gray-200">
199
+ <span class="text-gray-400">Your Logo</span>
200
+ </div>
201
+ <div class="h-24 bg-gray-50 rounded-lg flex items-center justify-center border border-gray-200">
202
+ <span class="text-gray-400">Your Logo</span>
203
+ </div>
204
+ <div class="h-24 bg-gray-50 rounded-lg flex items-center justify-center border border-gray-200">
205
+ <span class="text-gray-400">Your Logo</span>
206
+ </div>
207
+ <div class="h-24 bg-gray-50 rounded-lg flex items-center justify-center border border-gray-200">
208
+ <span class="text-gray-400">Your Logo</span>
209
+ </div>
210
+ <div class="h-24 bg-gray-50 rounded-lg flex items-center justify-center border border-gray-200">
211
+ <span class="text-gray-400">Your Logo</span>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="mt-8 text-center">
216
+ <a href="mailto:matt@example.com" class="inline-block bg-gradient-to-r from-indigo-500 to-pink-500 text-white px-6 py-3 rounded-lg font-medium hover:shadow-lg transition-all duration-300">
217
+ Get in touch
218
+ </a>
219
+ </div>
220
+ </div>
221
+ </section>
222
+
223
+ <!-- Writing Section -->
224
+ <section class="mb-20">
225
+ <h2 class="text-3xl font-bold mb-8 flex items-center gap-3">
226
+ <span class="gradient-text">I write words</span>
227
+ <i data-feather="edit-2"></i>
228
+ </h2>
229
+
230
+ <div class="space-y-6">
231
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
232
+ <h3 class="font-bold text-lg mb-2">
233
+ <a href="https://syntax.fm/show/622/supper-club-matt-rothenberg-and-idan-gazit-on-github-next" class="hover:text-indigo-600">
234
+ Syntax.fm – Matt Rothenberg and Idan Gazit on Github Next
235
+ </a>
236
+ </h3>
237
+ <p class="text-gray-500 text-sm">June 2, 2023</p>
238
+ </div>
239
+
240
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
241
+ <h3 class="font-bold text-lg mb-2">
242
+ <a href="https://githubnext.com/projects/copilot-cli/" class="hover:text-indigo-600">
243
+ GitHub Copilot CLI
244
+ </a>
245
+ </h3>
246
+ <p class="text-gray-500 text-sm">July 1, 2022</p>
247
+ </div>
248
+
249
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
250
+ <h3 class="font-bold text-lg mb-2">
251
+ <a href="https://dev.to/mattrothenberg/build-a-location-autocomplete-field-for-statamic-v3-49cp" class="hover:text-indigo-600">
252
+ Build a location autocomplete field for Statamic V3
253
+ </a>
254
+ </h3>
255
+ <p class="text-gray-500 text-sm">November 24, 2019</p>
256
+ </div>
257
+
258
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
259
+ <h3 class="font-bold text-lg mb-2">
260
+ <a href="https://medium.freecodecamp.org/vue-js-introduction-for-people-who-know-just-enough-jquery-to-get-by-eab5aa193d77" class="hover:text-indigo-600">
261
+ A Vue.js introduction for people who know just enough jQuery to get by
262
+ </a>
263
+ </h3>
264
+ <p class="text-gray-500 text-sm">Apr 10, 2017</p>
265
+ </div>
266
+ </div>
267
+ </section>
268
+
269
+ <footer class="py-8 border-t border-gray-200 text-center text-gray-500">
270
+ <p>© 2023 Matt Rothenberg. All rights reserved.</p>
271
+ <div class="flex justify-center gap-4 mt-4">
272
+ <a href="https://github.com/mattrothenberg" class="text-gray-400 hover:text-gray-600">
273
+ <i data-feather="github"></i>
274
+ </a>
275
+ <a href="https://instagram.com/rothenbizzle" class="text-gray-400 hover:text-gray-600">
276
+ <i data-feather="instagram"></i>
277
+ </a>
278
+ <a href="https://twitter.com/rothenbizzle" class="text-gray-400 hover:text-gray-600">
279
+ <i data-feather="twitter"></i>
280
+ </a>
281
+ <a href="mailto:matt@example.com" class="text-gray-400 hover:text-gray-600">
282
+ <i data-feather="mail"></i>
283
+ </a>
284
+ </div>
285
+ </footer>
286
+ </div>
287
+
288
+ <script>
289
+ // Initialize Vanta.js background
290
+ VANTA.NET({
291
+ el: "#vanta-bg",
292
+ mouseControls: true,
293
+ touchControls: true,
294
+ gyroControls: false,
295
+ minHeight: 200.00,
296
+ minWidth: 200.00,
297
+ scale: 1.00,
298
+ scaleMobile: 1.00,
299
+ color: 0x6366f1,
300
+ backgroundColor: 0xf9fafb,
301
+ points: 10.00,
302
+ maxDistance: 20.00,
303
+ spacing: 15.00
304
+ });
305
+
306
+ // Initialize feather icons
307
+ feather.replace();
308
+ </script>
309
+ </body>
310
  </html>