Merge branch 'master' into snyk-upgrade-2d02b5d03f7b9a2ceed8eb4aa3036db7

AgataBialoskorska · Jul 1, 2024 · f25db4b · f25db4b
2 parents a33624a + a928468
commit f25db4b
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,11 +15,11 @@
         "e2e-prod": "vite build && start-server-and-test preview http://localhost:5173 \"cypress run --e2e\""
     },
     "dependencies": {
-        "axios": "1.6.8",
+        "axios": "1.7.0",
         "dotenv": "16.4.5",
         "follow-redirects": ">=1.15.6",
         "oh-vue-icons": "1.0.0-rc3",
-        "start-server-and-test": "2.0.3",
+        "start-server-and-test": "2.0.4",
         "vue": "3.4.27",
         "vue-material-design-icons": "5.3.0",
         "vue-router": "4.3.2"
@@ -33,7 +33,7 @@
         "eslint-plugin-cypress": "2.15.1",
         "eslint-plugin-vue": "9.22.0",
         "prettier": "3.2.5",
-        "vite": "5.1.5",
+        "vite": "5.1.7",
         "follow-redirects": ">=1.15.6"
     }
 }
diff --git a/src/views/View-More.vue b/src/views/View-More.vue
@@ -3,7 +3,7 @@ import { aHover, aNotHover } from '/src/components/AnimationComponent.vue'
 </script>
 <template>
     <div class="techstack">
-        <p>I've been working with:</p>
+        <div>I've been working with:</div>
         <a href="https://skillicons.dev">
             <img src="https://skillicons.dev/icons?i=git,github,aws,vscode" alt="git,gihub,aws,vscode" />
             <img src="https://skillicons.dev/icons?i=mysql,regex,py" alt="mysql,regex,py" />
@@ -12,16 +12,24 @@ import { aHover, aNotHover } from '/src/components/AnimationComponent.vue'
         </a>
     </div>
     <div class="projects">
-        <p>My visual project:</p>
-        <RouterLink to="/hangman" @mouseenter="aHover" @mouseleave="aNotHover">
-            <v-icon name="fa-spell-check" />
+        <div>My visual projects:</div>
+        <RouterLink to="/hangman" class="hangmanLink" @mouseenter="aHover" @mouseleave="aNotHover">
+            <p class="linkIcon"></p>
+            <p class="linkDescription">Hangman Game</p>
         </RouterLink>
+        <a href="https://www.jabi.pl" class="jabiLink" @mouseenter="aHover" @mouseleave="aNotHover">
+            <p class="linkIcon"></p>
+            <p class="linkDescription">Webpage for Stained Glass brand, created in Vanilla JavaScript</p>
+        </a>
+        <a href="https://www.bialoskorski.eu" class="bskiLink" @mouseenter="aHover" @mouseleave="aNotHover">
+            <p class="linkIcon"></p>
+            <p class="linkDescription">Total overhaul webpage in Next.js</p>
+        </a>
     </div>
 </template>
 
 <style>
 .techstack {
-    font-size: 1.5em;
     margin-top: 3vmin;
     text-align: center;
     img {
@@ -34,22 +42,35 @@ import { aHover, aNotHover } from '/src/components/AnimationComponent.vue'
     }
 }
 .projects {
-    font-size: 1.5em;
-    margin-top: 3vmin;
+    margin: 3vmin 25%;
     text-align: center;
     a {
-        display: inline-grid;
-        grid-auto-columns: minmax(30px, auto);
-        grid-auto-rows: minmax(30px, auto);
-        margin: 1vmin;
-        padding: 2vmin;
+        align-items: center;
+        display: grid;
+        grid-template-columns: 4em 1fr;
+        grid-template-rows: auto;
+        justify-items: center;
+        margin: 2vmin;
+        width: 100%;
     }
-    .ov-icon {
-        margin: auto;
-        scale: 2;
+    .linkIcon {
+        background: radial-gradient(circle at 50% 0, rgba(36, 41, 46, 0.7), transparent 70.71%),
+            radial-gradient(circle at 6.7% 75%, rgba(36, 41, 46, 0.7), transparent 70.71%),
+            radial-gradient(circle at 93.3% 75%, rgba(66, 184, 131, 0.7), transparent 70.71%);
+        font-size: clamp(14px, 1.5em, 1.5em);
+        height: 1em;
+        width: 1em;
+    }
+    .linkDescription {
+        text-align: left;
+        margin: auto 1em;
+        width: 100%;
     }
 }
 @media (min-width: 980px) {
+    .projects {
+        margin: 3vmin;
+    }
     .techstack p,
     .projects p {
         font-size: clamp(12px, 1em, 22px);