Update index.html
Browse files- index.html +70 -0
index.html
CHANGED
|
@@ -64,6 +64,14 @@
|
|
| 64 |
transform: translateY(-5px);
|
| 65 |
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
|
| 66 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 67 |
@keyframes fadeIn {
|
| 68 |
from { opacity: 0; transform: translateY(20px); }
|
| 69 |
to { opacity: 1; transform: translateY(0); }
|
|
@@ -71,6 +79,29 @@
|
|
| 71 |
.animate-fade-in {
|
| 72 |
animation: fadeIn 0.6s ease forwards;
|
| 73 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 74 |
</style>
|
| 75 |
</head>
|
| 76 |
<body class="bg-gray-50 text-gray-800 font-sans">
|
|
@@ -102,6 +133,40 @@
|
|
| 102 |
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
| 103 |
<!-- Left Column -->
|
| 104 |
<div class="lg:col-span-2 space-y-8">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 105 |
<!-- Summary -->
|
| 106 |
<section class="bg-white rounded-xl shadow-md p-6 animate-fade-in" style="animation-delay: 0.2s;">
|
| 107 |
<h3 class="text-2xl font-bold mb-4 section-title">Summary</h3>
|
|
@@ -292,6 +357,10 @@
|
|
| 292 |
<i class="fas fa-robot text-xl mr-3"></i>
|
| 293 |
<span>Hugging Face Profile</span>
|
| 294 |
</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 295 |
</div>
|
| 296 |
</section>
|
| 297 |
</div>
|
|
@@ -320,4 +389,5 @@
|
|
| 320 |
});
|
| 321 |
});
|
| 322 |
</script>
|
|
|
|
| 323 |
</html>
|
|
|
|
| 64 |
transform: translateY(-5px);
|
| 65 |
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
|
| 66 |
}
|
| 67 |
+
.ai-portfolio-card {
|
| 68 |
+
transition: all 0.3s ease;
|
| 69 |
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| 70 |
+
}
|
| 71 |
+
.ai-portfolio-card:hover {
|
| 72 |
+
transform: translateY(-5px);
|
| 73 |
+
box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
|
| 74 |
+
}
|
| 75 |
@keyframes fadeIn {
|
| 76 |
from { opacity: 0; transform: translateY(20px); }
|
| 77 |
to { opacity: 1; transform: translateY(0); }
|
|
|
|
| 79 |
.animate-fade-in {
|
| 80 |
animation: fadeIn 0.6s ease forwards;
|
| 81 |
}
|
| 82 |
+
.gradient-border {
|
| 83 |
+
position: relative;
|
| 84 |
+
border-radius: 1rem;
|
| 85 |
+
z-index: 1;
|
| 86 |
+
}
|
| 87 |
+
.gradient-border::before {
|
| 88 |
+
content: '';
|
| 89 |
+
position: absolute;
|
| 90 |
+
top: -2px;
|
| 91 |
+
left: -2px;
|
| 92 |
+
right: -2px;
|
| 93 |
+
bottom: -2px;
|
| 94 |
+
background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899);
|
| 95 |
+
border-radius: 1rem;
|
| 96 |
+
z-index: -1;
|
| 97 |
+
animation: borderAnimation 3s ease infinite;
|
| 98 |
+
background-size: 200% 200%;
|
| 99 |
+
}
|
| 100 |
+
@keyframes borderAnimation {
|
| 101 |
+
0% { background-position: 0% 50%; }
|
| 102 |
+
50% { background-position: 100% 50%; }
|
| 103 |
+
100% { background-position: 0% 50%; }
|
| 104 |
+
}
|
| 105 |
</style>
|
| 106 |
</head>
|
| 107 |
<body class="bg-gray-50 text-gray-800 font-sans">
|
|
|
|
| 133 |
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
| 134 |
<!-- Left Column -->
|
| 135 |
<div class="lg:col-span-2 space-y-8">
|
| 136 |
+
<!-- AI Portfolio Section -->
|
| 137 |
+
<section class="gradient-border p-1 rounded-xl animate-fade-in" style="animation-delay: 0.15s;">
|
| 138 |
+
<div class="ai-portfolio-card rounded-xl p-6 text-white">
|
| 139 |
+
<div class="flex flex-col md:flex-row items-center justify-between">
|
| 140 |
+
<div>
|
| 141 |
+
<h3 class="text-2xl font-bold mb-2">AI Portfolio</h3>
|
| 142 |
+
<p class="mb-4">Explore my interactive AI projects and demos on Hugging Face</p>
|
| 143 |
+
</div>
|
| 144 |
+
<a href="https://huggingface.co/spaces/gaur3009/dsd" target="_blank"
|
| 145 |
+
class="bg-white text-indigo-600 font-semibold px-6 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition flex items-center">
|
| 146 |
+
<i class="fas fa-external-link-alt mr-2"></i>
|
| 147 |
+
Visit My AI Space
|
| 148 |
+
</a>
|
| 149 |
+
</div>
|
| 150 |
+
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
| 151 |
+
<div class="bg-white bg-opacity-20 p-3 rounded-lg">
|
| 152 |
+
<i class="fas fa-robot text-2xl mb-2"></i>
|
| 153 |
+
<h4 class="font-semibold">NLP Projects</h4>
|
| 154 |
+
<p class="text-sm">Advanced language models and text processing</p>
|
| 155 |
+
</div>
|
| 156 |
+
<div class="bg-white bg-opacity-20 p-3 rounded-lg">
|
| 157 |
+
<i class="fas fa-eye text-2xl mb-2"></i>
|
| 158 |
+
<h4 class="font-semibold">Computer Vision</h4>
|
| 159 |
+
<p class="text-sm">Image processing and recognition systems</p>
|
| 160 |
+
</div>
|
| 161 |
+
<div class="bg-white bg-opacity-20 p-3 rounded-lg">
|
| 162 |
+
<i class="fas fa-tshirt text-2xl mb-2"></i>
|
| 163 |
+
<h4 class="font-semibold">Fashion AI</h4>
|
| 164 |
+
<p class="text-sm">AI-powered fashion technology solutions</p>
|
| 165 |
+
</div>
|
| 166 |
+
</div>
|
| 167 |
+
</div>
|
| 168 |
+
</section>
|
| 169 |
+
|
| 170 |
<!-- Summary -->
|
| 171 |
<section class="bg-white rounded-xl shadow-md p-6 animate-fade-in" style="animation-delay: 0.2s;">
|
| 172 |
<h3 class="text-2xl font-bold mb-4 section-title">Summary</h3>
|
|
|
|
| 357 |
<i class="fas fa-robot text-xl mr-3"></i>
|
| 358 |
<span>Hugging Face Profile</span>
|
| 359 |
</a>
|
| 360 |
+
<a href="https://huggingface.co/spaces/gaur3009/dsd" target="_blank" class="flex items-center text-purple-600 hover:text-purple-800 transition-colors">
|
| 361 |
+
<i class="fas fa-space-shuttle text-xl mr-3"></i>
|
| 362 |
+
<span>AI Portfolio Space</span>
|
| 363 |
+
</a>
|
| 364 |
</div>
|
| 365 |
</section>
|
| 366 |
</div>
|
|
|
|
| 389 |
});
|
| 390 |
});
|
| 391 |
</script>
|
| 392 |
+
</body>
|
| 393 |
</html>
|