wip

app/components/banner/banner.module.scss

@@ -3,13 +3,11 @@
 .banner {
   display: grid;
   grid-template-columns: $profile-size 1fr;
-  border-radius: $border-radius;
   width: 100%;
   min-height: $card-height;
   background: url("/images/banner.jpg");
   background-size: cover;
   background-position: 50%;
-  box-shadow: $box-shadow;
 }
 
 .profile {
@@ -23,8 +21,7 @@
 .profile img {
   width: calc($profile-size) - 4rem;
   height: auto;
-  border-radius: $border-radius;
-  border: 4px solid $font-color;
+  border: 6px ridge $font-color;
 }
 
 .description {
@@ -35,6 +32,7 @@
   line-height: 2;
   padding: 1rem;
   text-shadow: 0 0 4px black;
+  font-weight: bold;
 }
 
 @media screen and (max-width: 640px) {

app/components/banner/banner.tsx

@@ -1,26 +1,29 @@
 import Image from "next/image";
 import styles from "./banner.module.scss";
+import Window from "../window/window";
 
 export default function Banner() {
   return (
-    <div className={styles.banner}>
-      <div className={styles.profile}>
-        <Image
-          src="/images/profile.jpg"
-          alt="Picture of me"
-          width={512}
-          height={512}
-          priority={true}
-        />
+    <Window title="About Me">
+      <div className={styles.banner}>
+        <div className={styles.profile}>
+          <Image
+            src="/images/profile.jpg"
+            alt="Picture of me"
+            width={512}
+            height={512}
+            priority={true}
+          />
+        </div>
+        <div className={styles.description}>
+          Hello! My name is Paul Scott. I am a software engineer at Vistar
+          Media. I obtained my master&apos;s in computer and information science
+          from the University of Pennsylvania, and I obtained my bachelor&apos;s
+          degree in computer science from Penn State. My areas of interest are
+          computer graphics, distributed systems, emulation, machine learning,
+          software engineering, and web development.
+        </div>
       </div>
-      <div className={styles.description}>
-        Hello! My name is Paul Scott. I am a software engineer at Vistar Media.
-        I obtained my master&apos;s in computer and information science from the
-        University of Pennsylvania, and I obtained my bachelor&apos;s degree in
-        computer science from Penn State. My areas of interest are computer
-        graphics, distributed systems, emulation, machine learning, software
-        engineering, and web development.
-      </div>
-    </div>
+    </Window>
   );
 }

app/components/card/card.module.scss

@@ -5,9 +5,7 @@
   transition: 0.1s;
   aspect-ratio: 4/3;
   background-color: $primary-color;
-  border-radius: $border-radius;
   overflow: hidden;
-  box-shadow: $box-shadow;
 }
 
 .label {

app/components/footer/footer.module.scss

@@ -1,11 +1,10 @@
 @import "../../constants.module.scss";
 
 .footer {
-  @include primary-style;
   width: 100%;
   font-size: 20px;
+  font-weight: bold;
   line-height: 1.5;
-  margin-top: $spacing;
   text-align: center;
   padding: 4rem 2rem;
 }

app/components/footer/footer.tsx

@@ -1,12 +1,16 @@
+import Window from "../window/window";
 import styles from "./footer.module.scss";
 
 export default function Footer() {
   return (
-    <footer className={styles.footer}>
-      Email at <a href="mailto:[email protected]">[email protected]</a>{" "}
-      or call at (215) 880-9592
-      <br />
-      Updated December 1<sup>st</sup>, 2024
-    </footer>
+    <Window title="Footer">
+      <footer className={styles.footer}>
+        Email at{" "}
+        <a href="mailto:[email protected]">[email protected]</a> or call
+        at (215) 880-9592
+        <br />
+        Updated December 1<sup>st</sup>, 2024
+      </footer>
+    </Window>
   );
 }

app/components/header/header.module.scss

@@ -1,14 +1,14 @@
 @import "../../constants.module.scss";
 
 .header {
+  @include double-border(3px, #d1d1d2, #4e4e4e);
   z-index: 1;
   position: sticky;
   top: 0;
   width: 100%;
   height: 4rem;
-  background: $primary-color;
+  background: #c6b2a8;
   padding: 0.75rem;
-  box-shadow: 0 4px 4px #00000055;
 }
 
 .header img {

app/components/section/section.module.scss

@@ -1,8 +1,8 @@
 @import "../../constants.module.scss";
 
 .section {
-  margin-top: -4rem;
-  padding-top: calc(4rem + $spacing);
+  // margin-top: -4rem;
+  // padding-top: calc(4rem + $spacing);
 }
 
 .title {
@@ -16,9 +16,12 @@
   height: 4rem;
   padding: 0 1rem;
   margin-bottom: $spacing;
-  background-color: $primary-color;
+  background-color: #4992A7;
   border-radius: $border-radius;
-  box-shadow: $box-shadow;
+}
+
+.titleBar {
+  background: #EDA870;
 }
 
 .cards {

app/components/section/section.tsx

@@ -1,4 +1,5 @@
 import Card, { CardData } from "../card/card";
+import Window from "../window/window";
 import styles from "./section.module.scss";
 
 export type SectionData = {
@@ -30,8 +31,9 @@ export default function Section({ data, flexShrink }: SectionProps) {
 
   return (
     <div id={data.sectionId} className={styles.section}>
-      <div className={styles.title}>{data.title}</div>
-      <div className={styles.cards}>{cards}</div>
+      <Window title={data.title}>
+        <div className={styles.cards}>{cards}</div>
+      </Window>
     </div>
   );
 }

app/components/window/window.module.scss

@@ -0,0 +1,77 @@
+@import "../../constants.module.scss";
+
+@mixin double-border($width, $color1, $color2) {
+  border-top: $width solid $color1;
+  border-left: $width solid $color1;
+  border-bottom: $width solid $color2;
+  border-right: $width solid $color2;
+}
+
+.outerWindow {
+  @include double-border(3.5px, #f7d9c0, #7d593b);
+  margin-top: $spacing;
+  background: #eda870;
+  padding: 4px;
+}
+
+.innerWindow {
+  @include double-border(1.75px, #7d593b, #f7d9c0);
+}
+
+.windowContent {
+  background: #c6b2a8;
+}
+
+.titleBar {
+  height: 2rem;
+  line-height: 2rem;
+  text-align: center;
+  font-size: 18px;
+}
+
+.menu {
+  @include double-border(1.75px, #adced7, #244953);
+  background-color: #4992A7;
+  height: 2.5rem;
+  line-height: 2.5rem;
+  font-size: 20px;
+
+  span {
+    margin-left: 1rem;
+  }
+}
+
+.button {
+  @include double-border(1.75px, #f7d9c0, #7d593b);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+}
+
+.close {
+  float: left;
+
+  div {
+    @include double-border(1.75px, #f7d9c0, #7d593b);
+    width: 1.2rem;
+    height: 0.4rem;
+  }
+}
+
+.minimize, .maximize {
+  float: right;
+}
+
+.minimize div {
+  @include double-border(1.75px, #f7d9c0, #7d593b);
+  width: 0.4rem;
+  height: 0.4rem;
+}
+
+.maximize div {
+  @include double-border(1.75px, #f7d9c0, #7d593b);
+  width: 1.2rem;
+  height: 1.2rem;
+}

app/components/window/window.tsx

@@ -0,0 +1,39 @@
+import styles from "./window.module.scss";
+
+type WindowProps = {
+  title: string;
+  children?: React.ReactNode;
+};
+
+export default function Window({ title, children }: WindowProps) {
+  return (
+    <div className={styles.outerWindow}>
+      <div className={styles.innerWindow}>
+        <div className={styles.titleBar}>
+          <div className={styles.button + " " + styles.close}>
+            <div />
+          </div>
+          <span className={styles.title}>{title}</span>
+          <div className={styles.button + " " + styles.maximize}>
+            <div />
+          </div>
+          <div className={styles.button + " " + styles.minimize}>
+            <div />
+          </div>
+        </div>
+        <div className={styles.menu}>
+          <span>
+            <u>F</u>ile
+          </span>
+          <span>
+            <u>E</u>dit
+          </span>
+          <span>
+            <u>V</u>iew
+          </span>
+        </div>
+        <div className={styles.windowContent}>{children}</div>
+      </div>
+    </div>
+  );
+}

app/constants.module.scss

@@ -1,8 +1,8 @@
 /* colors */
 $primary-color: #26768b;
 $font-color: white;
-$link-color: #46daff;
-$background-color: #0e2f37;
+$link-color: #4992A7;
+$background-color: #4992a7;
 $card-label-color: #26768bcc;
 $shadow-color: #00000055;
 
@@ -20,7 +20,7 @@ $medium-font-size: 20px;
 $large-font-size: 24px;
 
 /* sizing */
-$spacing: 1rem;
+$spacing: 1.5rem;
 $border-radius: 0.5rem;
 $min-width: 60rem;
 $profile-size: 20rem;
@@ -31,7 +31,9 @@ $box-shadow: 4px 4px 4px $shadow-color;
   spacing: $spacing;
 }
 
-@mixin primary-style {
-  background-color: $primary-color;
-  border-radius: $border-radius;
+@mixin double-border($width, $color1, $color2) {
+  border-top: $width solid $color1;
+  border-left: $width solid $color1;
+  border-bottom: $width solid $color2;
+  border-right: $width solid $color2;
 }

app/layout.tsx

@@ -1,9 +1,9 @@
 import type { Metadata } from "next";
-import { Ubuntu } from "next/font/google";
+import { PT_Mono } from "next/font/google";
 import "./globals.scss";
 import Header from "./components/header/header";
 
-const inter = Ubuntu({
+const inter = PT_Mono({
   weight: "400",
   subsets: ["latin"],
 });