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

final save before rewriting gallery again

Browse source
This commit is contained in:
Nye Evans 2021-09-16 12:03:36 +01:00
parent a69bd66d73
commit e60442936c
3 changed files with 112 additions and 268 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

94
index.html
View file

@ -8,7 +8,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<script src = "scripts\gallery.js" type = "module"></script>
<script src = "scripts\autoScroll.js" type = "module"></script> <script src = "scripts\autoScroll.js" type = "module"></script>
<title>Nye Evans Portfolio</title> <title>Nye Evans Portfolio</title>
</header> </header>
@ -48,59 +48,73 @@
<!-- 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--> <!-- 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 = "programGallery"> <div class = "gallery">
<p class = "galleryTitle">VR physics engine</p>
<a href = "./pages/gallery/epq-project/epq-project.html" class = "galleryLink"> <div class = "galleryItem">
<div class = "galleryImageContainer">
<img src = "./pages/gallery/epq-project/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;"> <img src = "./pages/gallery/epq-project/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
</a> </div>
</div>
<a href = "./pages/gallery/epq-project/epq-project.html" class = "galleryPopup galleryLink">
<img src = "./pages/gallery/epq-project/projectHeaderImage.png" class = "popupImage" style = "object-position: center;">
<div class = "popupTextContainer">
<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 <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.<br><br>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 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. to it.
</p> </p>
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
</div> </div>
<div class = "programGallery">
<p class = "galleryTitle">Tower defence game</p>
<a href = "./pages/gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryLink">
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.png" class = "galleryImage" style = "object-position: top;">
</a> </a>
<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>
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
</div>
<div class = "programGallery"> <div class = "galleryItem">
<p class = "galleryTitle">Work on Aardvark XR</p> <div class = "galleryImageContainer">
<a href = "./pages/gallery/aardvark-work/aardvark-work.html" class = "galleryLink"> <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;"> <img src = "./pages/gallery/aardvark-work/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
</a>
<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>
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
</div> </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>
<div class = "programGallery"> <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
<p class = "galleryTitle">Unity based Mind Map software</p> 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.
<a href = "./pages/gallery/mind-map/mind-map.html" class = "galleryLink"> </p>
</div>
</a>
<div class = "galleryItem">
<div class = "galleryImageContainer">
<img src = "./pages/gallery/mind-map/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;"> <img src = "./pages/gallery/mind-map/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
</a>
<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>
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
</div> </div>
</div>
<a href = "./pages/gallery/mind-map/mind-map.html" class = "galleryPopup galleryLink">
<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 = "galleryCaption"> A project made in unity for a my final alevel practical,
</p>
</div>
</a>
</div>
<div class = "textBox" id= "outroText"> <div class = "textBox" id= "outroText">

284
pages/mainpage.css
View file

