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

integrates mobile css into the main website

Browse source
This commit is contained in:
Nye Evans 2021-09-22 16:40:10 +01:00
parent c2b750623c
commit 5875404c1b
3 changed files with 97 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
index.html
View file

@ -28,7 +28,7 @@
</div>
<div style = "text-align: center;">
<div class = "profileImageContainer orangeBorder" style = "margin: 0 auto;">
<div class = "profileImageContainer orangeBorder">
<img src = "images/Profile3.png" alt = "me" class = "profileImage">
</div>
</div>
@ -60,14 +60,14 @@
<div class = "galleryPopup">
<img src = "./pages/gallery/epq-project/projectHeaderImage.png" class = "popupImage" style = "object-position: center;">
<div class = "popupTextContainer">
<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>
</div>
</a>
</div>
@ -80,13 +80,13 @@
<div class = "galleryPopup">
<img src = "./pages/gallery/mind-map/projectHeaderImage.png" class = "popupImage" style = "object-position: center;">
<div class = "popupTextContainer">
<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>
</div>
</a>
</div>
@ -99,13 +99,13 @@
<div class = "galleryPopup">
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.png" class = "popupImage" style = "object-position: center;">
<div class = "popupTextContainer">
<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>
</div>
</a>
</div>
@ -118,14 +118,14 @@
<div class = "galleryPopup">
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.png" class = "popupImage" style = "object-position: center;">
<div class = "popupTextContainer">
<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>
</div>
</a>
</div>
</div>

6
pages/basic.css
View file

@ -28,15 +28,15 @@ button:focus {
outline: none;
}
a:link:not(.galleryLink), a:visited:not(.galleryLink){
a:not(.galleryLink), a:visited:not(.galleryLink){
color: #ffd256;
border-radius: 2px;
transition: background-color 0.5s, color 0.5s;
}
.galleryLink{
.galleryLink{ /*class to be given to any link that doesnt want fancy yellow backgrounds on hover*/
text-decoration: none;
color:#ffd256;
color:#181818;
}
h1{

85
pages/mainpage.css
View file

@ -27,6 +27,7 @@
width: 30vw;
height: 30vw;
text-align: center;
margin: 0 auto;
}
.profileImage{
@ -147,5 +148,89 @@
margin-right: 27vw;
}
@media (orientation:portrait){
#Title{
font-size: 10vw;
margin-right: 50vw;
}
.textBox{
font-size: 0.7rem;
margin-left: 2vw;
margin-right: 2vw;
}
.profileImageContainer{
margin: 2vh;
width: auto;
height: auto;
}
.profileImage{
border-radius: 1vw;
}
#galleryHeader{
margin-left: 2vw;
margin-right: 2vw;
font-size: 0.7rem;
}
.gallery{
margin-left: 2vw;
margin-right: 2vw;
justify-content: flex-start;
flex-wrap: wrap;
height: 100vw;
}
.galleryItem{
width: 20vw;
height: 20vw;
margin-bottom: 3vw;;
}
.galleryPopup{
visibility: visible;
opacity: 1;
z-index: 0;
position: static;
background-color: transparent;
color: #ffd256;
width: 73.5vw;
height: 20vw;
margin-top: 0vh;
}
.popupTongue{
display: none;
}
.popupImage{
display: none;
}
.galleryImage{
border-radius: 2px;
}
#galleryOutroLink{
font-size: 0.7rem;
}
#outroText{
margin-top: 12vh;
margin-bottom: 20vh;
margin-left: 2vw;
margin-right: 2vw;
}
.galleryLink{ /*this is set in basics, but the gallery on mobile will want to be different*/
text-decoration: none;
color:#ffd256;
}
}