cleaned up css and fixed javascript, moved files around
done!
This commit is contained in:
Nye Evans
parent
3556ba1a36
commit
fb352eff1d
4 changed files with 53 additions and 34 deletions
|
|
@ -6,7 +6,8 @@ export class slide{
|
|||
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"),
|
||||
new slide("james", "he is james", "gallery/EPQ_project/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("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/")
|
||||
];
|
||||
|
|
@ -19,10 +19,14 @@ function updateSlide(){
|
|||
} else if (currentSlide < 0){
|
||||
currentSlide = slides.length-1;
|
||||
}
|
||||
|
||||
document.querySelector(".galleryTitle").innerHTML = slides[currentSlide].title;
|
||||
document.querySelector(".galleryCaption").innerHTML = slides[currentSlide].caption;
|
||||
document.querySelector(".galleryImage").src = slides[currentSlide].image;
|
||||
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();
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<HTML>
|
||||
|
||||
<header>
|
||||
<link rel = "stylesheet" href = "mainpage.css">
|
||||
<link rel = "icon" href = "..\images\Favicon.ico">
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<script src = "gallery.js" type = "module"></script>
|
||||
<title>Nye Evans Portfolio</title>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<div id = "introScreenSpace">
|
||||
<h1>
|
||||
Nye Evans
|
||||
<div style = "font-size: 30%; padding-top: 10;">Portfolio</div>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
Hey I'm Nye, welcome to my portfolio! I'm an aspiring software developer who's fluent in C++, C# and Python, with an intrest in lower level langauges like Assembly.
|
||||
Most of my work is software based, with Python and C++, although I sometimes dabble in game design with groups of friends, in Unity, Unreal Engine and some solo level design in Source 1.
|
||||
When I'm not programming I'm most often drawing, playing board games, video games or baking.
|
||||
</h2>
|
||||
|
||||
<div style = "width: 100%; height: auto; text-align: center;">
|
||||
<img src = "..\images\ProfilePlaceholder.png" class = "orangeBorder">
|
||||
</div>
|
||||
|
||||
<h3 style = "margin-bottom: 5vh;">
|
||||
I love creating and working with large libraries and building intricate systems. The feeling of using systems and classes I or a close friend have built in an earlier part of a project is something I love,
|
||||
remembering the thought put into how it works and seeing it interact seemlessly and efficiently with other parts designed separately. I imagine its how it feels to build the house you live within, each part
|
||||
has a story and feels special to you on a personal level.
|
||||
|
||||
</h3>
|
||||
|
||||
<div class = "textBox" id = "galleryHeader">
|
||||
check out my work here:
|
||||
<div style = "font-size: 60%;">click a project to find out more</div>
|
||||
</div>
|
||||
|
||||
<div id = "programGallery">
|
||||
<a href = "\gallery\Cat_tower_defense\cat-tower-defense.html" class = "galleryImage galleryLink">
|
||||
<img src = "gallery\Cat_tower_defense\projectHeaderImage.png" class = "galleryImage">
|
||||
</a>
|
||||
<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>
|
||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
||||
</div>
|
||||
|
||||
<h4>
|
||||
I hope you like my work! I've you ever want to contact me, my twitter, email and github can be found below:
|
||||
</h4>
|
||||
|
||||
<div id = "socialBar">
|
||||
<a href = "https://twitter.com/Wi__Ro" target="_blank" style = "color:#ffd256;">Twitter</a>
|
||||
 
|
||||
<a href="mailto:WillowRo@outlook.com" target="_blank" style = "color:#ffd256;">Email</a>
|
||||
 
|
||||
<a href="https://github.com/WillowRo" target="_blank" style = "color:#ffd256;">Github</a>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</HTML>
|
||||
|
|
@ -10,11 +10,20 @@ body{
|
|||
color: #ffd256;
|
||||
font-family: "roboto";
|
||||
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{
|
||||
font-size: clamp(18px, 1.4vw, 70px);
|
||||
|
|
@ -25,10 +34,11 @@ h1{
|
|||
font-size: clamp(20px, 4vw, 170px);
|
||||
|
||||
padding-left: 6;
|
||||
margin-left: 2vw;
|
||||
margin-right: 70vw;
|
||||
|
||||
margin-top: 10vh;
|
||||
margin-bottom: 70vh;
|
||||
margin-left: 2vw;
|
||||
margin-right: 70vw;
|
||||
|
||||
height: 20vh;
|
||||
text-align: left;
|
||||
|
|
@ -40,9 +50,9 @@ h2, h3{
|
|||
margin-bottom: 10vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
min-width: 720px;
|
||||
max-width: 86vw;
|
||||
|
||||
}
|
||||
|
||||
h4{
|
||||
|
|
@ -50,31 +60,29 @@ h4{
|
|||
margin-bottom: 30vh;
|
||||
margin-left: 27vw;
|
||||
margin-right: 27vw;
|
||||
|
||||
}
|
||||
|
||||
button{
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #ffd256;
|
||||
}
|
||||
|
||||
.orangeBorder{
|
||||
border: 2px solid #ffd256;
|
||||
border-radius: 5px;
|
||||
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.textBox{
|
||||
text-align: center;
|
||||
padding: 2.5vh;
|
||||
font-size: 1.3vw;
|
||||
|
||||
padding: 2.5vh;
|
||||
}
|
||||
|
||||
#galleryHeader{
|
||||
margin-left: 35vw;
|
||||
margin-right: 35vw;
|
||||
|
||||
border-radius: 5px;
|
||||
|
||||
font-size: 1.4vw;
|
||||
}
|
||||
|
||||
|
|
@ -103,9 +111,7 @@ button{
|
|||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img.galleryImage{
|
||||
border: 2px solid #ffd256;
|
||||
border-bottom-left-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -113,6 +119,16 @@ img.galleryImage{
|
|||
padding: 5;
|
||||
}
|
||||
|
||||
.galleryLink{
|
||||
grid-column: 2/8;
|
||||
grid-row: 2/12;
|
||||
|
||||
object-fit: cover;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.galleryTitle{
|
||||
grid-column: 2/12;
|
||||
grid-row: 1;
|
||||
|
|
@ -125,9 +141,8 @@ img.galleryImage{
|
|||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
|
||||
border-left: 2px solid #ffd256;
|
||||
border-top: 2px solid #ffd256;
|
||||
border-right: 2px solid #ffd256;
|
||||
border: 2px solid #ffd256;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.galleryCaption{
|
||||
|
|
@ -137,9 +152,8 @@ img.galleryImage{
|
|||
border-radius: 0;
|
||||
border-bottom-right-radius: 5px;
|
||||
|
||||
border-bottom: 2px solid #ffd256;
|
||||
border-right: 2px solid #ffd256;
|
||||
border-top: 2px solid #ffd256;
|
||||
border: 2px solid #ffd256;
|
||||
border-left: none;
|
||||
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
@ -147,20 +161,17 @@ img.galleryImage{
|
|||
.galleryLeftArrow{
|
||||
grid-column: 1;
|
||||
grid-row: 5/6;
|
||||
|
||||
font-size: 7vw;
|
||||
}
|
||||
|
||||
.galleryRightArrow{
|
||||
grid-column: 12;
|
||||
grid-row: 5/6;
|
||||
|
||||
font-size: 7vw;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
#socialBar{
|
||||
position: fixed;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue