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

cleaned up css and fixed javascript, moved files around

Browse source 
done!
This commit is contained in:
Nye Evans 2021-01-04 19:27:14 +00:00
parent 3556ba1a36
commit fb352eff1d
4 changed files with 53 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
pages/index.html → index.html
View file

@ -1,12 +1,12 @@
<HTML> <HTML>
<header> <header>
<link rel = "stylesheet" href = "mainpage.css"> <link rel = "stylesheet" href = "pages\mainpage.css">
<link rel = "icon" href = "..\images\Favicon.ico"> <link rel = "icon" href = "..\images\Favicon.ico">
<meta charset="UTF-8"> <meta charset="UTF-8">
<script src = "gallery.js" type = "module"></script> <script src = "pages\gallery.js" type = "module"></script>
<title>Nye Evans Portfolio</title> <title>Nye Evans Portfolio</title>
</header> </header>
@ -25,7 +25,7 @@
</h2> </h2>
<div style = "width: 100%; height: auto; text-align: center;"> <div style = "width: 100%; height: auto; text-align: center;">
<img src = "..\images\ProfilePlaceholder.png" class = "orangeBorder"> <img src = "images\ProfilePlaceholder.png" class = "orangeBorder">
</div> </div>
<h3 style = "margin-bottom: 5vh;"> <h3 style = "margin-bottom: 5vh;">
@ -41,8 +41,8 @@
</div> </div>
<div id = "programGallery"> <div id = "programGallery">
<a href = "\gallery\Cat_tower_defense\cat-tower-defense.html" class = "galleryImage galleryLink"> <a href = "pages/gallery/Cat_tower_defense/cat-tower-defense.html" class = "galleryLink">
<img src = "gallery\Cat_tower_defense\projectHeaderImage.png" class = "galleryImage"> <img src = "pages/gallery/Cat_tower_defense/projectHeaderImage.png" class = "galleryImage">
</a> </a>
<p class = "galleryTitle">Image Title</p> <p class = "galleryTitle">Image Title</p>
<p class = "galleryCaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p class = "galleryCaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@ -55,7 +55,10 @@
</h4> </h4>
<div id = "socialBar"> <div id = "socialBar">
<!--
<a href = "https://twitter.com/Wi__Ro" target="_blank" style = "color:#ffd256;">Twitter</a> <a href = "https://twitter.com/Wi__Ro" target="_blank" style = "color:#ffd256;">Twitter</a>
-->
<a href = "https://twitter.com" target="_blank" style = "color:#ffd256;">Twitter</a>
&NonBreakingSpace; &NonBreakingSpace;
<a href="mailto:WillowRo@outlook.com" target="_blank" style = "color:#ffd256;">Email</a> <a href="mailto:WillowRo@outlook.com" target="_blank" style = "color:#ffd256;">Email</a>
&NonBreakingSpace; &NonBreakingSpace;

7
pages/gallery-index.js
View file

@ -6,7 +6,8 @@ export class slide{
this.link = link; this.link = link;
} }
} }
export var slides = [new slide("john", "he is john", "gallery/Cat_tower_defense/projectHeaderImage.png"),
new slide("jack", "he is jack", "gallery/Room_builder/projectHeaderImage.png"), export var slides = [new slide("john", "he is john", "pages/gallery/Cat_tower_defense/projectHeaderImage.png", "https://www.bbc.co.uk/"),
new slide("james", "he is james", "gallery/EPQ_project/projectHeaderImage.png") new slide("jack", "he is jack", "pages/gallery/Room_builder/projectHeaderImage.png", "https://twitter.com/"),
new slide("james", "he is james", "pages/gallery/EPQ_project/projectHeaderImage.png", "https://www.google.com/")
]; ];

6
pages/gallery.js
View file

@ -19,10 +19,14 @@ function updateSlide(){
} else if (currentSlide < 0){ } else if (currentSlide < 0){
currentSlide = slides.length-1; currentSlide = slides.length-1;
} }
document.querySelector(".galleryTitle").innerHTML = slides[currentSlide].title; document.querySelector(".galleryTitle").innerHTML = slides[currentSlide].title;
document.querySelector(".galleryCaption").innerHTML = slides[currentSlide].caption; document.querySelector(".galleryCaption").innerHTML = slides[currentSlide].caption;
document.querySelector(".galleryImage").src = slides[currentSlide].image;
document.querySelector(".galleryLink").href = slides[currentSlide].link; document.querySelector(".galleryLink").href = slides[currentSlide].link;
document.querySelector(".galleryImage").src = slides[currentSlide].image;
console.log(document.querySelector(".galleryImage").src)
console.log(slides[currentSlide].image)
} }
updateSlide(); updateSlide();

