smooth operator

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',
     },
 ];
 

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;

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;