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

Recolor
aerin-brown-codes · Sep 19, 2023 · 859e57d · 859e57d
2 parents 1f3941f + 3a4d825
commit 859e57d
Show file tree

Hide file tree

Showing 13 changed files with 136 additions and 54 deletions.
diff --git a/app/static/data/locations.json b/app/static/data/locations.json
@@ -2,7 +2,7 @@
   "members": [
     {
       "name": "Aerin",
-      "color": "purple",
+      "color": "blue",
       "locations": [
         {
           "name": "Peggy's Cove",

diff --git a/app/static/data/work.json b/app/static/data/work.json
@@ -1,15 +1,15 @@
 {
     "work" : [
         {
-            "holder": "Aerin",
-            "photo": "logo.svg",
+            "holder": "Tech",
+            "photo": "mlh.jpg",
             "position": "Site Reliability Engineering Fellow",
             "company": "Major League Hacking",
             "dates": "June 19 - Sept 8",
             "description": "The Site Reliability Engineering Program is an opportunity to learn how to be a great Site Reliability Engineer by completing an interactive curriculum getting you hands on experience with the tools used by thousands of companies around the world."
         }, 
         {
-            "holder": "Aerin",
+            "holder": "Tech",
             "photo": "mcgill-robotics.jpg",
             "position": "Software Programmer",
             "company": "McGill Robotics Team",
@@ -18,5 +18,5 @@
         }
     ],
 
-    "fellows" : ["Aerin"]
+    "fellows" : ["Tech"]
 }
diff --git a/app/static/img/favicon.ico b/app/static/img/favicon.ico
diff --git a/app/static/img/github.jpg b/app/static/img/github.jpg
diff --git a/app/static/img/icon.jpg b/app/static/img/icon.jpg
diff --git a/app/static/img/linkedin.jpg b/app/static/img/linkedin.jpg
diff --git a/app/static/img/logo.jpg b/app/static/img/logo.jpg
diff --git a/app/static/img/logo.svg b/app/static/img/logo.svg
diff --git a/app/static/img/mlh.JPG b/app/static/img/mlh.JPG
diff --git a/app/static/styles/main.css b/app/static/styles/main.css
@@ -1,7 +1,15 @@
+/*
+Color palette:
+Blue - #32c2c9
+Dark - #312b40
+Light - #edfcfc 
+*/
+
 p, h1, h2, h3, h4, h5, h6, button {
     font-family: "Roboto", serif;
     margin-right: 10px;
     margin-left: 15px;
+    color: #edfcfc;
 }
 
 textarea {  
@@ -13,7 +21,7 @@ html {
 }
 
 body {
-    background-color: #f5f5f9;
+    background-color: #312b40;
     background-size: cover;
     width: auto; 
     overflow-x: hidden;
@@ -24,7 +32,7 @@ body {
 .nav-bar {
     width: 100%;
     display: inline-block;
-    background-color: #1C539F;
+    background-color: #32c2c9;
     font-family: "Roboto", serif;
     font-weight: 700 !important;
     padding-top: 10px;
@@ -64,6 +72,17 @@ body {
     width: 200px;
 }
 
+.nav-external {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 1em;
+}
+
+.nav-external img {
+    width: 30px;
+}
+
 .nav-content nav {
     display: block;
     width: 100%;
@@ -81,7 +100,7 @@ body {
 }
 
 .nav-icon i {
-    color: white;
+    color: #312b40;
     font-size: 1.5em;
 }
 
@@ -97,7 +116,7 @@ body {
 }
 
 .nav-menu li a {
-    color: white;
+    color: #312b40;
     text-decoration: none;
     font-size: 1.2em;
     transition: color 0.3s ease-in-out;
@@ -119,15 +138,15 @@ body {
 
 .nav-menu li a:hover::after {
     width: 100%;
-    background-color: #f8b92a;
+    background-color: #312b40;
 }
 
 .section {
     padding-top: 70px;
 }
 
 .profile {
-    background-color: #1d539f !important;
+    background-color: #32c2c9 !important;
     text-align: center;
     height: auto;
     margin-bottom: 10px;
@@ -136,7 +155,7 @@ body {
 .profile h1 {
     font-size: 3em;
     font-weight: 700;
-    color: white;
+    color: #edfcfc;
     margin-bottom: 0px;
 }
 
@@ -157,7 +176,7 @@ body {
 .banner {
     padding: 20px 0px 50px 0px;
     height: 150px;
-    background-color: #1d539f;
+    background-color: #32c2c9;
 }
 
 .banner .logo {
@@ -168,7 +187,7 @@ body {
 }
 
 .banner .title {
-    color: white;
+    color: #edfcfc;
     font-size: 50px;
     font-weight: 700;
 }
@@ -180,7 +199,7 @@ body {
 .about-us h2 {
     margin-right: 10px;
     margin-left: 15px;
-    color: #1C539F;
+    color: #32c2c9;
     font-size: 40px;
     text-align: center;
     text-underline-offset: 5px;
@@ -205,7 +224,7 @@ body {
     margin-right: 10%;
     margin-left: 10%;
     margin-bottom: 2%;
-    background-color: #dbdfe7;
+    background-color: #edfcfc;
     column-gap: 10px;
 }
 
@@ -225,17 +244,17 @@ body {
 }
 
 .work .work-selector-button.active {
-    background-color: #1C539F;
-    color: #f5f5f9;
+    background-color: #32c2c9;
+    color: #312b40;
 }
 
 .work .work-selector-button.inactive {
     background-color: #f5f5f9;
-    color: #1C539F;
+    color: #312b40;
 }
 
 .work h2 {
-    color: #1C539F;
+    color: #32c2c9;
     font-size: 2.5em;
     text-align: center;
     text-underline-offset: 0.15em;
@@ -244,11 +263,13 @@ body {
 .work h3 {
     margin: 0px 0px 0px 0px;
     font-size: 1.875em;
+    color: #312b40;
 }
 
 .work h4 {
     font-size: 1.3em;
     margin: 0px 0px 3px 0px;
+    color: #312b40;
 }
 
 .work img {
@@ -294,14 +315,14 @@ body {
 .map-container h2 {
     font-size: 2em;
     font-weight: 700;
-    color: #2b2b2b;
+    color: #edfcfc;
     margin-bottom: 20px;
 }
 
 .map-container p {
     font-size: 1.5em;
     font-weight: 400;
-    color: #2b2b2b;
+    color: #edfcfc;
 }
 
 .map-container .map-text {
@@ -344,7 +365,7 @@ body {
 }
 
 .education-section .timeline-content {
-    background: white;
+    background: #edfcfc;
     padding: 2rem;
     border-radius: 15px;
 }
@@ -367,7 +388,7 @@ body {
 
 .education-section li {
     padding-bottom: 1.5rem;
-    border-left: 1px solid #1d539f;
+    border-left: 1px solid #32c2c9;
     position: relative;
     padding-left: 20px;
     margin-left: 10px;
@@ -380,8 +401,8 @@ body {
         content: '';
         width: 1em;
         height: 1em;
-        background: white;
-        border: 1px solid #1d539f;
+        background: #edfcfc;
+        border: 1px solid #32c2c9;
         box-shadow: 3px 3px 0px #96b4df;
         border-radius: 50%;
         position: absolute;
@@ -391,12 +412,12 @@ body {
 }
 
 .education-section .timeline-content .timeline-item .timeline-date{
-    color: #1d539f;
+    color: #32c2c9;
     font-weight: 500;
 }
 
 .education-section .timeline-content .timeline-item .timeline-education h3 {
-    color: #2b2b2b;
+    color: #312b40;
     font-weight: 500;
 }
 
@@ -410,15 +431,15 @@ body {
     padding: 10px 20px;
     border: none;
     background-color: #f5f5f9;
-    color: #1d539f;
+    color: #312b40;
     font-size: 1em;
     cursor: pointer;
     transition: background-color 0.5s;
 }
 
 .education-section .member-tabs .tab-button.active {
-    background-color: #1d539f;
-    color: #f5f5f9;
+    background-color: #32c2c9;
+    color: #312b40;
 }
 
 .education-section .member-tabs {
@@ -447,8 +468,8 @@ body {
 }
 
 .hobby img {
-    height: 300px;
-    width: 350px;
+    height: 250px;
+    width: 250px;
     object-fit: cover;
 }
 
@@ -487,6 +508,12 @@ form {
     grid-row: 3;
     justify-items: left;
     height: 30px;
+    color:#312b40;
+    background-color: #edfcfc;
+
+    &:hover {
+        background-color:#32c2c9;
+    }
 }
 
 input[type=text]:focus, input[type=email]:focus, textarea:focus {
@@ -508,7 +535,7 @@ input[type=text]:focus, input[type=email]:focus, textarea:focus {
 .messages .display-messages h1 {
     font-size: 1.5em;
     font-weight: 500;
-    color: #1d539f;
+    color: #32c2c9;
     margin-bottom: 0px;
     padding-bottom: 0px;
 }
@@ -522,6 +549,13 @@ input[type=text]:focus, input[type=email]:focus, textarea:focus {
     font-style: italic;
 }
 
+.education-section h2 {
+    color: #32c2c9;
+    font-size: 2.5em;
+    text-align: center;
+    text-underline-offset: 0.15em;
+}
+
 /* Media Queries */
 @media (max-width: 920px) {
     .nav-content nav {
@@ -537,7 +571,7 @@ input[type=text]:focus, input[type=email]:focus, textarea:focus {
         right: -50%;
         width: 50%;
         height: 100vh;
-        background-color: #1d539f;
+        background-color: #32c2c9;
         transition: right 0.5s ease;
     }
     .nav-content nav ul li {

diff --git a/app/templates/hobbies.html b/app/templates/hobbies.html
@@ -24,10 +24,35 @@
         <div class="nav-content">
             <a href="/">
                 <div class="nav-logo">
-                    <img src="./static/img/logo.svg" />
+                    <img src="./static/img/logo.jpg" />
                 </div>
             </a>
+            <a href="https://github.com/aerin-brown-codes">
+                <div class="nav-external">
+                    <img src="./static/img/github.jpg" />
+                </div>
+            </a>
+            <a href="https://www.linkedin.com/in/aerinbrown712/">
+                <div class="nav-external">
+                    <img src="./static/img/linkedin.jpg" />
+                </div>
+            </a>
+            <div class="nav-icon" onclick="toggleNav()">
+                <i class="fas fa-bars" id="icon"></i>
+            </div>
+            <nav>
+                <ul class="nav-menu" id="toggle-menu">
+                    <li><a href="/">Home</a></li>
+                    <li><a href="#about">About</a></li>
+                    <li><a href="#work">Experience</a></li>
+                    <li><a href="/hobbies">Hobbies</a></li>
+                    <li><a href="#education">Education</a></li>
+                    <li><a href="#map">Map</a></li>
+                    <li><a href="/timeline">Messages</a></li>
+                </ul>
+            </nav>
         </div>
+        <script defer src="{{ url_for('static', filename='scripts/navmenu.js') }}"></script> 
     </header>
 
     <div>