<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<style>
body {
margin: 0;
background: #111;
color: #fff;
font-family: Arial, sans-serif;
overflow: hidden;
}
#viewer {
width: 100vw;
height: 100vh;
}
.controls {
position: fixed;
bottom: 30px;
width: 100%;
display: flex;
justify-content: center;
gap: 20px;
}
button {
background: transparent;
border: 1px solid #fff;
color: #fff;
padding: 10px 15px;
cursor: pointer;
}
</style>
</head>
<body>
<canvas id="viewer"></canvas>
<div class="controls">
<button onclick="prevPage()">←</button>
<button onclick="nextPage()">→</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
let pdfDoc = null;
let pageNum = 1;
let canvas = document.getElementById('viewer');
let ctx = canvas.getContext('2d');
pdfjsLib.getDocument('portfolio.pdf').promise.then(pdf => {
pdfDoc = pdf;
renderPage(pageNum);
});
function renderPage(num) {
pdfDoc.getPage(num).then(page => {
let viewport = page.getViewport({ scale: 1.5 });
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({
canvasContext: ctx,
viewport: viewport
});
});
}
function nextPage() {
if (pageNum < pdfDoc.numPages) {
pageNum++;
renderPage(pageNum);
}
}
function prevPage() {
if (pageNum > 1) {
pageNum--;
renderPage(pageNum);
}
}
</script>
</body>
</html>