Hugging Face's logo

Spaces:
Mujahid1111
/
codewizard-backend-brewery
Running

App Files Community
Mujahid1111 commited on
Commit
a719d97
·
verified ·
1 Parent(s): d9c0193

do you do backend too?

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +234 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codewizard Backend Brewery
3
- emoji: 👁
4
- colorFrom: red
5
- colorTo: red
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: CodeWizard Backend Brewery 🧙‍♂️
3
+ colorFrom: green
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,235 @@
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>CodeWizard Backend Brewery</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
11
+ <style>
12
+ .hero-gradient {
13
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
14
+ }
15
+ .card-hover {
16
+ transition: all 0.3s ease;
17
+ }
18
+ .card-hover:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="min-h-screen bg-gray-50">
25
+ <div id="vanta-bg" class="fixed inset-0 z-0"></div>
26
+
27
+ <div class="relative z-10">
28
+ <!-- Navigation -->
29
+ <nav class="bg-white/80 backdrop-blur-md shadow-sm">
30
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
31
+ <div class="flex justify-between h-16">
32
+ <div class="flex items-center">
33
+ <i data-feather="code" class="text-purple-600 mr-2"></i>
34
+ <span class="text-xl font-bold text-gray-900">CodeWizard</span>
35
+ </div>
36
+ <div class="hidden md:flex items-center space-x-8">
37
+ <a href="#" class="text-purple-600 font-medium">Home</a>
38
+ <a href="#" class="text-gray-600 hover:text-purple-600">Services</a>
39
+ <a href="#" class="text-gray-600 hover:text-purple-600">Portfolio</a>
40
+ <a href="#" class="text-gray-600 hover:text-purple-600">About</a>
41
+ <a href="#" class="text-gray-600 hover:text-purple-600">Contact</a>
42
+ </div>
43
+ <button class="md:hidden text-gray-600">
44
+ <i data-feather="menu"></i>
45
+ </button>
46
+ </div>
47
+ </div>
48
+ </nav>
49
+
50
+ <!-- Hero Section -->
51
+ <section class="hero-gradient text-white py-20">
52
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
53
+ <div class="md:flex items-center">
54
+ <div class="md:w-1/2 mb-10 md:mb-0">
55
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Full-Stack Digital Alchemy</h1>
56
+ <p class="text-xl mb-8">From frontend finesse to backend brilliance - we craft complete digital experiences that enchant users and scale effortlessly.</p>
57
+ <div class="flex space-x-4">
58
+ <button class="bg-white text-purple-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">Get Started</button>
59
+ <button class="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white/10 transition">Learn More</button>
60
+ </div>
61
+ </div>
62
+ <div class="md:w-1/2 flex justify-center">
63
+ <img src="http://static.photos/technology/640x360/42" alt="Technology" class="rounded-xl shadow-2xl">
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </section>
68
+
69
+ <!-- Services Section -->
70
+ <section class="py-20 bg-white">
71
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
72
+ <h2 class="text-3xl font-bold text-center mb-4">Our Magical Services</h2>
73
+ <p class="text-xl text-gray-600 text-center mb-12 max-w-3xl mx-auto">Comprehensive solutions from pixel-perfect frontends to robust backends</p>
74
+
75
+ <div class="grid md:grid-cols-3 gap-8">
76
+ <!-- Frontend Card -->
77
+ <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
78
+ <div class="bg-purple-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6">
79
+ <i data-feather="layers" class="text-purple-600 w-8 h-8"></i>
80
+ </div>
81
+ <h3 class="text-xl font-bold mb-3">Frontend Wizardry</h3>
82
+ <p class="text-gray-600">Crafting intuitive, responsive interfaces with React, Vue, and modern CSS frameworks.</p>
83
+ </div>
84
+
85
+ <!-- Backend Card -->
86
+ <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
87
+ <div class="bg-blue-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6">
88
+ <i data-feather="database" class="text-blue-600 w-8 h-8"></i>
89
+ </div>
90
+ <h3 class="text-xl font-bold mb-3">Backend Sorcery</h3>
91
+ <p class="text-gray-600">Scalable APIs, microservices, and databases with Node.js, Python, and cloud architectures.</p>
92
+ </div>
93
+
94
+ <!-- Full Stack Card -->
95
+ <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
96
+ <div class="bg-green-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6">
97
+ <i data-feather="cpu" class="text-green-600 w-8 h-8"></i>
98
+ </div>
99
+ <h3 class="text-xl font-bold mb-3">Full-Stack Alchemy</h3>
100
+ <p class="text-gray-600">End-to-end solutions that seamlessly integrate frontend and backend technologies.</p>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </section>
105
+
106
+ <!-- Backend Showcase -->
107
+ <section class="py-20 bg-gray-50">
108
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
109
+ <div class="md:flex items-center">
110
+ <div class="md:w-1/2 mb-10 md:mb-0">
111
+ <h2 class="text-3xl font-bold mb-6">Backend Expertise</h2>
112
+ <p class="text-xl text-gray-600 mb-8">We architect robust, scalable backend systems with:</p>
113
+ <ul class="space-y-4">
114
+ <li class="flex items-start">
115
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
116
+ <span>Node.js, Express, NestJS for JavaScript backends</span>
117
+ </li>
118
+ <li class="flex items-start">
119
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
120
+ <span>Python with Django, Flask, and FastAPI</span>
121
+ </li>
122
+ <li class="flex items-start">
123
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
124
+ <span>PostgreSQL, MongoDB, and Redis databases</span>
125
+ </li>
126
+ <li class="flex items-start">
127
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
128
+ <span>GraphQL and REST API design</span>
129
+ </li>
130
+ <li class="flex items-start">
131
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
132
+ <span>AWS, GCP, and Azure cloud deployment</span>
133
+ </li>
134
+ </ul>
135
+ </div>
136
+ <div class="md:w-1/2">
137
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
138
+ <div class="bg-gray-900 p-4 flex space-x-2">
139
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
140
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
141
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
142
+ </div>
143
+ <div class="p-6 font-mono text-sm bg-gray-800 text-gray-100">
144
+ <p class="text-purple-400">// Sample API endpoint</p>
145
+ <p class="text-blue-400">router</p>
146
+ <p class="text-blue-400 ml-4">.route('/api/users')</p>
147
+ <p class="text-blue-400 ml-8">.get(controller.getUsers)</p>
148
+ <p class="text-blue-400 ml-8">.post(validateUser, controller.createUser);</p>
149
+ <br>
150
+ <p class="text-purple-400">// Database model</p>
151
+ <p class="text-blue-400">const userSchema = new Schema({</p>
152
+ <p class="text-yellow-400 ml-4">name: { type: String, required: true },</p>
153
+ <p class="text-yellow-400 ml-4">email: { type: String, unique: true },</p>
154
+ <p class="text-yellow-400 ml-4">createdAt: { type: Date, default: Date.now }</p>
155
+ <p class="text-blue-400">});</p>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </section>
162
+
163
+ <!-- CTA Section -->
164
+ <section class="py-16 bg-purple-600 text-white">
165
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
166
+ <h2 class="text-3xl font-bold mb-6">Ready to Brew Some Digital Magic?</h2>
167
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Whether you need frontend finesse, backend brilliance, or a complete full-stack solution, we've got you covered.</p>
168
+ <button class="bg-white text-purple-600 px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition">Start Your Project Now</button>
169
+ </div>
170
+ </section>
171
+
172
+ <!-- Footer -->
173
+ <footer class="bg-gray-900 text-white py-12">
174
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
175
+ <div class="grid md:grid-cols-3 gap-8">
176
+ <div>
177
+ <h3 class="text-xl font-bold mb-4 flex items-center">
178
+ <i data-feather="code" class="mr-2"></i> CodeWizard
179
+ </h3>
180
+ <p class="text-gray-400">Brewing digital experiences that delight users and scale effortlessly.</p>
181
+ </div>
182
+ <div>
183
+ <h4 class="font-bold mb-4">Quick Links</h4>
184
+ <ul class="space-y-2">
185
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
186
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Services</a></li>
187
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Portfolio</a></li>
188
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
189
+ </ul>
190
+ </div>
191
+ <div>
192
+ <h4 class="font-bold mb-4">Connect</h4>
193
+ <div class="flex space-x-4">
194
+ <a href="#" class="text-gray-400 hover:text-white transition">
195
+ <i data-feather="github"></i>
196
+ </a>
197
+ <a href="#" class="text-gray-400 hover:text-white transition">
198
+ <i data-feather="twitter"></i>
199
+ </a>
200
+ <a href="#" class="text-gray-400 hover:text-white transition">
201
+ <i data-feather="linkedin"></i>
202
+ </a>
203
+ <a href="#" class="text-gray-400 hover:text-white transition">
204
+ <i data-feather="mail"></i>
205
+ </a>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
210
+ <p>© 2023 CodeWizard Backend Brewery. All rights reserved.</p>
211
+ </div>
212
+ </div>
213
+ </footer>
214
+ </div>
215
+
216
+ <script>
217
+ VANTA.WAVES({
218
+ el: "#vanta-bg",
219
+ mouseControls: true,
220
+ touchControls: true,
221
+ gyroControls: false,
222
+ minHeight: 200.00,
223
+ minWidth: 200.00,
224
+ scale: 1.00,
225
+ scaleMobile: 1.00,
226
+ color: 0x5a3fbc,
227
+ shininess: 100.00,
228
+ waveHeight: 20.00,
229
+ waveSpeed: 1.30,
230
+ zoom: 0.65
231
+ });
232
+ </script>
233
+ <script>feather.replace();</script>
234
+ </body>
235
  </html>