Hugging Face's logo

Spaces:
XlitZ69
/
Portfolio-DeepSite
Running

App Files Community
XlitZ69 commited on
Commit
15f8242
·
verified ·
1 Parent(s): 0f090da

Can you make this reactive, sleek and modern? - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +150 -68
index.html CHANGED
@@ -2,12 +2,16 @@
2
  <html>
3
 
4
  <head>
5
- <title>Aryaman- Portfolio</title>
6
  <meta charset="utf-8" />
7
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
8
- <link rel="stylesheet" href="assets/css/main.css" />
9
- <link rel="stylesheet" href="style-enhanced.css" />
 
 
10
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
 
 
11
  <noscript>
12
  <link rel="stylesheet" href="assets/css/noscript.css" />
13
  </noscript>
@@ -56,30 +60,34 @@
56
  </ul>
57
  </nav>
58
  </header>
59
- <!-- Hero Section -->
60
- <section class="pt-24 pb-16 md:pt-32 md:pb-24 hero-pattern" id="hero">
61
- <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
62
- <div class="md:flex items-center justify-between">
63
- <div class="md:w-1/2 mb-10 md:mb-0">
64
- <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="gradient-text">Aryaman Sharma</span></h1>
65
- <div class="inner">
66
- <p style="position:relative; top:0px; left:-90px;">I am</span>&nbsp;
67
- <span class="headtext" id="text3">an&nbsp;XR Developer</span>
68
- <span class="headtext" id="text4">a&nbsp;Computer Vision Engineer</span>
69
- <span class="headtext" id="text5">a&nbsp;Postgraduate Researcher</span>
70
- <span class="headtext" id="text6">a&nbsp;Photonics Engineer</span>
71
- </p>
72
- </div><div class="flex space-x-4">
73
- <a href="https://www.linkedin.com/in/sharma-aryaman" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full flex items-center transition">
74
- <i class="fab fa-linkedin-in mr-2"></i> LinkedIn
75
- </a>
76
- <a href="https://github.com/AryamanSharma17" class="bg-gray-800 hover:bg-gray-900 text-white px-6 py-2 rounded-full flex items-center transition">
77
- <i class="fab fa-github mr-2"></i> GitHub
78
- </a>
79
- </div>
80
- </div>
81
- <div class="md:w-1/2 flex justify-center">
82
- <div id="gltf-viewer" class="floating" style="width: 400px; height: 300px; margin: 0 auto;"></div>
 
 
 
 
83
  <script type="importmap">
