feat: weather-api v2

components/Gallery.vue

@@ -1,5 +1,32 @@
 <template>
 	<div class="w-full h-full opacity-[.7]">
-		<img src="/gal1.jpg" alt="" class="w-[65%] rounded-xl border-2 border-purple-300" />
+		<div class="flex flex-col items-center h-full p-8 rounded-md w-60 sm:px-12 bg-gray-900 text-gray-100">
+			<div class="text-center">
+				<h2 class="text-xl font-semibold">Dubai</h2>
+				<p class="text-sm text-gray-400">July 29</p>
+			</div>
+			<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
+				class="w-32 h-32 p-6 text-yellow-400 fill-current">
+				<path
+					d="M256,104c-83.813,0-152,68.187-152,152s68.187,152,152,152,152-68.187,152-152S339.813,104,256,104Zm0,272A120,120,0,1,1,376,256,120.136,120.136,0,0,1,256,376Z">
+				</path>
+				<rect width="32" height="48" x="240" y="16"></rect>
+				<rect width="32" height="48" x="240" y="448"></rect>
+				<rect width="48" height="32" x="448" y="240"></rect>
+				<rect width="48" height="32" x="16" y="240"></rect>
+				<rect width="32" height="45.255" x="400" y="393.373" transform="rotate(-45 416 416)"></rect>
+				<rect width="32.001" height="45.255" x="80" y="73.373" transform="rotate(-45 96 96)"></rect>
+				<rect width="45.255" height="32" x="73.373" y="400" transform="rotate(-45.001 96.002 416.003)"></rect>
+				<rect width="45.255" height="32.001" x="393.373" y="80" transform="rotate(-45 416 96)"></rect>
+			</svg> -->
+
+			<Icon name="ph:cloud-fog-fill" color="#E1AFD1" class="w-32 h-32 p-6 text-yellow-400 fill-current" />
+			<!-- <Icon name="material-symbols:weather-snowy" color="#E1AFD1" class="w-32 h-32 p-6 text-yellow-400 fill-current" /> -->
+			<!-- <Icon name="ph:sun-dim-fill" color="#E1AFD1" class="w-32 h-32 p-6 text-yellow-400 fill-current" /> -->
+			<div class="mb-2 text-3xl font-semibold">32°
+				<span class="mx-1 font-normal">/</span>20°
+			</div>
+			<p class="text-gray-400">Partly cloudy</p>
+		</div>
 	</div>
 </template>

components/Profile.vue

@@ -5,8 +5,13 @@
                 <div class="relative mx-auto w-36 rounded-full">
                     <img class="mx-auto h-auto w-full rounded-full" src="/profile.png" alt="" />
                 </div>
-                <h1 class="my-1 text-center text-2xl font-bold leading-8 text-[#E1AFD1]">Piyush</h1>
+                <h1 class="my-1 text-center text-2xl font-bold leading-8 text-[#E1AFD1]">Shubham</h1>
                 <p class="text-center text-sm leading-6 text-[#FFE6E6] hover:text-gray-600 font-bold">Fullstack Web Developer <br/> Anime . Cat . Music</p>
+                <div class="flex justify-evenly w-1/2">
+                    <Icon name="mdi:github" color="#E1AFD1" class="text-3xl" />
+                    <Icon name="mdi:mastodon" color="#E1AFD1" class="text-3xl" />
+                    <Icon name="mdi:gmail" color="#E1AFD1" class="text-3xl" />
+                </div>
             </div>
         </div>
     </div>