diff --git a/src/lib/data/education.ts b/src/lib/data/education.ts index 19a6fc7..dc54c46 100644 --- a/src/lib/data/education.ts +++ b/src/lib/data/education.ts @@ -42,7 +42,7 @@ const allEducation:EducationEntry[] = [ name:'Computer Science', description:'I\'ve not yet got my degree, but i\'ve already finished all my classes and my masters thesis called "Improved linear Cryptanalysis on Quantum Computers" with a 1.0, I therefor expect to graduate with a 1.4 very soon.', degreePdfFileUrl: '/pdfs/hh_zeugnis_master.pdf', - thesisPdfFileUrl: 'https://github.com/HannesGitH/MA-public/blob/main/main.pdf?raw=true', + thesisPdfFileUrl: '/pdfs/hh_thesis_master.pdf', }, ]; diff --git a/src/lib/sections/education.svelte b/src/lib/sections/education.svelte index be3d111..b437dde 100644 --- a/src/lib/sections/education.svelte +++ b/src/lib/sections/education.svelte @@ -21,10 +21,35 @@ import education from '$lib/data/education'; import { Glitch2 } from 'svelte-glitch'; + + let hoveredPdf : string | null | undefined; + let showPdfPreview = false; + let pdfPreview : HTMLDivElement; + + const mouseover = (url : string | undefined) => { + hoveredPdf = url + "#scrollbar=0&toolbar=0&navpanes=0"; + setTimeout(() => { + showPdfPreview = true; + }, 100); + } + const mouseleave = () => { + showPdfPreview = false; + setTimeout(() => { + hoveredPdf = null; + }, 500); + } + </script> <CurvedDivider /> - +<div id="pdfpreview" bind:this={pdfPreview} class:active={showPdfPreview}> + {#if hoveredPdf} + <!-- <embed src={hoveredPdf} type="application/pdf" /> --> + <object data={hoveredPdf} type="application/pdf"> + <p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href={hoveredPdf}>click here to download the PDF file.</a></p> + </object> + {/if} +</div> <div id="content" use:scrollRef={refs.education}> <h1 id="title"> {#if glitchy} @@ -51,13 +76,21 @@ <p id="gpa">{entry.gpa}</p> <div class="pdfbuttonrow" style=""> {#if entry.degreePdfFileUrl} - <a href={entry.degreePdfFileUrl}> + <!-- svelte-ignore a11y-mouse-events-have-key-events --> + <a href={entry.degreePdfFileUrl} + on:mouseover={() => mouseover(entry.degreePdfFileUrl)} + on:mouseleave={mouseleave} + > <i id="icon" class="fa fas fa-solid fa-file-pdf" class:colored={true} /> {$_('certificate')} </a> {/if} {#if entry.thesisPdfFileUrl} - <a href={entry.thesisPdfFileUrl}> + <!-- svelte-ignore a11y-mouse-events-have-key-events --> + <a href={entry.thesisPdfFileUrl} + on:mouseover={() => mouseover(entry.thesisPdfFileUrl)} + on:mouseleave={mouseleave} + > <i id="icon" class="fa fas fa-solid fa-file-pdf" class:colored={true} /> {$_('thesis')} </a> @@ -106,6 +139,39 @@ padding: $std-margin; } + #pdfpreview { + position: fixed; + // align-self: center; + top:10vh; + right: 0; + // margin: auto; + width: 30vw; + height: 80vh; + // background-color: rgba(0, 0, 0, 0.5); + // display: flex; + // justify-content: center; + // align-items: center; + justify-self: stretch; + justify-content: stretch; + align-items: stretch; + z-index: 1000; + transition: transform 1000ms, opacity 400ms; + display: flex; + // display: none; + opacity: 0; + pointer-events: none; + transform: perspective(2000px) translateX(100%) rotateY(-100deg) ; + &.active { + transform: perspective(2000px) rotateY(-20deg); + opacity: 1; + } + object, embed { + width: 100%; + height: 100%; + border-radius: 2rem; + } + } + #header { display: flex; align-items: center; diff --git a/src/lib/sections/experience.svelte b/src/lib/sections/experience.svelte index f17ba50..886c9b3 100644 --- a/src/lib/sections/experience.svelte +++ b/src/lib/sections/experience.svelte @@ -21,14 +21,40 @@ import experience from '$lib/data/experience'; import { Glitch2 } from 'svelte-glitch'; + let hoveredPdf : string | null | undefined; + let showPdfPreview = false; + let pdfPreview : HTMLDivElement; + + const mouseover = (url : string | undefined) => { + hoveredPdf = url + "#scrollbar=0&toolbar=0&navpanes=0"; + setTimeout(() => { + showPdfPreview = true; + }, 100); + } + const mouseleave = () => { + showPdfPreview = false; + setTimeout(() => { + hoveredPdf = null; + }, 500); + } + </script> + <div id="divider"> <!-- <CurvedDivider /> --> </div> - +<div id="pdfpreview" bind:this={pdfPreview} class:active={showPdfPreview}> + {#if hoveredPdf} + <!-- <embed src={hoveredPdf} type="application/pdf" /> --> + <object data={hoveredPdf} type="application/pdf"> + <p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href={hoveredPdf}>click here to download the PDF file.</a></p> + </object> + {/if} +</div> <div id="content" use:scrollRef={refs.experience}> + <h1 id="title"> {#if glitchy} <Glitch2 text={$_('experience.title')} /> @@ -54,7 +80,11 @@ </h2> <div class="pdfbuttonrow" style=""> {#if entry.pdfFileUrl} - <a href={entry.pdfFileUrl}> + <!-- svelte-ignore a11y-mouse-events-have-key-events --> + <a href={entry.pdfFileUrl} + on:mouseover={() => mouseover(entry.pdfFileUrl)} + on:mouseleave={() => mouseleave()} + > <i id="icon" class="fa fas fa-solid fa-file-pdf" class:colored={true} /> {$_('certificate')} </a> @@ -120,6 +150,41 @@ padding: $std-margin; } + + #pdfpreview { + position: fixed; + // align-self: center; + z-index: 10000; + top:10vh; + right: 0; + // margin: auto; + width: 30vw; + height: 80vh; + // background-color: rgba(0, 0, 0, 0.5); + // display: flex; + // justify-content: center; + // align-items: center; + justify-self: stretch; + justify-content: stretch; + align-items: stretch; + z-index: 1000; + transition: transform 1000ms, opacity 400ms; + display: flex; + // display: none; + opacity: 0; + pointer-events: none; + transform: perspective(2000px) translateX(100%) rotateY(-100deg) ; + &.active { + transform: perspective(2000px) rotateY(-20deg); + opacity: 1; + } + object, embed { + width: 100%; + height: 100%; + border-radius: 2rem; + } + } + .pdfbuttonrow > a { background-color: adjust-color($color: $primary, $alpha: -.7); color: #000; diff --git a/static/pdfs/hh_thesis_master.pdf b/static/pdfs/hh_thesis_master.pdf new file mode 100644 index 0000000..e62361e Binary files /dev/null and b/static/pdfs/hh_thesis_master.pdf differ diff --git a/static/pdfs/hh_zeugnis_bachelor_preliminary.pdf b/static/pdfs/hh_zeugnis_bachelor.pdf similarity index 100% rename from static/pdfs/hh_zeugnis_bachelor_preliminary.pdf rename to static/pdfs/hh_zeugnis_bachelor.pdf diff --git a/static/pdfs/hh_zeugnis_master_prelimanary.pdf b/static/pdfs/hh_zeugnis_master.pdf similarity index 100% rename from static/pdfs/hh_zeugnis_master_prelimanary.pdf rename to static/pdfs/hh_zeugnis_master.pdf