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

reworked css

Browse source 
changed headers to divs to avoid bolding,
fixed css for mobile again,
reformatted text sizing, we use clamp properly now!
added css for videos on blog posts,
updated blog posts,
This commit is contained in:
Nye Evans 2021-01-06 11:21:59 +00:00
parent d30ed40703
commit c4a00b6e87
4 changed files with 52 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
index.html
View file

@ -18,22 +18,22 @@
</h1> </h1>
</div> </div>
<h2> <div class = "textBox">
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. 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. 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. When I'm not programming I'm most often drawing, playing board games, video games or baking.
</h2> </div>
<div style = "width: 100%; height: auto; text-align: center;"> <div style = "width: 100%; height: auto; text-align: center;">
<img src = "images\ProfilePlaceholder.png" class = "profileImage orangeBorder"> <img src = "images\ProfilePlaceholder.png" class = "profileImage orangeBorder">
</div> </div>
<h3 style = "margin-bottom: 5vh;"> <div class = "textBox" 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, 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 and conversations had around 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 remembering the thought and conversations had around 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. has a story and feels special to you on a personal level.
</h3> </div>
<div class = "textBox" id = "galleryHeader"> <div class = "textBox" id = "galleryHeader">
check out my work here: check out my work here:
@ -50,9 +50,9 @@
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button> <button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
</div> </div>
<h4> <div class = "textBox" id= "outroText">
I hope you like my work! If you ever want to contact me, my twitter, email and github can be found below: I hope you like my work! If you ever want to contact me, my twitter, email and github can be found below:
</h4> </div>
<div id = "socialBar"> <div id = "socialBar">
<!-- <!--

4
pages/gallery/blog-post-default.css
View file

