wip

PScottZero · Dec 10, 2024 · deff9e5 · deff9e5
1 parent 5871645
commit deff9e5
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 73 deletions.
diff --git a/app/components/banner/banner.module.scss b/app/components/banner/banner.module.scss
@@ -2,17 +2,16 @@
 
 .banner {
   display: grid;
-  grid-template-columns: $profile-size 1fr;
-  width: 100%;
-  min-height: $card-height;
+  grid-template-rows: 1fr;
+  grid-template-columns: auto 1fr;
   background: url("/images/banner.jpg");
   background-size: cover;
   background-position: 50%;
 
   @include mobile {
-    grid-template-rows: 14rem 1fr;
+    grid-template-rows: auto 1fr;
     grid-template-columns: 1fr;
-    font-size: 16px;
+    font-size: $medium-font-size;
   }
 }
 
@@ -23,31 +22,33 @@
 
   img {
     @include content-border;
-    border-width: 4px;
-    width: $profile-size - 4rem;
+    border-width: $border-size * 2;
+    width: $profile-size;
     height: auto;
+    margin: $banner-margin;
   }
 
   @include mobile {
-    font-size: 16px;
-
     img {
-      width: 11rem;
+      width: $profile-size-mobile;
+      margin: $banner-margin-mobile;
     }
   }
 }
 
 .description {
   @include flex-center;
-  font-size: 20px;
-  line-height: 2;
-  padding: 1rem;
-  text-shadow: 0 0 4px black;
+  margin: $banner-margin;
+  margin-left: 0;
+  font-size: $large-font-size;
   font-weight: bold;
+  line-height: 2;
   color: white;
+  text-shadow: $description-shadow;
 
   @include mobile {
-    line-height: 1.5;
-    padding-top: 0;
+    margin: $banner-margin-mobile;
+    margin-top: 0;
+    font-size: $medium-font-size;
   }
 }
diff --git a/app/components/banner/banner.tsx b/app/components/banner/banner.tsx
@@ -17,10 +17,10 @@ export default function Banner() {
         </div>
         <div className={styles.description}>
           Howdy! My name is Paul Scott, and I am a software engineer at Vistar
-          Media. I obtained my MSE in Computer & Information Science from the
-          University of Pennsylvania, and obtained my BS in Computer Science
-          from Penn State. My areas of interest are computer graphics,
-          distributed systems, emulation, machine learning, and web development.
+          Media. I received my MSE in Computer & Information Science from the
+          University of Pennsylvania, and my BS in Computer Science from Penn
+          State. My areas of interest are computer graphics, distributed
+          systems, emulation, machine learning, and web development.
         </div>
       </div>
     </Window>

diff --git a/app/components/card/card.module.scss b/app/components/card/card.module.scss
@@ -19,13 +19,13 @@
 }
 
 .title {
-  font-size: $medium-font-size;
+  font-size: $large-font-size;
   font-weight: bold;
 }
 
 .description {
   position: relative;
-  font-size: $regular-font-size;
+  font-size: $medium-font-size;
 }
 
 .image {

diff --git a/app/components/footer/footer.module.scss b/app/components/footer/footer.module.scss
@@ -2,7 +2,7 @@
 
 .footer {
   width: 100%;
-  font-size: $medium-font-size;
+  font-size: $large-font-size;
   line-height: 1.5;
   text-align: center;
   padding-top: $window-spacing * 2;

diff --git a/app/components/footer/footer.tsx b/app/components/footer/footer.tsx
@@ -6,7 +6,7 @@ export default function Footer() {
       Email at <a href="mailto:[email protected]">[email protected]</a>{" "}
       or call at (215) 880-9592
       <br />
-      Updated December 8<sup>th</sup>, 2024
+      Updated December 9<sup>th</sup>, 2024
     </footer>
   );
 }
diff --git a/app/components/header/header.module.scss b/app/components/header/header.module.scss
@@ -6,7 +6,7 @@
   position: sticky;
   top: 0;
   width: 100%;
-  padding: $large-border;
+  padding: $border-size * 2;
   background: $header-color;
 }
 

