adds optimisations
- 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
parent
196942db91
commit
43876c600e
18 changed files with 96 additions and 101 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 MiB |
BIN
images/Profile3.webp
Normal file
BIN
images/Profile3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 521 KiB |
BIN
images/popup-tongue.webp
Normal file
BIN
images/popup-tongue.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 640 B |
166
index.html
166
index.html
|
|
@ -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,91 +49,89 @@
|
|||
|
||||
|
||||
|
||||
<div class = "galleryContainer">
|
||||
<div class = "gallery">
|
||||
|
||||
<!-- 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 = "galleryItem">
|
||||
<a href = "./pages/gallery/epq-project/epq-project.html" class = "galleryImageContainer galleryLink">
|
||||
<img src = "./pages/gallery/epq-project/projectHeaderImage.webp" class = "galleryImage" style = "object-position: center;">
|
||||
</a>
|
||||
<img src = "./images/popup-tongue.webp" class = "popupTongue">
|
||||
</div>
|
||||
|
||||
<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;">
|
||||
</a>
|
||||
<img src = "./images/popup-tongue.png" class = "popupTongue">
|
||||
<div class = "galleryPopup">
|
||||
<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>
|
||||
|
||||
<p class = "galleryCaption">A project done for my EPQ, during post-16, where I aimed to create a virtual reality environment where the user could grab and interact with objects in a semi-physics based
|
||||
environment. This system was my introduction to Unreal Engine and mainly used its "Blueprint" visual language, however I later used C++ to try and add my own physics
|
||||
to it.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class = "galleryItem">
|
||||
<a href = "./pages/gallery/mind-map/mind-map.html" class = "galleryImageContainer galleryLink">
|
||||
<img src = "./pages/gallery/mind-map/projectHeaderImage.webp" class = "galleryImage" style = "object-position: center;">
|
||||
</a>
|
||||
<img src = "./images/popup-tongue.webp" class = "popupTongue">
|
||||
</div>
|
||||
|
||||
<div class = "galleryPopup">
|
||||
<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>
|
||||
|
||||
<p class = "galleryCaption">A project done as my final piece for my A-level computer science course. <br> <br> This was a program designed to create mind maps, it could have nodes made, and linked, have images added and
|
||||
included a pen tool to allow the user to draw notes on top of the mind maps. It also had a fully functional undo and redo system and the ability to save and load files.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<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.webp" class = "galleryImage" style = "object-position: center;">
|
||||
</a>
|
||||
<img src = "./images/popup-tongue.webp" class = "popupTongue">
|
||||
</div>
|
||||
|
||||
<div class = "galleryPopup">
|
||||
<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>
|
||||
|
||||
<p class = "galleryCaption">One of my first projects, this was created with a friend to help us gain a better understanding of python. <br><br> This was a basic tower defence game but featured a fully scalable
|
||||
level design system.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class = "galleryItem">
|
||||
<a href = "./pages/gallery/aardvark-work/aardvark-work.html" class = "galleryImageContainer galleryLink">
|
||||
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.webp" class = "galleryImage" style = "object-position: center;">
|
||||
</a>
|
||||
<img src = "./images/popup-tongue.webp" class = "popupTongue">
|
||||
</div>
|
||||
|
||||
<div class = "galleryPopup">
|
||||
<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>
|
||||
|
||||
<p class = "galleryCaption">Aardvark is a web-based virtual reality system which allows users to create and share web apps which are overlayed on top of the users VR experience.<br><br>
|
||||
Over the course of its release I have attended its first hackathon and continued to support it long afterwards, having worked both on my own and with other developers to create apps
|
||||
for the system to help it gain traction.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class = "galleryPopup">
|
||||
<img src = "./pages/gallery/epq-project/projectHeaderImage.png" 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>
|
||||
|
||||
<p class = "galleryCaption">A project done for my EPQ, during post-16, where I aimed to create a virtual reality environment where the user could grab and interact with objects in a semi-physics based
|
||||
environment. This system was my introduction to Unreal Engine and mainly used its "Blueprint" visual language, however I later used C++ to try and add my own physics
|
||||
to it.
|
||||
</p>
|
||||
</a>
|
||||
<div id="galleryOutroLink">
|
||||
<a href = "pages/AllProjects.html">See all my projects here</a>
|
||||
</div>
|
||||
|
||||
|
||||
<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;">
|
||||
</a>
|
||||
<img src = "./images/popup-tongue.png" class = "popupTongue">
|
||||
</div>
|
||||
|
||||
<div class = "galleryPopup">
|
||||
<img src = "./pages/gallery/mind-map/projectHeaderImage.png" 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>
|
||||
|
||||
<p class = "galleryCaption">A project done as my final piece for my A-level computer science course. <br> <br> This was a program designed to create mind maps, it could have nodes made, and linked, have images added and
|
||||
included a pen tool to allow the user to draw notes on top of the mind maps. It also had a fully functional undo and redo system and the ability to save and load files.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<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;">
|
||||
</a>
|
||||
<img src = "./images/popup-tongue.png" class = "popupTongue">
|
||||
</div>
|
||||
|
||||
<div class = "galleryPopup">
|
||||
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.png" 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>
|
||||
|
||||
<p class = "galleryCaption">One of my first projects, this was created with a friend to help us gain a better understanding of python. <br><br> This was a basic tower defence game but featured a fully scalable
|
||||
level design system.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<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;">
|
||||
</a>
|
||||
<img src = "./images/popup-tongue.png" class = "popupTongue">
|
||||
</div>
|
||||
|
||||
<div class = "galleryPopup">
|
||||
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.png" 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>
|
||||
|
||||
<p class = "galleryCaption">Aardvark is a web-based virtual reality system which allows users to create and share web apps which are overlayed on top of the users VR experience.<br><br>
|
||||
Over the course of its release I have attended its first hackathon and continued to support it long afterwards, having worked both on my own and with other developers to create apps
|
||||
for the system to help it gain traction.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="galleryOutroLink">
|
||||
<a href = "pages/AllProjects.html">See all my projects here</a>
|
||||
</div>
|
||||
|
||||
<div class = "textBox" id= "outroText">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!doctype html>
|
||||
<HTML>
|
||||
<HTML lang="en-GB">
|
||||
<header>
|
||||
<link rel = "stylesheet" href = "CVPage.css">
|
||||
<link rel = "stylesheet" href = "effects.css">
|
||||
|
|
|
|||
|
|
@ -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
BIN
pages/gallery/aardvark-work/projectHeaderImage.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 764 KiB |
|
|
@ -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
BIN
pages/gallery/cat-tower-defence/projectHeaderImage.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4 KiB |
|
|
@ -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
BIN
pages/gallery/epq-project/projectHeaderImage.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 450 KiB |
|
|
@ -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
BIN
pages/gallery/mind-map/projectHeaderImage.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
pages/gallery/room-builder/projectHeaderImage.webp
Normal file
BIN
pages/gallery/room-builder/projectHeaderImage.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -56,8 +56,8 @@
|
|||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.gallery:hover{
|
||||
margin-bottom: 36vh;
|
||||
.galleryContainer:hover .gallery{
|
||||
margin-bottom: 36vh;
|
||||
}
|
||||
|
||||
.galleryItem{
|
||||
|
|
|
|||
|
|
@ -35,7 +35,3 @@ function hideAll(){
|
|||
|
||||
hideAll()
|
||||
updateSlide();
|
||||
|
||||
// todo
|
||||
/*use webp image format
|
||||
*/
|
||||
Loading…
Add table
Reference in a new issue