Skip to content

Commit

Permalink
new swag
Browse files Browse the repository at this point in the history
  • Loading branch information
@amgno
amgno committed Sep 24, 2024
1 parent 1c4fad5 commit 9bc1f45
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 36 deletions.
78 changes: 43 additions & 35 deletions project.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,21 @@
<script src="./projects.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>
<link rel="icon" type="image/x-icon" href="./favicon.ico">
</head>
<style>
#new-img-div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
gap: 10px;
}

#new-img-div img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
</style>
</head>

<script>
async function displayPdfAsImages(pdfUrl) {
Expand All @@ -23,28 +36,23 @@
for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {
const page = await pdf.getPage(pageNumber);


const canvas = document.createElement('canvas');
const viewport = page.getViewport({ scale: 1 });
canvas.height = viewport.height;
canvas.width = viewport.width;


const renderContext = {
canvasContext: canvas.getContext('2d'),
viewport: viewport
};
await page.render(renderContext).promise;


const img = document.createElement('img');
img.src = canvas.toDataURL();
container.appendChild(img);
}
}



document.addEventListener('DOMContentLoaded', function () {
document.body.style.opacity = '0%';
document.body.style.opacity = '100%';
Expand Down Expand Up @@ -73,8 +81,7 @@
document.body.style.background = project.bgcolor;
}, 600); // Match the transition duration


var imageContainer = document.getElementById('img-div');
var imageContainer = document.getElementById('new-img-div'); // Use new div for images

if (!project.video) {
console.log("no video, removing div");
Expand All @@ -84,7 +91,7 @@
const videoContainer = document.getElementById('video-div');
const videoPlayer = document.getElementById('video-player');
videoPlayer.setAttribute('data-src', project.video);

// Load video when it comes into view
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
Expand All @@ -110,22 +117,16 @@
if (project.pdf) {
displayPdfAsImages(project.pdf);
}




} else {
document.getElementById('project-content').innerHTML = '<p>Project not found.</p>';
}
});
</script>


<script src="./transition.js"></script>

<body>
<div class="main-page">

<div class="main-page-info">
<nav style="line-height: 0.5rem;">
<h1>
Expand All @@ -144,54 +145,61 @@ <h1>
</h1>

<div class="project-main">
<div id="project-info">
<div id="project-info" style="padding-bottom: 0px;">
<btitle id="span-name"></btitle>

</div>

<div style="height: 5vh;width: 10vh;"></div>

<div id="project-info">
<div>
<h1 id="span-type" style="text-transform: uppercase;">PHNAME</h1>
<h1 id="span-date" style="">PHDATE</h1>
<h1 id="" style="text-transform: uppercase;">PROJECT TYPE</h1>
<p><span id="span-type"></span></p>
</div>

<div>
<h1>ABOUT</h1>
<p><span id="span-desc"></span></p>
<h1 id="" style="">DATE</h1>
<p><span id="span-date"></span></p>
</div>
<div>
<h1>TOOLS USED</h1>
<p><span id="span-tools"></span></p>
</div>


<div>
<h1>ABOUT</h1>
<p><span id="span-desc"></span></p>
</div>
</div>


<div style="height: 5vh;width: 10vh;"></div>
<div id="video-div">
<h1>VIDEO</h1>
<video id="video-player" controls></video>
</div>

<div id="image-gallery">
<h1><span style="display: flex; flex-direction: row;">ASSETS
<h1><span style="display: flex; flex-direction: row;">IMAGES
<svg class="asset-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
<path style="fill:#fff" d="m17.5 5.999-.707.707 5.293 5.293H1v1h21.086l-5.294 5.295.707.707L24 12.499l-6.5-6.5z" data-name="Right" />
</svg>
</span>
</h1>

<div id="img-div"></div>
<div id="new-img-div"></div>
</div>

<div style="height: 5vh;width: 10vh;"></div>








<div id="image-gallery">
<h1><span style="display: flex; flex-direction: row;">PDF / DOCUMENT
<svg class="asset-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
<path style="fill:#fff" d="m17.5 5.999-.707.707 5.293 5.293H1v1h21.086l-5.294 5.295.707.707L24 12.499l-6.5-6.5z" data-name="Right" />
</svg>
</span>
</h1>
<div id="img-div"></div>
</div>
</div>
<h1>
<a href="./contact.html" class="atag">CONTACT</a>
Expand All @@ -202,7 +210,7 @@ <h1></h1>
<h1></h1>
</nav>
</div>


</div>
</body>
</body>

</html>
18 changes: 18 additions & 0 deletions projects.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,5 +85,23 @@ const projects = [
"pdf": "./works/06 - Rolli/document.pdf",
"video": "https://data.088899.xyz/ROLLI-main.mp4",
"bgcolor": "#590202"
},
{
"number": "07",
"name": "New Project",
"description": "brodosa jdoasndaod bodsbodosabdosabod oabsd ba",
"ptype": "TEST TEST TEST",
"tools": "vscode",
"date": "today baby",
"images": [
"/works/07 - New Project/images/R0000426.JPG",
"/works/07 - New Project/images/glen-carrie-XfA12IEoUkc-unsplash.jpg",
"/works/07 - New Project/images/Paolo_Monti_-_Servizio_fotografico_-_BEIC_6361591.jpg",
"/works/07 - New Project/images/tumblr_c8469aa0de64ef25f78b0576bcbdda60_719dc6f0_1280.jpg",
"/works/07 - New Project/images/16 I cassetti della memoria.jpg"
],
"pdf": "/works/07 - New Project/A5 v2.pdf",
"video": "",
"bgcolor": "#321aaf"
}
];
7 changes: 6 additions & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,7 @@ h1 {
width: 100%;
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.50);
}

#video-div > video {
Expand All @@ -207,6 +208,7 @@ h1 {
width: 100%;
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.50);
}

#img-div {
Expand Down Expand Up @@ -239,8 +241,11 @@ h1 {
}

#project-info > div {
width: 40%;
width: 50%;
padding-right: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.50);;
padding: 0 !important;
margin: 0 !important;
}

btitle {
Expand Down

0 comments on commit 9bc1f45

Please sign in to comment.