PDF Viewer changes

src/routes/(waves)/resume/+page.svelte

@@ -1,7 +1,30 @@
 <meta name="robots" content="noindex" />
 <div class="min-h-screen">
 	<div class="container">
-		<iframe src="CV.pdf" title="Resume PDF" />
+		<div class="iframe-wrapper">
+			<iframe
+				src="CV.pdf#toolbar=0&navpanes=0&scrollbar=0&view=FitH"
+				title="Resume PDF"
+				style="background: transparent;"
+			/>
+		</div>
+		<a href="CV.pdf" download class="download-button">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+				<polyline points="7 10 12 15 17 10" />
+				<line x1="12" y1="15" x2="12" y2="3" />
+			</svg>
+		</a>
 	</div>
 </div>
 
@@ -9,26 +32,77 @@
 	.min-h-screen {
 		min-height: 100vh;
 		display: flex;
-		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		z-index: 10; /* Ensure it's above the animation */
+		position: relative;
-		position: relative; /* Make z-index take effect */
+		z-index: 9999;
+		padding: 2rem;
 	}
 
 	.container {
 		width: 100%;
 		max-width: 1024px;
-		height: 100vh;
+		height: calc(100vh - 4rem);
-		background-color: #333;
+		background: rgba(0, 0, 0, 0.3);
-		border-radius: 8px;
+		border-radius: 16px;
-		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 		overflow: hidden;
+		position: relative;
+		z-index: 9999;
+		box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(10px);
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.iframe-wrapper {
+		width: 100%;
+		height: 100%;
+		background: transparent;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	iframe {
 		width: 100%;
 		height: 100%;
+		z-index: 9999;
 		border: none;
+		background: transparent !important;
+	}
+
+	:global(embed) {
+		background: transparent !important;
+	}
+
+	.download-button {
+		position: absolute;
+		top: 1rem;
+		left: 2.2rem;
+		background: rgba(var(--color--primary-rgb), 0.2);
+		color: var(--color--primary);
+		padding: 0.5rem;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.2s ease;
+		backdrop-filter: blur(5px);
+		border: 1px solid rgba(var(--color--primary-rgb), 0.3);
+		z-index: 10000;
+		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+		@media (max-width: 768px) {
+			display: none;
+		}
+	}
+
+	.download-button:hover {
+		background: var(--color--primary);
+		color: white;
+		transform: translateY(-2px);
+		box-shadow: 0 5px 15px -3px rgba(var(--color--primary-rgb), 0.3);
 	}
 </style>