From 2c2561b0ab26856e0cd38dc12b56c561a77530e8 Mon Sep 17 00:00:00 2001
From: zuzexx <tjasa.zilavec@gmail.com>
Date: Sat, 3 Dec 2022 17:53:01 +0100
Subject: [PATCH] .

---
 .../Projects/ContainerComponent.vue           | 23 ++++++++++++++++---
 src/components/Shared/NavbarComponent.vue     |  8 +++----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/Projects/ContainerComponent.vue b/src/components/Projects/ContainerComponent.vue
index 599ece8..76255a4 100644
--- a/src/components/Projects/ContainerComponent.vue
+++ b/src/components/Projects/ContainerComponent.vue
@@ -3,8 +3,8 @@
     <div
       class="mx-auto max-w-sm bg-white border border-neutral-200 rounded-lg shadow-md dark:bg-neutral-800 dark:border-neutral-700 flex flex-col mt-16"
     >
-      <a :href="live" target="_blank">
-        <img class="rounded-t-lg" :src="image" alt="image" />
+      <a :href="live" target="_blank" class="img-container">
+        <img class="rounded-t-lg img" :src="image" alt="image" />
       </a>
       <div class="p-5">
         <a :href="live" target="_blank">
@@ -98,4 +98,21 @@ export default defineComponent({
 });
 </script>
 
-<style></style>
+<style scoped>
+.img {
+  @apply w-full scale-100 hover:scale-105 transition-all;
+}
+.img-container {
+  @apply hover:scale-100 w-full p-0 m-0 overflow-hidden;
+}
+.img-container .img {
+  -webkit-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: 0.7s ease-in-out;
+  transition: 0.7s ease-in-out;
+}
+.img-container:hover .img {
+  -webkit-transform: scale(1.3);
+  transform: scale(1.3);
+}
+</style>
diff --git a/src/components/Shared/NavbarComponent.vue b/src/components/Shared/NavbarComponent.vue
index 8adbc1e..eef145d 100644
--- a/src/components/Shared/NavbarComponent.vue
+++ b/src/components/Shared/NavbarComponent.vue
@@ -14,8 +14,8 @@
         ></a>
         <a href="#skills"><li>Skills</li></a>
         <a href="#projects"><li>Projects</li></a>
-        <a href="#contact"><li>Contact</li></a>
-        <li><ThemeToggle /></li>
+        <!-- <a href="#contact"><li>Contact</li></a>
+        <li><ThemeToggle /></li>-->
       </ul>
     </div>
   </section>
@@ -23,11 +23,11 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import ThemeToggle from "./ThemeToggle.vue";
+//import ThemeToggle from "./ThemeToggle.vue";
 
 export default defineComponent({
   name: "NavbarComponent",
-  components: { ThemeToggle },
+  //components: { ThemeToggle },
 });
 if (
   localStorage.getItem("color-theme") === "dark" ||