{#if glitchy} @@ -51,13 +76,21 @@
{entry.gpa}
{#if entry.degreePdfFileUrl}
-
+
+ mouseover(entry.degreePdfFileUrl)}
+ on:mouseleave={mouseleave}
+ >
{$_('certificate')}
{/if}
{#if entry.thesisPdfFileUrl}
-
+
+ mouseover(entry.thesisPdfFileUrl)}
+ on:mouseleave={mouseleave}
+ >
{$_('thesis')}
@@ -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);
+ }
+
+
-
+
+ {#if hoveredPdf}
+
+
+ {/if}
+
+
{#if glitchy}