Hugging Face's logo

Spaces:
Marccorn
/
link-page
Running

App Files Community
Marccorn commited on
Commit
a6e4a84
·
verified ·
1 Parent(s): 209581c

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +350 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Link Page
3
- emoji: 🐨
4
- colorFrom: indigo
5
- colorTo: green
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: link-page
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,350 @@
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>Marc Cornelius | Links</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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
15
+ min-height: 100vh;
16
+ }
17
+
18
+ .profile-img {
19
+ border: 4px solid white;
20
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
21
+ transition: transform 0.3s ease;
22
+ }
23
+
24
+ .profile-img:hover {
25
+ transform: scale(1.05);
26
+ }
27
+
28
+ .link-card {
29
+ transition: all 0.3s ease;
30
+ background: rgba(255, 255, 255, 0.8);
31
+ backdrop-filter: blur(10px);
32
+ }
33
+
34
+ .link-card:hover {
35
+ transform: translateY(-5px);
36
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
37
+ }
38
+
39
+ /* Enhanced styling for AI Audit card */
40
+ .ai-audit-card {
41
+ background: linear-gradient(135deg, #4f5bd5 0%, #962fbf 30%, #d62976 60%, #fa7e1e 90%);
42
+ color: white;
43
+ position: relative;
44
+ overflow: hidden;
45
+ border: 2px solid white;
46
+ animation: pulse-glow 2s infinite alternate;
47
+ }
48
+
49
+ .ai-audit-card::before {
50
+ content: '';
51
+ position: absolute;
52
+ top: -50%;
53
+ left: -50%;
54
+ width: 200%;
55
+ height: 200%;
56
+ background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%);
57
+ transform: rotate(30deg);
58
+ animation: shine 3s infinite;
59
+ }
60
+
61
+ .ai-audit-card:hover {
62
+ transform: scale(1.05) translateY(-5px);
63
+ box-shadow: 0 20px 30px rgba(149, 75, 214, 0.7);
64
+ animation: none;
65
+ }
66
+
67
+ .ai-audit-card .icon-bg {
68
+ background: rgba(255, 255, 255, 0.3);
69
+ box-shadow: 0 0 15px rgba(255,255,255,0.5);
70
+ }
71
+
72
+ .ai-audit-card i, .ai-audit-card h3, .ai-audit-card p, .ai-audit-card .chevron {
73
+ color: white !important;
74
+ text-shadow: 0 2px 4px rgba(0,0,0,0.2);
75
+ }
76
+
77
+ .ai-audit-card h3 {
78
+ font-weight: 700;
79
+ font-size: 1.2rem;
80
+ }
81
+
82
+ .ai-audit-card p {
83
+ opacity: 0.9;
84
+ font-weight: 500;
85
+ }
86
+
87
+ @keyframes shine {
88
+ 0% {
89
+ transform: rotate(30deg) translate(-30%, -30%);
90
+ }
91
+ 100% {
92
+ transform: rotate(30deg) translate(30%, 30%);
93
+ }
94
+ }
95
+
96
+ @keyframes pulse-glow {
97
+ 0% {
98
+ box-shadow: 0 0 15px rgba(149, 75, 214, 0.5);
99
+ }
100
+ 100% {
101
+ box-shadow: 0 0 30px rgba(149, 75, 214, 0.8);
102
+ }
103
+ }
104
+
105
+ .accordion-content {
106
+ max-height: 0;
107
+ overflow: hidden;
108
+ transition: max-height 0.3s ease-out;
109
+ }
110
+
111
+ .accordion.active .accordion-content {
112
+ max-height: 500px;
113
+ transition: max-height 0.5s ease-in;
114
+ }
115
+
116
+ .accordion.active .accordion-icon {
117
+ transform: rotate(180deg);
118
+ }
119
+
120
+ .accordion-icon {
121
+ transition: transform 0.3s ease;
122
+ }
123
+
124
+ .ai-sparkles {
125
+ position: absolute;
126
+ width: 100%;
127
+ height: 100%;
128
+ pointer-events: none;
129
+ }
130
+
131
+ .ai-sparkle {
132
+ position: absolute;
133
+ background: white;
134
+ border-radius: 50%;
135
+ opacity: 0;
136
+ animation: sparkle-fall 2s linear infinite;
137
+ }
138
+
139
+ @keyframes sparkle-fall {
140
+ 0% {
141
+ transform: translateY(-20px) rotate(0deg);
142
+ opacity: 0;
143
+ }
144
+ 20% {
145
+ opacity: 0.7;
146
+ }
147
+ 100% {
148
+ transform: translateY(120px) rotate(360deg);
149
+ opacity: 0;
150
+ }
151
+ }
152
+ </style>
153
+ </head>
154
+ <body class="flex flex-col items-center py-12 px-4">
155
+ <div class="w-full max-w-md mx-auto">
156
+ <!-- Profile Section -->
157
+ <div class="flex flex-col items-center mb-8">
158
+ <img src="https://marccornelius.com/wp-content/uploads/2024/02/image-12-1.png"
159
+ alt="Marc Cornelius"
160
+ class="profile-img w-32 h-32 rounded-full object-cover mb-4">
161
+ <h1 class="text-3xl font-bold text-gray-800 mb-1">Marc Cornelius</h1>
162
+ <p class="text-gray-600">Digital Strategist & AI Consultant</p>
163
+ </div>
164
+
165
+ <!-- Links Section -->
166
+ <div class="space-y-4 mb-8">
167
+ <!-- Supercharged AI Audit Link -->
168
+ <a href="https://marccornelius.com/ai-audit" target="_blank" class="block">
169
+ <div class="link-card ai-audit-card rounded-xl p-5 flex items-center shadow-lg relative overflow-hidden">
170
+ <div id="ai-sparkles-container" class="ai-sparkles"></div>
171
+ <div class="icon-bg p-4 rounded-xl mr-4">
172
+ <i class="fas fa-robot text-2xl"></i>
173
+ </div>
174
+ <div class="z-10">
175
+ <h3>🚀 AI Audit PRO</h3>
176
+ <p class="text-sm">Transform your business with AI (Limited Offer)</p>
177
+ </div>
178
+ <div class="ml-auto z-10">
179
+ <div class="bg-white bg-opacity-30 rounded-full p-1">
180
+ <i class="fas fa-chevron-right"></i>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </a>
185
+
186
+ <!-- Store Link -->
187
+ <a href="https://marccornelius.com/store/" target="_blank" class="block">
188
+ <div class="link-card rounded-xl p-5 flex items-center shadow-md hover:shadow-lg">
189
+ <div class="bg-indigo-100 p-3 rounded-lg mr-4">
190
+ <i class="fas fa-shopping-bag text-indigo-600 text-xl"></i>
191
+ </div>
192
+ <div>
193
+ <h3 class="font-semibold text-gray-800">Store</h3>
194
+ <p class="text-sm text-gray-500">Digital products & resources</p>
195
+ </div>
196
+ <div class="ml-auto">
197
+ <i class="fas fa-chevron-right text-gray-400"></i>
198
+ </div>
199
+ </div>
200
+ </a>
201
+
202
+ <!-- Blog Link -->
203
+ <a href="https://marccornelius.com/blog" target="_blank" class="block">
204
+ <div class="link-card rounded-xl p-5 flex items-center shadow-md hover:shadow-lg">
205
+ <div class="bg-orange-100 p-3 rounded-lg mr-4">
206
+ <i class="fas fa-pen-fancy text-orange-600 text-xl"></i>
207
+ </div>
208
+ <div>
209
+ <h3 class="font-semibold text-gray-800">Blog</h3>
210
+ <p class="text-sm text-gray-500">Read my latest articles</p>
211
+ </div>
212
+ <div class="ml-auto">
213
+ <i class="fas fa-chevron-right text-gray-400"></i>
214
+ </div>
215
+ </div>
216
+ </a>
217
+
218
+ <!-- Website Link -->
219
+ <a href="https://marccornelius.com/" target="_blank" class="block">
220
+ <div class="link-card rounded-xl p-5 flex items-center shadow-md hover:shadow-lg">
221
+ <div class="bg-purple-100 p-3 rounded-lg mr-4">
222
+ <i class="fas fa-globe text-purple-600 text-xl"></i>
223
+ </div>
224
+ <div>
225
+ <h3 class="font-semibold text-gray-800">Website</h3>
226
+ <p class="text-sm text-gray-500">Visit my personal website</p>
227
+ </div>
228
+ <div class="ml-auto">
229
+ <i class="fas fa-chevron-right text-gray-400"></i>
230
+ </div>
231
+ </div>
232
+ </a>
233
+
234
+ <!-- LinkedIn Link -->
235
+ <a href="https://www.linkedin.com/in/marc-cornelius/" target="_blank" class="block">
236
+ <div class="link-card rounded-xl p-5 flex items-center shadow-md hover:shadow-lg">
237
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
238
+ <i class="fab fa-linkedin-in text-blue-700 text-xl"></i>
239
+ </div>
240
+ <div>
241
+ <h3 class="font-semibold text-gray-800">LinkedIn</h3>
242
+ <p class="text-sm text-gray-500">Connect with me professionally</p>
243
+ </div>
244
+ <div class="ml-auto">
245
+ <i class="fas fa-chevron-right text-gray-400"></i>
246
+ </div>
247
+ </div>
248
+ </a>
249
+ </div>
250
+
251
+ <!-- About Me Accordion -->
252
+ <div class="accordion bg-white rounded-xl shadow-md overflow-hidden">
253
+ <div class="accordion-header p-5 flex justify-between items-center cursor-pointer">
254
+ <div class="flex items-center">
255
+ <div class="bg-green-100 p-3 rounded-lg mr-4">
256
+ <i class="fas fa-user text-green-600 text-xl"></i>
257
+ </div>
258
+ <h3 class="font-semibold text-gray-800">About Me</h3>
259
+ </div>
260
+ <i class="accordion-icon fas fa-chevron-down text-gray-400"></i>
261
+ </div>
262
+ <div class="accordion-content">
263
+ <div class="px-5 pb-5 pt-2 border-t border-gray-100">
264
+ <div class="flex flex-col md:flex-row gap-4">
265
+ <div class="md:w-1/3">
266
+ <img src="https://marccornelius.com/wp-content/uploads/2024/02/image-12-1.png"
267
+ alt="Marc Cornelius"
268
+ class="rounded-lg w-full h-auto">
269
+ </div>
270
+ <div class="md:w-2/3">
271
+ <p class="text-gray-700 mb-3">
272
+ Hi, I'm Marc Cornelius, a digital strategist and AI consultant helping businesses leverage cutting-edge technologies.
273
+ </p>
274
+ <p class="text-gray-700 mb-3">
275
+ With over 10 years of experience in digital transformation, I specialize in AI implementation strategies that drive real business results.
276
+ </p>
277
+ <p class="text-gray-700">
278
+ When I'm not consulting, you can find me speaking at tech conferences or writing about the intersection of business and emerging technologies.
279
+ </p>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Footer -->
287
+ <div class="mt-8 text-center text-gray-500 text-sm">
288
+ <p>© 2024 Marc Cornelius. All rights reserved.</p>
289
+ <div class="flex justify-center space-x-4 mt-3">
290
+ <a href="#" class="text-gray-500 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
291
+ <a href="#" class="text-gray-500 hover:text-pink-600"><i class="fab fa-instagram"></i></a>
292
+ <a href="#" class="text-gray-500 hover:text-gray-800"><i class="fab fa-github"></i></a>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <script>
298
+ // Accordion functionality
299
+ document.addEventListener('DOMContentLoaded', function() {
300
+ const accordion = document.querySelector('.accordion');
301
+
302
+ accordion.addEventListener('click', function() {
303
+ this.classList.toggle('active');
304
+ });
305
+
306
+ // Create sparkles for AI Audit button
307
+ const container = document.getElementById('ai-sparkles-container');
308
+ const colors = ['#FFEB3B', '#4CAF50', '#2196F3', '#9C27B0', '#FF5722'];
309
+
310
+ for (let i = 0; i < 15; i++) {
311
+ setTimeout(() => {
312
+ const sparkle = document.createElement('div');
313
+ sparkle.classList.add('ai-sparkle');
314
+ sparkle.style.width = Math.random() * 8 + 2 + 'px';
315
+ sparkle.style.height = sparkle.style.width;
316
+ sparkle.style.left = Math.random() * 100 + '%';
317
+ sparkle.style.top = -10 + 'px';
318
+ sparkle.style.background = colors[Math.floor(Math.random() * colors.length)];
319
+ sparkle.style.animationDuration = Math.random() * 3 + 1 + 's';
320
+ sparkle.style.animationDelay = Math.random() * 0.5 + 's';
321
+ container.appendChild(sparkle);
322
+
323
+ // Remove sparkle after animation completes
324
+ setTimeout(() => {
325
+ sparkle.remove();
326
+ }, 3000);
327
+ }, i * 200);
328
+ }
329
+
330
+ // Repeat sparkles
331
+ setInterval(() => {
332
+ const sparkle = document.createElement('div');
333
+ sparkle.classList.add('ai-sparkle');
334
+ sparkle.style.width = Math.random() * 8 + 2 + 'px';
335
+ sparkle.style.height = sparkle.style.width;
336
+ sparkle.style.left = Math.random() * 100 + '%';
337
+ sparkle.style.top = -10 + 'px';
338
+ sparkle.style.background = colors[Math.floor(Math.random() * colors.length)];
339
+ sparkle.style.animationDuration = Math.random() * 3 + 1 + 's';
340
+ container.appendChild(sparkle);
341
+
342
+ // Remove sparkle after animation completes
343
+ setTimeout(() => {
344
+ sparkle.remove();
345
+ }, 3000);
346
+ }, 200);
347
+ });
348
+ </script>
349
+ <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=Marccorn/link-page" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
350
+ </html>