finalises prototype gallery
This commit is contained in:
Nye Evans
parent
e60442936c
commit
0954ee9cb6
4 changed files with 100 additions and 58 deletions
97
index.html
97
index.html
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
<div class = "textBox" id = "galleryHeader">
|
||||
Check out my larger projects here:
|
||||
<div style = "font-size: 60%;">click a project to find out more</div>
|
||||
<div style = "font-size: 60%;">hover over, or click, a project to find out more</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -51,11 +51,13 @@
|
|||
<div class = "gallery">
|
||||
|
||||
<div class = "galleryItem">
|
||||
<div class = "galleryImageContainer">
|
||||
<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;">
|
||||
</div>
|
||||
</a>
|
||||
<img src = "./images/popup-tongue.png" class = "popupTongue">
|
||||
</div>
|
||||
<a href = "./pages/gallery/epq-project/epq-project.html" class = "galleryPopup galleryLink">
|
||||
|
||||
<div class = "galleryPopup">
|
||||
<img src = "./pages/gallery/epq-project/projectHeaderImage.png" class = "popupImage" style = "object-position: center;">
|
||||
<div class = "popupTextContainer">
|
||||
<p class = "galleryTitle">VR physics engine</p>
|
||||
|
|
@ -65,54 +67,65 @@
|
|||
to it.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class = "galleryItem">
|
||||
<div class = "galleryImageContainer">
|
||||
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
|
||||
</div>
|
||||
</div>
|
||||
<a href = "./pages/gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryPopup galleryLink">
|
||||
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.png" class = "popupImage" style = "object-position: center;">
|
||||
<div class = "popupTextContainer">
|
||||
<p class = "galleryTitle">Cat Tower Defence</p>
|
||||
|
||||
<p class = "galleryCaption"> A small game made with a group of friends over a summer to help us learn pythons graphics library "pygame", we designed to be fully scalable and allowed players to create their
|
||||
own maps or add new towers
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
<div class = "galleryItem">
|
||||
<div class = "galleryImageContainer">
|
||||
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
|
||||
</div>
|
||||
</div>
|
||||
<a href = "./pages/gallery/aardvark-work/aardvark-work.html" class = "galleryPopup galleryLink">
|
||||
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.png" class = "popupImage" style = "object-position: center;">
|
||||
<div class = "popupTextContainer">
|
||||
<p class = "galleryTitle">AardvarkXR</p>
|
||||
|
||||
<p class = "galleryCaption"> AardvarkXR was a small open source project that would run over the top of any VR game that allowed users to open small web-based apps, known as "gadgets", over the top of other vr
|
||||
programs, for instance a user could open a note taking app within a puzzle game without the puzzle game needed to even be aware of the notepad app.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class = "galleryItem">
|
||||
<div class = "galleryImageContainer">
|
||||
<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;">
|
||||
</div>
|
||||
</a>
|
||||
<img src = "./images/popup-tongue.png" class = "popupTongue">
|
||||
</div>
|
||||
<a href = "./pages/gallery/mind-map/mind-map.html" class = "galleryPopup galleryLink">
|
||||
|
||||
<div class = "galleryPopup">
|
||||
<img src = "./pages/gallery/mind-map/projectHeaderImage.png" class = "popupImage" style = "object-position: center;">
|
||||
<div class = "popupTextContainer">
|
||||
<p class = "galleryTitle">Mind Map software</p>
|
||||
<p class = "galleryTitle">Unity based Mind Map software</p>
|
||||
|
||||
<p class = "galleryCaption"> A project made in unity for a my final alevel practical,
|
||||
<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>
|
||||
</div>
|
||||
</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;">
|
||||
<div class = "popupTextContainer">
|
||||
<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>
|
||||
</div>
|
||||
</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;">
|
||||
<div class = "popupTextContainer">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
a:not(.galleryLink){
|
||||
transition: background-color 0.5s
|
||||
}
|
||||
|
||||
a:hover:not(.galleryLink){
|
||||
background-color: #ffd256;
|
||||
color: #181818;
|
||||
|
|
|
|||
|
|
@ -42,10 +42,15 @@ a:link, a:visited{
|
|||
}
|
||||
|
||||
iframe{
|
||||
border: 2px solid #ffd256;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 5px;
|
||||
|
||||
padding: 5px;
|
||||
transition: border 0.5s;
|
||||
}
|
||||
|
||||
iframe:hover{
|
||||
border: 2px solid #ffd256;
|
||||
}
|
||||
|
||||
.backButton{
|
||||
|
|
|
|||
|
|
@ -98,12 +98,18 @@ h1{
|
|||
display: flex;
|
||||
margin-left: 10vw;
|
||||
margin-right: 10vw;
|
||||
height: 10vw;
|
||||
height: 19vh;
|
||||
margin-bottom: 0vh;
|
||||
transition: margin-bottom 0.5s;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.gallery:hover{
|
||||
margin-bottom: 36vh;
|
||||
}
|
||||
|
||||
.galleryItem{
|
||||
margin-left: 4vw;
|
||||
height: 10vw;
|
||||
height: 13vw;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -112,14 +118,19 @@ h1{
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.popupImage:hover, .galleryPopup{
|
||||
.galleryItem:hover .popupTongue{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.galleryPopup a{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.galleryPopup:hover{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.galleryPopup:hover .popupTongue{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.galleryPopup{
|
||||
|
|
@ -132,11 +143,20 @@ h1{
|
|||
background-color: #ffd256;
|
||||
border-radius: 2px;
|
||||
color: #181818;
|
||||
width: 67.5vw;
|
||||
height: 15vw;
|
||||
margin-left: 4vw;
|
||||
text-decoration: none;
|
||||
width: 78.5vw;
|
||||
height: 19vh;
|
||||
transition: visibility 0.3s, opacity 0.5s;
|
||||
margin-top: 14.85vw;
|
||||
}
|
||||
|
||||
.popupTongue{
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0.3s, opacity 0.5s;
|
||||
|
||||
width: 1.85vw;
|
||||
height: 1.85vw;
|
||||
margin-left: 5vw;
|
||||
}
|
||||
|
||||
.popupImage{
|
||||
|
|
@ -152,12 +172,12 @@ h1{
|
|||
.galleryImage{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.galleryImageContainer{
|
||||
height: 13.5vw;
|
||||
width: 13.5vw;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.galleryTitle{
|
||||
|
|
@ -165,7 +185,7 @@ h1{
|
|||
}
|
||||
|
||||
#outroText{
|
||||
margin-top: 20vh;
|
||||
margin-top: 12vh;
|
||||
margin-bottom: 20vh;
|
||||
margin-left: 27vw;
|
||||
margin-right: 27vw;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue