nomad/portofolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

PDF Viewer changes

Browse source
This commit is contained in:
nomad 2025-06-05 23:33:28 +03:00
parent 1cea18cd66
commit ea45cada0d
1 changed files with 82 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/routes/(waves)/resume/+page.svelte
View file

@ -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; /* Make z-index take effect */
position: relative;
z-index: 9999;
padding: 2rem;
}
.container {
width: 100%;
max-width: 1024px;
height: 100vh;
background-color: #333;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
height: calc(100vh - 4rem);
background: rgba(0, 0, 0, 0.3);
border-radius: 16px;
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>