readding files
github glitched out and thought some files existed when they didnt, solving it by deleting things :)
This commit is contained in:
Nye Evans
parent
6aa08fabbd
commit
5ba02103e1
21 changed files with 714 additions and 0 deletions
24
pages/Gallery.js
Normal file
24
pages/Gallery.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import {slidem, slides} from "GalleryIndex.js";
|
||||
|
||||
var currentSlide = 0;
|
||||
|
||||
|
||||
function nextSlide(){
|
||||
currentSlide++;
|
||||
updateSlide();
|
||||
}
|
||||
|
||||
function lastSlide(){
|
||||
currentSlide--;
|
||||
updateSlide();
|
||||
}
|
||||
|
||||
function updateSlide(){
|
||||
if (currentSlide > slides.length){
|
||||
currentSlide = 0;
|
||||
} else if (currentSlide < 0){
|
||||
currentSlide = slides.length;
|
||||
}
|
||||
|
||||
console.log(slides[currentSlide]);
|
||||
}
|
||||
11
pages/GalleryIndex.js
Normal file
11
pages/GalleryIndex.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
export class slide{
|
||||
constructor(title, caption, image){
|
||||
this.title = title;
|
||||
this.caption = caption;
|
||||
this.image = image;
|
||||
}
|
||||
};
|
||||
export var slides = [slide(),
|
||||
slide(),
|
||||
slide()
|
||||
]
|
||||
65
pages/Index.html
Normal file
65
pages/Index.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<HTML>
|
||||
|
||||
<header>
|
||||
<link rel = "stylesheet" href = "Mainpage.css">
|
||||
<script src = "Gallery.js" type = "module"></script>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<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">
|
||||
<img src = "gallery\Cat_tower_defense\projectHeaderImage.png" class = "GalleryImage">
|
||||
<p class = "GalleryTitle orangeBack">Image Title</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>
|
||||
<button class = "GalleryLeftArrow" onClick = lastSlide()>◄</button>
|
||||
<button class = "GalleryRightArrow" onClick = 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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: 18 KiB |
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