@ -27,6 +27,10 @@ h1{
padding: 2.5vh; padding: 2.5vh;
} }
.videoEmbed{
text-align: center;
}
@media (orientation:portrait){ @media (orientation:portrait){
h1{ h1{

20
pages/gallery/epq-project/epq-project.html
View file

@ -8,17 +8,15 @@
</h1> </h1>
<h2>What it is</h2> <h2>What it is</h2>
<div class = "textBox"> <div class = "textBox">
This project was completed for my Extended Project Equalification (also knows as EPQ). During the EPQ, a student will pick a subject of their choice, research it and then either write a paper or create an "artefact" This project was completed for my Extended Project Equalification (also knows as EPQ). During the EPQ, a student will pick a subject of their choice, research it and then either write a paper or create an piece of media
based on what they have learnt. For my subject I originally chose physics simulation as at the time I lacked confidence in maths and wanted to force myself to relearn and become more comfortable with it. However (an "artefact") based on what they have learnt. For my subject I originally chose physics simulation as at the time I lacked confidence in maths and wanted to force myself to relearn and become more comfortable with it.
my supervisor pointed out that I would need to do something more unique that wasn't a common task among programmers. And this drew me to virtual reality (a relatively new technology in 2019, when this was being planned) The idea of combining VR with this later came about in an attempt to make the project more modern so more primary research and testing could be done.<br><br>
and I chose a new subject with my EPQ being titled "Self-Taught design for physics simulations in virtual reality"
<br><br> The end result was a system that allowed the user to interact with a virtual environment with 6 degrees of freedom, they could pick up, move and throw objects with their fingers, hands and head being fully tracked to the
The majourity of my research revolved around vector maths and Unreal Engine. I chose Unreal Engine for my project due to its ease of use for prototyping with Blueprints and the fact it was programmed using C++, a language I had real world.
wanted to gain more experience with. I had not previously used Unreal Engine so spent alot of time looking at forum posts and tutorials as well as trying to create my own work and generally mess around with its systems. During </div>
this time I was using both C++ and blueprints although most of my focus was on blueprints as I found it kind of difficult to understand at first. My research into vector maths was something I struggled with alot and although I <div class = "videoEmbed">
managed to understand a decent amount of it, I found dot-products especially confusing which caused alot of issue since it was a relatively vital part of the calculations I would need for my simulation. After some struggle I started <iframe width="560" height="315" src="https://www.youtube.com/embed/pSlHM0kMijA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
to realise I could use blender (a software I had been learning along with Unreal Engine) to help visualise vectors and the maths around them using its prodecural material system. This greatly helped me and is something I still return
to every so often
</div> </div>
<h2>What I did</h2> <h2>What I did</h2>
</body> </body>

75
pages/mainpage.css
View file

@ -5,12 +5,14 @@
font-weight: 100; font-weight: 100;
src: url("../fonts/Roboto/RobotoMono-VariableFont_wght.ttf") src: url("../fonts/Roboto/RobotoMono-VariableFont_wght.ttf")
} }
html{
font: 100%;
}
body{ body{
color: #ffd256; color: #ffd256;
font-family: "roboto";
background-color: #181818; background-color: #181818;
font-family: "roboto";
} }
button{ button{
@ -24,14 +26,8 @@ button:focus {
outline: none; outline: none;
} }
h1, h2, h3, h4{
font-size: clamp(18px, 1.4vw, 70px);
padding: 1.3vh;
}
h1{ h1{
font-size: clamp(20px, 4vw, 170px); font-size: clamp(1.2rem, 4vw, 4rem);
padding-left: 6; padding-left: 6;
@ -45,24 +41,6 @@ h1{
} }
h2, h3{
margin-top: 10vh;
margin-bottom: 10vh;
margin-left: auto;
margin-right: auto;
min-width: 720px;
max-width: 86vw;
}
h4{
margin-top: 20vh;
margin-bottom: 30vh;
margin-left: 27vw;
margin-right: 27vw;
}
.orangeBorder{ .orangeBorder{
border: 2px solid #ffd256; border: 2px solid #ffd256;
border-radius: 5px; border-radius: 5px;
@ -72,18 +50,21 @@ h4{
.textBox{ .textBox{
text-align: center; text-align: center;
font-size: 1.3vw; font-size: clamp(1rem, 1.2vw, 3rem);
padding: 1.3vh;
padding: 2.5vh; margin-top: 8vh;
margin-bottom: 8vh;
margin-left: 10vw;
margin-right: 10vw;
} }
#galleryHeader{ #galleryHeader{
margin-left: 35vw; margin-left: 30vw;
margin-right: 35vw; margin-right: 30vw;
border-radius: 5px; border-radius: 5px;
font-size: 1.4vw; font-size: clamp(1rem, 1.2vw, 3rem);
} }
#programGallery{ #programGallery{
@ -135,7 +116,7 @@ h4{
padding: 5px; padding: 5px;
font-size: 4vh; font-size: 2rem;
border-radius: 0; border-radius: 0;
border-top-left-radius: 5px; border-top-left-radius: 5px;
@ -157,8 +138,7 @@ h4{
padding: 5px; padding: 5px;
font-size: 2vh; font-size: clamp(1rem, 1.2vw, 3rem)
line-height: 2.3vh;
} }
.galleryLeftArrow{ .galleryLeftArrow{
@ -175,6 +155,12 @@ h4{
font-size: 7vw; font-size: 7vw;
} }
#outroText{
margin-top: 20vh;
margin-bottom: 30vh;
margin-left: 27vw;
margin-right: 27vw;
}
#socialBar{ #socialBar{
position: fixed; position: fixed;
@ -184,7 +170,6 @@ h4{
bottom: 0; bottom: 0;
left: 0 ; left: 0 ;
} }
@ -208,7 +193,7 @@ h4{
} }
h2, h3, h4{ .textBox{
margin-top: 10vh; margin-top: 10vh;
margin-bottom: 10vh; margin-bottom: 10vh;
margin-left: auto; margin-left: auto;
@ -239,11 +224,10 @@ h4{
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
border-radius: 0; border-radius: 0;
font-size: 3vw; font-size: clamp(2rem, 3vw, 5rem);
} }
#programGallery{ #programGallery{
height: 70vh;
width: 100%; width: 100%;
@ -297,7 +281,7 @@ h4{
grid-column: 1/13; grid-column: 1/13;
grid-row: 8/13; grid-row: 8/13;
font-size: 4vw; font-size: clamp(1rem, 3vw, 5rem);
border: 5px solid #ffd256; border: 5px solid #ffd256;
border-left: 0; border-left: 0;
@ -317,6 +301,13 @@ h4{
font-size: 7vw; font-size: 7vw;
} }
#outroText{
margin-top: 20vh;
margin-bottom: 30vh;
margin-left: 5vw;
margin-right: 5vw;
}
#socialBar{ #socialBar{
position: static; position: static;
font-size: 3vw; font-size: 3vw;