Hugging Face's logo

Spaces:
ros2works658
/
portfolio
Running

App Files Community
ros2works658 commited on
Commit
97f1dcc
·
verified ·
1 Parent(s): 99209eb

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +609 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Portfolio
3
- emoji: 🚀
4
- colorFrom: red
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: portfolio
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: green
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,609 @@
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>SAMPATH SAI ANIL | Robotics & AI Engineer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+ <style>
14
+ :root {
15
+ --primary: #00ff9d;
16
+ --secondary: #0095ff;
17
+ --dark: #0a0a0a;
18
+ --light: #f8f9fa;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Inter', sans-serif;
23
+ background-color: var(--dark);
24
+ color: var(--light);
25
+ scroll-behavior: smooth;
26
+ overflow-x: hidden;
27
+ }
28
+
29
+ .section {
30
+ min-height: 100vh;
31
+ padding: 5rem 1rem;
32
+ position: relative;
33
+ }
34
+
35
+ .canvas-container {
36
+ position: absolute;
37
+ top: 0;
38
+ left: 0;
39
+ width: 100%;
40
+ height: 100%;
41
+ z-index: -1;
42
+ }
43
+
44
+ .btn-primary {
45
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
46
+ color: var(--dark);
47
+ font-weight: 600;
48
+ border: none;
49
+ transition: all 0.3s ease;
50
+ }
51
+
52
+ .btn-primary:hover {
53
+ transform: translateY(-3px);
54
+ box-shadow: 0 10px 20px rgba(0, 255, 157, 0.2);
55
+ }
56
+
57
+ .project-card {
58
+ perspective: 1000px;
59
+ transform-style: preserve-3d;
60
+ transition: transform 0.6s;
61
+ }
62
+
63
+ .project-card-inner {
64
+ position: relative;
65
+ width: 100%;
66
+ height: 100%;
67
+ transform-style: preserve-3d;
68
+ transition: transform 0.6s;
69
+ }
70
+
71
+ .project-card:hover .project-card-inner {
72
+ transform: rotateY(180deg);
73
+ }
74
+
75
+ .project-card-front, .project-card-back {
76
+ position: absolute;
77
+ width: 100%;
78
+ height: 100%;
79
+ backface-visibility: hidden;
80
+ border-radius: 10px;
81
+ overflow: hidden;
82
+ }
83
+
84
+ .project-card-back {
85
+ transform: rotateY(180deg);
86
+ background: linear-gradient(135deg, rgba(0, 149, 255, 0.1), rgba(0, 255, 157, 0.1));
87
+ }
88
+
89
+ .timeline-item {
90
+ opacity: 0;
91
+ transform: translateY(50px);
92
+ }
93
+
94
+ .skill-icon {
95
+ transition: all 0.3s ease;
96
+ transform-style: preserve-3d;
97
+ }
98
+
99
+ .skill-icon:hover {
100
+ transform: translateY(-10px) rotateY(180deg);
101
+ }
102
+
103
+ .floating {
104
+ animation: floating 6s ease-in-out infinite;
105
+ }
106
+
107
+ @keyframes floating {
108
+ 0% { transform: translateY(0px) rotateY(0deg); }
109
+ 50% { transform: translateY(-20px) rotateY(180deg); }
110
+ 100% { transform: translateY(0px) rotateY(360deg); }
111
+ }
112
+
113
+ .name-title {
114
+ font-size: 5rem;
115
+ line-height: 1;
116
+ text-transform: uppercase;
117
+ letter-spacing: 0.2em;
118
+ background: linear-gradient(90deg, #00ff9d, #0095ff);
119
+ -webkit-background-clip: text;
120
+ background-clip: text;
121
+ color: transparent;
122
+ text-shadow: 0 0 10px rgba(0, 255, 157, 0.3);
123
+ }
124
+
125
+ @media (max-width: 768px) {
126
+ .name-title {
127
+ font-size: 3rem;
128
+ letter-spacing: 0.1em;
129
+ }
130
+ }
131
+ </style>
132
+ </head>
133
+ <body class="antialiased">
134
+ <!-- Navigation -->
135
+ <nav class="fixed w-full bg-black bg-opacity-80 backdrop-blur-sm z-50">
136
+ <div class="container mx-auto px-6 py-4">
137
+ <div class="flex justify-between items-center">
138
+ <a href="#home" class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">SAMPATH SAI ANIL</a>
139
+
140
+ <div class="hidden md:flex space-x-8">
141
+ <a href="#home" class="nav-link hover:text-primary transition-colors">Home</a>
142
+ <a href="#about" class="nav-link hover:text-primary transition-colors">About</a>
143
+ <a href="#skills" class="nav-link hover:text-primary transition-colors">Skills</a>
144
+ <a href="#projects" class="nav-link hover:text-primary transition-colors">Projects</a>
145
+ <a href="#experience" class="nav-link hover:text-primary transition-colors">Experience</a>
146
+ <a href="#contact" class="nav-link hover:text-primary transition-colors">Contact</a>
147
+ </div>
148
+
149
+ <button class="md:hidden focus:outline-none" id="menu-toggle">
150
+ <i class="fas fa-bars text-xl"></i>
151
+ </button>
152
+ </div>
153
+ </div>
154
+ </nav>
155
+
156
+ <!-- Hero Section with Three.js Background -->
157
+ <section id="home" class="section flex items-center justify-center relative overflow-hidden">
158
+ <div id="canvas-container" class="canvas-container"></div>
159
+ <div class="container mx-auto px-6 text-center">
160
+ <div class="max-w-4xl mx-auto">
161
+ <h1 class="name-title font-bold mb-6">SAMPATH SAI ANIL</h1>
162
+ <h2 class="text-xl md:text-2xl text-gray-300 mb-8">Robotics | AI | Embedded Systems Enthusiast</h2>
163
+
164
+ <div class="flex flex-wrap justify-center gap-4 mb-12">
165
+ <a href="#" class="btn-primary px-6 py-3 rounded-full">
166
+ <i class="fas fa-download mr-2"></i> Download Resume
167
+ </a>
168
+ <a href="#contact" class="border-2 border-primary text-primary px-6 py-3 rounded-full hover:bg-primary hover:text-dark transition-colors">
169
+ <i class="fas fa-envelope mr-2"></i> Contact Me
170
+ </a>
171
+ </div>
172
+
173
+ <div class="flex justify-center space-x-6">
174
+ <a href="https://github.com/sampathsaianilkosuri" target="_blank" class="text-gray-300 hover:text-primary text-2xl transition-colors">
175
+ <i class="fab fa-github"></i>
176
+ </a>
177
+ <a href="https://www.linkedin.com/in/sampath-sai-anil-kosuri-43aba224a" target="_blank" class="text-gray-300 hover:text-primary text-2xl transition-colors">
178
+ <i class="fab fa-linkedin"></i>
179
+ </a>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <a href="#about" class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
185
+ <i class="fas fa-chevron-down text-2xl text-gray-400"></i>
186
+ </a>
187
+ </section>
188
+
189
+ <!-- About Section with 3D Robot Arm -->
190
+ <section id="about" class="section">
191
+ <div class="container mx-auto px-6">
192
+ <h2 class="text-3xl font-bold mb-12 text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">About Me</h2>
193
+
194
+ <div class="grid md:grid-cols-2 gap-12 items-center">
195
+ <div>
196
+ <p class="text-gray-300 mb-6 text-lg leading-relaxed">
197
+ I'm SAMPATH SAI ANIL, a passionate and innovative engineer with a strong focus on AI, robotics, and embedded systems. My journey in technology is driven by curiosity and a relentless pursuit of creating intelligent systems that can interact with and improve our world.
198
+ </p>
199
+ <p class="text-gray-300 mb-6 text-lg leading-relaxed">
200
+ With hands-on experience in both hardware and software, I bridge the gap between theoretical concepts and practical implementations. My expertise spans from PCB design and mechanical assembly to developing autonomous navigation systems and AI-powered robotics solutions.
201
+ </p>
202
+ <p class="text-gray-300 text-lg leading-relaxed">
203
+ When I'm not building robots or coding AI models, you can find me playing chess, exploring new technologies, or enjoying music. I believe in continuous learning and pushing the boundaries of what's possible with technology.
204
+ </p>
205
+ </div>
206
+
207
+ <div class="flex justify-center">
208
+ <div id="robot-arm-container" class="w-full h-96"></div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- Skills Section with 3D Icons -->
215
+ <section id="skills" class="section bg-gray-900">
216
+ <div class="container mx-auto px-6">
217
+ <h2 class="text-3xl font-bold mb-12 text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">My Skills</h2>
218
+
219
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
220
+ <!-- Programming -->
221
+ <div class="bg-gray-800 p-6 rounded-xl text-center">
222
+ <div class="skill-icon floating inline-block mb-4">
223
+ <i class="fas fa-code text-4xl text-primary"></i>
224
+ </div>
225
+ <h3 class="text-xl font-semibold mb-4">Programming</h3>
226
+ <ul class="space-y-2 text-gray-300">
227
+ <li>Python (Advanced)</li>
228
+ <li>C++ (Advanced)</li>
229
+ <li>JavaScript (Intermediate)</li>
230
+ </ul>
231
+ </div>
232
+
233
+ <!-- Robotics -->
234
+ <div class="bg-gray-800 p-6 rounded-xl text-center">
235
+ <div class="skill-icon floating inline-block mb-4">
236
+ <i class="fas fa-robot text-4xl text-primary"></i>
237
+ </div>
238
+ <h3 class="text-xl font-semibold mb-4">Robotics</h3>
239
+ <ul class="space-y-2 text-gray-300">
240
+ <li>ROS/ROS2</li>
241
+ <li>Autonomous Navigation</li>
242
+ <li>SLAM</li>
243
+ </ul>
244
+ </div>
245
+
246
+ <!-- Hardware -->
247
+ <div class="bg-gray-800 p-6 rounded-xl text-center">
248
+ <div class="skill-icon floating inline-block mb-4">
249
+ <i class="fas fa-microchip text-4xl text-primary"></i>
250
+ </div>
251
+ <h3 class="text-xl font-semibold mb-4">Hardware</h3>
252
+ <ul class="space-y-2 text-gray-300">
253
+ <li>PCB Design</li>
254
+ <li>Embedded Systems</li>
255
+ <li>IoT</li>
256
+ </ul>
257
+ </div>
258
+
259
+ <!-- AI -->
260
+ <div class="bg-gray-800 p-6 rounded-xl text-center">
261
+ <div class="skill-icon floating inline-block mb-4">
262
+ <i class="fas fa-brain text-4xl text-primary"></i>
263
+ </div>
264
+ <h3 class="text-xl font-semibold mb-4">AI</h3>
265
+ <ul class="space-y-2 text-gray-300">
266
+ <li>Computer Vision</li>
267
+ <li>Machine Learning</li>
268
+ <li>NLP</li>
269
+ </ul>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </section>
274
+
275
+ <!-- Projects Section with 3D Flip Cards -->
276
+ <section id="projects" class="section">
277
+ <div class="container mx-auto px-6">
278
+ <h2 class="text-3xl font-bold mb-12 text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">My Projects</h2>
279
+
280
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
281
+ <!-- Person Following UGV -->
282
+ <div class="project-card h-96">
283
+ <div class="project-card-inner h-full">
284
+ <div class="project-card-front bg-gray-800 p-6">
285
+ <div class="flex items-center mb-4">
286
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-4">
287
+ <i class="fas fa-robot text-xl text-dark"></i>
288
+ </div>
289
+ <h3 class="text-xl font-semibold">Person Following UGV</h3>
290
+ </div>
291
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="UGV" class="w-full h-40 object-cover mb-4 rounded-lg">
292
+ <p class="text-gray-300">An autonomous ground vehicle that follows a person using computer vision and ROS.</p>
293
+ </div>
294
+ <div class="project-card-back p-6 flex flex-col justify-center">
295
+ <h3 class="text-xl font-semibold mb-4">Key Features</h3>
296
+ <ul class="space-y-2 text-gray-300 mb-6">
297
+ <li>YOLOv4 for person detection</li>
298
+ <li>PID controller for smooth following</li>
299
+ <li>ROS integration</li>
300
+ </ul>
301
+ <a href="#" class="text-primary hover:underline">
302
+ <i class="fab fa-github mr-1"></i> View on GitHub
303
+ </a>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- ROS2 Web Dashboard -->
309
+ <div class="project-card h-96">
310
+ <div class="project-card-inner h-full">
311
+ <div class="project-card-front bg-gray-800 p-6">
312
+ <div class="flex items-center mb-4">
313
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-4">
314
+ <i class="fas fa-chart-line text-xl text-dark"></i>
315
+ </div>
316
+ <h3 class="text-xl font-semibold">ROS2 Web Dashboard</h3>
317
+ </div>
318
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Dashboard" class="w-full h-40 object-cover mb-4 rounded-lg">
319
+ <p class="text-gray-300">A web-based dashboard for monitoring and controlling ROS2 robots.</p>
320
+ </div>
321
+ <div class="project-card-back p-6 flex flex-col justify-center">
322
+ <h3 class="text-xl font-semibold mb-4">Key Features</h3>
323
+ <ul class="space-y-2 text-gray-300 mb-6">
324
+ <li>Real-time sensor visualization</li>
325
+ <li>Interactive controls</li>
326
+ <li>React.js with ROS2 Web Bridge</li>
327
+ </ul>
328
+ <a href="#" class="text-primary hover:underline">
329
+ <i class="fab fa-github mr-1"></i> View on GitHub
330
+ </a>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Face Following Drone -->
336
+ <div class="project-card h-96">
337
+ <div class="project-card-inner h-full">
338
+ <div class="project-card-front bg-gray-800 p-6">
339
+ <div class="flex items-center mb-4">
340
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-4">
341
+ <i class="fas fa-drone-alt text-xl text-dark"></i>
342
+ </div>
343
+ <h3 class="text-xl font-semibold">Face Following Drone</h3>
344
+ </div>
345
+ <img src="https://images.unsplash.com/photo-1579829366248-204fe8413f79?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Drone" class="w-full h-40 object-cover mb-4 rounded-lg">
346
+ <p class="text-gray-300">A drone that follows human faces using computer vision and PID control.</p>
347
+ </div>
348
+ <div class="project-card-back p-6 flex flex-col justify-center">
349
+ <h3 class="text-xl font-semibold mb-4">Key Features</h3>
350
+ <ul class="space-y-2 text-gray-300 mb-6">
351
+ <li>OpenCV DNN for face detection</li>
352
+ <li>Stable flight control</li>
353
+ <li>Real-time video streaming</li>
354
+ </ul>
355
+ <a href="#" class="text-primary hover:underline">
356
+ <i class="fab fa-github mr-1"></i> View on GitHub
357
+ </a>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </section>
364
+
365
+ <!-- Experience Section with Timeline -->
366
+ <section id="experience" class="section bg-gray-900">
367
+ <div class="container mx-auto px-6">
368
+ <h2 class="text-3xl font-bold mb-12 text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">Experience</h2>
369
+
370
+ <div class="max-w-3xl mx-auto">
371
+ <div class="timeline-item mb-12">
372
+ <div class="bg-gray-800 p-6 rounded-xl">
373
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-2">
374
+ <h3 class="text-xl font-semibold">Robotics Electronics Engineer</h3>
375
+ <span class="text-primary">Kakinada Institute of Engineering and Technology</span>
376
+ </div>
377
+ <p class="text-gray-400 mb-4">2022 - Present</p>
378
+ <ul class="list-disc list-inside space-y-2 text-gray-300">
379
+ <li>Designed and fabricated PCBs for robotic systems</li>
380
+ <li>Developed embedded firmware for motor control</li>
381
+ <li>Assembled and tested robotic prototypes</li>
382
+ </ul>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="timeline-item">
387
+ <div class="bg-gray-800 p-6 rounded-xl">
388
+ <h3 class="text-xl font-semibold mb-2">Key Expertise</h3>
389
+ <div class="flex flex-wrap gap-2">
390
+ <span class="px-3 py-1 bg-gray-700 rounded-full text-sm">Embedded Systems</span>
391
+ <span class="px-3 py-1 bg-gray-700 rounded-full text-sm">PCB Design</span>
392
+ <span class="px-3 py-1 bg-gray-700 rounded-full text-sm">ROS Development</span>
393
+ <span class="px-3 py-1 bg-gray-700 rounded-full text-sm">Motor Control</span>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </section>
400
+
401
+ <!-- Contact Section with 3D Icons -->
402
+ <section id="contact" class="section">
403
+ <div class="container mx-auto px-6">
404
+ <h2 class="text-3xl font-bold mb-12 text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">Get In Touch</h2>
405
+
406
+ <div class="grid md:grid-cols-2 gap-12">
407
+ <div>
408
+ <h3 class="text-xl font-semibold mb-6">Contact Information</h3>
409
+
410
+ <div class="space-y-6">
411
+ <div class="flex items-start">
412
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-4 floating">
413
+ <i class="fas fa-envelope text-xl text-dark"></i>
414
+ </div>
415
+ <div>
416
+ <h4 class="font-medium text-gray-300">Email</h4>
417
+ <a href="mailto:sampathsaianilkosuri@gmail.com" class="text-primary hover:underline">sampathsaianilkosuri@gmail.com</a>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="flex items-start">
422
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-4 floating">
423
+ <i class="fas fa-phone-alt text-xl text-dark"></i>
424
+ </div>
425
+ <div>
426
+ <h4 class="font-medium text-gray-300">Phone</h4>
427
+ <a href="tel:+916300550177" class="text-primary hover:underline">+91 6300550177</a>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+
433
+ <div>
434
+ <h3 class="text-xl font-semibold mb-6">Send Me a Message</h3>
435
+ <form class="space-y-4">
436
+ <div>
437
+ <input type="text" placeholder="Your Name" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:border-primary">
438
+ </div>
439
+ <div>
440
+ <input type="email" placeholder="Your Email" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:border-primary">
441
+ </div>
442
+ <div>
443
+ <textarea placeholder="Your Message" rows="5" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:border-primary"></textarea>
444
+ </div>
445
+ <button type="submit" class="btn-primary px-6 py-3 rounded-lg w-full">
446
+ <i class="fas fa-paper-plane mr-2"></i> Send Message
447
+ </button>
448
+ </form>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </section>
453
+
454
+ <!-- Footer -->
455
+ <footer class="bg-black py-8">
456
+ <div class="container mx-auto px-6">
457
+ <div class="flex flex-col md:flex-row justify-between items-center">
458
+ <div class="mb-4 md:mb-0">
459
+ <p class="text-gray-400">© 2025 SAMPATH SAI ANIL. All rights reserved.</p>
460
+ </div>
461
+
462
+ <div class="flex space-x-6">
463
+ <a href="https://github.com/sampathsaianilkosuri" target="_blank" class="text-gray-400 hover:text-primary text-xl transition-colors floating">
464
+ <i class="fab fa-github"></i>
465
+ </a>
466
+ <a href="https://www.linkedin.com/in/sampath-sai-anil-kosuri-43aba224a" target="_blank" class="text-gray-400 hover:text-primary text-xl transition-colors floating" style="animation-delay: 0.3s;">
467
+ <i class="fab fa-linkedin"></i>
468
+ </a>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </footer>
473
+
474
+ <script>
475
+ // Three.js Particle Background for Hero Section
476
+ function initParticleBackground() {
477
+ const container = document.getElementById('canvas-container');
478
+ const canvas = document.createElement('canvas');
479
+ container.appendChild(canvas);
480
+
481
+ const scene = new THREE.Scene();
482
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
483
+ const renderer = new THREE.WebGLRenderer({
484
+ canvas: canvas,
485
+ alpha: true,
486
+ antialias: true
487
+ });
488
+
489
+ renderer.setSize(window.innerWidth, window.innerHeight);
490
+ camera.position.z = 5;
491
+
492
+ // Create particles
493
+ const particlesGeometry = new THREE.BufferGeometry();
494
+ const particlesCount = 1000;
495
+
496
+ const posArray = new Float32Array(particlesCount * 3);
497
+
498
+ for(let i = 0; i < particlesCount * 3; i++) {
499
+ posArray[i] = (Math.random() - 0.5) * 10;
500
+ }
501
+
502
+ particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
503
+
504
+ const particlesMaterial = new THREE.PointsMaterial({
505
+ size: 0.02,
506
+ color: 0x00ff9d,
507
+ transparent: true,
508
+ opacity: 0.8,
509
+ blending: THREE.AdditiveBlending
510
+ });
511
+
512
+ const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
513
+ scene.add(particlesMesh);
514
+
515
+ // Animation
516
+ function animate() {
517
+ requestAnimationFrame(animate);
518
+
519
+ particlesMesh.rotation.x += 0.0005;
520
+ particlesMesh.rotation.y += 0.0005;
521
+
522
+ renderer.render(scene, camera);
523
+ }
524
+
525
+ animate();
526
+
527
+ // Handle window resize
528
+ window.addEventListener('resize', () => {
529
+ camera.aspect = window.innerWidth / window.innerHeight;
530
+ camera.updateProjectionMatrix();
531
+ renderer.setSize(window.innerWidth, window.innerHeight);
532
+ });
533
+ }
534
+
535
+ // GSAP Animations
536
+ function initAnimations() {
537
+ // Animate name title
538
+ gsap.from(".name-title", {
539
+ duration: 1.5,
540
+ y: 50,
541
+ opacity: 0,
542
+ ease: "power3.out"
543
+ });
544
+
545
+ // Animate timeline items
546
+ gsap.utils.toArray(".timeline-item").forEach(item => {
547
+ gsap.from(item, {
548
+ scrollTrigger: {
549
+ trigger: item,
550
+ start: "top 80%",
551
+ toggleActions: "play none none none"
552
+ },
553
+ opacity: 1,
554
+ y: 0,
555
+ duration: 0.8,
556
+ ease: "power2.out"
557
+ });
558
+ });
559
+
560
+ // Animate project cards on hover
561
+ gsap.utils.toArray(".project-card").forEach(card => {
562
+ card.addEventListener("mouseenter", () => {
563
+ gsap.to(card.querySelector(".project-card-inner"), {
564
+ rotationY: 180,
565
+ duration: 0.6,
566
+ ease: "power2.inOut"
567
+ });
568
+ });
569
+
570
+ card.addEventListener("mouseleave", () => {
571
+ gsap.to(card.querySelector(".project-card-inner"), {
572
+ rotationY: 0,
573
+ duration: 0.6,
574
+ ease: "power2.inOut"
575
+ });
576
+ });
577
+ });
578
+
579
+ // Animate skill icons on scroll
580
+ gsap.utils.toArray(".skill-icon").forEach((icon, i) => {
581
+ gsap.from(icon, {
582
+ scrollTrigger: {
583
+ trigger: icon,
584
+ start: "top 80%",
585
+ toggleActions: "play none none none"
586
+ },
587
+ y: 50,
588
+ opacity: 0,
589
+ duration: 0.6,
590
+ delay: i * 0.1,
591
+ ease: "back.out(1.7)"
592
+ });
593
+ });
594
+ }
595
+
596
+ // Initialize everything when DOM is loaded
597
+ document.addEventListener('DOMContentLoaded', function() {
598
+ initParticleBackground();
599
+ initAnimations();
600
+
601
+ // Mobile menu toggle
602
+ document.getElementById('menu-toggle').addEventListener('click', function() {
603
+ const menu = document.getElementById('mobile-menu');
604
+ menu.classList.toggle('hidden');
605
+ });
606
+ });
607
+ </script>
608
+ <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=ros2works658/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
609
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ "Create a modern, dark-themed personal portfolio website for SAMPATH SAI ANIL KOSURI. The site should be fully responsive and professional with animated smooth scroll, elegant section transitions, and a minimalist layout. Include the following sections: Landing Section: Full name: Sampath Sai Anil Kosuri Short tagline: "Robotics | AI | Embedded Systems Enthusiast" Add buttons: "Download Resume", "Contact Me", "GitHub", and "LinkedIn" Background with subtle animated particles or dark gradient. About Section: A brief paragraph introducing Anil as a confident and innovative engineer passionate about AI, robotics, and embedded systems. Skills Section: Group skills under categories: Programming, Tools, Libraries, Robotics, Hardware, IoT, Electronics, PCB Design, AI Assistants. Use icons or skill bars for visual enhancement. Projects Section: Showcase projects such as: Person Following UGV Ros2 Web Dashboard Autonomous Navigation UGV (Gazebo Simulation) Face Following Drone Gesture-Controlled Drone Each project should have a title, 2–3 bullet points of what was achieved, and links to GitHub if available. Experience Section: Title: Robotics Electronics Engineer – Kakinada Institute of Engineering and Technology List of tasks and expertise (embedded systems, PCB design, soldering, mechanical assembly, cabinet fabrication). Education Section: B.Tech in Artificial Intelligence – KIET College, 2024, 70% Diploma in Mechanical Engineering – KITS College, 2021, 86% 10th Grade – Bhashyam School, 2018, 95% Achievements & Hobbies Section: Mention the National Chess Competition recognition. List hobbies: Playing Chess, Listening to Music, Learning new technologies. Contact Section: Email: sampathsaianilkosuri@gmail.com Phone: +91 6300550177 Add a contact form. Footer: Links to GitHub:- https://github.com/sampathsaianilkosuri LinkedIn:- https://www.linkedin.com/in/sampath-sai-anil-kosuri-43aba224a Copyright © 2025 Sampath Sai Anil Design guidelines: Use a clean sans-serif font, white text on dark background, accent color in neon green or electric blue. Add smooth scrolling and subtle animations. Use Flexbox or CSS Grid for layout. Mobile-first design. Ensure semantic HTML structure."
2
+ "Create a fully responsive, modern personal portfolio website for Sampath Sai Anil Kosuri with a dark theme and 3D animations on each page. Use modern frameworks like GSAP, Three.js, or Lottie to implement smooth, visually engaging 3D animated transitions and elements per section. Each section should have motion-based or interactive 3D visuals that reflect the content. The site must include: Landing Section: Name, tagline, and 3D animated background (e.g., floating particles or mesh). Include buttons for resume, GitHub, LinkedIn, and contact. About Section: Intro paragraph with 3D visual or animation (e.g., robotic arm or tech visual), animated text reveals. Skills Section: Grouped into categories with 3D icons or floating panels. Animate skill icons on hover or scroll. Projects Section: Cards for each project (UGVs, drones, SLAM) with 3D flip or zoom animations showing descriptions and GitHub links. Experience Section: Timeline or step-by-step with scroll-triggered 3D reveals. Education Section: School cards or timeline with animated progress bars. Achievements & Hobbies: Highlight chess award and tech interests with playful 3D badges or icons. Contact Section: Interactive contact form and animated 3D icons (email, phone, etc.). Footer: Simple dark footer with animated social icons. Design: Use dark mode with neon accent colors (e.g., blue, green). Minimalist UI with smooth scrolling. Mobile-first with Flexbox or Grid. Use Three.js or Lottie for lightweight 3D effects."**
3
+ First Page is add the my Name "SAMPATH SAI ANIL"