Hugging Face's logo

Spaces:
Dev-in-the-BM
/
undefined
Running

App Files Community
Dev-in-the-BM commited on
Commit
fec5ed2
·
verified ·
1 Parent(s): cc78f7a

i dont like how much you changed the content

Browse files

The UI animations, interactivity isnt too impressive

Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +282 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🐠
4
- colorFrom: purple
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: undefined
3
+ colorFrom: blue
4
+ colorTo: pink
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).
14
+
index.html CHANGED
@@ -1,19 +1,283 @@
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>Dev-in-the-BM Portfolio</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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
16
+ body { font-family: 'Inter', sans-serif; }
17
+ .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
18
+ .glass-effect { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
19
+ .hebrew-gradient { background: linear-gradient(135deg, #0a3d62 0%, #3c6382 50%, #60a3bc 100%); }
20
+ .floating { animation: float 6s ease-in-out infinite; }
21
+ @keyframes float {
22
+ 0%, 100% { transform: translateY(0px); }
23
+ 50% { transform: translateY(-20px); }
24
+ }
25
+ .typewriter {
26
+ overflow: hidden;
27
+ border-right: .15em solid orange;
28
+ white-space: nowrap;
29
+ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
30
+ }
31
+ @keyframes typing {
32
+ from { width: 0 }
33
+ to { width: 100% }
34
+ }
35
+ @keyframes blink-caret {
36
+ from, to { border-color: transparent }
37
+ 50% { border-color: orange }
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="min-h-screen bg-gray-900 text-white overflow-x-hidden">
42
+ <!-- Hero Section with Vanta.js Globe -->
43
+ <div id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden">
44
+ <div class="absolute inset-0 z-0" id="vanta-bg"></div>
45
+ <div class="relative z-10 text-center px-6 max-w-4xl mx-auto">
46
+ <div class="floating mb-8">
47
+ <img src="http://static.photos/technology/640x360/42" alt="Profile" class="w-32 h-32 rounded-full mx-auto border-4 border-white/20 shadow-2xl">
48
+ </div>
49
+ <h1 class="text-5xl md:text-7xl font-bold mb-4 typewriter">Hi, I'm Dev-in-the-BM</h1>
50
+ <div class="flex justify-center items-center mb-6">
51
+ <i data-feather="star" class="w-6 h-6 mr-2"></i>
52
+ <h2 class="text-xl md:text-2xl text-gray-200">Yeshiva Bochur • Vibe Coder</h2>
53
+ <i data-feather="sparkles" class="w-6 h-6 ml-2"></i>
54
+ </div>
55
+ <p class="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
56
+ Bridging ancient wisdom with modern technology through open-source projects and app modding
57
+ </p>
58
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
59
+ <button class="glass-effect px-8 py-3 rounded-full font-semibold hover:bg-white/20 transition-all duration-300 transform hover:scale-105">
60
+ Explore Projects
61
+ </button>
62
+ <button class="border border-white/30 px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-gray-900 transition-all duration-300">
63
+ <i data-feather="message-circle" class="w-4 h-4 inline mr-2"></i>
64
+ Get in Touch
65
+ </button>
66
+ </div>
67
+ </div>
68
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2">
69
+ <i data-feather="chevron-down" class="w-8 h-8 animate-bounce"></i>
70
+ </div>
71
+ </div>
72
+
73
+ <!-- About Section -->
74
+ <section class="py-20 px-6 hebrew-gradient">
75
+ <div class="max-w-6xl mx-auto">
76
+ <div class="text-center mb-16">
77
+ <i data-feather="info" class="w-8 h-8 mx-auto mb-4"></i>
78
+ <h2 class="text-4xl font-bold mb-4">About Me</h2>
79
+ <div class="w-24 h-1 bg-yellow-400 mx-auto"></div>
80
+ </div>
81
+
82
+ <div class="grid md:grid-cols-2 gap-12 items-center">
83
+ <div class="glass-effect p-8 rounded-2xl">
84
+ <div class="flex items-center mb-4">
85
+ <i data-feather="book" class="w-6 h-6 mr-3 text-yellow-300"></i>
86
+ <h3 class="text-2xl font-semibold">Yeshiva Bochur</h3>
87
+ </div>
88
+ <p class="text-gray-200 mb-6">Currently learning בתולה נשאת while maintaining a passion for technology and coding.</p>
89
+
90
+ <div class="flex items-center mb-4">
91
+ <i data-feather="smartphone" class="w-6 h-6 mr-3 text-green-300"></i>
92
+ <h3 class="text-2xl font-semibold">App Modder</h3>
93
+ </div>
94
+ <p class="text-gray-200 mb-6">Creating innovative app modifications, even from my flip phone, to enhance usability and functionality.</p>
95
+
96
+ <div class="flex items-center mb-4">
97
+ <i data-feather="users" class="w-6 h-6 mr-3 text-blue-300"></i>
98
+ <h3 class="text-2xl font-semibold">JTech Community</h3>
99
+ </div>
100
+ <p class="text-gray-200">Active contributor to JTech Forums, discussing filtering, Linux, app modding, and all things tech-related.</p>
101
+ </div>
102
+
103
+ <div class="relative">
104
+ <div class="glass-effect p-8 rounded-2xl">
105
+ <h3 class="text-2xl font-semibold mb-4">Linux Enthusiast</h3>
106
+ <p class="text-gray-200 mb-6">Somehow my Linux environment still works. Not sure why, but I'm not complaining!</p>
107
+ <div class="bg-black/30 p-4 rounded-lg border-l-4 border-green-500">
108
+ <p class="text-sm">"Do you think Linux on desktop is ready to go mainstream?"</p>
109
+ <a href="#" class="text-yellow-300 hover:text-yellow-200 text-sm inline-flex items-center mt-2">
110
+ Join the discussion
111
+ <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
112
+ </a>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </section>
119
+
120
+ <!-- Projects Section -->
121
+ <section class="py-20 px-6 bg-gray-800">
122
+ <div class="max-w-6xl mx-auto">
123
+ <div class="text-center mb-16">
124
+ <i data-feather="star" class="w-8 h-8 mx-auto mb-4"></i>
125
+ <h2 class="text-4xl font-bold mb-4">Featured Projects</h2>
126
+ <div class="w-24 h-1 bg-purple-500 mx-auto"></div>
127
+ </div>
128
+
129
+ <div class="grid md:grid-cols-2 gap-8">
130
+ <!-- JDate Project -->
131
+ <div class="glass-effect rounded-2xl p-8 hover:transform hover:scale-105 transition-all duration-300">
132
+ <div class="flex items-center justify-between mb-4">
133
+ <h3 class="text-2xl font-semibold">JDate</h3>
134
+ <i data-feather="calendar" class="w-8 h-8 text-blue-400"></i>
135
+ </div>
136
+ <p class="text-gray-300 mb-6">A GNOME extension adding the Jewish date to the top bar, bringing tradition to modern desktop environments.</p>
137
+ <div class="flex space-x-4">
138
+ <a href="#" class="flex items-center text-blue-300 hover:text-blue-200">
139
+ <i data-feather="github" class="w-5 h-5 mr-2"></i>
140
+ GitHub
141
+ </a>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Crescent Remixer -->
146
+ <div class="glass-effect rounded-2xl p-8 hover:transform hover:scale-105 transition-all duration-300">
147
+ <div class="flex items-center justify-between mb-4">
148
+ <h3 class="text-2xl font-semibold">Crescent Remixer</h3>
149
+ <i data-feather="image" class="w-8 h-8 text-green-400"></i>
150
+ </div>
151
+ <p class="text-gray-300 mb-6">Nano Banana powered image remixer that transforms ordinary images into extraordinary creations.</p>
152
+ <div class="flex space-x-4">
153
+ <a href="#" class="flex items-center text-blue-300 hover:text-blue-200">
154
+ <i data-feather="github" class="w-5 h-5 mr-2"></i>
155
+ GitHub
156
+ </a>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </section>
162
+
163
+ <!-- Skills Section -->
164
+ <section class="py-20 px-6 bg-gray-900">
165
+ <div class="max-w-6xl mx-auto">
166
+ <div class="text-center mb-16">
167
+ <i data-feather="tool" class="w-8 h-8 mx-auto mb-4"></i>
168
+ <h2 class="text-4xl font-bold mb-4">Skills & Tools</h2>
169
+ <div class="w-24 h-1 bg-orange-500 mx-auto"></div>
170
+ </div>
171
+
172
+ <div class="grid md:grid-cols-2 gap-12">
173
+ <div>
174
+ <h3 class="text-2xl font-semibold mb-6 flex items-center">
175
+ <i data-feather="code" class="w-6 h-6 mr-3"></i>
176
+ Languages & Technologies
177
+ </h3>
178
+ <div class="space-y-4">
179
+ <div class="glass-effect p-4 rounded-xl">
180
+ <div class="flex justify-between items-center">
181
+ <span class="font-medium">Python</span>
182
+ <div class="flex">
183
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
184
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
185
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
186
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
187
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <div>
195
+ <h3 class="text-2xl font-semibold mb-6 flex items-center">
196
+ <i data-feather="cpu" class="w-6 h-6 mr-3"></i>
197
+ Environments & Tools
198
+ </h3>
199
+ <div class="grid grid-cols-2 gap-4">
200
+ <div class="glass-effect p-4 rounded-xl text-center">
201
+ <i data-feather="terminal" class="w-6 h-6 mx-auto mb-2 text-green-400"></i>
202
+ <span class="text-sm">Linux</span>
203
+ </div>
204
+ <div class="glass-effect p-4 rounded-xl text-center">
205
+ <i data-feather="git-merge" class="w-6 h-6 mx-auto mb-2 text-red-400"></i>
206
+ <span class="text-sm">Git</span>
207
+ </div>
208
+ <div class="glass-effect p-4 rounded-xl text-center">
209
+ <i data-feather="code" class="w-6 h-6 mx-auto mb-2 text-blue-400"></i>
210
+ <span class="text-sm">VS Code</span>
211
+ </div>
212
+ <div class="glass-effect p-4 rounded-xl text-center">
213
+ <i data-feather="layout" class="w-6 h-6 mx-auto mb-2 text-purple-400"></i>
214
+ <span class="text-sm">GNOME</span>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </section>
220
+
221
+ <!-- Footer -->
222
+ <footer class="bg-gray-800 py-12 px-6">
223
+ <div class="max-w-6xl mx-auto text-center">
224
+ <div class="flex justify-center space-x-6 mb-6">
225
+ <a href="#" class="hover:text-yellow-300 transition-colors">
226
+ <i data-feather="github" class="w-6 h-6"></i>
227
+ </a>
228
+ <a href="#" class="hover:text-yellow-300 transition-colors">
229
+ <i data-feather="mail" class="w-6 h-6"></i>
230
+ </a>
231
+ <a href="#" class="hover:text-yellow-300 transition-colors">
232
+ <i data-feather="message-circle" class="w-6 h-6"></i>
233
+ </a>
234
+ </div>
235
+ <p class="text-gray-400">&copy; 2024 Dev-in-the-BM. Torah Meets Technology.</p>
236
+ </div>
237
+ </footer>
238
+
239
+ <script>
240
+ // Initialize Vanta.js Globe
241
+ VANTA.GLOBE({
242
+ el: "#vanta-bg",
243
+ mouseControls: true,
244
+ touchControls: true,
245
+ gyroControls: false,
246
+ minHeight: 200.00,
247
+ minWidth: 200.00,
248
+ scale: 1.00,
249
+ scaleMobile: 1.00,
250
+ color: 0x3a86ff,
251
+ backgroundColor: 0x111827,
252
+ size: 1.00
253
+ });
254
+
255
+ // Initialize Feather Icons
256
+ feather.replace();
257
+
258
+ // Simple scroll animation
259
+ document.addEventListener('DOMContentLoaded', function() {
260
+ const observerOptions = {
261
+ threshold: 0.1,
262
+ rootMargin: '0px 0px -50px 0px'
263
+ };
264
+
265
+ const observer = new IntersectionObserver((entries) => {
266
+ entries.forEach(entry => {
267
+ if (entry.isIntersecting) {
268
+ entry.target.style.opacity = '1';
269
+ entry.target.style.transform = 'translateY(0)';
270
+ }
271
+ }, observerOptions);
272
+
273
+ // Observe all sections
274
+ document.querySelectorAll('section').forEach(section => {
275
+ section.style.opacity = '0';
276
+ section.style.transform = 'translateY(20px)';
277
+ section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
278
+ observer.observe(section);
279
+ });
280
+ });
281
+ </script>
282
+ </body>
283
  </html>