@ -28,7 +28,7 @@ button:focus {
outline: none; outline: none;
} }
a:link, a:visited{ a:link:not(.galleryLink), a:visited:not(.galleryLink){
color: #ffd256; color: #ffd256;
border-radius: 2px; border-radius: 2px;
transition: background-color 0.5s, color 0.5s; transition: background-color 0.5s, color 0.5s;
@ -94,92 +94,74 @@ h1{
font-size: clamp(1rem, 1.2vw, 3rem); font-size: clamp(1rem, 1.2vw, 3rem);
} }
.programGallery{ .gallery{
display: grid; display: flex;
grid-template-columns: repeat(12, 1fr); margin-left: 10vw;
grid-template-rows: repeat(10, 1fr); margin-right: 10vw;
height: 10vw;
}
height: 70vh; .galleryItem{
width: 70vw; margin-left: 4vw;
height: 10vw;
min-width: 800px;
min-height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 10vh;
} }
.galleryImage{ /*all images should be 700x700*/ .galleryItem:hover + .galleryPopup{
grid-column: 2/8; visibility: visible;
grid-row: 2/12; opacity: 1;
object-fit: cover;
width: 100%;
height: 100%;
border: 2px solid #ffd256;
border-bottom-left-radius: 5px;
box-sizing: border-box;
padding: 5px;
} }
.galleryLink{ .popupImage:hover, .galleryPopup{
grid-column: 2/8; visibility: visible;
grid-row: 2/12; opacity: 1;
}
object-fit: cover;
.galleryPopup a{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.galleryPopup{
visibility: hidden;
opacity: 0;
display: flex;
z-index: 5;
position: absolute;
background-color: #ffd256;
border-radius: 2px;
color: #181818;
width: 67.5vw;
height: 15vw;
margin-left: 4vw;
text-decoration: none;
transition: visibility 0.3s, opacity 0.5s;
}
.popupImage{
padding: 10px;
}
.popupTextContainer{
display: flex;
flex-direction: column;
padding: 6px;
}
.galleryImage{
width: 100%;
height: 100%;
padding: 10px;
}
.galleryImageContainer{
height: 13.5vw;
width: 13.5vw;
}
.galleryTitle{ .galleryTitle{
grid-column: 2/12; font-weight: 700;
grid-row: 1;
padding: 5px;
font-size: clamp(1rem, 3vw, 3rem);
border-radius: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 2px solid #ffd256;
border-bottom: none;
}
.galleryCaption{
grid-column: 8/12;
grid-row: 2/12;
border-radius: 0;
border-bottom-right-radius: 5px;
border: 2px solid #ffd256;
border-left: none;
padding: 5px;
font-size: clamp(1rem, 1.2vw, 3rem)
}
.galleryLeftArrow{
grid-column: 1;
grid-row: 5/6;
font-size: 7vw;
}
.galleryRightArrow{
grid-column: 12;
grid-row: 5/6;
font-size: 7vw;
} }
#outroText{ #outroText{
@ -198,155 +180,3 @@ h1{
@media (orientation:portrait){
body{
/*
touch-action: none;
touch-action: pan-y;
as well as disabling double tap, disables zoom which some people with bad eyes need, use something else
*/
touch-action: manipulation; /*stops double tap zoom*/
-webkit-text-size-adjust: none; /*stops browsers messing with text size*/
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
h1{
font-size: 10vw;
margin-left: 0vw;
margin-right: 0vw;
margin-top: 5vh;
margin-bottom: 85vh;
padding-top: 0.5vh;
border-radius: 0;
height: 10vh;
}
.textBox{
padding: 0;
margin-top: 3vh;
margin-bottom: 3vh;
margin-left: 15px;
margin-right: 15px;
min-width: inherit;
max-width: inherit;
border: 0;
text-align: left;
font-size: clamp(25px, 3.6vw, 50px);
}
.profileImage{
width: 90%;
}
.orangeBorder{
border: 5px solid #ffd256;
border-radius: 10px;
}
#galleryHeader{
margin-left: 15px;
margin-right: 15px;
font-size: clamp(2rem, 4vw, 5rem);
}
.programGallery{
width: 92vw;
margin-left: 4vw;
margin-right: 4vw;
border: 5px solid #ffd256;
border-radius: 10px;
}
.galleryImage{ /*all images should be 700x700*/
grid-column: 1/13;
grid-row: 2/7;
border-radius: 0;
border: 5px solid #ffd256;
border-left: 0;
border-right: 0;
object-fit: cover;
width: 100%;
height: 100%;
}
.galleryLink{
grid-column: 1/13;
grid-row: 2/7;
object-fit: cover;
width: 100%;
height: 100%;
}
.galleryTitle{
grid-column: 1/13;
grid-row: 1;
padding: 5px;
font-size: clamp(5px, 4vw, 50px);
border: 0;
}
.galleryCaption{
grid-column: 1/13;
grid-row: 7/12;
font-size: clamp(5px, 3vw, 50px);
border: 0;
}
.galleryLeftArrow{
grid-column: 1;
grid-row: 12;
font-size: 7vw;
}
.galleryRightArrow{
grid-column: 12;
grid-row: 12;
font-size: 7vw;
}
#outroText{
margin-top: 20vh;
margin-bottom: 20vh;
margin-left: 1vw;
margin-right: 1vw;
}
#socialBar{
justify-content: center;
font-size: 5vw;
margin-bottom: 0.8vh;
}
}