updates

app/components/banner/banner.module.css

@@ -33,7 +33,7 @@
   text-shadow: 0 0 4px black;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 640px) {
   .banner {
     grid-template-rows: 14rem 1fr;
     grid-template-columns: 1fr;

app/components/card/card.module.css

@@ -18,11 +18,12 @@
 }
 
 .title {
-  font-size: 24px;
+  font-size: 20px;
   font-weight: bold;
 }
 
 .description {
+  position: relative;
   font-size: 16px;
 }
 
@@ -36,9 +37,25 @@
   filter: brightness(75%);
 }
 
-@media screen and (max-width: 768px) {
+.linkIcon {
+  position: absolute;
+  width: 1.2rem;
+  right: 0;
+  bottom: 0;
+}
+
+@media screen and (max-width: 1024px) {
+  .card {
+    flex: calc(50% - var(--spacing)) !important;
+    max-width: calc(50% - var(--spacing) / 2) !important;
+    height: 18rem !important;
+  }
+}
+
+@media screen and (max-width: 640px) {
   .card {
     margin-top: var(--spacing);
     max-width: 100% !important;
+    height: 70vmin !important;
   }
 }

app/components/card/card.tsx

@@ -18,25 +18,29 @@ export default function Card({ title, description, image, link, flex }: CardProp
         descriptionLines.push(<p key={i}>{description[i]}</p>);
       }
     } else {
-      descriptionLines.push(<p>{description}</p>);
+      descriptionLines.push(<p key={0}>{description}</p>);
     }
   }
 
+  const flex_ = flex ?? 3;
   const cardStyles = styles.card + (link !== undefined ? " " + styles.link : "");
-  const flexWidth = (100 / (flex ?? 3)) + "%";
-  const flexRule = "calc(" + flexWidth + " - var(--spacing))";
-  const maxWidth = "calc(" + flexWidth + " - var(--spacing) / 2)";
+  const flexWidth = (100 / flex_) + "%";
+  const widthCorrection = (flex_ - 1) + " * var(--spacing) / " + flex_;
+  const maxWidth = "calc(" + flexWidth + " - " + widthCorrection + ")";
+  const height = flex_ ===  4 ? "var(--small-card-height)" : "var(--card-height)";
 
   const linkFn = link !== undefined ? () => window.open(link) : undefined;
+  const linkIcon = link !== undefined ? <img className={styles.linkIcon} src="imgs/link.svg"/> : undefined;
 
   return (
-    <div style={{flex: flexRule, maxWidth: maxWidth}} className={cardStyles} onClick={linkFn}>
+    <div style={{flex: maxWidth, maxWidth: maxWidth, height: height}} className={cardStyles} onClick={linkFn}>
       <div className={styles.label}>
         <div className={styles.title}>
           {title}
         </div>
         <div className={styles.description}>
           {descriptionLines}
+          {linkIcon}
         </div>
       </div>
       <img className={styles.image} src={image}/>

app/components/header/header.module.css

@@ -24,7 +24,7 @@
   transition: 0.1s;
   color: white;
   text-decoration: none;
-  font-size: 20px;
+  font-size: 18px;
   margin-left: var(--spacing);
 }
 
@@ -44,3 +44,16 @@
   background-color: white;
   margin-left: var(--spacing);
 }
+
+@media screen and (max-width: 1024px) {
+  .pageLinks,
+  .verticalSeparator {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .nav img {
+    display: none;
+  }
+}

app/components/header/header.tsx

@@ -5,11 +5,14 @@ export default function Header() {
     <header className={styles.header}>
       <img src="imgs/header/logo.svg"></img>
       <nav className={styles.nav}>
-        <a href="#experience">Experience</a>
-        <a href="#skills">Skills</a>
-        <a href="#education">Education</a>
-        <a href="#projects">Projects</a>
-        <a href="#hobbies">Hobbies</a>
+        <span className={styles.pageLinks}>
+          <a href="#experience">Experience</a>
+          <a href="#education">Education</a>
+          <a href="#projects">Projects</a>
+          <a href="#languages">Skills</a>
+          <a href="#grad-courses">Courses</a>
+          <a href="#hobbies">Hobbies</a>
+        </span>
         <div className={styles.verticalSeparator}></div>
         <a href="mailto:[email protected]" target="_blank"><img src="imgs/header/email.svg"/></a>
         <a href="https://drive.google.com/file/d/181m4g11n53sekOgt40T1ZhLruRoqN56X/view?usp=sharing" target="_blank"><img src="imgs/header/resume.svg"/></a>

app/components/section/section.module.css

@@ -24,7 +24,7 @@
   gap: var(--spacing);
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 640px) {
   .cards {
     display: block;
   }

app/components/section/section.tsx

@@ -2,32 +2,30 @@ import Card, { CardProps } from "../card/card";
 import styles from "./section.module.css";
 
 export type SectionProps = {
-  sectionTitle: string,
-  imageFolder: string,
-  navId?: string,
+  sectionId: string,
+  title: string,
   columns: number,
   content: CardProps[]
 }
 
-export default function Section({ navId, sectionTitle, imageFolder, columns, content }: SectionProps) {
+export default function Section({ sectionId, title, columns, content }: SectionProps) {
   let cards: JSX.Element[] = [];
   for (const card of content) {
     cards.push(
       <Card
-        key={cards.length}
         title={card.title}
         description={card.description}
-        image={"imgs/content/" + imageFolder + "/" + card.image}
+        image={"imgs/content/" + sectionId + "/" + card.image}
         link={card.link}
         flex={columns}
       />
     );
   }
 
   return (
-    <div id={navId !== undefined ? navId : undefined} className={styles.section}>
+    <div id={sectionId} className={styles.section}>
       <div className={styles.title}>
-        {sectionTitle}
+        {title}
       </div>
       <div className={styles.cards}>
         {cards}

app/globals.css

@@ -7,6 +7,7 @@
   --spacing: 1rem;
   --border-radius: 0.5rem;
   --card-height: 20rem;
+  --small-card-height: 15rem;
   --min-width: 60rem;
   --box-shadow: 4px 4px 4px #00000055;
 }

app/page.tsx

@@ -8,10 +8,8 @@ export default function Home() {
   content.forEach((section: SectionProps) => {
     sections.push(
       <Section
-        key={sections.length}
-        sectionTitle={section.sectionTitle}
-        imageFolder={section.imageFolder}
-        navId={section.navId}
+        sectionId={section.sectionId}
+        title={section.title}
         columns={section.columns}
         content={section.content}
       />

package.json

@@ -9,16 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.3",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.3"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/uuid": "^9.0.8",
     "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "eslint-config-next": "14.2.3",
+    "typescript": "^5"
   }
 }