Merge pull request realstoman#7 from NangialaiStoman/ui

UI Design Changes

Author: realstoman

package-lock.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@tailwindcss/forms": "^0.3.3",
     "@tailwindcss/postcss7-compat": "^2.0.2",
     "autoprefixer": "^9",
     "core-js": "^3.6.5",

package.json

@@ -1,7 +1,7 @@
 <template>
 	<div class="mt-10 sm:mt-20 bg-gray-100 shadow-sm">
 		<div
-			class="container mx-auto py-20 px-10 block sm:flex sm:justify-between sm:items-center"
+			class="container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
 		>
 			<div class="mb-20 sm:mb-0">
 				<p class="text-4xl font-bold text-gray-600 mb-2">12</p>

src/assets/images/brands/adidas_color.png

@@ -1,8 +1,8 @@
 <template>
-	<div class="block sm:flex sm:gap-10">
+	<div class="block sm:flex sm:gap-10 mt-10 sm:mt-20">
 		<div class="w-full sm:w-1/4 mb-7 sm:mb-0">
 			<img
-				src="../../assets/images/mobile-project-1.jpg"
+				src="../../assets/images/profile.jpeg"
 				class="rounded-xl w-96"
 				alt=""
 			/>

src/assets/images/brands/adidas_gray.png

@@ -1,8 +1,66 @@
 <template>
-	<div class="mt-10">
-		<p class="text-3xl font-semibold">
+	<div class="mt-10 sm:mt-20">
+		<p class="text-2xl sm:text-4xl text-gray-600 font-sans font-semibold">
 			Some of the best companies I worked with
 		</p>
+		<div class="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-20 gap-2">
+			<div>
+				<img
+					src="../../assets/images/brands/amazon_gray.png"
+					alt="Amazon"
+					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+				/>
+			</div>
+			<div>
+				<img
+					src="../../assets/images/brands/sony_gray.png"
+					alt="SONY"
+					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+				/>
+			</div>
+			<div>
+				<img
+					src="../../assets/images/brands/adidas_gray.png"
+					alt="Adidas"
+					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+				/>
+			</div>
+			<div>
+				<img
+					src="../../assets/images/brands/fila_gray.png"
+					alt="FILA"
+					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+				/>
+			</div>
+			<div>
+				<img
+					src="../../assets/images/brands/nb_gray.png"
+					alt="NB"
+					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+				/>
+			</div>
+			<div>
+				<img
+					src="../../assets/images/brands/samsung_gray.png"
+					alt="Samsung"
+					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+				/>
+			</div>
+			<div>
+				<img
+					src="../../assets/images/brands/canon_gray.png"
+					alt="Canon"
+					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+				/>
+			</div>
+			<div>
+				<img
+					src="../../assets/images/brands/puma_gray.png"
+					alt="Puma"
+					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+				/>
+			</div>
+		</div>
 	</div>
 </template>
 

src/assets/images/brands/amazon_color.png

@@ -1,6 +1,8 @@
 <template>
 	<!-- Banner start -->
-	<section class="flex flex-col items-center sm:flex-row justify-between">
+	<section
+		class="flex flex-col sm:justify-between items-center sm:flex-row mt-8 sm:mt-20"
+	>
 		<div class="w-full sm:w-1/3 text-left">
 			<h1
 				class="text-3xl sm:text-5xl text-center sm:text-left font-semibold text-gray-700 uppercase"
@@ -25,8 +27,8 @@
 				>
 			</div>
 		</div>
-		<div class="w-full sm:w-2/3 text-right">
-			<img src="@/assets/images/developer.svg" alt="Developer" />
+		<div class="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0">
+			<img src="@/assets/images/dev.svg" alt="Developer" />
 		</div>
 	</section>
 	<!-- Banner end -->

src/assets/images/brands/amazon_gray.png

@@ -1,6 +1,6 @@
 <template>
 	<!-- Projects start -->
-	<section class="pt-12 sm:pt-20">
+	<section class="pt-20 sm:pt-28">
 		<div class="text-center">
 			<p class="text-2xl sm:text-5xl font-semibold mb-3 text-gray-600">
 				Projects Portfolio