DressOrc/Portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adds optimisations

Browse source 
- all images are now wepb
- font is now preloaded
- rearranged some css to remove some jank on the pc gallery
- all pages now have a lang tag
This commit is contained in:
Nye Evans 2021-09-24 16:11:12 +01:00
parent 196942db91
commit 43876c600e
18 changed files with 96 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/Profile.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.5 MiB

BIN
images/Profile3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 521 KiB

BIN
images/popup-tongue.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 640 B

36
index.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<HTML>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "pages\basic.css">
@ -7,6 +7,8 @@
<link rel = "stylesheet" href = "pages\effects.css">
<link rel = "icon" href = "images\Icon.ico">
<link rel="preload" href="fonts/Roboto/RobotoMono-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin> <!--we preload the font to stop a flash of unstyled text-->
<meta charset="UTF-8">
@ -29,7 +31,7 @@
</div>
<div style = "text-align: center;">
<div class = "profileImageContainer orangeBorder">
<img src = "images/Profile3.png" alt = "me" class = "profileImage">
<img src = "images/Profile3.webp" alt = "me" class = "profileImage">
</div>
</div>
@ -47,19 +49,18 @@
<!-- gallery slides defined here, originally we had one slide and just changed its values but loading images is slow, easier to load them before hand and just hide or show them-->
<div class = "galleryContainer">
<div class = "gallery">
<div class = "galleryItem">
<a href = "./pages/gallery/epq-project/epq-project.html" class = "galleryImageContainer galleryLink">
<img src = "./pages/gallery/epq-project/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
<img src = "./pages/gallery/epq-project/projectHeaderImage.webp" class = "galleryImage" style = "object-position: center;">
</a>
<img src = "./images/popup-tongue.png" class = "popupTongue">
<img src = "./images/popup-tongue.webp" class = "popupTongue">
</div>
<div class = "galleryPopup">
<img src = "./pages/gallery/epq-project/projectHeaderImage.png" class = "popupImage" style = "object-position: center;">
<img src = "./pages/gallery/epq-project/projectHeaderImage.webp" class = "popupImage" style = "object-position: center;">
<a class = "popupTextContainer galleryLink" href = "./pages/gallery/epq-project/epq-project.html">
<p class = "galleryTitle">VR physics engine</p>
@ -73,13 +74,13 @@
<div class = "galleryItem">
<a href = "./pages/gallery/mind-map/mind-map.html" class = "galleryImageContainer galleryLink">
<img src = "./pages/gallery/mind-map/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
<img src = "./pages/gallery/mind-map/projectHeaderImage.webp" class = "galleryImage" style = "object-position: center;">
</a>
<img src = "./images/popup-tongue.png" class = "popupTongue">
<img src = "./images/popup-tongue.webp" class = "popupTongue">
</div>
<div class = "galleryPopup">
<img src = "./pages/gallery/mind-map/projectHeaderImage.png" class = "popupImage" style = "object-position: center;">
<img src = "./pages/gallery/mind-map/projectHeaderImage.webp" class = "popupImage" style = "object-position: center;">
<a class = "popupTextContainer galleryLink" href = "./pages/gallery/mind-map/mind-map.html">
<p class = "galleryTitle">Unity based Mind Map software</p>
@ -92,13 +93,13 @@
<div class = "galleryItem">
<a href = "./pages/gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryImageContainer galleryLink">
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.webp" class = "galleryImage" style = "object-position: center;">
</a>
<img src = "./images/popup-tongue.png" class = "popupTongue">
<img src = "./images/popup-tongue.webp" class = "popupTongue">
</div>
<div class = "galleryPopup">
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.png" class = "popupImage" style = "object-position: center;">
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.webp" class = "popupImage" style = "object-position: center;">
<a class = "popupTextContainer galleryLink" href = "./pages/gallery/cat-tower-defence/cat-tower-defence.html">
<p class = "galleryTitle">Tower defence game</p>
@ -111,13 +112,13 @@
<div class = "galleryItem">
<a href = "./pages/gallery/aardvark-work/aardvark-work.html" class = "galleryImageContainer galleryLink">
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.webp" class = "galleryImage" style = "object-position: center;">
</a>
<img src = "./images/popup-tongue.png" class = "popupTongue">
<img src = "./images/popup-tongue.webp" class = "popupTongue">
</div>
<div class = "galleryPopup">
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.png" class = "popupImage" style = "object-position: center;">
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.webp" class = "popupImage" style = "object-position: center;">
<a class = "popupTextContainer galleryLink" href = "./pages/gallery/aardvark-work/aardvark-work.html">
<p class = "galleryTitle">Work on Aardvark XR</p>
@ -127,12 +128,11 @@
</p>
</a>
</div>
</div>
<div id="galleryOutroLink">
<a href = "pages/AllProjects.html">See all my projects here</a>
</div>
</div>
<div class = "textBox" id= "outroText">
I hope you like my work! If you ever want to contact me, my Email, Github and Social Medias can be found below.

