new logo, added card aspect ratio

PScottZero · Jun 30, 2024 · fb921c1 · fb921c1
1 parent 9b4ff6c
commit fb921c1
Show file tree

Hide file tree

Showing 16 changed files with 203 additions and 104 deletions.
diff --git a/app/components/banner/banner.module.css b/app/components/banner/banner.module.css
@@ -20,6 +20,7 @@
 
 .profile img {
   width: calc(var(--profile-size) - 4rem);
+  height: auto;
   border-radius: var(--border-radius);
   border: 4px solid var(--font-color);
 }

diff --git a/app/components/banner/banner.tsx b/app/components/banner/banner.tsx
@@ -1,17 +1,25 @@
+import Image from "next/image";
 import styles from "./banner.module.css";
 
 export default function Banner() {
   return (
     <div className={styles.banner}>
       <div className={styles.profile}>
-        <img src="images/profile.jpg"></img>
+        <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. 
+        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>
   );

diff --git a/app/components/card/card.module.css b/app/components/card/card.module.css
@@ -1,7 +1,7 @@
 .card {
   position: relative;
   transition: 0.1s;
-  height: var(--card-height);
+  aspect-ratio: 4/3;
   background-color: var(--primary-color);
   border-radius: var(--border-radius);
   overflow: hidden;
@@ -40,6 +40,7 @@
 .linkIcon {
   position: absolute;
   width: 1.2rem;
+  height: auto;
   right: 0;
   bottom: 0;
 }
diff --git a/app/components/card/card.tsx b/app/components/card/card.tsx
@@ -1,55 +1,41 @@
 "use client";
 
+import Image from "next/image";
 import styles from "./card.module.css";
 
 export type CardData = {
-  title: string,
-  description?: string | string[],
-  image: string,
-  link?: string,
-}
+  title: string;
+  description?: string | string[];
+  image: string;
+  link?: string;
+};
 
 export type CardProps = {
-  data: CardData,
-  imageFolder: string,
-  flex: number,
-  flexShrink: number,
+  data: CardData;
+  imageFolder: string;
+  flex: number;
+  flexShrink: number;
 };
 
-function adjustFlex(flex: number, flexShrink: number): number {
-  let flexAdjusted = flex - flexShrink;
-  if (flexAdjusted < 2 && flexShrink === 1) flexAdjusted = 2;
-  if (flexAdjusted === 0) flexAdjusted = 1;
-  return flexAdjusted;
-}
+const mediumFontSize = "var(--medium-font-size)";
+const regularFontSize = "var(--regular-font-size)";
+const smallFontSize = "var(--small-font-size)";
+const regularSpacing = "var(--spacing)";
+const smallSpacing = "calc(var(--spacing) / 2)";
 
-function getCardMaxWidth(flexAdjusted: number): string {
-  const flexWidth = (100 / flexAdjusted) + "%";
-  const widthCorrection = (flexAdjusted - 1) + " * var(--spacing) / " + flexAdjusted;
+function getCardWidth(flexAdjusted: number): string {
+  const flexWidth = 100 / flexAdjusted + "%";
+  const widthCorrection =
+    flexAdjusted - 1 + " * var(--spacing) / " + flexAdjusted;
   return "calc(" + flexWidth + " - " + widthCorrection + ")";
 }
 
-function getCardHeight(flexAdjusted: number, flexShrink: number): string {
-  if (flexAdjusted === 4) {
-    return "var(--small-card-height)";
-  } else if (flexAdjusted === 2 && flexShrink === 2) {
-    return "var(--mobile-small-card-height)";
-  } else if (flexAdjusted < 2 && flexShrink === 2) {
-    return "var(--mobile-card-height)";
-  } else if (flexShrink === 1) {
-    return "var(--medium-card-height)";
-  } else {
-    return "var(--card-height)";
-  }
-}
-
-function getCardFontSizes(flexAdjusted: number, flexShrink: number): string[] {
-  return flexAdjusted == 2 && flexShrink === 2 ?
-    ["var(--regular-font-size)", "var(--small-font-size)", "calc(var(--spacing) / 2)"] :
-    ["var(--medium-font-size)", "var(--regular-font-size)", "var(--spacing)"];
-}
-
-export default function Card({ data, imageFolder, flex, flexShrink }: CardProps) {
+export default function Card({
+  data,
+  imageFolder,
+  flex,
+  flexShrink,
+}: CardProps) {
   let descriptionLines = [];
   if (data.description !== undefined) {
     if (Array.isArray(data.description)) {
@@ -60,29 +46,54 @@ export default function Card({ data, imageFolder, flex, flexShrink }: CardProps)
       descriptionLines.push(<p key={0}>{data.description}</p>);
     }
   }
-
-  const flexAdjusted = adjustFlex(flex, flexShrink);
-  const maxCardWidth = getCardMaxWidth(flexAdjusted);
-  const height = getCardHeight(flexAdjusted, flexShrink);
-  const [titleSize, descriptionSize, labelPadding] = getCardFontSizes(flexAdjusted, flexShrink);
-
-  const cardStyles = styles.card + (data.link !== undefined ? " " + styles.link : "");
 
-  const linkFn = data.link !== undefined ? () => window.open(data.link) : undefined;
-  const linkIcon = data.link !== undefined ? <img className={styles.linkIcon} src="icons/link.svg"/> : undefined;
+  const flexAdjusted = Math.max(flex - flexShrink, 1);
+  const cardWidth = getCardWidth(flexAdjusted);
+
+  const useSmallCardSpecs = flexAdjusted == 2 && flexShrink == 2;
+  const titleSize = useSmallCardSpecs ? regularFontSize : mediumFontSize;
+  const descriptionSize = useSmallCardSpecs ? smallFontSize : regularFontSize;
+  const labelPadding = useSmallCardSpecs ? smallSpacing : regularSpacing;
+
+  const hasLink = data.link !== undefined;
+  const linkStyles = hasLink ? styles.link : "";
+  const linkFn = hasLink ? () => window.open(data.link) : undefined;
+  const linkIcon = hasLink ? (
+    <Image
+      className={styles.linkIcon}
+      src="icons/link.svg"
+      alt="link"
+      width={64}
+      height={64}
+    />
+  ) : undefined;
 
+  const cardStyles = `${styles.card} ${linkStyles}`;
   return (
-    <div style={{flex: maxCardWidth, maxWidth: maxCardWidth, height: height}} className={cardStyles} onClick={linkFn}>
-      <div className={styles.label} style={{padding: labelPadding}}>
-        <div className={styles.title} style={{fontSize: titleSize}}>
+    <div
+      style={{ flex: cardWidth, maxWidth: cardWidth }}
+      className={cardStyles}
+      onClick={linkFn}
+    >
+      <div className={styles.label} style={{ padding: labelPadding }}>
+        <div className={styles.title} style={{ fontSize: titleSize }}>
           {data.title}
         </div>
-        <div className={styles.description}  style={{fontSize: descriptionSize}}>
+        <div
+          className={styles.description}
+          style={{ fontSize: descriptionSize }}
+        >
           {descriptionLines}
           {linkIcon}
         </div>
       </div>
-      <img className={styles.image} src={"images/" + imageFolder + "/" + data.image}/>
+      <Image
+        className={styles.image}
+        src={"/images/" + imageFolder + "/" + data.image}
+        alt={data.title}
+        width={512}
+        height={512}
+      />
     </div>
   );
 }
diff --git a/app/components/header/header.module.css b/app/components/header/header.module.css
@@ -5,11 +5,12 @@
   width: 100%;
   height: 4rem;
   background: var(--primary-color);
-  padding: 0.5rem 1rem;
+  padding: 0.75rem;
   box-shadow: 0 4px 4px #00000055;
 }
 
 .header img {
+  width: auto;
   height: 100%;
 }
 
@@ -26,6 +27,8 @@
   text-decoration: none;
   font-size: 18px;
   margin-left: var(--spacing);
+  padding: 0;
+  line-height: 0;
 }
 
 .nav a:hover {
@@ -34,6 +37,7 @@
 }
 
 .nav img {
+  width: auto;
   height: 2rem;
 }
 
@@ -51,9 +55,3 @@
     display: none;
   }
 }
