Merge pull request #9 from aerin-brown-codes/redesign

About Me Section
aerin-brown-codes · Nov 18, 2023 · bf0d6c1 · bf0d6c1
2 parents 95c7335 + 91565b2
commit bf0d6c1
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 72 deletions.
diff --git a/app/static/styles/main.css b/app/static/styles/main.css
@@ -5,15 +5,23 @@ Dark - #312b40
 Light - #edfcfc 
 */
 
-p, h1, h2, h3, h4, h5, h6, button {
-    font-family: "Roboto", serif;
+p, h1, h3, h4, h5, h6, button {
+    font-family: "Lucida Console", "Courier New", monospace;
     margin-right: 10px;
     margin-left: 15px;
     color: #edfcfc;
+    line-height: 1.5em;
+}
+
+h2 {
+    color: #32c2c9;
+    font-size: 40px;
+    font-family: "Lucida Console", "Courier New", monospace;
+    line-height: 1.5em;
 }
 
 textarea {  
-    font-family: "Roboto", serif;
+    font-family: "Lucida Console", "Courier New", monospace;
 }
 
 html {
@@ -25,15 +33,23 @@ body {
     background-size: cover;
     width: auto; 
     overflow-x: hidden;
-    font-family: "Roboto", serif;
+    font-family: "Lucida Console", "Courier New", monospace;
     margin: 0px;
 }
 
+hr {
+    border: 0;
+    border-top: 5px solid #32c2c9;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    background-color:#32c2c9;
+}
+
 .nav-bar {
     width: 100%;
     display: inline-block;
     background-color: #32c2c9;
-    font-family: "Roboto", serif;
+    font-family: "Lucida Console", "Courier New", monospace;
     font-weight: 700 !important;
     padding-top: 10px;
     padding-bottom: 10px;
@@ -145,72 +161,27 @@ body {
     padding-top: 70px;
 }
 
-.profile {
-    background-color: #32c2c9 !important;
-    text-align: center;
-    height: auto;
-    margin-bottom: 10px;
-}
-
-.profile h1 {
-    font-size: 3em;
-    font-weight: 700;
-    color: #edfcfc;
-    margin-bottom: 0px;
-}
-
-.profile img {
-    width: 12em;
-    height: 12em;
-    object-fit: cover;
-    border-radius: 50%;
-    margin: 10px;
-}
-
-.profile .profile-picture {
+.about-us {
+    padding-top: 0px;
     display: flex;
+    align-items: center;
     justify-content: center;
-    flex-wrap: wrap;
 }
 
-.banner {
-    padding: 20px 0px 50px 0px;
-    height: 150px;
-    background-color: #32c2c9;
+.about-us img {
+    max-width: 20%;
+    flex-basis: 10%;
+    margin: 1em;
+    border: 5px solid #32c2c9;
 }
 
-.banner .logo {
-    max-width:180px;
-    max-height:60px;
-    width: auto;
-    height: auto;
-}
-
-.banner .title {
-    color: #edfcfc;
-    font-size: 50px;
-    font-weight: 700;
-}
-
-.about-us {
-    padding-top: 0px;
-}
-
-.about-us h2 {
+.about-us .text h2 {
     margin-right: 10px;
     margin-left: 15px;
-    color: #32c2c9;
-    font-size: 40px;
-    text-align: center;
-    text-underline-offset: 5px;
     margin-top: 0px;
     padding-top:0px;
 }
 
-.about-us h3 {
-    font-size: 30px;
-}
-
 .work .work-experience.inactive {
     display: none;
 }

diff --git a/app/templates/index.html b/app/templates/index.html
@@ -60,24 +60,17 @@
         <script defer src="{{ url_for('static', filename='scripts/navmenu.js') }}"></script> 
     </header>
 
-    <div class="profile">
-        <div id="profile-picture" class="profile-picture">
-            <!-- Add your profile picture here -->
-            <img src="./static/img/aerin.jpg" alt="Aerin Brown">
+    <div class="about-us section" id="about">
+        <div class="text">
+            <h2>About Me</h2>
+            <p>Aerin Brown is an incoming second-year Software Engineering student at McGill University, and attends as a Schulich Leader Scholar. She began programming at twelve years old to follow her blossoming passion in robotics, artificial intelligence, and game design. Now, she is part of the McGill Robotics team and works on inverse kinematics and pathfinding algorithms for their Mars rover project. She also is an active member of the McGill Game Development club and the McGill Artificial Intelligence Society. She has participated in two hackathons: MAISHacks, in which her team won Best Beginner Project, and McGameJam. In the future, she hopes to continue exploring various areas of Software Engineering through internships and freelance projects.</p>
         </div>
-        <h1>{{ title }}</h1>
+        <img src="./static/img/aerin.jpg" alt="Aerin Brown">
     </div>
 
-    <div class="about-us section" id="about">
-      <! -- About Us Section -->
-        <h2><u>About Me</u></h2>
-        {% for person in about_us %}
-            <p>{{person.text}}</p>
-        {% endfor %}
-    </div>
+    <hr>
 
   <div class="education-section">  
-    <!-- Education Section -->
     <div class="education-section section" id="education">
         <h2><u>Education</u></h2>