diff --git a/app/components/header/header.tsx b/app/components/header/header.tsx
@@ -30,7 +30,7 @@ export default function Header() {
         <div className={styles.pageLinks}>
           <a href="#experience">Experience</a>
           <a href="#education">Education</a>
-          <a href="#top-languages">Skills</a>
+          <a href="#languages">Skills</a>
           <a href="#projects">Projects</a>
           <a href="#grad-courses">Courses</a>
           <a href="#hobbies">Hobbies</a>

diff --git a/app/components/section/section.tsx b/app/components/section/section.tsx
@@ -29,12 +29,12 @@ function getCardDims(columns: number, lessColumns: number): CardDims {
   dims.width = getCardWidth(columnsAdjusted);
 
   if (columnsAdjusted == 2 && lessColumns == 2) {
-    dims.titleSize = variables.regularFontSize;
+    dims.titleSize = variables.mediumFontSize;
     dims.descriptionSize = variables.smallFontSize;
     dims.labelPadding = `calc(${variables.cardSpacing} / 2)`;
   } else {
-    dims.titleSize = variables.mediumFontSize;
-    dims.descriptionSize = variables.regularFontSize;
+    dims.titleSize = variables.largeFontSize;
+    dims.descriptionSize = variables.mediumFontSize;
     dims.labelPadding = variables.cardSpacing;
   }
 

diff --git a/app/components/window/window.module.scss b/app/components/window/window.module.scss
@@ -28,7 +28,7 @@
   grid-template-columns: $title-bar-height 1fr $title-bar-height $title-bar-height;
   grid-template-rows: $title-bar-height;
   text-align: center;
-  font-size: $medium-font-size;
+  font-size: $large-font-size;
 }
 
 .title {
@@ -45,7 +45,7 @@
   height: 2.5rem;
   color: $menu-font-color;
   background-color: $menu-color;
-  font-size: $medium-font-size;
+  font-size: $large-font-size;
 
   span {
     margin-left: 1rem;
@@ -90,7 +90,7 @@
   @include content-border;
   background: $content-color;
   height: $title-bar-height;
-  font-size: 20px;
+  font-size: $large-font-size;
   padding-left: $card-spacing;
 }
 

diff --git a/app/constants.module.scss b/app/constants.module.scss
@@ -12,9 +12,9 @@
 // $content-color: #c6b2a8;
 // $content-border-color1: #e7deda;
 // $content-border-color2: #6a605a;
-// $page-links-color: #4992a7;
-// $page-links-border-color1: #adced7;
-// $page-links-border-color2: #244953;
+// $page-links-color: #8998aa;
+// $page-links-border-color1: #cad1d9;
+// $page-links-border-color2: #464d56;
 // $background-color: #4992a7;
 
 /* solaris colors */
@@ -38,32 +38,28 @@ $background-color: #524a8c;
 
 /* font sizes */
 $small-font-size: 12px;
-$regular-font-size: 16px;
-$medium-font-size: 20px;
-$large-font-size: 24px;
+$medium-font-size: 16px;
+$large-font-size: 20px;
 
 /* dimensions */
 $window-spacing: 1.5rem;
 $card-spacing: 0.5rem;
 $border-size: 1.75px;
-$large-border: $border-size * 2;
-$min-width: 60rem;
-$profile-size: 20rem;
-$small-profile-size: 16rem;
-$card-height: 20rem;
-$medium-card-height: 17.5rem;
-$small-card-height: 15rem;
-$mobile-card-height: 70vmin;
-$mobile-small-card-height: 70vmin / 2;
+$banner-margin: 2rem;
+$banner-margin-mobile: 1rem;
+$profile-size: 16rem;
+$profile-size-mobile: 12rem;
+$description-padding: 1rem;
+$description-shadow: 0 0 4px black;
 $title-bar-height: 2rem;
 $corner-size: calc($title-bar-height + $border-size * 3);
 $mobile-cutoff: 640px;
 
 :export {
   cardSpacing: $card-spacing;
   smallFontSize: $small-font-size;
-  regularFontSize: $regular-font-size;
   mediumFontSize: $medium-font-size;
+  largeFontSize: $large-font-size;
 }
 
 @mixin mobile {

diff --git a/app/globals.scss b/app/globals.scss
@@ -9,9 +9,6 @@
 html,
 body {
   max-width: 100vw;
-  // background-image: url("../public/images/background.png");
-  // background-repeat: repeat;
-  // background-size: 10rem;
   background-color: $background-color;
   color: black;
 }

diff --git a/app/page.module.scss b/app/page.module.scss
@@ -9,6 +9,6 @@
   @media screen and (max-width: $mobile-cutoff) {
     max-width: 100%;
     padding: 0 0.5rem;
-    margin: 0.5rem auto;
+    margin: 0.5rem auto $window-spacing auto;
   }
 }
diff --git a/public/content.json b/public/content.json
@@ -61,9 +61,9 @@
     ]
   },
   {
-    "sectionId": "top-languages",
+    "sectionId": "languages",
     "imageFolder": "skills",
-    "title": "Top Programming Languages",
+    "title": "Programming Languages",
     "columns": 4,
     "content": [
       {
@@ -97,27 +97,11 @@
       {
         "title": "Python",
         "image": "python.svg"
-      }
-    ]
-  },
-  {
-    "sectionId": "other-languages",
-    "imageFolder": "skills",
-    "title": "Other Programming Languages",
-    "columns": 4,
-    "content": [
-      {
-        "title": "Julia",
-        "image": "julia.svg"
       },
       {
         "title": "PHP",
         "image": "php.svg"
       },
-      {
-        "title": "Rust",
-        "image": "rust.svg"
-      },
       {
         "title": "Swift",
         "image": "swift.jpg"
@@ -312,7 +296,7 @@
   },
   {
     "sectionId": "grad-courses",
-    "title": "Graduate Courses @ UPenn",
+    "title": "Graduate Courses",
     "columns": 4,
     "content": [
       {
@@ -369,7 +353,7 @@
   },
   {
     "sectionId": "ugrad-courses",
-    "title": "Undergraduate Courses @ Penn State",
+    "title": "Undergraduate Courses",
     "columns": 4,
     "content": [
       {
@@ -472,7 +456,7 @@
   },
   {
     "sectionId": "hobbies",
-    "title": "Hobbies + Interests",
+    "title": "Hobbies & Interests",
     "columns": 4,
     "content": [
       {

diff --git a/public/icons/linkedin.png b/public/icons/linkedin.png