Started implementing cv in html

cv.html

@@ -26,7 +26,40 @@
 
         <div id="about-block" class="block"></div>
 
-        <div id="pdf-block" class="block"><div id="pdf-object"></div></div>
+        <div id="cv-block" class="block">
+
+          <h2 id="cv-title">Thomas Ballantyne</h2>
+
+          <div id="cv-left-column">
+
+            <h3 class="cv-sub-title">OBJECTIVE</h3>
+            <p class="cv-body-text">Passionate about STEM subjects, enjoys using physics and maths to problem solve, develop software and create useful devices. Works well as an independent contributor part of a global project team.</p>
+            <p class="cv-body-text">Hardworking and driven to achieve the best possible outcome, no matter the task. Likes applying skills to develop video games, producing 3D printed objects and learning cutting- edge technology. Not scared to ask questions to better understand the problems trying to be solved.</p>
+            <h3 class="cv-sub-title">SKILLS</h3>
+            <p class="cv-body-text">C++<br>Unreal Engine<br>HLSL<br>Gameplay Programming<br>Artificial Intelligence<br>Augmented Reality<br>Procedural Generation<br>Problem Solving<br>Teamwork<br>Fast Learner<br>Excel<br>PowerApps<br>SAP</p>
+            <h3 class="cv-sub-title">BASED</h3>
+            <p class="cv-body-text">Dundee, Scotland</p>
+            <h3 class="cv-sub-title">CONTANT</h3>
+            <p class="cv-body-text">07572 910193</p>
+            <p class="cv-body-text">[email protected]</p>
+            <h3 class="cv-sub-title">PORTFOLIO</h3>
+            <p class="cv-body-text">ThomasBGameDev.net</p>
+            <h3 class="cv-sub-title">OTHER INFORMATION</h3>
+            <p class="cv-body-text">Avid custom keyboard and DIY tech project enjoyer.</p>
+            <p class="cv-body-text">Most happy when writing code.</p>
+            <p class="cv-body-text">Loves Japanese culture and language.</p>
+            <p class="cv-body-text">Enjoys the benefits of going to the gym for positive mental health!</p>
+            <p class="cv-body-text">Likes to join Game Jams with friends.</p>
+          </div>
+
+          <div id="cv-right-column">
+
+            <h3 class="cv-sub-title">EDUCATION<hr class="cv-hr"></h3>
+            <p class="cv-body-text">Honours Project: `An Evaluation of Shallow Water Equations to Enhance Realism of Water in Real-Time Computer Games`</p>
+            <p class="cv-body-text">Knowledge and Experience gained through course:<br><span>&#8226;</span> Object-oriented Programming<br><span>&#8226;</span> Systems Development<br><span>&#8226;</span> Gameplay Programming<br><span>&#8226;</span> Graphics Programming<br><span>&#8226;</span> Artificial Intelligence<br><span>&#8226;</span> Augmented Reality<br><span>&#8226;</span> Client Based Projects<br><span>&#8226;</span> Multi-disciplinary Team Program Development<br><span>&#8226;</span> Developed Software to allow games to interact with Fitness Equipment<br><span>&#8226;</span> Final year dissertation on real-time fluid dynamics/water simulation in video games</p>
+          </div>
+
+        </div>
 
         <div id="social-block" class="block"></div>
 
@@ -41,11 +74,11 @@
         $("#social-block").load("/objects/social.html");
       });
     </script>
-
-    <script src="/scripts/pdfobject.js"></script>
 
+    <script src="/scripts/pdfobject.js"></script>
+
     <script>PDFObject.embed("/pdfs/CV.pdf", "#pdf-object");</script>
 
   </body>
 
-</html>
+</html>

index.html

@@ -47,4 +47,4 @@
 
   </body>
 
-</html>
+</html>

styles/global.css

@@ -312,16 +312,82 @@ html {
     line-height: 1.25;
   }
 
-  /* <---- PDF Block ----> */
+  /* <---- CV Block ----> */
 
-  #pdf-block {
+  #cv-block {
     grid-column: span 2;
     grid-row: span 3;
+
+    display: grid;
+    grid-template-columns: 37% 63%;
+    grid-template-rows: 20% auto-fit;
+
+    width: min(760px, 100%);
+    overflow: scroll;
   }
 
-  .pdfobject-container { 
-    width: 100%; 
-    height: 100%;
+  #cv-left-column {
+    text-align: center;
+
+    margin: 5%;
+    display: block;
+
+    border: 3px solid var(--primary-text-color);
+  }
+
+  #cv-right-column {
+    text-align: center;
+
+    margin-top: 5%;
+    margin-bottom: 5%;
+    margin-left: 0;
+    margin-right: 0;
+    display: block;
+  }
+
+  #cv-title {
+    text-align: left;
+    grid-column: span 2;
+    grid-row: span 1;
+    margin-left: 5%;
+
+
+    color: var(--primary-text-color);
+    font-family: RobotoMono-Regular;
+    text-decoration: none;
+    font-size: 56px;
+  }
+
+  .cv-sub-title {
+    text-align: left;
+    margin-left: 8%;
+    margin-top: 5%;
+    margin-bottom: 0;
+
+
+    color: var(--primary-text-color);
+    font-family: RobotoMono-Regular;
+    text-decoration: none;
+    font-size: 20px;
+  }
+
+  .cv-body-text {
+    text-align: left;
+    margin-left: 8%;
+    margin-right: 8%;
+
+
+    color: var(--secondary-text-color);
+    font-family: RobotoMono-Light;
+    text-decoration: none;
+    font-size: 11.5px;
+  }
+
+  .cv-hr {
+    display:inline-block; 
+    margin-left: 7.6%;
+    width:57.5%; 
+    vertical-align: middle;
   }
 
   /* <---- Fancy Scroll ----> */
@@ -354,12 +420,32 @@ html {
     width: min(380px, 100%);
   }
 
-  .pdfblock {
+  #cv-block {
     grid-column: span 1;
     grid-row: span 3;
 
     width: min(380px, 100%);
   }
+
+  #cv-title {
+    font-size: 28px;
+  }
+
+  .cv-sub-title {
+    font-size: 14px;
+  }
+
+  .cv-body-text {
+    font-size: 8.5px;
+  }
+
+  .cv-hr {
+    display:inline-block; 
+    margin-left: 7.6%;
+    width:57.5%; 
+    vertical-align: middle;
+  }
+
 }
 
 @media (max-width: 458px) {