From 56aa9f7d321b3c24c6228a90fe09abfbe54e84fb Mon Sep 17 00:00:00 2001
From: ethanglide <ecook2489@gmail.com>
Date: Tue, 27 Aug 2024 16:18:59 -0400
Subject: [PATCH] Major style change

---
 index.html | 52 ++++++++++++++++++++++++++++------------------------
 style.css  | 46 ++++++++++++++++++++++++++++++++++++----------
 2 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/index.html b/index.html
index 7c93da8..d3bb892 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
         <link rel="icon" type="image/x-icon" href="Pictures/thedeer.ico">
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Ethan's Github</title>
     </head>
@@ -30,29 +30,33 @@
             </div>
             <div class="content">
                 <div>
-                    <div class="section">
-                        <h2>About</h2>
-                        <p>I am a 4th year Computer Science student at University of Toronto Scarborough with a focus on Software Development. Passionate in developing scalable, high quality web and games software with readable, optimized, and well tested code. In my spare time, my main hobby is music. I play Trombone and Piano, and enjoy most to play jazz music.</p>
-                    </div>
-                    <div class="section">
-                        <h2>Skills</h2>
-                        <ul>
-                            <li style="margin: 0;">
-                                6+ years experience programming in C/C++, C#, Java, Python, HTML/CSS, JavaScript
-                            </li>
-                            <li>
-                                Solid Full-Stack Web Development experience with React/Next.js frontend, Express.js backend API
-                            </li>
-                            <li>
-                                Experienced in SQL (PostgreSQL, SQLite) and NoSQL (MongoDB, Firebase Realtime DB) databases
-                            </li>
-                            <li>
-                                Strong DevOps skills with AWS: API Gateway, Lambda, EC2, S3, CodePipeline
-                            </li>
-                            <li>
-                                Effective communication for working in collaborative groups
-                            </li>
-                        </ul>
+                    <div class="side-by-side">
+                        <div class="section">
+                            <h2>About</h2>
+                            <p>I am a 4th year Computer Science student at University of Toronto Scarborough with a focus on Software Development.</p>
+                            <p>Passionate in developing scalable, high quality web and games software with readable, optimized, and well tested code.</p>
+                            <p>In my spare time, my main hobby is music. I play Trombone and Piano, and enjoy most to play jazz music.</p>
+                        </div>
+                        <div class="section">
+                            <h2>Skills</h2>
+                            <ul>
+                                <li style="margin: 0;">
+                                    6+ years experience programming in C/C++, C#, Java, Python, HTML/CSS, JavaScript
+                                </li>
+                                <li>
+                                    Solid Full-Stack Web Development experience with React/Next.js frontend, Express.js backend API
+                                </li>
+                                <li>
+                                    Experienced in SQL (PostgreSQL, SQLite) and NoSQL (MongoDB, Firebase Realtime DB) databases
+                                </li>
+                                <li>
+                                    Strong DevOps skills with AWS: API Gateway, Lambda, EC2, S3, CodePipeline
+                                </li>
+                                <li>
+                                    Effective communication for working in collaborative groups
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                     <div class="section">
                         <h2>Work Experience</h2>
diff --git a/style.css b/style.css
index 71f8b0d..34c4cbb 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #353535;
+    background-color: #212730;
     margin: 0;
     height: 100vh;
 }
@@ -12,8 +12,9 @@ main {
 
 p, h1, h2, h3, h4, h5, h6, li {
     color: #fff;
-    font-family: 'Roboto Slab', sans-serif;
-    font-weight: 100;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 500;
+    line-height: 1.6rem;
     margin: 0;
 }
 
@@ -60,6 +61,7 @@ div.profile-name img {
 
 div.profile-name h1 {
     font-size: 1.5rem;
+    font-weight: 600;
     padding: 0%;
 }
 
@@ -96,33 +98,43 @@ div.content {
     flex: 1 1 auto;
     overflow-y: auto;
     padding: 1rem;
+    justify-content: center;
 }
 
 div.content > div {
     display: flex;
-    width: 100%;
+    width: 70%;
     flex-flow: column;
     gap: 1rem;
+    padding-bottom: 1rem;
+}
+
+div.side-by-side {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
 }
 
 div.section {
     display: flex;
     flex-flow: column;
-    gap: 1rem;
-    padding: 0.7rem;
+    gap: 1.5rem;
+    padding: 2rem;
     border-radius: 0.5rem;
-    border: #18181800 0.15rem solid;
+    border: #151920 0.15rem solid;
+    background-color: #2d323b;
     transition: all 0.25s ease-out 0s;
 }
 
 div.section:hover {
-    border-color: #181818;
-    background-color: #414141;
+    border-color: #14171b;
+    background-color: #3d4450;
 }
 
 div.section h2 {
     font-size: 1.5rem;
     margin: 0%;
+    font-weight: 600;
 }
 
 div.languages-images {
@@ -285,7 +297,7 @@ div.experience-header {
     }
 
     div.profile-name h1 {
-        font-size: 1rem;
+        font-size: 1.1rem;
     }
 
     div.social-media {
@@ -323,4 +335,18 @@ div.experience-header {
     .large-list li {
         font-size: 1rem;
     }
+
+    div.side-by-side {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    div.content > div {
+        width: 100%;
+    }
+
+    div.section {
+        padding: 1rem;
+    }
 }
\ No newline at end of file