Hugging Face's logo

Spaces:
coreyalejandro
/
deepsite-redesign
Running

App Files Community
coreyalejandro commited on
Commit
431606e
·
verified ·
1 Parent(s): d6b1277

IMG_3800.jpg - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +339 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite Redesign
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: gray
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: deepsite-redesign
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,339 @@
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>Corey Alejandro | AI & Data Engineer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Space Grotesk', sans-serif;
14
+ background-color: #f8f9fa;
15
+ color: #1a1a1a;
16
+ }
17
+
18
+ .ghibli-gradient {
19
+ background: linear-gradient(135deg, #a5d8ff 0%, #c4f0ff 50%, #d8f3dc 100%);
20
+ }
21
+
22
+ .card-hover:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
25
+ }
26
+
27
+ .quote-mark {
28
+ opacity: 0.2;
29
+ font-size: 5rem;
30
+ line-height: 1;
31
+ }
32
+
33
+ .skill-icon {
34
+ transition: all 0.3s ease;
35
+ }
36
+
37
+ .skill-icon:hover {
38
+ transform: scale(1.1);
39
+ }
40
+
41
+ .nav-link {
42
+ position: relative;
43
+ }
44
+
45
+ .nav-link::after {
46
+ content: '';
47
+ position: absolute;
48
+ width: 0;
49
+ height: 2px;
50
+ bottom: -2px;
51
+ left: 0;
52
+ background-color: #3b82f6;
53
+ transition: width 0.3s ease;
54
+ }
55
+
56
+ .nav-link:hover::after {
57
+ width: 100%;
58
+ }
59
+ </style>
60
+ </head>
61
+ <body class="min-h-screen">
62
+ <!-- Navigation -->
63
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
64
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
65
+ <div class="flex justify-between h-16">
66
+ <div class="flex items-center">
67
+ <a href="#" class="text-xl font-bold text-gray-900">Corey Alejandro</a>
68
+ </div>
69
+ <div class="hidden md:flex items-center space-x-8">
70
+ <a href="#about" class="nav-link text-gray-700 hover:text-gray-900">About</a>
71
+ <a href="#projects" class="nav-link text-gray-700 hover:text-gray-900">Projects</a>
72
+ <a href="#skills" class="nav-link text-gray-700 hover:text-gray-900">Skills</a>
73
+ <a href="#contact" class="nav-link text-gray-700 hover:text-gray-900">Contact</a>
74
+ </div>
75
+ <div class="md:hidden flex items-center">
76
+ <button id="menu-toggle" class="text-gray-700">
77
+ <i class="fas fa-bars text-xl"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <!-- Mobile menu -->
83
+ <div id="mobile-menu" class="hidden md:hidden bg-white pb-4 px-4">
84
+ <a href="#about" class="block py-2 text-gray-700 hover:text-gray-900">About</a>
85
+ <a href="#projects" class="block py-2 text-gray-700 hover:text-gray-900">Projects</a>
86
+ <a href="#skills" class="block py-2 text-gray-700 hover:text-gray-900">Skills</a>
87
+ <a href="#contact" class="block py-2 text-gray-700 hover:text-gray-900">Contact</a>
88
+ </div>
89
+ </nav>
90
+
91
+ <!-- Hero Section -->
92
+ <header class="ghibli-gradient py-20">
93
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
94
+ <div class="text-center">
95
+ <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-4">AI & DATA ENGINEER</h1>
96
+ <p class="text-xl md:text-2xl text-gray-800 max-w-3xl mx-auto mb-8">
97
+ Neurodivergent builder of trauma-informed, human-aware machine learning systems. Studio Ghibli dreamer with a passion for accessible AI.
98
+ </p>
99
+ <div class="flex flex-wrap justify-center gap-4 mb-12">
100
+ <span class="px-4 py-2 bg-white bg-opacity-80 rounded-full text-gray-900 font-medium shadow-sm">NEURODIVERGENT</span>
101
+ <span class="px-4 py-2 bg-white bg-opacity-80 rounded-full text-gray-900 font-medium shadow-sm">AI FOR GOOD</span>
102
+ <span class="px-4 py-2 bg-white bg-opacity-80 rounded-full text-gray-900 font-medium shadow-sm">ACCESSIBLE DESIGN</span>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </header>
107
+
108
+ <!-- Quote Section -->
109
+ <section id="about" class="py-16 bg-white">
110
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
111
+ <div class="relative">
112
+ <span class="quote-mark absolute -top-8 -left-4 text-blue-200">"</span>
113
+ <blockquote class="text-2xl md:text-3xl font-medium text-gray-800 italic pl-12">
114
+ Write programs that do one thing and do it well.
115
+ </blockquote>
116
+ <p class="text-right text-gray-600 mt-4 pr-12">— Doug McIlroy, Unix Philosophy (1978)</p>
117
+ </div>
118
+ </div>
119
+ </section>
120
+
121
+ <!-- Projects Section -->
122
+ <section id="projects" class="py-16 bg-gray-50">
123
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
124
+ <h2 class="text-3xl font-bold text-center mb-12">Featured Projects</h2>
125
+
126
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
127
+ <!-- Project 1 -->
128
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover">
129
+ <div class="p-6">
130
+ <div class="flex items-center mb-4">
131
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
132
+ <i class="fas fa-brain text-blue-600 text-xl"></i>
133
+ </div>
134
+ <h3 class="text-xl font-bold">Trauma-Informed AI</h3>
135
+ </div>
136
+ <p class="text-gray-600 mb-4">
137
+ Building machine learning systems that understand and respect human trauma responses.
138
+ </p>
139
+ <div class="flex flex-wrap gap-2">
140
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">PYTHON</span>
141
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">TENSORFLOW</span>
142
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">PSYCHOLOGY</span>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Project 2 -->
148
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover">
149
+ <div class="p-6">
150
+ <div class="flex items-center mb-4">
151
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
152
+ <i class="fas fa-universal-access text-green-600 text-xl"></i>
153
+ </div>
154
+ <h3 class="text-xl font-bold">Accessible UX Design</h3>
155
+ </div>
156
+ <p class="text-gray-600 mb-4">
157
+ Creating inclusive interfaces that work for everyone, especially neurodivergent users.
158
+ </p>
159
+ <div class="flex flex-wrap gap-2">
160
+ <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">REACT</span>
161
+ <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">WCAG 2.1</span>
162
+ <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">UX RESEARCH</span>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Project 3 -->
168
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover">
169
+ <div class="p-6">
170
+ <div class="flex items-center mb-4">
171
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
172
+ <i class="fas fa-magic text-purple-600 text-xl"></i>
173
+ </div>
174
+ <h3 class="text-xl font-bold">Ghibli-Inspired Systems</h3>
175
+ </div>
176
+ <p class="text-gray-600 mb-4">
177
+ Bringing the magic and wonder of Studio Ghibli into digital experiences.
178
+ </p>
179
+ <div class="flex flex-wrap gap-2">
180
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full">THREE.JS</span>
181
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full">CSS3</span>
182
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full">ANIMATION</span>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </section>
189
+
190
+ <!-- Skills Section -->
191
+ <section id="skills" class="py-16 bg-white">
192
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
193
+ <h2 class="text-3xl font-bold text-center mb-12">Skills & Expertise</h2>
194
+
195
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
196
+ <!-- Skill 1 -->
197
+ <div class="text-center p-6 rounded-xl bg-gray-50">
198
+ <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-blue-100 flex items-center justify-center skill-icon">
199
+ <i class="fas fa-robot text-blue-600 text-3xl"></i>
200
+ </div>
201
+ <h3 class="text-xl font-bold mb-4">AI & Machine Learning</h3>
202
+ <ul class="space-y-2">
203
+ <li class="flex items-center justify-center">
204
+ <i class="fas fa-check text-blue-500 mr-2"></i>
205
+ <span>Python</span>
206
+ </li>
207
+ <li class="flex items-center justify-center">
208
+ <i class="fas fa-check text-blue-500 mr-2"></i>
209
+ <span>TensorFlow</span>
210
+ </li>
211
+ <li class="flex items-center justify-center">
212
+ <i class="fas fa-check text-blue-500 mr-2"></i>
213
+ <span>PyTorch</span>
214
+ </li>
215
+ </ul>
216
+ </div>
217
+
218
+ <!-- Skill 2 -->
219
+ <div class="text-center p-6 rounded-xl bg-gray-50">
220
+ <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-green-100 flex items-center justify-center skill-icon">
221
+ <i class="fas fa-code text-green-600 text-3xl"></i>
222
+ </div>
223
+ <h3 class="text-xl font-bold mb-4">Full Stack Development</h3>
224
+ <ul class="space-y-2">
225
+ <li class="flex items-center justify-center">
226
+ <i class="fas fa-check text-green-500 mr-2"></i>
227
+ <span>React</span>
228
+ </li>
229
+ <li class="flex items-center justify-center">
230
+ <i class="fas fa-check text-green-500 mr-2"></i>
231
+ <span>Node.js</span>
232
+ </li>
233
+ <li class="flex items-center justify-center">
234
+ <i class="fas fa-check text-green-500 mr-2"></i>
235
+ <span>TypeScript</span>
236
+ </li>
237
+ </ul>
238
+ </div>
239
+
240
+ <!-- Skill 3 -->
241
+ <div class="text-center p-6 rounded-xl bg-gray-50">
242
+ <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-purple-100 flex items-center justify-center skill-icon">
243
+ <i class="fas fa-wheelchair text-purple-600 text-3xl"></i>
244
+ </div>
245
+ <h3 class="text-xl font-bold mb-4">Accessibility & UX</h3>
246
+ <ul class="space-y-2">
247
+ <li class="flex items-center justify-center">
248
+ <i class="fas fa-check text-purple-500 mr-2"></i>
249
+ <span>WCAG 2.1 AA</span>
250
+ </li>
251
+ <li class="flex items-center justify-center">
252
+ <i class="fas fa-check text-purple-500 mr-2"></i>
253
+ <span>Neurodivergent Design</span>
254
+ </li>
255
+ <li class="flex items-center justify-center">
256
+ <i class="fas fa-check text-purple-500 mr-2"></i>
257
+ <span>User Research</span>
258
+ </li>
259
+ </ul>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </section>
264
+
265
+ <!-- Contact Section -->
266
+ <section id="contact" class="py-16 bg-gray-50">
267
+ <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
268
+ <h2 class="text-3xl font-bold mb-6">Let's Connect</h2>
269
+ <p class="text-gray-600 mb-8">
270
+ Interested in trauma-informed AI or accessible design? Reach out to discuss potential collaborations.
271
+ </p>
272
+ <div class="flex justify-center space-x-6">
273
+ <a href="#" class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center hover:bg-blue-200 transition-colors">
274
+ <i class="fab fa-twitter text-blue-600 text-xl"></i>
275
+ </a>
276
+ <a href="#" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition-colors">
277
+ <i class="fab fa-github text-gray-600 text-xl"></i>
278
+ </a>
279
+ <a href="#" class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center hover:bg-red-200 transition-colors">
280
+ <i class="fab fa-linkedin-in text-red-600 text-xl"></i>
281
+ </a>
282
+ <a href="#" class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center hover:bg-green-200 transition-colors">
283
+ <i class="fas fa-envelope text-green-600 text-xl"></i>
284
+ </a>
285
+ </div>
286
+ </div>
287
+ </section>
288
+
289
+ <!-- Footer -->
290
+ <footer class="py-8 bg-white border-t border-gray-200">
291
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
292
+ <p class="text-gray-500">
293
+ &copy; 2023 Corey Alejandro. All rights reserved.
294
+ </p>
295
+ </div>
296
+ </footer>
297
+
298
+ <script>
299
+ // Mobile menu toggle
300
+ document.getElementById('menu-toggle').addEventListener('click', function() {
301
+ const menu = document.getElementById('mobile-menu');
302
+ menu.classList.toggle('hidden');
303
+ });
304
+
305
+ // Smooth scrolling for navigation links
306
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
307
+ anchor.addEventListener('click', function (e) {
308
+ e.preventDefault();
309
+
310
+ const targetId = this.getAttribute('href');
311
+ const targetElement = document.querySelector(targetId);
312
+
313
+ if (targetElement) {
314
+ window.scrollTo({
315
+ top: targetElement.offsetTop - 80,
316
+ behavior: 'smooth'
317
+ });
318
+
319
+ // Close mobile menu if open
320
+ const mobileMenu = document.getElementById('mobile-menu');
321
+ if (!mobileMenu.classList.contains('hidden')) {
322
+ mobileMenu.classList.add('hidden');
323
+ }
324
+ }
325
+ });
326
+ });
327
+
328
+ // Add shadow to navbar on scroll
329
+ window.addEventListener('scroll', function() {
330
+ const nav = document.querySelector('nav');
331
+ if (window.scrollY > 10) {
332
+ nav.classList.add('shadow-md');
333
+ } else {
334
+ nav.classList.remove('shadow-md');
335
+ }
336
+ });
337
+ </script>
338
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=coreyalejandro/deepsite-redesign" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
339
+ </html>