Hugging Face's logo

Spaces:
Sourishdey05
/
cloudbyte-maverick
Running

App Files Community
Sourishdey05 commited on
Commit
bc1a5cc
·
verified ·
1 Parent(s): 6ce71c9

build all the section properly based on

Browse files
Files changed (1) hide show
  1. index.html +241 -2
index.html CHANGED
@@ -31,11 +31,250 @@
31
  <div class="text-xl md:text-2xl text-gray-600">
32
  <span id="typewriter" class="font-medium"></span>
33
  </div>
34
- <p class="text-gray-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  <script src="components/navbar.js"></script>
36
  <script>
37
  feather.replace();
38
  </script>
39
- <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
40
  </body>
41
  </html>
 
31
  <div class="text-xl md:text-2xl text-gray-600">
32
  <span id="typewriter" class="font-medium"></span>
33
  </div>
34
+ <p class="text-gray-600 max-w-lg">Cloud & Data Science Engineer with expertise in AI/ML, DevOps, and Cloud Computing. Passionate about building scalable solutions and automating workflows.</p>
35
+ <div class="flex gap-4">
36
+ <a href="#contact" class="px-6 py-3 rounded-lg bg-gradient-to-r from-blue-600 to-teal-500 text-white font-medium hover:shadow-lg transition-all duration-300">Contact Me</a>
37
+ <a href="#projects" class="px-6 py-3 rounded-lg border-2 border-blue-600 text-blue-600 font-medium hover:bg-blue-50 transition-all duration-300">View Projects</a>
38
+ </div>
39
+ </div>
40
+ <div class="relative" data-aos="fade-left">
41
+ <div class="absolute -top-6 -right-6 w-64 h-64 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
42
+ <div class="absolute top-16 -left-6 w-72 h-72 bg-teal-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
43
+ <img src="http://static.photos/technology/640x360/123" alt="Sourish Dey" class="relative z-10 w-full max-w-md rounded-2xl shadow-2xl mx-auto">
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </section>
48
+
49
+ <!-- About Section -->
50
+ <section id="about" class="py-20 bg-white dark:bg-gray-900">
51
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
52
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">About Me</h2>
53
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
54
+ <div data-aos="fade-right">
55
+ <h3 class="text-2xl font-semibold mb-4">Who I Am</h3>
56
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Experienced Cloud and Data Science Engineer with expertise in designing, implementing, and maintaining scalable cloud infrastructure and machine learning pipelines.</p>
57
+ <p class="text-gray-600 dark:text-gray-300">I specialize in bridging the gap between data science and engineering, enabling organizations to deploy AI/ML models efficiently in production environments.</p>
58
+ </div>
59
+ <div data-aos="fade-left">
60
+ <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-2xl">
61
+ <h3 class="text-xl font-semibold mb-4">Technical Skills</h3>
62
+ <div class="space-y-3">
63
+ <div>
64
+ <h4 class="font-medium">Cloud Platforms</h4>
65
+ <p class="text-gray-600 dark:text-gray-400">AWS, GCP, Azure, Kubernetes, Docker</p>
66
+ </div>
67
+ <div>
68
+ <h4 class="font-medium">Data Science</h4>
69
+ <p class="text-gray-600 dark:text-gray-400">Python, TensorFlow, PyTorch, Scikit-learn, Pandas</p>
70
+ </div>
71
+ <div>
72
+ <h4 class="font-medium">DevOps</h4>
73
+ <p class="text-gray-600 dark:text-gray-400">Terraform, CI/CD, GitHub Actions, Jenkins, ArgoCD</p>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </section>
81
+
82
+ <!-- Education Section -->
83
+ <section id="education" class="py-20 bg-gray-50 dark:bg-gray-800">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
85
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Education</h2>
86
+ <div class="space-y-8">
87
+ <div class="card p-6" data-aos="fade-up" data-aos-delay="100">
88
+ <h3 class="text-xl font-bold">Master of Science in Computer Science</h3>
89
+ <p class="text-gray-600 dark:text-gray-300 mb-2">University of XYZ (2020-2022)</p>
90
+ <p class="text-gray-600 dark:text-gray-300">Specialized in Artificial Intelligence and Cloud Computing.</p>
91
+ </div>
92
+ <div class="card p-6" data-aos="fade-up" data-aos-delay="200">
93
+ <h3 class="text-xl font-bold">Bachelor of Technology in Computer Science</h3>
94
+ <p class="text-gray-600 dark:text-gray-300 mb-2">ABC Institute of Technology (2016-2020)</p>
95
+ <p class="text-gray-600 dark:text-gray-300">Graduated with honors in Data Science specialization.</p>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </section>
100
+
101
+ <!-- Skills Section -->
102
+ <section id="skills" class="py-20 bg-white dark:bg-gray-900">
103
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
104
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Skills & Expertise</h2>
105
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
106
+ <div class="card p-6 text-center" data-aos="zoom-in" data-aos-delay="100">
107
+ <div class="text-blue-500 mb-3">
108
+ <i data-feather="cloud" class="w-8 h-8 mx-auto"></i>
109
+ </div>
110
+ <h3 class="font-bold mb-2">Cloud Computing</h3>
111
+ <p class="text-sm text-gray-600 dark:text-gray-300">AWS, GCP, Azure, Kubernetes</p>
112
+ </div>
113
+ <div class="card p-6 text-center" data-aos="zoom-in" data-aos-delay="200">
114
+ <div class="text-teal-500 mb-3">
115
+ <i data-feather="cpu" class="w-8 h-8 mx-auto"></i>
116
+ </div>
117
+ <h3 class="font-bold mb-2">Machine Learning</h3>
118
+ <p class="text-sm text-gray-600 dark:text-gray-300">TensorFlow, PyTorch, Scikit-learn</p>
119
+ </div>
120
+ <div class="card p-6 text-center" data-aos="zoom-in" data-aos-delay="300">
121
+ <div class="text-purple-500 mb-3">
122
+ <i data-feather="code" class="w-8 h-8 mx-auto"></i>
123
+ </div>
124
+ <h3 class="font-bold mb-2">DevOps</h3>
125
+ <p class="text-sm text-gray-600 dark:text-gray-300">CI/CD, Docker, Terraform</p>
126
+ </div>
127
+ <div class="card p-6 text-center" data-aos="zoom-in" data-aos-delay="400">
128
+ <div class="text-pink-500 mb-3">
129
+ <i data-feather="database" class="w-8 h-8 mx-auto"></i>
130
+ </div>
131
+ <h3 class="font-bold mb-2">Data Engineering</h3>
132
+ <p class="text-sm text-gray-600 dark:text-gray-300">Spark, Airflow, BigQuery</p>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </section>
137
+
138
+ <!-- Projects Section -->
139
+ <section id="projects" class="py-20 bg-gray-50 dark:bg-gray-800">
140
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
141
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Featured Projects</h2>
142
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
143
+ <div class="card overflow-hidden" data-aos="fade-up" data-aos-delay="100">
144
+ <img src="http://static.photos/technology/640x360/101" alt="Cloud Migration Project" class="w-full h-48 object-cover">
145
+ <div class="p-6">
146
+ <h3 class="font-bold text-xl mb-2">Cloud Migration Platform</h3>
147
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Automated migration of legacy systems to cloud-native architecture.</p>
148
+ <div class="flex flex-wrap gap-2">
149
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded">AWS</span>
150
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded">Terraform</span>
151
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded">Kubernetes</span>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ <div class="card overflow-hidden" data-aos="fade-up" data-aos-delay="200">
156
+ <img src="http://static.photos/technology/640x360/102" alt="MLOps Pipeline" class="w-full h-48 object-cover">
157
+ <div class="p-6">
158
+ <h3 class="font-bold text-xl mb-2">MLOps Pipeline</h3>
159
+ <p class="text-gray-600 dark:text-gray-300 mb-4">End-to-end machine learning pipeline with automated model deployment.</p>
160
+ <div class="flex flex-wrap gap-2">
161
+ <span class="px-2 py-1 bg-orange-100 text-orange-800 text-xs rounded">Python</span>
162
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded">Docker</span>
163
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded">CI/CD</span>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ <div class="card overflow-hidden" data-aos="fade-up" data-aos-delay="300">
168
+ <img src="http://static.photos/technology/640x360/103" alt="Data Platform" class="w-full h-48 object-cover">
169
+ <div class="p-6">
170
+ <h3 class="font-bold text-xl mb-2">Enterprise Data Platform</h3>
171
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Scalable data processing platform for analytics and ML.</p>
172
+ <div class="flex flex-wrap gap-2">
173
+ <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded">GCP</span>
174
+ <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded">BigQuery</span>
175
+ <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded">Airflow</span>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </section>
182
+
183
+ <!-- Certifications Section -->
184
+ <section id="certifications" class="py-20 bg-white dark:bg-gray-900">
185
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
186
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Certifications</h2>
187
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
188
+ <div class="card p-6" data-aos="fade-up" data-aos-delay="100">
189
+ <div class="flex items-center gap-4">
190
+ <img src="http://static.photos/technology/200x200/104" alt="AWS Logo" class="w-12 h-12">
191
+ <div>
192
+ <h3 class="font-bold">AWS Certified Solutions Architect</h3>
193
+ <p class="text-sm text-gray-600 dark:text-gray-300">Amazon Web Services</p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ <div class="card p-6" data-aos="fade-up" data-aos-delay="200">
198
+ <div class="flex items-center gap-4">
199
+ <img src="http://static.photos/technology/200x200/105" alt="GCP Logo" class="w-12 h-12">
200
+ <div>
201
+ <h3 class="font-bold">Google Cloud Professional</h3>
202
+ <p class="text-sm text-gray-600 dark:text-gray-300">Google Cloud</p>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ <div class="card p-6" data-aos="fade-up" data-aos-delay="300">
207
+ <div class="flex items-center gap-4">
208
+ <img src="http://static.photos/technology/200x200/106" alt="Kubernetes Logo" class="w-12 h-12">
209
+ <div>
210
+ <h3 class="font-bold">Certified Kubernetes Administrator</h3>
211
+ <p class="text-sm text-gray-600 dark:text-gray-300">Cloud Native Computing Foundation</p>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- Contact Section -->
220
+ <section id="contact" class="py-20 bg-gray-50 dark:bg-gray-800">
221
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
222
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Get In Touch</h2>
223
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
224
+ <div data-aos="fade-right">
225
+ <h3 class="text-xl font-semibold mb-4">Contact Information</h3>
226
+ <div class="space-y-4">
227
+ <div class="flex items-center gap-4">
228
+ <i data-feather="mail" class="text-blue-500"></i>
229
+ <span>sourish@example.com</span>
230
+ </div>
231
+ <div class="flex items-center gap-4">
232
+ <i data-feather="phone" class="text-blue-500"></i>
233
+ <span>+1 (123) 456-7890</span>
234
+ </div>
235
+ <div class="flex items-center gap-4">
236
+ <i data-feather="map-pin" class="text-blue-500"></i>
237
+ <span>San Francisco, CA</span>
238
+ </div>
239
+ </div>
240
+ <div class="mt-8">
241
+ <h3 class="text-xl font-semibold mb-4">Connect With Me</h3>
242
+ <div class="flex gap-4">
243
+ <a href="#" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors">
244
+ <i data-feather="linkedin" class="text-blue-600 dark:text-blue-400"></i>
245
+ </a>
246
+ <a href="#" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
247
+ <i data-feather="github" class="text-gray-800 dark:text-gray-200"></i>
248
+ </a>
249
+ <a href="#" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors">
250
+ <i data-feather="twitter" class="text-blue-400"></i>
251
+ </a>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ <form class="space-y-6" data-aos="fade-left">
256
+ <div>
257
+ <label for="name" class="block mb-2 font-medium">Name</label>
258
+ <input type="text" id="name" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600">
259
+ </div>
260
+ <div>
261
+ <label for="email" class="block mb-2 font-medium">Email</label>
262
+ <input type="email" id="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600">
263
+ </div>
264
+ <div>
265
+ <label for="message" class="block mb-2 font-medium">Message</label>
266
+ <textarea id="message" rows="4" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600"></textarea>
267
+ </div>
268
+ <button type="submit" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors w-full md:w-auto">Send Message</button>
269
+ </form>
270
+ </div>
271
+ </div>
272
+ </section>
273
+
274
  <script src="components/navbar.js"></script>
275
  <script>
276
  feather.replace();
277
  </script>
278
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
279
  </body>
280
  </html>