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

removed secondary gallery, replaced filler with actual text

Browse source 
almost done!
This commit is contained in:
Nye Evans 2021-01-04 18:24:33 +00:00
parent c096339b44
commit 3556ba1a36
3 changed files with 35 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
pages/gallery.js
View file

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

35
pages/index.html
View file

@ -19,8 +19,9 @@
</div> </div>
<h2> <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. 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.
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. 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> </h2>
<div style = "width: 100%; height: auto; text-align: center;"> <div style = "width: 100%; height: auto; text-align: center;">
@ -28,8 +29,10 @@
</div> </div>
<h3 style = "margin-bottom: 5vh;"> <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. 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,
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. 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> </h3>
<div class = "textBox" id = "galleryHeader"> <div class = "textBox" id = "galleryHeader">
@ -38,22 +41,18 @@
</div> </div>
<div id = "programGallery"> <div id = "programGallery">
<p class = "galleryDescriptor">Development projects</p> <a href = "\gallery\Cat_tower_defense\cat-tower-defense.html" class = "galleryImage galleryLink">
<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> <img src = "gallery\Cat_tower_defense\projectHeaderImage.png" class = "galleryImage">
<p class = "galleryTitle" id = "programGalleryTitle">Image Title</p> </a>
<p class = "galleryCaption" 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> <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 = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button> <button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
</div> </div>
<div id = "personalGallery"> <h4>
<p class = "galleryDescriptor">Unrealated projects</p> I hope you like my work! I've you ever want to contact me, my twitter, email and github can be found below:
<img src = "gallery\Cat_tower_defense\projectHeaderImage.png" class = "GalleryImage"> </h4>
<p class = "galleryTitle">Image Title Unrelated</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 = "galleryLeftArrow">◄</p>
<p class = "galleryRightArrow">►</p>
</div>
<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>
@ -62,10 +61,6 @@
&NonBreakingSpace; &NonBreakingSpace;
<a href="https://github.com/WillowRo" target="_blank" style = "color:#ffd256;">Github</a> <a href="https://github.com/WillowRo" target="_blank" style = "color:#ffd256;">Github</a>
</div> </div>
<h4>
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.
</h4>
</body> </body>
</HTML> </HTML>

60
pages/mainpage.css
View file

@ -17,7 +17,7 @@ body{
h1, h2, h3, h4{ h1, h2, h3, h4{
font-size: clamp(12px, 1vw, 50px); font-size: clamp(18px, 1.4vw, 70px);
padding: 1.3vh; padding: 1.3vh;
} }
@ -71,18 +71,6 @@ button{
font-size: 1.3vw; font-size: 1.3vw;
} }
.galleryDescriptor{
font-size: 1vw;
vertical-align: text-bottom;
grid-column:2/13;
grid-row: 1;
padding-left: 7px;
font-size: clamp(13px, 1vw, 40px);
}
#galleryHeader{ #galleryHeader{
margin-left: 35vw; margin-left: 35vw;
margin-right: 35vw; margin-right: 35vw;
@ -93,7 +81,7 @@ button{
#programGallery{ #programGallery{
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(11, 1fr); grid-template-rows: repeat(10, 1fr);
height: 70vh; height: 70vh;
width: 70vw; width: 70vw;
@ -106,26 +94,10 @@ button{
margin-top: 10vh; margin-top: 10vh;
} }
#personalGallery{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(11, 1fr);
height: 70vh;
width: 70vw;
min-width: 800px;
min-height: 500px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10vh;
margin-top: 10vh;
}
.galleryImage{ /*all images should be 700x700*/ .galleryImage{ /*all images should be 700x700*/
grid-column: 2/8; grid-column: 2/8;
grid-row: 3/12; grid-row: 2/12;
object-fit: cover; object-fit: cover;
@ -143,7 +115,7 @@ img.galleryImage{
.galleryTitle{ .galleryTitle{
grid-column: 2/12; grid-column: 2/12;
grid-row: 2; grid-row: 1;
padding: 5px; padding: 5px;
@ -160,7 +132,7 @@ img.galleryImage{
.galleryCaption{ .galleryCaption{
grid-column: 8/12; grid-column: 8/12;
grid-row: 3/12; grid-row: 2/12;
border-radius: 0; border-radius: 0;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
@ -174,13 +146,13 @@ img.galleryImage{
.galleryLeftArrow{ .galleryLeftArrow{
grid-column: 1; grid-column: 1;
grid-row: 6/7; grid-row: 5/6;
font-size: 7vw; font-size: 7vw;
} }
.galleryRightArrow{ .galleryRightArrow{
grid-column: 12; grid-column: 12;
grid-row: 6/7; grid-row: 5/6;
font-size: 7vw; font-size: 7vw;
} }
@ -222,9 +194,11 @@ button:focus {
} }
h2, h3{ h2, h3, h4{
margin-top: 10vh; margin-top: 10vh;
margin-bottom: 10vh; margin-bottom: 10vh;
margin-left: auto;
margin-right: auto;
min-width: inherit; min-width: inherit;
max-width: inherit; max-width: inherit;
@ -250,14 +224,6 @@ button:focus {
margin-right: 0; margin-right: 0;
} }
#personalGallery{
height: 70vh;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.galleryDescriptor{ .galleryDescriptor{
grid-column: 1/13; grid-column: 1/13;
} }
@ -315,6 +281,12 @@ button:focus {
grid-row: 13; grid-row: 13;
font-size: 7vw; font-size: 7vw;
} }
#socialBar{
position: static;
font-size: 3vw;
}
} }