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> <!doctype html>
<HTML> <HTML lang="en-GB">
<header> <header>
<link rel = "stylesheet" href = "pages\basic.css"> <link rel = "stylesheet" href = "pages\basic.css">
@ -7,6 +7,8 @@
<link rel = "stylesheet" href = "pages\effects.css"> <link rel = "stylesheet" href = "pages\effects.css">
<link rel = "icon" href = "images\Icon.ico"> <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"> <meta charset="UTF-8">
@ -29,7 +31,7 @@
</div> </div>
<div style = "text-align: center;"> <div style = "text-align: center;">
<div class = "profileImageContainer orangeBorder"> <div class = "profileImageContainer orangeBorder">
<img src = "images/Profile3.png" alt = "me" class = "profileImage"> <img src = "images/Profile3.webp" alt = "me" class = "profileImage">
</div> </div>
</div> </div>
@ -47,19 +49,18 @@
<div class = "galleryContainer">
<!-- 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 = "gallery"> <div class = "gallery">
<div class = "galleryItem"> <div class = "galleryItem">
<a href = "./pages/gallery/epq-project/epq-project.html" class = "galleryImageContainer galleryLink"> <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> </a>
<img src = "./images/popup-tongue.png" class = "popupTongue"> <img src = "./images/popup-tongue.webp" class = "popupTongue">
</div> </div>
<div class = "galleryPopup"> <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"> <a class = "popupTextContainer galleryLink" href = "./pages/gallery/epq-project/epq-project.html">
<p class = "galleryTitle">VR physics engine</p> <p class = "galleryTitle">VR physics engine</p>
@ -73,13 +74,13 @@
<div class = "galleryItem"> <div class = "galleryItem">
<a href = "./pages/gallery/mind-map/mind-map.html" class = "galleryImageContainer galleryLink"> <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> </a>
<img src = "./images/popup-tongue.png" class = "popupTongue"> <img src = "./images/popup-tongue.webp" class = "popupTongue">
</div> </div>
<div class = "galleryPopup"> <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"> <a class = "popupTextContainer galleryLink" href = "./pages/gallery/mind-map/mind-map.html">
<p class = "galleryTitle">Unity based Mind Map software</p> <p class = "galleryTitle">Unity based Mind Map software</p>
@ -92,13 +93,13 @@
<div class = "galleryItem"> <div class = "galleryItem">
<a href = "./pages/gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryImageContainer galleryLink"> <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> </a>
<img src = "./images/popup-tongue.png" class = "popupTongue"> <img src = "./images/popup-tongue.webp" class = "popupTongue">
</div> </div>
<div class = "galleryPopup"> <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"> <a class = "popupTextContainer galleryLink" href = "./pages/gallery/cat-tower-defence/cat-tower-defence.html">
<p class = "galleryTitle">Tower defence game</p> <p class = "galleryTitle">Tower defence game</p>
@ -111,13 +112,13 @@
<div class = "galleryItem"> <div class = "galleryItem">
<a href = "./pages/gallery/aardvark-work/aardvark-work.html" class = "galleryImageContainer galleryLink"> <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> </a>
<img src = "./images/popup-tongue.png" class = "popupTongue"> <img src = "./images/popup-tongue.webp" class = "popupTongue">
</div> </div>
<div class = "galleryPopup"> <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"> <a class = "popupTextContainer galleryLink" href = "./pages/gallery/aardvark-work/aardvark-work.html">
<p class = "galleryTitle">Work on Aardvark XR</p> <p class = "galleryTitle">Work on Aardvark XR</p>
@ -127,12 +128,11 @@
</p> </p>
</a> </a>
</div> </div>
</div> </div>
<div id="galleryOutroLink"> <div id="galleryOutroLink">
<a href = "pages/AllProjects.html">See all my projects here</a> <a href = "pages/AllProjects.html">See all my projects here</a>
</div> </div>
</div>
<div class = "textBox" id= "outroText"> <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. 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> <!doctype html>
<HTML> <HTML lang="en-GB">
<header> <header>
<link rel = "stylesheet" href = "basic.css"> <link rel = "stylesheet" href = "basic.css">
@ -17,7 +17,7 @@
<a href = "./gallery/aardvark-work/aardvark-work.html" class = "galleryLink"> <a href = "./gallery/aardvark-work/aardvark-work.html" class = "galleryLink">
<div class = "item"> <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"> <div class = "itemText">
<h3>Aardvark XR</h3> <h3>Aardvark XR</h3>
<div> <div>
@ -30,7 +30,7 @@
</a> </a>
<a href = "./gallery/epq-project/epq-project.html" class = "galleryLink"> <a href = "./gallery/epq-project/epq-project.html" class = "galleryLink">
<div class = "item"> <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"> <div class = "itemText">
<h3>Vr interaction system</h3> <h3>Vr interaction system</h3>
<div> <div>
@ -42,7 +42,7 @@
</a> </a>
<a href = "./gallery/mind-map/mind-map.html" class = "galleryLink"> <a href = "./gallery/mind-map/mind-map.html" class = "galleryLink">
<div class = "item"> <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"> <div class = "itemText">
<h3>Mind map tool</h3> <h3>Mind map tool</h3>
<div> <div>
@ -55,7 +55,7 @@
<a href = "./gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryLink"> <a href = "./gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryLink">
<div class = "item"> <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"> <div class = "itemText">
<h3>Cat Tower Defence</h3> <h3>Cat Tower Defence</h3>
<div> <div>

2
pages/CVPage.html
View file

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

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

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

2
pages/mainpage.css
View file

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

4
scripts/gallery.js
View file

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