more work

Author: maxwlang

public/hobbies/gaming.jpg

@@ -22,19 +22,23 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project, onViewMore }) => {
     : description;
 
   return (
-    <div className="break-inside-avoid mb-6 sm:mb-8 bg-white rounded-lg shadow-lg p-6 flex flex-col max-w-sm transform transition-transform hover:scale-105 hover:shadow-2xl">
-      <Image
-        src={image}
-        alt={title}
-        className="rounded-t-md w-full mb-4 object-cover h-40"
-      />
-      <h3 className="text-2xl font-semibold text-gray-700">{title}</h3>
-      {subtitle && <h4 className="text-sm text-gray-500 mb-2">{subtitle}</h4>}
-      <p className="text-gray-600 text-sm mb-4">
+    // TODO: fix color
+    // TODO: fix strange behavior in desktop safari
+    <div className="break-inside-avoid bg-background dark:bg-slate-900 text-foreground mb-6 sm:mb-8 rounded-lg shadow-lg p-6 flex flex-col max-w-sm transform transition-transform hover:scale-105 hover:shadow-2xl">
+      {image && (
+        <Image
+          src={image}
+          alt={title}
+          className="rounded-t-md w-full mb-4 object-cover h-40"
+        />
+      )}
+      <h3 className="text-2xl font-semibold">{title}</h3>
+      {subtitle && <h4 className="text-sm text-gray-400 mb-2">{subtitle}</h4>}
+      <p className="text-sm mb-4">
         {truncatedDescription}
         {isLongDescription && (
           <>
-            <span className="text-gray-500">...</span>{" "}
+            <span className="text-gray-400">...</span>{" "}
             <button
               onClick={onViewMore}
               className="text-blue-500 hover:underline text-sm inline-flex items-center"
@@ -65,7 +69,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project, onViewMore }) => {
         {tags.map((tag, i) => (
           <span
             key={i}
-            className="bg-blue-100 text-blue-700 text-xs font-medium px-2 py-1 rounded-full"
+            className="bg-slate-800 border-slate-700 dark:bg-slate-900 dark:border-slate-800 border text-blue-700 text-xs font-medium px-2 py-1 rounded-full"
           >
             {tag}
           </span>

src/components/home/ProjectCard.tsx

@@ -5,7 +5,7 @@ import HobbyGrid from "@/components/home/HobbyGrid";
 
 const HobbiesAndInterests: React.FC = () => {
   return (
-    <Section id="hobbies">
+    <Section className="bg-gray-200 dark:bg-slate-900" id="hobbies">
       <h2 className="text-4xl font-bold text-center mb-12">
         Hobbies &amp; Interests
       </h2>

src/components/home/sections/HobbiesAndInterests.tsx

@@ -13,7 +13,7 @@ const Projects: React.FC = () => {
   return (
     <Section
       id="projects"
-      className="flex flex-col items-center justify-center"
+      className="flex flex-col items-center justify-center bg-gradient-to-b from-gray-100 to-gray-200 dark:from-slate-800 dark:to-slate-900"
     >
       <ScrollToBottom scrollToBottomText="Skip Projects">
         <h2 className="text-4xl font-bold text-center mb-12">Projects</h2>

src/components/home/sections/Projects.tsx

@@ -8,8 +8,7 @@ interface SectionProps {
 }
 
 const Section: React.FC<SectionProps> = ({ id, ref, className, children }) => {
-  const baseClassNames =
-    "bg-gradient-to-b from-gray-100 to-gray-200 dark:from-slate-800 dark:to-slate-900 py-16 px-4 sm:px-8 lg:px-16";
+  const baseClassNames = "py-16 px-4 sm:px-8 lg:px-16";
 
   return (
     <section

src/components/shared/Section.tsx

@@ -1,47 +1,75 @@
 import { StaticImageData } from "next/image";
 import images from "@/images";
 
-interface HobbyAndInterest {
+export interface HobbyAndInterest {
   title: string;
   image: StaticImageData;
+  description: string;
 }
 
 const hobbiesAndInterests: HobbyAndInterest[] = [
   {
+    // Complete
     title: "3D Printing",
     image: images.hobby3DPrinting,
+    description:
+      "Using Autodesk Fusion 360, I design functional 3D models for printing with my Bambu Lab P1S 3D Printer. Recently, a modular keystone jack desk grommet.",
   },
   {
+    // Complete
     title: "Photography",
     image: images.hobbyPhotography,
+    description:
+      "Over the last year I've been learning photography with my Sony Alpha A6600. I've been enjoying capturing night cityscapes and urban nature photography.",
   },
   {
+    // Complete
     title: "Music",
     image: images.hobbyMusic,
+    description:
+      "I enjoy a wide range of music—from classical to rock and EDM. I love traveling to music festivals, creating in Ableton Live, curating playlists, and mixing tracks.",
   },
   {
+    // Complete
     title: "Video Games",
     image: images.hobbyVideoGames,
+    description:
+      "I'm a big fan of PC and console games. Typically you'll find me playing JRPGs, strategy, and sandbox games. I have a personal affinity for Nintendo games.",
   },
   {
+    // Complete
     title: "Traveling",
-    image: images.hobbyTraveling,
+    image: images.hobbyTraveling2,
+    description:
+      "I call Minnesota home, but I love to travel. I frequent Las Vegas, San Francisco, and Denver often. I also love to travel internationally.",
   },
   {
+    // Complete
     title: "Cooking",
     image: images.hobbyCooking,
+    description:
+      "It's a lot of fun to cook and expirament with new recipes. I enjoy cooking Italian and Asian cuisine, and have fun coming up with my own recipes.",
   },
   {
+    // Complete
     title: "Homelabbing",
     image: images.hobbyHomelabbing,
+    description:
+      "At home I maintain a rack of servers and networking equipment. I have 3 rack servers, several switches, and a firewall, along with 144TB of storage. This is all networked together with 10Gbps fiber.",
   },
   {
+    // Complete
     title: "Coffee",
     image: images.hobbyCoffee,
+    description:
+      "I enjoy brewing coffee with a french press and espresso machine, though some days I just use a Nespresso machine.",
   },
   {
+    // Complete
     title: "Hockey",
     image: images.hobbyHockey,
+    description:
+      "An avid hockey fan, I follow the Minnesota Wild and local minor league hockey teams. I try to go to a few games a year.",
   },
 ];
 

src/data/hobbiesAndInterests.tsx

@@ -25,12 +25,12 @@ const homeNavItems: NavItem[] = [
   { id: "projects", label: "Projects", href: "#projects" },
   // { id: "certifications", label: "Certifications", href: "#certifications" },
   { id: "hobbies", label: "Hobbies & Interests", href: "#hobbies" },
-  {
-    id: "photoGallery",
-    label: "Photo Gallery",
-    href: "https://gallery.maxwlang.com",
-    newTab: true,
-  },
+  // {
+  //   id: "photoGallery",
+  //   label: "Photo Gallery",
+  //   href: "https://gallery.maxwlang.com",
+  //   newTab: true,
+  // },
 ];
 
 const navPages: NavPage[] = [

src/data/navbarItems.tsx

@@ -19,7 +19,7 @@ import cardOpenSWC from "../public/projects/card-openswc-fusion.png";
 import hobby3DPrinting from "../public/hobbies/3d-printing.png";
 import hobbyPhotography from "../public/hobbies/photography.jpg";
 import hobbyMusic from "../public/hobbies/music.png";
-// import hobbyVideoGames from "../public/hobbies/video-games.png";
+import hobbyVideoGames from "../public/hobbies/gaming.jpg";
 import hobbyTraveling from "../public/hobbies/traveling.png";
 import hobbyTraveling2 from "../public/hobbies/traveling2.png";
 import hobbyCooking from '../public/hobbies/cooking.jpg';
@@ -62,7 +62,7 @@ const images = {
   hobby3DPrinting,
   hobbyPhotography,
   hobbyMusic,
-  hobbyVideoGames: photoCrab,
+  hobbyVideoGames,
   hobbyTraveling,
   hobbyTraveling2,
   hobbyCooking,