migrated layout grid -> flex

cos-glitch · Sep 2, 2024 · 4da1a4e · 4da1a4e
1 parent 31c37a2
commit 4da1a4e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 14 deletions.
diff --git a/aboutme.html b/aboutme.html
@@ -120,19 +120,37 @@ <h3>Languages:</h3>
 
 
         <div class="layout-div2">
-            <h2> About Me: </h2>
-
-            <p>I'm a BSc Computer Science graduate with First Class Honours from Swansea University, equipped with a strong foundation in logic, ML, and software development.</p>
-
-            <p>In my final year of university I wrote my dissertation titled "Machine Learning Assessment of Novel Biomarkers for Aggressive Prostate Cancer," which earned a 95% score. This project highlights my proficiency in applying ML to real-world healthcare challenges, a field I'm deeply passionate about.</p>
+            <div class="layout-div2-inner">
+                <h2> About Me: </h2>
 
-            <p>I have developed skills in Python, SQL, and Git, and I'm continually expanding my knowledge in ML, as well as medicine, through both academic and personal projects. My goal is to use these skills to innovate within the healthcare industry, using ML to advance medical research and improve patient outcomes.</p>
+                <p>I'm a BSc Computer Science graduate with First Class Honours from Swansea University, equipped with a strong foundation in logic, ML, and software development.</p>
+
+                <p>In my final year of university I wrote my dissertation titled "Machine Learning Assessment of Novel Biomarkers for Aggressive Prostate Cancer," which earned a 95% score. This project highlights my proficiency in applying ML to real-world healthcare challenges, a field I'm deeply passionate about.</p>
+
+                <p>I have developed skills in Python, SQL, and Git, and I'm continually expanding my knowledge in ML, as well as medicine, through both academic and personal projects. My goal is to use these skills to innovate within the healthcare industry, using ML to advance medical research and improve patient outcomes.</p>
+            </div>
+
+            <div class="layout-div2-inner">
+                <h2>Education:</h2>
 
+                <p style="font-size: 24px; margin-bottom: 5px;">Swansea University 2021 - 2024</p>
+
+                <p class="italics" style="margin-top: 5px;">First Class Honours BSc in Computer Science</p>
+
+                <p>Course Highlights:</p>
+                <ul>
+                    <li>Dissertation project: 95%: <p style="font-style: italic;"> Data Science, Medical Data, ML prediction, Excel, Prostate Cancer grading, Python + Libraries</p></li>
+                    <li>Algorithms: 77%: <p style="font-style: italic;"> Data structures, Algorithms, Complexities</p></li>
+                    <li>Database Systems: 74%: <p style="font-style: italic;"> MySQL, Relational databases, ACID properties</p></li>
+                    <li>Big Data & Machine Learning: 69%: <p style="font-style: italic;">Big Data handling, ML algorithms, Pipelines, ETL, Python, SciKit, Feature selection, Analysis</p></li>
+                    <li>Logic for Computer Science: 87%: <p style="font-style: italic;">Propositional, Normal Forms, Natural Deduction, Predicate, Gödel</p></li>
+                </ul>
+            </div>
         </div>
 
 
 
-        <div class="layout-div2">
+        <!-- <div class="layout-div2">
             <h2>Education:</h2>
 
             <p style="font-size: 24px; margin-bottom: 5px;">Swansea University 2021 - 2024</p>
@@ -147,7 +165,7 @@ <h2>Education:</h2>
                 <li>Big Data & Machine Learning: 69%: <p style="font-style: italic;">Big Data handling, ML algorithms, Pipelines, ETL, Python, SciKit, Feature selection, Analysis</p></li>
                 <li>Logic for Computer Science: 87%: <p style="font-style: italic;">Propositional, Normal Forms, Natural Deduction, Predicate, Gödel</p></li>
             </ul>
-        </div>
+        </div> -->
 
     </div>
 

diff --git a/styles.css b/styles.css
@@ -92,17 +92,19 @@ h3 {
 /* Layout */
 
 .layout-container {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
+    /* display: grid; */
+    display: flex;
+    /* grid-template-columns: 1fr 2fr; */
     margin-top: 25px;
     gap: 20px;
 }
 
 .layout-div1 {
+    flex: 1;
     width: auto;
     max-width: fit-content;
     position: relative;
-    grid-column: 1/2;
+    /* grid-column: 1/2; */
     padding: 10px;
     background-color: #fff;
     /* padding: 20px; */
@@ -111,19 +113,29 @@ h3 {
 }
 
 .layout-div2 {
+    display: flex;
+    flex: 2;
+    flex-direction: column;
     width: auto;
     max-width: 600px;
     height: auto;
-    grid-column: 2/3;
-    position: relative;
+    /* grid-column: 2/3; */
+    /* position: relative; */
     padding: 20px;
     padding-right: 20px;
     background-color: #fff;
-    /* padding: 20px; */
     border-radius: 10px;
     /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
 }
 
+.layout-div2-inner {
+    padding: 20px;
+    padding-right: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+
+}
+
 /* .layout-div1 h2,
 .layout-div2 h2 {
     position: absolute;