finished technologies page + added animations

src/styles.scss

@@ -1,4 +1,5 @@
-/* You can add global styles to this file, and also import other style files */
+@use "sass:map";
+@use "theme";
 
 html, body { height: 100vh; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
@@ -43,3 +44,70 @@ mat-drawer > div {
 @function css-clamp( $values... ) {
   @return css-function( clamp, $values );
 }
+
+.technologies-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  margin-top: 40px;
+}
+
+.artwork {
+  position: absolute;
+  left: 55%;
+  top: 19vh;
+
+  .circle {
+    position: absolute;
+    aspect-ratio: 1 / 1;
+    z-index: -1;
+    background: theme.$gradient-angled;
+    border-radius: 50%;
+
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 1px;
+      background-color: map.get(theme.$background, 'background');
+      border-radius: 50%;
+    }
+  }
+
+  .big-circle {
+    left: 0;
+    top: 0;
+    width: 400px;
+  }
+
+  .small-circle {
+    top: 100px;
+    left: 350px;
+    width: 150px;
+
+    &:after {
+      content: none;
+    }
+  }
+
+  .image {
+    top: -50px;
+    left: 170px;
+    width: 250px;
+
+    &:after {
+      background-image: url("/favicon.ico");
+      background-size: 112%;
+      background-position: -15px -15px;
+    }
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}