Made UI more interesting

src/app/pages/about/about.component.scss

@@ -46,9 +46,7 @@
 
 /* Skills block */
 .skills {
-  border-radius: 16px;
   padding: 5px;
-  background: var(--app-card-background);
 
   h2 { margin-top: .25rem; margin-left: .25rem; }
   .chip-groups {
@@ -65,9 +63,7 @@
 
 /* Experience block */
 .experience {
-  border-radius: 16px;
   padding: 5px;
-  background: var(--app-card-background);
   h2 { margin-top: .25rem;margin-left: .25rem; }
   .xp-list {
     margin-left: .25rem;
@@ -85,9 +81,7 @@
 
 /* Experience block */
 .projects {
-  border-radius: 16px;
   padding: 5px;
-  background: var(--app-card-background);
   h2 { margin-top: .25rem;margin-left: .25rem; }
   .xp-list {
     margin-left: .25rem;
@@ -105,9 +99,7 @@
 
 /* Experience block */
 .education {
-  border-radius: 16px;
   padding: 5px;
-  background: var(--app-card-background);
   h2 { margin-top: .25rem;margin-left: .25rem; }
   .xp-list {
     margin-left: .25rem;

src/styles.scss

@@ -25,8 +25,20 @@ $dark-theme: mat.define-theme((
 :root {
   --app-bg: #{mat.get-theme-color($light-theme, surface-container-low)};
   --app-fg: #{mat.get-theme-color($light-theme, on-surface)};
-  --app-card-background: #fafafa;
   --app-logo-bg: #313131;
+  --app-card-background: #fafafa;
+
+  --card-radius: 18px;
+  --card-bg: var(--app-card-background);
+  --card-border-inset: rgba(255, 255, 255, 0.35);
+  --card-border-inset-dark: rgba(0, 0, 0, 0.35);
+  --card-shadow-outer:
+    0 24px 60px rgba(0, 0, 0, 0.55),
+    0 8px 18px rgba(0, 0, 0, 0.35);
+  --card-shadow-hover:
+    0 32px 80px rgba(0, 0, 0, 0.65),
+    0 12px 28px rgba(0, 0, 0, 0.45);
+
   --link-color: #38a7ff;
   --link-color-hover: #66bfff;
 }
@@ -35,6 +47,9 @@ $dark-theme: mat.define-theme((
   --app-fg: #{mat.get-theme-color($dark-theme, on-surface)};
   --app-card-background: #313131;
   --app-logo-bg: #313131;
+
+  --card-bg: var(--app-card-background);
+
   --link-color: #6dbcff;
   --link-color-hover: #9ad2ff;
 }
@@ -85,3 +100,46 @@ a {
     text-decoration: underline;
   }
 }
+
+/* cards */
+.mat-mdc-card {
+  position: relative;
+  border-radius: var(--card-radius) !important;
+  background: var(--card-bg) !important;
+  box-shadow: var(--card-shadow-outer);
+  overflow: hidden;
+
+  border: none;
+
+  transition:
+    box-shadow 200ms ease,
+    transform 200ms ease;
+}
+
+.mat-mdc-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+
+  box-shadow:
+    inset 0 1px 0 var(--card-border-inset),
+    inset 0 -1px 0 var(--card-border-inset-dark);
+}
+
+.mat-mdc-card::after {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  pointer-events: none;
+
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.04);
+}
+
+.mat-mdc-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--card-shadow-hover);
+}