84
  {
85
  "imports": {
@@ -181,19 +189,22 @@
181
  </div>
182
  </section>
183
 
184
- <section id="skills" class="wrapper style2 special">
185
- <div class="inner">
186
- <header class="major">
187
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
188
- <h2>Skills</h2>
189
- </header>
190
-
191
- <body>
192
- <div class="skills-category">
193
- <h4>Languages</h4>
194
- <div class="zoom-img">
195
- <div class="skill-item">
196
- <i class="fab fa-python" style="font-size: 50px; color: #3776ab;"></i>
 
 
 
197
  <span>Python</span>
198
  </div>
199
  <div class="skill-item">
@@ -299,28 +310,40 @@
299
  </div>
300
  </div>
301
 
302
- </body>
303
  </div>
304
  </section>
305
 
306
- <!-- Recent Work -->
307
- <section id="Proj" class="wrapper special style3">
308
- <div class="inner">
309
- <header class="major">
310
- <h2>Projects</h2>
311
- </header>
312
- </div>
313
- <div class="row">
314
- <article class="col-6 col-4-xsmall work-item">
315
- <img src="assets/gifs/Les Furnitures.gif" alt="" style="width: 55%; border-radius: 10px;"/>
316
- <h3>Les Furnitures</h3>
317
- <p>3D room reconstruction from single images based on estimated depth<br> and visualization using webVR for basic primitives.</p>
318
- <p><strong>Laboratoire Hubert Curien, France</strong></p>
319
- <div style="margin-top: 15px;">
320
- <button onclick="window.open('https://github.com/AryamanSharma17/ScenRec', '_blank')" class="button">Code</button>
321
- <button onclick="window.open('assets/pdf/ET_Project_Report.pdf', '_blank')" class="button">Report</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
322
  </div>
323
- </article>
324
  <article class="col-6 col-12-xsmall work-item zoom-img-2">
325
  <a href="images/fulls/03.jpg" class="image thumb"><img src="images/thumbs/03.jpg" alt="" style="border-radius: 10px;" /></a>
326
  <h3>Robot Control UEF</h3>
@@ -442,15 +465,74 @@
442
  </div>
443
  </section> -->
444
 
445
- <!-- Footer -->
446
- <footer id="footer">
447
- <ul class="icons">
448
- <li><a href="mailto:aryaman.aryan@gmail.com" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
449
- </ul>
450
- <ul class="copyright">
451
- <li>&copy; Aryaman Sharma</li>
452
- <li>Design adapted from: <a href="http://html5up.net">HTML5 UP</a></li>
453
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
454
  </footer>
455
 
456
  </div>
 
2
  <html>
3
 
4
  <head>
5
+ <title>Aryaman Sharma | XR Developer & Researcher</title>
6
  <meta charset="utf-8" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
8
+ <meta name="description" content="XR Developer and Computer Vision Researcher specializing in 3D reconstruction and immersive technologies">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
12
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
13
+ <link rel="stylesheet" href="assets/css/main.css" />
14
+ <link rel="stylesheet" href="assets/css/modern.css">
15
  <noscript>
16
  <link rel="stylesheet" href="assets/css/noscript.css" />
17
  </noscript>
 
60
  </ul>
61
  </nav>
62
  </header>
63
+ <!-- Modern Hero Section -->
64
+ <section id="hero" class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-900 to-indigo-900 text-white">
65
+ <div class="container mx-auto px-6 py-24 md:py-32 flex flex-col md:flex-row items-center gap-12">
66
+ <div class="md:w-1/2 space-y-6">
67
+ <h1 class="text-4xl md:text-6xl font-bold leading-tight">
68
+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">Aryaman Sharma</span>
69
+ </h1>
70
+ <div class="text-xl md:text-2xl font-medium text-gray-300">
71
+ <div class="inline-block mr-2">I'm</div>
72
+ <div class="inline-block typewriter-text" data-words='["XR Developer", "Computer Vision Engineer", "Researcher", "Photonics Specialist"]'></div>
73
+ </div>
74
+ <p class="text-lg text-blue-100 max-w-lg">
75
+ Creating immersive experiences through cutting-edge 3D reconstruction and extended reality technologies.
76
+ </p>
77
+ <div class="flex flex-wrap gap-4 mt-8">
78
+ <a href="#work" class="px-8 py-3 bg-white text-blue-900 font-semibold rounded-full hover:bg-blue-100 transition-all">
79
+ View My Work
80
+ </a>
81
+ <a href="#contact" class="px-8 py-3 border-2 border-white text-white font-semibold rounded-full hover:bg-white hover:text-blue-900 transition-all">
82
+ Contact Me
83
+ </a>
84
+ </div>
85
+ </div>
86
+ <div class="md:w-1/2 relative">
87
+ <div class="relative w-full aspect-square max-w-lg">
88
+ <div id="gltf-viewer" class="absolute inset-0 rounded-2xl overflow-hidden shadow-2xl"></div>
89
+ <div class="absolute inset-0 bg-gradient-to-tr from-blue-500 to-purple-600 opacity-20 rounded-2xl"></div>
90
+ </div>
91
  <script type="importmap">
92
  {
93
  "imports": {
 
189
  </div>
190
  </section>
191
 
192
+ <section id="skills" class="py-20 bg-gray-50">
193
+ <div class="container mx-auto px-6">
194
+ <div class="text-center mb-16">
195
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Technical Skills</h2>
196
+ <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
197
+ </div>
198
+
199
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
200
+ <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
201
+ <h3 class="text-xl font-semibold mb-6 flex items-center">
202
+ <span class="w-3 h-3 bg-blue-500 rounded-full mr-3"></span>
203
+ Programming Languages
204
+ </h3>
205
+ <div class="flex flex-wrap gap-4">
206
+ <div class="skill-badge">
207
+ <i class="devicon-python-plain colored text-3xl"></i>
208
  <span>Python</span>
209
  </div>
210
  <div class="skill-item">
 
310
  </div>
311
  </div>
312
 
313
+ <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=XlitZ69/Portfolio-DeepSite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
314
  </div>
315
  </section>
316
 
317
+ <section id="projects" class="py-20 bg-white">
318
+ <div class="container mx-auto px-6">
319
+ <div class="text-center mb-16">
320
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Featured Projects</h2>
321
+ <p class="text-gray-600 max-w-2xl mx-auto">Cutting-edge work in XR development and computer vision</p>
322
+ </div>
323
+
324
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
325
+ <div class="project-card group">
326
+ <div class="relative overflow-hidden rounded-xl h-64">
327
+ <img src="assets/gifs/Les Furnitures.gif" alt="Les Furnitures Project" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
328
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6">
329
+ <div>
330
+ <h3 class="text-xl font-bold text-white">Les Furnitures</h3>
331
+ <p class="text-blue-100">3D room reconstruction from single images</p>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ <div class="mt-4">
336
+ <p class="text-gray-600">3D room reconstruction from single images based on estimated depth and visualization using webVR.</p>
337
+ <div class="mt-4 flex gap-3">
338
+ <a href="https://github.com/AryamanSharma17/ScenRec" target="_blank" class="inline-flex items-center text-blue-600 hover:text-blue-800">
339
+ <i class="fab fa-github mr-2"></i> Code
340
+ </a>
341
+ <a href="assets/pdf/ET_Project_Report.pdf" target="_blank" class="inline-flex items-center text-purple-600 hover:text-purple-800">
342
+ <i class="fas fa-file-pdf mr-2"></i> Report
343
+ </a>
344
+ </div>
345
+ </div>
346
  </div>
 
347
  <article class="col-6 col-12-xsmall work-item zoom-img-2">
348
  <a href="images/fulls/03.jpg" class="image thumb"><img src="images/thumbs/03.jpg" alt="" style="border-radius: 10px;" /></a>
349
  <h3>Robot Control UEF</h3>
 
465
  </div>
466
  </section> -->
467
 
468
+ <section id="contact" class="py-20 bg-gray-900 text-white">
469
+ <div class="container mx-auto px-6">
470
+ <div class="text-center mb-16">
471
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Get In Touch</h2>
472
+ <p class="text-blue-200 max-w-2xl mx-auto">Interested in collaborating or learning more about my work?</p>
473
+ </div>
474
+
475
+ <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12">
476
+ <div>
477
+ <h3 class="text-xl font-semibold mb-6">Contact Information</h3>
478
+ <div class="space-y-4">
479
+ <div class="flex items-start">
480
+ <div class="flex-shrink-0 mt-1">
481
+ <i class="fas fa-envelope text-blue-400"></i>
482
+ </div>
483
+ <div class="ml-4">
484
+ <h4 class="text-lg font-medium">Email</h4>
485
+ <a href="mailto:aryaman.aryan@gmail.com" class="text-blue-300 hover:text-white">aryaman.aryan@gmail.com</a>
486
+ </div>
487
+ </div>
488
+ <div class="flex items-start">
489
+ <div class="flex-shrink-0 mt-1">
490
+ <i class="fab fa-linkedin text-blue-400"></i>
491
+ </div>
492
+ <div class="ml-4">
493
+ <h4 class="text-lg font-medium">LinkedIn</h4>
494
+ <a href="https://www.linkedin.com/in/sharma-aryaman" target="_blank" class="text-blue-300 hover:text-white">linkedin.com/in/sharma-aryaman</a>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ </div>
499
+
500
+ <div>
501
+ <h3 class="text-xl font-semibold mb-6">Send Me a Message</h3>
502
+ <form class="space-y-4">
503
+ <div>
504
+ <label for="name" class="block text-sm font-medium">Name</label>
505
+ <input type="text" id="name" class="mt-1 block w-full bg-gray-800 border-gray-700 rounded-md text-white focus:ring-blue-500 focus:border-blue-500">
506
+ </div>
507
+ <div>
508
+ <label for="email" class="block text-sm font-medium">Email</label>
509
+ <input type="email" id="email" class="mt-1 block w-full bg-gray-800 border-gray-700 rounded-md text-white focus:ring-blue-500 focus:border-blue-500">
510
+ </div>
511
+ <div>
512
+ <label for="message" class="block text-sm font-medium">Message</label>
513
+ <textarea id="message" rows="4" class="mt-1 block w-full bg-gray-800 border-gray-700 rounded-md text-white focus:ring-blue-500 focus:border-blue-500"></textarea>
514
+ </div>
515
+ <button type="submit" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-md font-medium transition-colors">
516
+ Send Message
517
+ </button>
518
+ </form>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </section>
523
+
524
+ <footer class="py-8 bg-gray-950 text-center text-gray-400">
525
+ <div class="container mx-auto px-6">
526
+ <p>&copy; <span id="year"></span> Aryaman Sharma. All rights reserved.</p>
527
+ <div class="mt-4 flex justify-center space-x-6">
528
+ <a href="https://github.com/AryamanSharma17" target="_blank" class="text-gray-400 hover:text-white">
529
+ <i class="fab fa-github text-xl"></i>
530
+ </a>
531
+ <a href="https://www.linkedin.com/in/sharma-aryaman" target="_blank" class="text-gray-400 hover:text-white">
532
+ <i class="fab fa-linkedin-in text-xl"></i>
533
+ </a>
534
+ </div>
535
+ </div>
536
  </footer>
537
 
538
  </div>