10
pages/AllProjects.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<HTML>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "basic.css">
@ -17,7 +17,7 @@
<a href = "./gallery/aardvark-work/aardvark-work.html" class = "galleryLink">
<div class = "item">
<img src = "./gallery/aardvark-work/projectHeaderImage.png" class = "orangeBorder projectThumbnail"></img>
<img src = "./gallery/aardvark-work/projectHeaderImage.webp" class = "orangeBorder projectThumbnail"></img>
<div class = "itemText">
<h3>Aardvark XR</h3>
<div>
@ -30,7 +30,7 @@
</a>
<a href = "./gallery/epq-project/epq-project.html" class = "galleryLink">
<div class = "item">
<img src = "./gallery/epq-project/projectHeaderImage.png" class = "orangeBorder projectThumbnail"></img>
<img src = "./gallery/epq-project/projectHeaderImage.webp" class = "orangeBorder projectThumbnail"></img>
<div class = "itemText">
<h3>Vr interaction system</h3>
<div>
@ -42,7 +42,7 @@
</a>
<a href = "./gallery/mind-map/mind-map.html" class = "galleryLink">
<div class = "item">
<img src = "./gallery/mind-map/projectHeaderImage.png" class = "orangeBorder projectThumbnail"></img>
<img src = "./gallery/mind-map/projectHeaderImage.webp" class = "orangeBorder projectThumbnail"></img>
<div class = "itemText">
<h3>Mind map tool</h3>
<div>
@ -55,7 +55,7 @@
<a href = "./gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryLink">
<div class = "item">
<img src = "./gallery/cat-tower-defence/projectHeaderImage.png" class = "orangeBorder projectThumbnail"></img>
<img src = "./gallery/cat-tower-defence/projectHeaderImage.webp" class = "orangeBorder projectThumbnail"></img>
<div class = "itemText">
<h3>Cat Tower Defence</h3>
<div>

2
pages/CVPage.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<HTML>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "CVPage.css">
<link rel = "stylesheet" href = "effects.css">

2
pages/gallery/aardvark-work/aardvark-work.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<HTML>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">

BIN
pages/gallery/aardvark-work/projectHeaderImage.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 764 KiB

2
pages/gallery/cat-tower-defence/cat-tower-defence.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<HTML>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">

BIN
pages/gallery/cat-tower-defence/projectHeaderImage.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

3
pages/gallery/epq-project/epq-project.html
View file

@ -1,6 +1,5 @@
<!doctype html>
<!doctype html>
<HTML>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">

BIN
pages/gallery/epq-project/projectHeaderImage.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 450 KiB

2
pages/gallery/mind-map/mind-map.html
View file

@ -1,4 +1,4 @@
<HTML>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">

BIN
pages/gallery/mind-map/projectHeaderImage.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
pages/gallery/room-builder/projectHeaderImage.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.6 KiB

2
pages/gallery/room-builder/room-builder.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<HTML>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">

2
pages/mainpage.css
View file

@ -56,7 +56,7 @@
justify-content: space-evenly;
}
.gallery:hover{
.galleryContainer:hover .gallery{
margin-bottom: 36vh;
}

4
scripts/gallery.js
View file

@ -35,7 +35,3 @@ function hideAll(){
hideAll()
updateSlide();
// todo
/*use webp image format
*/