-
-@media screen and (max-width: 640px) {
-  .nav img {
-    display: none;
-  }
-}
diff --git a/app/components/header/header.tsx b/app/components/header/header.tsx
@@ -1,9 +1,10 @@
+import Image from "next/image";
 import styles from "./header.module.css";
 
 export default function Header() {
   return (
     <header className={styles.header}>
-      <img src="images/logo.svg"></img>
+      <Image src="/images/logo1.svg" alt="Logo" width={2526} height={1024} />
       <nav className={styles.nav}>
         <span className={styles.pageLinks}>
           <a href="#experience">Experience</a>
@@ -14,10 +15,39 @@ export default function Header() {
           <a href="#hobbies">Hobbies</a>
         </span>
         <div className={styles.verticalSeparator}></div>
-        <a href="mailto:[email protected]" target="_blank"><img src="icons/email.svg"/></a>
-        <a href="https://drive.google.com/file/d/181m4g11n53sekOgt40T1ZhLruRoqN56X/view?usp=sharing" target="_blank"><img src="icons/resume.svg"/></a>
-        <a href="https://www.linkedin.com/in/paul-scott-047858140/" target="_blank"><img src="icons/linkedin.svg"/></a>
-        <a href="https://github.com/PScottZero" target="_blank"><img src="icons/github.svg"/></a>
+        <a href="mailto:[email protected]" target="_blank">
+          <Image src="/icons/email.svg" alt="Email" width={128} height={128} />
+        </a>
+        <a
+          href="https://drive.google.com/file/d/181m4g11n53sekOgt40T1ZhLruRoqN56X/view?usp=sharing"
+          target="_blank"
+        >
+          <Image
+            src="/icons/resume.svg"
+            alt="Resume"
+            width={128}
+            height={128}
+          />
+        </a>
+        <a
+          href="https://www.linkedin.com/in/paul-scott-047858140/"
+          target="_blank"
+        >
+          <Image
+            src="/icons/linkedin.svg"
+            alt="Linkedin"
+            width={128}
+            height={128}
+          />
+        </a>
+        <a href="https://github.com/PScottZero" target="_blank">
+          <Image
+            src="/icons/github.svg"
+            alt="GitHub"
+            width={128}
+            height={128}
+          />
+        </a>
       </nav>
     </header>
   );

diff --git a/app/components/section/section.tsx b/app/components/section/section.tsx
@@ -2,16 +2,16 @@ import Card, { CardData } from "../card/card";
 import styles from "./section.module.css";
 
 export type SectionData = {
-  sectionId: string,
-  title: string,
-  columns: number,
-  content: CardData[]
-}
+  sectionId: string;
+  title: string;
+  columns: number;
+  content: CardData[];
+};
 
 export type SectionProps = {
-  data: SectionData,
-  flexShrink: number
-}
+  data: SectionData;
+  flexShrink: number;
+};
 
 export default function Section({ data, flexShrink }: SectionProps) {
   let cards: JSX.Element[] = [];
@@ -23,18 +23,14 @@ export default function Section({ data, flexShrink }: SectionProps) {
         imageFolder={data.sectionId}
         flex={data.columns}
         flexShrink={flexShrink}
-      />
+      />,
     );
   }
 
   return (
     <div id={data.sectionId} className={styles.section}>
-      <div className={styles.title}>
-        {data.title}
-      </div>
-      <div className={styles.cards}>
-        {cards}
-      </div>
+      <div className={styles.title}>{data.title}</div>
+      <div className={styles.cards}>{cards}</div>
     </div>
   );
-}
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,7 +5,7 @@ import Header from "./components/header/header";
 
 const inter = Ubuntu({
   weight: "400",
-  subsets: ["latin"]
+  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {