diff --git a/app/components/banner/banner.module.scss b/app/components/banner/banner.module.scss
index febf156..8fc1c4b 100644
--- 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
index 7c5f531..2f59ec9 100644
--- a/app/components/banner/banner.tsx
+++ b/app/components/banner/banner.tsx
@@ -17,10 +17,10 @@ export default function Banner() {
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.
diff --git a/app/components/card/card.module.scss b/app/components/card/card.module.scss
index 89a1771..5619c23 100644
--- 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
index da5fb97..037195e 100644
--- 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
index d877876..4682998 100644
--- a/app/components/footer/footer.tsx
+++ b/app/components/footer/footer.tsx
@@ -6,7 +6,7 @@ export default function Footer() {
Email at
Experience
Education
-
Skills
+
Skills
Projects
Courses
Hobbies
diff --git a/app/components/section/section.tsx b/app/components/section/section.tsx
index 1e844a6..d0c9678 100644
--- 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
index 7654173..87f982b 100644
--- 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
index c63eba3..bdcfd73 100644
--- 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,23 +38,19 @@ $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;
@@ -62,8 +58,8 @@ $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
index d60949b..e3a5278 100644
--- 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
index 5854638..1a25e44 100644
--- 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
index afdaa1c..3a8b977 100644
--- 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
index aedea96..3abdcd6 100644
Binary files a/public/icons/linkedin.png and b/public/icons/linkedin.png differ