Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Reconstruction Research | PhD Candidate</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <style> | |
| .vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .card-hover { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .publication-card { | |
| background: rgba(255, 255, 255, 0.9); | |
| backdrop-filter: blur(10px); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: #3B82F6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div id="vanta-bg" class="vanta-bg"></div> | |
| <header class="relative z-10"> | |
| <nav class="container mx-auto px-6 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-2xl font-bold text-white bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600"> | |
| ReconstructoSphere | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#about" class="nav-link text-white hover:text-blue-300">About</a> | |
| <a href="#publications" class="nav-link text-white hover:text-blue-300">Publications</a> | |
| <a href="#news" class="nav-link text-white hover:text-blue-300">News</a> | |
| <a href="#experience" class="nav-link text-white hover:text-blue-300">Experience</a> | |
| </div> | |
| <button class="md:hidden text-white focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| </header> | |
| <main class="relative z-10"> | |
| <!-- Hero Section --> | |
| <section class="container mx-auto px-6 py-20"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-white mb-4"> | |
| Hi, I'm a <span class="text-blue-300">PhD Candidate</span> in 3D Reconstruction | |
| </h1> | |
| <p class="text-xl text-gray-200 mb-8"> | |
| Exploring novel approaches to 3D scene understanding and geometry reconstruction. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#contact" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> | |
| Contact Me | |
| </a> | |
| <a href="#publications" class="px-6 py-3 border border-white text-white rounded-lg hover:bg-white hover:text-gray-900 transition"> | |
| View Work | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative floating"> | |
| <div class="w-64 h-64 bg-gradient-to-br from-blue-400 to-purple-600 rounded-full opacity-20 blur-xl"></div> | |
| <img src="http://static.photos/technology/640x360/1" alt="3D Reconstruction" class="absolute top-0 w-64 h-64 rounded-full object-cover shadow-2xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="container mx-auto px-6 py-20 bg-white rounded-3xl shadow-lg"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-10 md:mb-0"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Academic Background</h2> | |
| <div class="h-1 w-20 bg-blue-500 mb-6"></div> | |
| <img src="http://static.photos/technology/640x360/2" alt="Academic Background" class="rounded-xl shadow-lg"> | |
| </div> | |
| <div class="md:w-2/3 md:pl-12"> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Education</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-blue-500 mt-1"> | |
| <i data-feather="book"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-lg font-medium text-gray-800">PhD in Computer Science</p> | |
| <p class="text-gray-600">University of Technology, 2020 - Present</p> | |
| <p class="text-gray-500">Focus: 3D Reconstruction and Deep Learning</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-blue-500 mt-1"> | |
| <i data-feather="book"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-lg font-medium text-gray-800">MSc in Computer Vision</p> | |
| <p class="text-gray-600">Tech Institute, 2018 - 2020</p> | |
| <p class="text-gray-500">Thesis: Multi-view 3D Reconstruction</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Research Interests</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full">3D Reconstruction</span> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full">Computer Vision</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full">Deep Learning</span> | |
| <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full">Neural Rendering</span> | |
| <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full">SLAM</span> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full">Geometry Processing</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Publications Section --> | |
| <section id="publications" class="container mx-auto px-6 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Recent Publications</h2> | |
| <div class="h-1 w-20 bg-blue-500 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Publication 1 --> | |
| <div class="publication-card rounded-xl overflow-hidden shadow-lg card-hover"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/3" alt="Publication 1" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-4 left-4 text-white"> | |
| <span class="bg-blue-600 text-xs px-2 py-1 rounded">CVPR 2023</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Neural 3D Reconstruction from Multi-view Images</h3> | |
| <p class="text-gray-600 mb-4">A novel approach combining implicit neural representations with traditional multi-view geometry.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-blue-600">PDF</span> | |
| <span class="text-sm text-gray-500">May 2023</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Publication 2 --> | |
| <div class="publication-card rounded-xl overflow-hidden shadow-lg card-hover"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/4" alt="Publication 2" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-4 left-4 text-white"> | |
| <span class="bg-purple-600 text-xs px-2 py-1 rounded">ICCV 2022</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Depth Estimation for Unstructured Scenes</h3> | |
| <p class="text-gray-600 mb-4">Self-supervised learning framework for monocular depth estimation in complex environments.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-blue-600">PDF</span> | |
| <span class="text-sm text-gray-500">Oct 2022</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Publication 3 --> | |
| <div class="publication-card rounded-xl overflow-hidden shadow-lg card-hover"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/5" alt="Publication 3" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-4 left-4 text-white"> | |
| <span class="bg-green-600 text-xs px-2 py-1 rounded">ECCV 2022</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Real-time 3D Scanning on Mobile Devices</h3> | |
| <p class="text-gray-600 mb-4">Optimized pipeline for efficient 3D reconstruction on resource-constrained devices.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-blue-600">PDF</span> | |
| <span class="text-sm text-gray-500">Jul 2022</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block px-6 py-3 bg-white text-gray-800 rounded-lg hover:bg-gray-100 transition"> | |
| View All Publications | |
| </a> | |
| </div> | |
| </section> | |
| <!-- News & Awards Section --> | |
| <section id="news" class="container mx-auto px-6 py-20 bg-white rounded-3xl shadow-lg"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 md:pr-8"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Latest News</h2> | |
| <div class="h-1 w-20 bg-blue-500 mb-6"></div> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i data-feather="award" class="text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Best Paper Award at CVPR 2023</h3> | |
| <p class="text-gray-600">June 15, 2023</p> | |
| <p class="text-gray-500 mt-1">Our work on neural 3D reconstruction received the best paper award at CVPR 2023.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i data-feather="mic" class="text-purple-600"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Keynote Speaker at 3D Vision Summit</h3> | |
| <p class="text-gray-600">April 28, 2023</p> | |
| <p class="text-gray-500 mt-1">Invited to discuss the future of neural rendering techniques.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i data-feather="book-open" class="text-green-600"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">New Research Grant Awarded</h3> | |
| <p class="text-gray-600">March 10, 2023</p> | |
| <p class="text-gray-500 mt-1">Received $200K grant from NSF for research on real-time 3D reconstruction.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-8 mt-10 md:mt-0"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Awards & Honors</h2> | |
| <div class="h-1 w-20 bg-blue-500 mb-6"></div> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-full bg-yellow-100 flex items-center justify-center mr-4"> | |
| <i data-feather="star" class="text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Outstanding Doctoral Researcher Award</h3> | |
| <p class="text-gray-600">2023</p> | |
| <p class="text-gray-500 mt-1">University-wide recognition for research contributions.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-full bg-red-100 flex items-center justify-center mr-4"> | |
| <i data-feather="trophy" class="text-red-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Google PhD Fellowship</h3> | |
| <p class="text-gray-600">2022</p> | |
| <p class="text-gray-500 mt-1">Selected among the top computer vision PhD students globally.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> | |
| <i data-feather="award" class="text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Best Student Paper, 3DV 2021</h3> | |
| <p class="text-gray-600">2021</p> | |
| <p class="text-gray-500 mt-1">Recognized for innovative work on multi-view geometry.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="container mx-auto px-6 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Professional Experience</h2> | |
| <div class="h-1 w-20 bg-blue-500 mx-auto"></div> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="relative"> | |
| <!-- Vertical line --> | |
| <div class="border-r-2 border-blue-500 absolute h-full left-4 md:left-1/2 transform -translate-x-1/2"></div> | |
| <!-- Timeline items --> | |
| <div class="space-y-8"> | |
| <!-- Item 1 --> | |
| <div class="relative flex md:justify-between items-center w-full"> | |
| <div class="hidden md:block md:w-5/12"></div> | |
| <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 shadow-md absolute left-4 md:left-1/2 transform -translate-x-1/2"> | |
| <i data-feather="briefcase" class="text-white"></i> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-lg p-6 w-full md:w-5/12 ml-12 md:ml-0"> | |
| <h3 class="text-xl font-bold text-gray-800">Research Intern</h3> | |
| <p class="text-blue-600">Meta Reality Labs</p> | |
| <p class="text-gray-600 mb-2">Summer 2023</p> | |
| <p class="text-gray-500">Developed novel neural rendering techniques for AR applications. Worked on real-time 3D reconstruction pipelines.</p> | |
| </div> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="relative flex md:justify-between items-center w-full"> | |
| <div class="bg-white rounded-lg shadow-lg p-6 w-full md:w-5/12 mr-12 md:mr-0"> | |
| <h3 class="text-xl font-bold text-gray-800">Research Assistant</h3> | |
| <p class="text-blue-600">Computer Vision Lab</p> | |
| <p class="text-gray-600 mb-2">2020 - Present</p> | |
| <p class="text-gray-500">Leading research on 3D scene understanding and reconstruction. Supervising 3 MSc students.</p> | |
| </div> | |
| <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 shadow-md absolute left-4 md:left-1/2 transform -translate-x-1/2"> | |
| <i data-feather="cpu" class="text-white"></i> | |
| </div> | |
| <div class="hidden md:block md:w-5/12"></div> | |
| </div> | |
| <!-- Item 3 --> | |
| <div class="relative flex md:justify-between items-center w-full"> | |
| <div class="hidden md:block md:w-5/12"></div> | |
| <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 shadow-md absolute left-4 md:left-1/2 transform -translate-x-1/2"> | |
| <i data-feather="code" class="text-white"></i> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-lg p-6 w-full md:w-5/12 ml-12 md:ml-0"> | |
| <h3 class="text-xl font-bold text-gray-800">Computer Vision Engineer</h3> | |
| <p class="text-blue-600">Startup Company</p> | |
| <p class="text-gray-600 mb-2">2018 - 2020</p> | |
| <p class="text-gray-500">Developed SLAM systems for mobile applications. Implemented real-time 3D reconstruction algorithms.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 3D Interactive Demo --> | |
| <section class="container mx-auto px-6 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-white mb-4">3D Reconstruction Demo</h2> | |
| <div class="h-1 w-20 bg-blue-500 mx-auto"></div> | |
| <p class="text-gray-300 mt-4 max-w-2xl mx-auto">Interact with this demo to explore 3D reconstruction techniques</p> | |
| </div> | |
| <div class="bg-white bg-opacity-90 rounded-3xl shadow-xl p-8"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-8"> | |
| <div id="3d-container" class="w-full h-96 bg-gray-100 rounded-xl overflow-hidden relative"> | |
| <!-- This would be where your 3D viewer goes --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i data-feather="box" class="w-16 h-16 text-gray-400 mx-auto"></i> | |
| <p class="mt-4 text-gray-500">Interactive 3D Viewer</p> | |
| <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"> | |
| Load Model | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Explore 3D Reconstruction</h3> | |
| <p class="text-gray-600 mb-6"> | |
| This interactive demo showcases different 3D reconstruction techniques. Try adjusting the parameters below to see how they affect the reconstruction quality. | |
| </p> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Reconstruction Method</label> | |
| <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Neural Radiance Fields (NeRF)</option> | |
| <option>Multi-view Stereo</option> | |
| <option>Structure from Motion</option> | |
| <option>Depth Estimation</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Input Views</label> | |
| <input type="range" min="2" max="20" value="8" class="w-full"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Quality</label> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 bg-gray-200 rounded-lg">Low</button> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg">Medium</button> | |
| <button class="px-4 py-2 bg-gray-200 rounded-lg">High</button> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> | |
| Reconstruct Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="relative z-10 bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <h2 class="text-2xl font-bold mb-4">ReconstructoSphere</h2> | |
| <p class="text-gray-400 max-w-md">Exploring the frontiers of 3D reconstruction and computer vision through innovative research.</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Navigation</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">About</a></li> | |
| <li><a href="#publications" class="text-gray-400 hover:text-white transition">Publications</a></li> | |
| <li><a href="#news" class="text-gray-400 hover:text-white transition">News</a></li> | |
| <li><a href="#experience" class="text-gray-400 hover:text-white transition">Experience</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Connect</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Twitter</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">LinkedIn</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Google Scholar</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">GitHub</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Contact</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><i data-feather="mail" class="mr-2 w-4 h-4"></i> <span class="text-gray-400">phd@university.edu</span></li> | |
| <li class="flex items-center"><i data-feather="map-pin" class="mr-2 w-4 h-4"></i> <span class="text-gray-400">Computer Science Dept.</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 ReconstructoSphere. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="mail"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| </script> | |
| </body> | |
| </html> | |