feat: animations, responsive design

Animations
- added opacity animation for experience page
- added stagger animation for navbar items on mobile
- added animation for landing page for years and language indications

Pages
- About Page mockup

Redesign
- Navbar to include icons on desktop

assets/css/styles.css

@@ -0,0 +1,65 @@
+@layer base {
+	:root {
+		--navbar-height: 6rem;
+		--content-height: calc(100vh - var(--navbar-height));
+	}
+
+	main {
+		margin-top: var(--navbar-height);
+		height: 100%;
+		padding-bottom: 6rem;
+		overflow-x: hidden;
+	}
+
+	.navbar-drawer {
+		height: var(--content-height);
+	}
+
+	[x-cloak] {
+		display: none !important;
+	}
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes slideIn {
+	from {
+		opacity: 0;
+		transform: translateY(20px);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.animate-fade-in {
+	opacity: 0;
+	animation: fadeIn 1s ease-in forwards;
+}
+
+.animate-slide-in {
+	opacity: 0;
+	animation: slideIn 1s ease-out forwards;
+}
+
+.delay-300 {
+	animation-delay: 300ms;
+}
+
+.delay-600 {
+	animation-delay: 600ms;
+}
+
+.delay-900 {
+	animation-delay: 900ms;
+}