feat: overhaul

src/portfolio/styling/skillsLinks.module.scss

@@ -1,53 +1,103 @@
 @import "@/src/styles/helpers.scss";
 
 .section {
-  @include lightSection;
-  @include regularFont;
+	@include lightSection;
+	@include regularFont;
 
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-evenly;
+	flex-wrap: wrap;
+	gap: 3rem;
 
-  padding: 0 6em 3em;
+	padding: 3rem 2rem;
 
-  .skills {
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-    .innerskills {
-      text-align: left;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-evenly;
-      gap: $mediumGap;
-      flex-wrap: wrap;
-      flex-basis: 60%;
-    }
-    flex-wrap: wrap;
-    flex-basis: 60%;
-  }
+	@media (max-width: 768px) {
+		padding: 2rem 1rem;
+	}
 
-  .otherLinks{
-    margin: auto 1em;
-    padding: 1em 2em;
-    background-color: $black;
-    color: $white;
+	.skills {
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+		flex-basis: 60%;
+		min-width: 300px;
 
-    h2{
-      font-size: 115%;
-    }
+		@media (max-width: 768px) {
+			flex-basis: 100%;
+		}
 
-    a {
-      color: $white;
-      text-decoration: none;
+		.innerskills {
+			text-align: left;
+			display: flex;
+			flex-direction: column;
+			gap: 1rem;
+			margin-top: 1.5rem;
+		}
+	}
 
-      &:hover {
-        color: $accent_colour;
-        font-style: italic;
-      }
-    }
-  }
+	.otherLinks {
+		margin: auto 1em;
+		padding: 1.5em 2.5em;
+		background-color: $black;
+		color: $white;
+		border-radius: 8px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+		h2 {
+			font-size: 1.3rem;
+			margin-bottom: 1rem;
+		}
+
+		ul {
+			list-style: none;
+			padding: 0;
+		}
+
+		li {
+			margin-bottom: 0.75rem;
+		}
+
+		a {
+			color: $white;
+			text-decoration: none;
+			transition: all 0.2s ease;
+			display: flex;
+			align-items: center;
+			font-size: 1rem;
+
+			&:hover {
+				color: $accent_colour;
+				transform: translateX(5px);
+
+				.icon {
+					transform: scale(1.1);
+				}
+			}
+		}
+
+		.linkWithIcon {
+			display: flex;
+			align-items: center;
+			gap: 0.75rem;
+		}
+
+		.icon {
+			font-size: 1.2rem;
+			transition: transform 0.2s ease;
+			display: flex;
+			align-items: center;
+		}
+	}
+}
+
+.technology {
+	padding: 0.5rem 0;
+	border-bottom: 1px solid transparentize($gray, 0.5);
+
+	&:last-child {
+		border-bottom: none;
+	}
 }