From c4a00b6e87f5c1d722f2749c3a1f1344e2fd1e80 Mon Sep 17 00:00:00 2001
From: Nye Evans <nyeevans@outlook.com>
Date: Wed, 6 Jan 2021 11:21:59 +0000
Subject: [PATCH] reworked css

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,
---
 index.html                                 | 12 ++--
 pages/gallery/blog-post-default.css        |  4 ++
 pages/gallery/epq-project/epq-project.html | 20 +++---
 pages/mainpage.css                         | 75 ++++++++++------------
 4 files changed, 52 insertions(+), 59 deletions(-)

diff --git a/index.html b/index.html
index d92edc7..e1896f3 100644
--- a/index.html
+++ b/index.html
@@ -18,22 +18,22 @@
         </h1>
     </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. 
         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>
 
     <div style = "width: 100%; height: auto; text-align: center;">
         <img src = "images\ProfilePlaceholder.png" class = "profileImage orangeBorder">
     </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, 
         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.
         
-    </h3>
+    </div>
 
     <div class = "textBox" id = "galleryHeader">
         check out my work here:
@@ -50,9 +50,9 @@
         <button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
     </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:
-    </h4>  
+    </div>  
 
     <div id = "socialBar">
         <!--
diff --git a/pages/gallery/blog-post-default.css b/pages/gallery/blog-post-default.css
index c794472..16e118d 100644
--- a/pages/gallery/blog-post-default.css
+++ b/pages/gallery/blog-post-default.css
@@ -27,6 +27,10 @@ h1{
     padding: 2.5vh;
 }
 
+.videoEmbed{
+    text-align: center;
+}
+
 @media (orientation:portrait){
 
     h1{
diff --git a/pages/gallery/epq-project/epq-project.html b/pages/gallery/epq-project/epq-project.html
index d70d11a..19f6ca7 100644
--- a/pages/gallery/epq-project/epq-project.html
+++ b/pages/gallery/epq-project/epq-project.html
@@ -8,17 +8,15 @@
         </h1>
         <h2>What it is</h2>
         <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" 
-            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
-            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) 
-            and I chose a new subject with my EPQ being titled "Self-Taught design for physics simulations in virtual reality" 
-            <br><br>
-            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
-            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
-            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 
-            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
-            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
+            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 
+            (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. 
+            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>
+
+            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 
+            real world.
+        </div>
+        <div class = "videoEmbed">
+            <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>
         </div>
         <h2>What I did</h2>
     </body>
diff --git a/pages/mainpage.css b/pages/mainpage.css
index 6211790..c02dec7 100644
--- a/pages/mainpage.css
+++ b/pages/mainpage.css
@@ -5,12 +5,14 @@
     font-weight: 100;
     src: url("../fonts/Roboto/RobotoMono-VariableFont_wght.ttf")
 }
+html{
+    font: 100%;
+}
 
 body{
     color: #ffd256;
-    font-family: "roboto";
     background-color: #181818;
-    
+    font-family: "roboto";
 }
 
 button{
@@ -24,14 +26,8 @@ button:focus {
     outline: none;
 }
 
-
-h1, h2, h3, h4{
-    font-size: clamp(18px, 1.4vw, 70px);
-    padding: 1.3vh;
-}
-
 h1{ 
-    font-size: clamp(20px, 4vw, 170px);
+    font-size: clamp(1.2rem, 4vw, 4rem);
 
     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{
     border: 2px solid #ffd256;
     border-radius: 5px;
@@ -72,18 +50,21 @@ h4{
 
 .textBox{
     text-align: center;
-    font-size: 1.3vw;
-
-    padding: 2.5vh;
+    font-size: clamp(1rem, 1.2vw, 3rem);
+    padding: 1.3vh;
+    margin-top: 8vh;
+    margin-bottom: 8vh;
+    margin-left: 10vw;
+    margin-right: 10vw;
 }
 
 #galleryHeader{
-    margin-left: 35vw; 
-    margin-right: 35vw;
+    margin-left: 30vw; 
+    margin-right: 30vw;
 
     border-radius: 5px;
 
-    font-size: 1.4vw;
+    font-size: clamp(1rem, 1.2vw, 3rem);
 } 
 
 #programGallery{
@@ -135,7 +116,7 @@ h4{
 
     padding: 5px;
 
-    font-size: 4vh;
+    font-size: 2rem;
 
     border-radius: 0;
     border-top-left-radius: 5px;
@@ -157,8 +138,7 @@ h4{
 
     padding: 5px;
 
-    font-size: 2vh;
-    line-height: 2.3vh; 
+    font-size: clamp(1rem, 1.2vw, 3rem)
 }
 
 .galleryLeftArrow{
@@ -175,6 +155,12 @@ h4{
     font-size: 7vw;
 }
 
+#outroText{
+    margin-top: 20vh;
+    margin-bottom: 30vh;
+    margin-left: 27vw;
+    margin-right: 27vw;
+}
 
 #socialBar{
     position: fixed;
@@ -184,7 +170,6 @@ h4{
     
     bottom: 0;
     left: 0 ;
-
 }
 
 
@@ -208,7 +193,7 @@ h4{
 
     }
 
-    h2, h3, h4{
+    .textBox{
         margin-top: 10vh;
         margin-bottom: 10vh;
         margin-left: auto;
@@ -239,11 +224,10 @@ h4{
         margin-left: 0; 
         margin-right: 0;
         border-radius: 0;
-        font-size: 3vw;
+        font-size: clamp(2rem, 3vw, 5rem);
     }
 
-    #programGallery{   
-        height: 70vh;
+    #programGallery{
         width: 100%;
 
         
@@ -297,7 +281,7 @@ h4{
         grid-column: 1/13;
         grid-row: 8/13;
     
-        font-size: 4vw; 
+        font-size: clamp(1rem, 3vw, 5rem); 
 
         border: 5px solid #ffd256;
         border-left: 0;
@@ -317,6 +301,13 @@ h4{
         font-size: 7vw;
     }
 
+    #outroText{
+        margin-top: 20vh;
+        margin-bottom: 30vh;
+        margin-left: 5vw;
+        margin-right: 5vw;
+    }
+
     #socialBar{
         position: static;
         font-size: 3vw;