reuploading files
This commit is contained in:
Nye Evans
parent
51ded36750
commit
2c2290d48d
26 changed files with 725 additions and 0 deletions
12
pages/gallery-index.js
Normal file
12
pages/gallery-index.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
export class slide{
|
||||
constructor(title, caption, image, link){
|
||||
this.title = title;
|
||||
this.caption = caption;
|
||||
this.image = image;
|
||||
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")
|
||||
];
|
||||
28
pages/gallery.js
Normal file
28
pages/gallery.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import {slide, slides} from "../pages/gallery-index.js";
|
||||
|
||||
var currentSlide = 0;
|
||||
|
||||
|
||||
window.nextSlide = function nextSlide(){
|
||||
currentSlide++;
|
||||
updateSlide();
|
||||
}
|
||||
|
||||
window.lastSlide = function lastSlide(){
|
||||
currentSlide--;
|
||||
updateSlide();
|
||||
}
|
||||
|
||||
function updateSlide(){
|
||||
if (currentSlide > slides.length-1){
|
||||
currentSlide = 0;
|
||||
} else if (currentSlide < 0){
|
||||
currentSlide = slides.length-1;
|
||||
}
|
||||
document.getElementById("programGalleryTitle").innerHTML = slides[currentSlide].title;
|
||||
document.getElementById("programGalleryCaption").innerHTML = slides[currentSlide].caption;
|
||||
document.getElementById("programGalleryImage").src = slides[currentSlide].image;
|
||||
document.getElementById("programGalleryLink").href = slides[currentSlide].link;
|
||||
}
|
||||
|
||||
console.log("script loaded");
|
||||
5
pages/gallery/Cat_tower_defense/cat-tower-defense.html
Normal file
5
pages/gallery/Cat_tower_defense/cat-tower-defense.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<HMTL>
|
||||
<body>
|
||||
dgsdfsdfsfsf
|
||||
</body>
|
||||
</HMTL>
|
||||
BIN
pages/gallery/Cat_tower_defense/projectHeaderImage.png
Normal file
BIN
pages/gallery/Cat_tower_defense/projectHeaderImage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
pages/gallery/EPQ_project/projectHeaderImage.png
Normal file
BIN
pages/gallery/EPQ_project/projectHeaderImage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
pages/gallery/Room_builder/projectHeaderImage.png
Normal file
BIN
pages/gallery/Room_builder/projectHeaderImage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
66
pages/index.html
Normal file
66
pages/index.html
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<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>
|
||||
<!--<img src = "..\Images\ScreenFilter.png" style = "position: fixed; top: 0; left: 0;">-->
|
||||
<div id = "introScreenSpace">
|
||||
<h1>
|
||||
Nye Evans
|
||||
<div style = "font-size: 30%; padding-top: 10;">Portfolio</div>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
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.
|
||||
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.
|
||||
</h2>
|
||||
|
||||
<div style = "width: 100%; height: auto; text-align: center;">
|
||||
<img src = "..\images\ProfilePlaceholder.png" class = "orangeBack">
|
||||
</div>
|
||||
|
||||
<h3 style = "margin-bottom: 5vh;">
|
||||
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.
|
||||
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.
|
||||
</h3>
|
||||
|
||||
<div class = "orangeBack 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" id = "programGalleryLink"><img src = "gallery\Cat_tower_defense\projectHeaderImage.png" class = "GalleryImage" id = "programGalleryImage"></a>
|
||||
<p class = "GalleryTitle orangeBack" id = "programGalleryTitle">Image Title</p>
|
||||
<p class = "GalleryCaption orangeBack" id = "programGalleryCaption">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>
|
||||
|
||||
<div id = "personalGallery" style = "margin-bottom: 40vh;">
|
||||
<img src = "gallery\Cat_tower_defense\projectHeaderImage.png" class = "GalleryImage">
|
||||
<p class = "GalleryTitle orangeBack">Image Title Unrelated</p>
|
||||
<p class = "GalleryCaption orangeBack">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 = "GalleryLeftArrow">◄</p>
|
||||
<p class = "GalleryRightArrow">►</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
275
pages/mainpage.css
Normal file
275
pages/mainpage.css
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
@import url("reset.css");
|
||||
|
||||
@font-face{
|
||||
font-family:"roboto";
|
||||
font-weight: 100;
|
||||
src: url("../fonts/Roboto/RobotoMono-VariableFont_wght.ttf")
|
||||
}
|
||||
|
||||
body{
|
||||
color: #ffd256;
|
||||
font-family: "roboto";
|
||||
background-color: #221A0F;
|
||||
background-image: url("../images/BackGroundTestNoGlow.png");
|
||||
background-position: bottom;
|
||||
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3{
|
||||
background-color: #ffa500;
|
||||
background: radial-gradient(#E39823 40%, #8D5001);
|
||||
border-radius: 5px;
|
||||
font-size: clamp(12px, 1vw, 50px);
|
||||
padding: 1.3vh;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: clamp(20px, 4vw, 170px);
|
||||
|
||||
padding-left: 6;
|
||||
margin-left: 2vw;
|
||||
margin-right: 70vw;
|
||||
margin-top: 10vh;
|
||||
margin-bottom: 70vh;
|
||||
|
||||
height: 20vh;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
h2, h3{
|
||||
margin-top: 10vh;
|
||||
margin-bottom: 10vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
min-width: 720px;
|
||||
max-width: 86vw;
|
||||
|
||||
}
|
||||
|
||||
button{
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #ffd256;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.orangeBack{ /*for anything that isnt a <h> tag*/
|
||||
background-color: #ffa500;
|
||||
background: radial-gradient(#E39823 40%, #8D5001);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.orangeBorder{
|
||||
border: 5px outset #E39823;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.textBox{
|
||||
text-align: center;
|
||||
padding: 2.5vh;
|
||||
font-size: 1.3vw;
|
||||
}
|
||||
|
||||
#galleryHeader{
|
||||
margin-left: 35vw;
|
||||
margin-right: 35vw;
|
||||
border-radius: 5px;
|
||||
font-size: 1.4vw;
|
||||
}
|
||||
|
||||
#programGallery{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: repeat(10, 1fr);
|
||||
|
||||
height: 70vh;
|
||||
width: 70vw;
|
||||
|
||||
min-width: 800px;
|
||||
min-height: 500px;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
#personalGallery{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: repeat(10, 1fr);
|
||||
|
||||
height: 70vh;
|
||||
width: 70vw;
|
||||
|
||||
min-width: 800px;
|
||||
min-height: 500px;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.GalleryImage{ /*all images should be 700x700*/
|
||||
grid-column: 2/8;
|
||||
grid-row: 2/11;
|
||||
border-bottom-left-radius: 5px;
|
||||
|
||||
object-fit: cover;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.GalleryTitle{
|
||||
grid-column: 2/12;
|
||||
grid-row: 1;
|
||||
|
||||
padding: 5px;
|
||||
|
||||
font-size: 5vh;
|
||||
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.GalleryCaption{
|
||||
grid-column: 8/12;
|
||||
grid-row: 2/11;
|
||||
|
||||
border-radius: 0;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.GalleryLeftArrow{
|
||||
grid-column: 1;
|
||||
grid-row: 5/6;
|
||||
font-size: 7vw;
|
||||
}
|
||||
|
||||
.GalleryRightArrow{
|
||||
grid-column: 12;
|
||||
grid-row: 5/6;
|
||||
font-size: 7vw;
|
||||
}
|
||||
|
||||
|
||||
#socialBar{
|
||||
position: fixed;
|
||||
display: flex;
|
||||
margin-left: 1vh;
|
||||
margin-bottom: 1vh;
|
||||
|
||||
bottom: 0;
|
||||
left: 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (orientation:portrait){
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
h2, h3{
|
||||
margin-top: 10vh;
|
||||
margin-bottom: 10vh;
|
||||
|
||||
min-width: inherit;
|
||||
max-width: inherit;
|
||||
|
||||
border-radius: 0;
|
||||
|
||||
font-size: 2.3vw;
|
||||
}
|
||||
|
||||
#galleryHeader{
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
#programGallery{
|
||||
height: 70vh;
|
||||
width: 100%;
|
||||
|
||||
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#personalGallery{
|
||||
height: 70vh;
|
||||
width: 100%;
|
||||
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.GalleryImage{ /*all images should be 700x700*/
|
||||
grid-column: 1/13;
|
||||
grid-row: 2/7;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
object-fit: cover;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.GalleryTitle{
|
||||
grid-column: 1/13;
|
||||
grid-row: 1;
|
||||
|
||||
padding: 5px;
|
||||
|
||||
font-size: 5vh;
|
||||
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.GalleryCaption{
|
||||
grid-column: 1/13;
|
||||
grid-row: 7/12;
|
||||
|
||||
border-radius: 0;
|
||||
font-size: 3.2vw;
|
||||
}
|
||||
|
||||
.GalleryLeftArrow{
|
||||
grid-column: 1;
|
||||
grid-row: 12;
|
||||
font-size: 7vw;
|
||||
}
|
||||
|
||||
.GalleryRightArrow{
|
||||
grid-column: 12;
|
||||
grid-row: 12;
|
||||
font-size: 7vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
53
pages/reset.css
Normal file
53
pages/reset.css
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
|
||||
Altered a little bit for this website :)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue