Spaces:
Running
Running
make this section layout 9 16 or 9 19 ratio so it can fill any mobile device screen smoothly ,
Browse files- index.html +30 -28
index.html
CHANGED
|
@@ -30,36 +30,38 @@
|
|
| 30 |
<body class="bg-gray-900 text-white min-h-screen">
|
| 31 |
<!-- Hero Section -->
|
| 32 |
<div id="vanta-bg" class="min-h-screen flex items-center justify-center px-4">
|
| 33 |
-
<div class="glass-card p-8 max-w-2xl w-full mx-auto text-center">
|
| 34 |
-
<div class="
|
| 35 |
-
<
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
|
| 40 |
-
|
| 41 |
-
|
| 42 |
-
<
|
| 43 |
-
<
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
<
|
| 47 |
-
|
| 48 |
-
|
| 49 |
-
<
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
<
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
-
|
| 57 |
-
<
|
| 58 |
-
|
| 59 |
-
|
|
|
|
|
|
|
| 60 |
</div>
|
| 61 |
</div>
|
| 62 |
-
|
| 63 |
<!-- Scripts -->
|
| 64 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
|
| 65 |
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|
|
|
|
| 30 |
<body class="bg-gray-900 text-white min-h-screen">
|
| 31 |
<!-- Hero Section -->
|
| 32 |
<div id="vanta-bg" class="min-h-screen flex items-center justify-center px-4">
|
| 33 |
+
<div class="glass-card p-4 sm:p-6 md:p-8 max-w-2xl w-full mx-auto text-center min-h-[80vh] flex flex-col justify-center" style="aspect-ratio: 9/16; max-height: 90vh;">
|
| 34 |
+
<div class="flex-1 flex flex-col justify-center">
|
| 35 |
+
<div class="w-24 h-24 sm:w-32 sm:h-32 mx-auto mb-4 sm:mb-6 rounded-full overflow-hidden border-4 border-indigo-500">
|
| 36 |
+
<img src="http://static.photos/technology/320x240/42" alt="Profile" class="w-full h-full object-cover">
|
| 37 |
+
</div>
|
| 38 |
+
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-2 gradient-text">John Doe</h1>
|
| 39 |
+
<p class="text-lg sm:text-xl text-gray-300 mb-4 sm:mb-6">Full Stack Developer & UI/UX Designer</p>
|
| 40 |
+
<p class="text-sm sm:text-base text-gray-400 mb-6 sm:mb-8 px-2">Building digital experiences that matter. Passionate about creating clean, efficient code and beautiful interfaces.</p>
|
| 41 |
+
|
| 42 |
+
<div class="flex justify-center space-x-3 sm:space-x-4 mb-6 sm:mb-8">
|
| 43 |
+
<a href="#" class="p-2 sm:p-3 rounded-full bg-indigo-600 hover:bg-indigo-700 transition">
|
| 44 |
+
<i data-feather="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
|
| 45 |
+
</a>
|
| 46 |
+
<a href="#" class="p-2 sm:p-3 rounded-full bg-blue-500 hover:bg-blue-600 transition">
|
| 47 |
+
<i data-feather="twitter" class="w-4 h-4 sm:w-5 sm:h-5"></i>
|
| 48 |
+
</a>
|
| 49 |
+
<a href="#" class="p-2 sm:p-3 rounded-full bg-red-500 hover:bg-red-600 transition">
|
| 50 |
+
<i data-feather="youtube" class="w-4 h-4 sm:w-5 sm:h-5"></i>
|
| 51 |
+
</a>
|
| 52 |
+
<a href="#" class="p-2 sm:p-3 rounded-full bg-blue-700 hover:bg-blue-800 transition">
|
| 53 |
+
<i data-feather="linkedin" class="w-4 h-4 sm:w-5 sm:h-5"></i>
|
| 54 |
+
</a>
|
| 55 |
+
</div>
|
| 56 |
+
|
| 57 |
+
<div class="flex flex-wrap justify-center gap-2 sm:gap-3">
|
| 58 |
+
<a href="#projects" class="px-4 py-2 sm:px-6 sm:py-2 bg-indigo-600 rounded-full hover:bg-indigo-700 transition text-sm sm:text-base">Projects</a>
|
| 59 |
+
<a href="#about" class="px-4 py-2 sm:px-6 sm:py-2 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-sm sm:text-base">About Me</a>
|
| 60 |
+
<a href="#contact" class="px-4 py-2 sm:px-6 sm:py-2 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-sm sm:text-base">Contact</a>
|
| 61 |
+
</div>
|
| 62 |
</div>
|
| 63 |
</div>
|
| 64 |
+
</div>
|
| 65 |
<!-- Scripts -->
|
| 66 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
|
| 67 |
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|