change styles

src/app/components/HeroSection.tsx

@@ -1,20 +1,24 @@
+"use client";
+
 import React from "react";
 import Image from "next/image";
 import myPicture from "../../images/my_picture.webp";
 import { Nanum_Gothic_Coding } from "next/font/google";
+
 const codingFont = Nanum_Gothic_Coding({
   weight: ["400"],
   subsets: ["latin"],
 });
 export default function HeroSection() {
+
   return (
     <div className="hero min-h-screen bg-base-200">
       <div className="hero-content flex-col lg:flex-row">
         <Image
           priority
           src={myPicture}
           alt="my picture"
-          className="max-w-sm rounded"
+          className="max-w-xs md:max-w-sm  rounded"
         />
         <div>
           <h1 className={"text-7xl font-bold " + codingFont.className}>
@@ -24,7 +28,9 @@ export default function HeroSection() {
             Welcome to my Portfolio page. Here you can take a look at some fun
             projects I did to expand my programming skills :)
           </p>
-          <button className="btn btn-primary rounded">To the Projects</button>
+          <button className="btn btn-primary rounded" onClick={() => {
+            window.open('https://www.linkedin.com/in/davidknoerzer/', '_blank')
+          }}>My Linkedin</button>
         </div>
       </div>
     </div>

src/app/components/main/CVCard.tsx

@@ -11,27 +11,27 @@ export default function CVCard({
   organization,
 }: CVChapter) {
   return (
-    <div className="card bg-base-100 bg-cyan-500 shadow-2xl break-inside-avoid rounded">
+    <div className="card bg-neutral text-neutral-content shadow-md break-inside-avoid rounded">
       <figure className="px-10 pt-10">
         <Image
           src={image}
           width={500}
           height={500}
           alt="cv experience organization image"
-          className="rounded-2xl"
+          className="rounded-2xl p-8 bg-white"
         />
       </figure>
       <div className="card-body">
         <h2 className="card-title">
           {title} <br />
           {organization}
         </h2>
-        {description.map((item) => (
-          <p className="px-10 space-x-0" key={item}>
-            {item}
-          </p>
-        ))}
-
+        {
+          description.map((item) => (
+            <div className="chat-bubble bg-base-100 text-base-content" key={item}>
+              {item}
+            </div>
+          ))}
         <p className="card-actions justify-end">{timeframe}</p>
       </div>
     </div>

src/app/components/main/CVSection.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { CVChapter } from "../../modules/CVChapter";
-import iptImage from "../../../images/novartis.webp";
-import bNovaImage from "../../../images/novartis.webp";
+import iptImage from "../../../images/ipt.webp";
+import bNovaImage from "../../../images/b-nova.webp";
 import novartisImage from "../../../images/novartis.webp";
-import fhnwImage from "../../../images/novartis.webp";
+import fhnwImage from "../../../images/fhnw.webp";
+import uzhImage from "../../../images/uzh.webp";
 import CVCard from "./CVCard";
 
 export default function CVSection() {
@@ -45,6 +46,13 @@ export default function CVSection() {
       timeframe: "2023 - heute",
       image: fhnwImage,
     },
+    {
+      title: "Information Systems",
+      organization: "UZH",
+      description: ["Master of Science"],
+      timeframe: "2022 - 2023",
+      image: uzhImage,
+    },
     {
       title: "Business Information Technology",
       organization: "FHNW",
@@ -55,10 +63,10 @@ export default function CVSection() {
   ];
   return (
     <>
-      <div className="container min-h-screen p-4 bg-purple-500">
+      <div className="container min-h-screen p-4">
         <h2 className="text-5xl m-4 font-bold">CV</h2>
         <h3 className="text-3xl m-4">Beruflicher Werdegang</h3>
-        <div className="gap-4 space-y-4 columns-1 md:columns-2 2xl:columns-3 bg-green-500">
+        <div className="gap-4 space-y-4 columns-1 md:columns-2 2xl:columns-3">
           {workChapters.map((item) => (
             <CVCard
               {...{
@@ -73,7 +81,7 @@ export default function CVSection() {
           ))}
         </div>
         <h3 className="text-3xl m-4">Akademischer Werdegang</h3>
-        <div className="gap-4 space-y-4 columns-1 md:columns-2 2xl:columns-3 bg-green-500">
+        <div className="gap-4 space-y-4 columns-1 md:columns-2 2xl:columns-3">
           {schoolChapters.map((item) => (
             <CVCard
               {...{

src/app/components/main/ProjectCard.tsx

@@ -3,6 +3,9 @@
 import React from "react";
 import Image from "next/image";
 import { Project } from "../../modules/Project";
+import { useRouter } from "next/navigation";
+
+
 
 export default function ProjectCard({
   title,
@@ -11,14 +14,12 @@ export default function ProjectCard({
   image,
   techstack,
 }: Project) {
-  const handleCardClick = (url: string) => {
-    window.open(url, "_blank", "noopener,noreferrer");
-  };
+  const router = useRouter()
+
   return (
-    <div
-      className="card w-full bg-base-100 bg-pink-500 shadow-2xl break-inside-avoid hover:cursor-pointer rounded"
-      onClick={() => handleCardClick(url)}
-    >
+    <div className="card w-full bg-neutral text-neutral-content shadow-md break-inside-avoid hover:cursor-pointer rounded" onClick={() => {
+      window.open(url, '_blank')
+    }}>
       <Image
         src={image}
         width={500}

src/app/components/main/ProjectSection.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import whatsappWrappedImage from "../../../images/novartis.webp";
-import swissFootyPredictorImage from "../../../images/novartis.webp";
-import imdbProposerImage from "../../../images/novartis.webp";
-import whatToCookImage from "../../../images/novartis.webp";
-import settlingInCatanImage from "../../../images/novartis.webp";
+import whatsappWrappedImage from "../../../images/whatsapp-wrapped.webp";
+import swissFootyPredictorImage from "../../../images/swiss-footy-predictor.webp";
+import imdbProposerImage from "../../../images/imdb.webp";
+import whatToCookImage from "../../../images/cooking.webp";
+import settlingInCatanImage from "../../../images/catan.webp";
 import ProjectCard from "./ProjectCard";
 import { Project, Techstack } from "../../modules/Project";
 
@@ -23,7 +23,7 @@ export default function ProjectSection() {
       description:
         "See predictions about the next round of the Swiss Super League.",
       url: "/swiss-footy-predictor",
-      image: whatsappWrappedImage,
+      image: swissFootyPredictorImage,
       techstack: [
         Techstack.Python,
         Techstack.PythonFlask,
@@ -36,29 +36,29 @@ export default function ProjectSection() {
       description:
         "Upload one or two rating list csv files and see proposals to watch the next movie (or rewatch a classic).",
       url: "/imdb-proposer",
-      image: whatsappWrappedImage,
+      image: imdbProposerImage,
       techstack: [Techstack.Python, Techstack.PythonFlask, Techstack.Angular],
     },
     {
       title: "What to Cook",
       description: "See whats cooking and get inspiration for your next meal.",
       url: "/what-to-cook",
-      image: whatsappWrappedImage,
+      image: whatToCookImage,
       techstack: [Techstack.Java, Techstack.JavaSpring, Techstack.React],
     },
     {
       title: "Settling in Catan",
       description: "Generate maps for your next Settlers of Catan Game.",
       url: "/settling-in-catan",
-      image: whatsappWrappedImage,
+      image: settlingInCatanImage,
       techstack: [Techstack.JavaScript],
     },
   ];
 
   return (
-    <div className="container min-h-screen p-4 bg-red-500">
+    <div className="container min-h-screen p-4">
       <h1 className="text-5xl m-4 font-bold">Projects</h1>
-      <div className="gap-4 space-y-4 columns-1 md:columns-2 2xl:columns-3 bg-green-500">
+      <div className="gap-4 space-y-4 columns-1 md:columns-2 2xl:columns-3">
         {projects.map((item) => (
           <ProjectCard
             {...{

src/app/globals.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;