refactor: Update package dependencies and component styles

package.json

@@ -36,6 +36,7 @@
 		"astro": "astro"
 	},
 	"dependencies": {
+		"@fontsource/mr-dafoe": "^5.1.0",
 		"@fontsource/roboto": "^5.0.15",
 		"@tsparticles/engine": "^3.5.0",
 		"astro": "^4.15.1",

src/components/Header.astro

@@ -1,15 +1,14 @@
 ---
-
+import "@fontsource/mr-dafoe"
 ---
 
 <header {...Astro.props}>
 	<nav>
-		<div class="hamburger"><span></span><span></span><span></span></div>
-
-		<span class="underline"></span>
+		<a href="/" class="logo">Cristian Chitiva</a>
 
+		<div class="hamburger"><span></span><span></span><span></span></div>
 		<ul>
-			<li><a href="/">Home</a></li>
+			<span class="underline"></span>
 			<li><a href="#">About Me</a></li>
 			<li><a href="#">Experience</a></li>
 			<li><a href="#">Projects</a></li>
@@ -22,35 +21,49 @@
 	nav {
 		display: flex;
 		align-items: center;
-		justify-content: flex-end;
-		border-radius: 1.5em;
-		overflow: hidden;
+		justify-content: space-between;
 
 		position: fixed;
-		padding: 5px;
 		top: 10px;
-		right: 10px;
+		right: 2.5vw;
+		left: 2.5vw;
 		z-index: 2;
+	}
+
+	ul {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		border-radius: 1.5em;
+		overflow: hidden;
+		padding: 5px;
+		padding-left: 10px;
 
 		// Background for scroll
 		// background: #b4b4b42b;
 		// backdrop-filter: blur(10px);
 	}
 
-	ul,
 	li {
 		display: contents;
 		list-style: none;
 	}
 
-	a:not(.contact) {
+	a:not(.contact .logo) {
 		padding: 5px 10px;
 
 		&:hover {
 			filter: brightness(1.2);
 		}
 	}
 
+	a.logo {
+		font-family: "Mr Dafoe", sans-serif;
+		font-size: 1.5rem;
+		flex: 1;
+		z-index: 10;
+	}
+
 	a.contact {
 		border: 1px solid #fff;
 		border-radius: 1em;
@@ -95,7 +108,6 @@
 
 	@media (width <= 768px) {
 		nav {
-			display: contents;
 			--animation-time: 0.4s;
 		}
 
@@ -105,14 +117,14 @@
 			right: 0;
 			left: 0;
 			bottom: 0;
-			z-index: 9;
+			z-index: 2;
 			padding: 5vh 5vw;
 
 			display: flex;
 			flex-direction: column;
 			align-items: flex-start;
 			justify-content: flex-end;
-			gap: 2.5rem;
+			gap: 2rem;
 
 			background-color: #000;
 			color: #fff;
@@ -121,20 +133,16 @@
 			transition: transform var(--animation-time);
 
 			a {
-				font-size: 2rem;
+				font-size: 1.5rem;
 			}
 		}
 
 		.hamburger {
-			position: fixed;
-			top: 20px;
-			right: 20px;
-			z-index: 10;
-
 			display: flex;
 			flex-direction: column;
 			justify-content: space-between;
 			align-items: flex-start;
+			z-index: 3;
 
 			width: 35px;
 			height: 25px;

src/components/Home.astro

@@ -19,7 +19,7 @@ import Me from "./Me.astro"
 		flex-direction: column;
 		justify-content: center;
 		height: min(100svh, 1080px);
-		width: min(100vw, 1600px);
+		width: min(100%, 1600px);
 		position: relative;
 	}
 	h1 {

src/components/SocialLinks.astro

@@ -36,8 +36,8 @@ import LinkedInIcon from "../assets/icons/LinkedIn.astro"
 <style>
 	section {
 		position: fixed;
-		bottom: 1rem;
-		right: 1.5rem;
+		bottom: 15px;
+		right: 2.5vw;
 
 		display: flex;
 		flex-direction: column;

src/layouts/Root.astro

@@ -45,6 +45,7 @@ import SocialLinks from "@components/SocialLinks.astro"
 		flex-direction: column;
 		align-items: center;
 		overflow-y: auto;
+		padding: 0 5vw;
 
 		background-image: radial-gradient(circle, #00514644 20%, #0000 60%);
 		background-color: #000;