61
pages/mainpage.css
View file

@ -10,11 +10,20 @@ body{
color: #ffd256; color: #ffd256;
font-family: "roboto"; font-family: "roboto";
background-color: #181818; background-color: #181818;
/*background-image: url("../images/BackGroundTestNoGlow.png");*/
background-position: bottom;
} }
button{
background-color: transparent;
border: none;
color: #ffd256;
}
button:focus {
border: none;
outline: none;
}
h1, h2, h3, h4{ h1, h2, h3, h4{
font-size: clamp(18px, 1.4vw, 70px); font-size: clamp(18px, 1.4vw, 70px);
@ -25,10 +34,11 @@ h1{
font-size: clamp(20px, 4vw, 170px); font-size: clamp(20px, 4vw, 170px);
padding-left: 6; padding-left: 6;
margin-left: 2vw;
margin-right: 70vw;
margin-top: 10vh; margin-top: 10vh;
margin-bottom: 70vh; margin-bottom: 70vh;
margin-left: 2vw;
margin-right: 70vw;
height: 20vh; height: 20vh;
text-align: left; text-align: left;
@ -40,9 +50,9 @@ h2, h3{
margin-bottom: 10vh; margin-bottom: 10vh;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
min-width: 720px; min-width: 720px;
max-width: 86vw; max-width: 86vw;
} }
h4{ h4{
@ -50,31 +60,29 @@ h4{
margin-bottom: 30vh; margin-bottom: 30vh;
margin-left: 27vw; margin-left: 27vw;
margin-right: 27vw; margin-right: 27vw;
} }
button{
background-color: transparent;
border: none;
color: #ffd256;
}
.orangeBorder{ .orangeBorder{
border: 2px solid #ffd256; border: 2px solid #ffd256;
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
} }
.textBox{ .textBox{
text-align: center; text-align: center;
padding: 2.5vh;
font-size: 1.3vw; font-size: 1.3vw;
padding: 2.5vh;
} }
#galleryHeader{ #galleryHeader{
margin-left: 35vw; margin-left: 35vw;
margin-right: 35vw; margin-right: 35vw;
border-radius: 5px; border-radius: 5px;
font-size: 1.4vw; font-size: 1.4vw;
} }
@ -103,9 +111,7 @@ button{
width: 100%; width: 100%;
height: 100%; height: 100%;
}
img.galleryImage{
border: 2px solid #ffd256; border: 2px solid #ffd256;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
@ -113,6 +119,16 @@ img.galleryImage{
padding: 5; padding: 5;
} }
.galleryLink{
grid-column: 2/8;
grid-row: 2/12;
object-fit: cover;
width: 100%;
height: 100%;
}
.galleryTitle{ .galleryTitle{
grid-column: 2/12; grid-column: 2/12;
grid-row: 1; grid-row: 1;
@ -125,9 +141,8 @@ img.galleryImage{
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-left: 2px solid #ffd256; border: 2px solid #ffd256;
border-top: 2px solid #ffd256; border-bottom: none;
border-right: 2px solid #ffd256;
} }
.galleryCaption{ .galleryCaption{
@ -137,9 +152,8 @@ img.galleryImage{
border-radius: 0; border-radius: 0;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
border-bottom: 2px solid #ffd256; border: 2px solid #ffd256;
border-right: 2px solid #ffd256; border-left: none;
border-top: 2px solid #ffd256;
padding: 5px; padding: 5px;
} }
@ -147,18 +161,15 @@ img.galleryImage{
.galleryLeftArrow{ .galleryLeftArrow{
grid-column: 1; grid-column: 1;
grid-row: 5/6; grid-row: 5/6;
font-size: 7vw; font-size: 7vw;
} }
.galleryRightArrow{ .galleryRightArrow{
grid-column: 12; grid-column: 12;
grid-row: 5/6; grid-row: 5/6;
font-size: 7vw;
}
button:focus { font-size: 7vw;
border: none;
outline: none;
} }