change cv cards and added timeline that needs to be properly utilized

src/app/components/HeroSection.tsx

@@ -21,9 +21,7 @@ export default function HeroSection() {
           className="max-w-xs md:max-w-sm  rounded"
         />
         <div>
-          <h1 className={"text-7xl font-bold " + codingFont.className}>
-            Hello There!
-          </h1>
+          <h1 className={"text-7xl " + codingFont.className}>Hello There!</h1>
           <p className="py-6">
             Welcome to my Portfolio page. Here you can take a look at some fun
             projects I did to expand my programming skills :)

src/app/components/main/CVCard.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Image from "next/image";
 import { CVChapter } from "@/app/modules/CVChapter";
-import { time } from "console";
 
 export default function CVCard({
   title,
@@ -11,28 +10,29 @@ export default function CVCard({
   organization,
 }: CVChapter) {
   return (
-    <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 p-8 bg-white"
-        />
-      </figure>
+    <div className="card bg-base-200 shadow-2xl rounded-2xl break-inside-avoid">
       <div className="card-body">
-        <h2 className="card-title">
-          {title} <br />
-          {organization}
-        </h2>
-        {
-          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>
+        <h2 className="card-title">{title}</h2>
+        <p>{organization}</p>
+        <figure>
+          <Image
+            src={image}
+            width={500}
+            height={500}
+            alt="cv experience organization image"
+            className="rounded-2xl p-6 bg-white"
+          />
+        </figure>
+        {description.length > 0 && (
+          <ul className="list-disc p-4">
+            {description.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        )}
+        <div className="card-actions justify-end">
+          <div className="badge badge-outline">{timeframe}</div>
+        </div>
       </div>
     </div>
   );

src/app/components/main/CVSection.tsx

@@ -34,67 +34,65 @@ export default function CVSection() {
       title: "Informatiker Generalist Lehrling",
       organization: "Novartis Pharma AG",
       description: ["UX-Design", "IT-Support", "Hardware-Testing"],
-      timeframe: "09.2013 – 08.2017",
+      timeframe: "09.2013 - 08.2017",
       image: novartisImage,
     },
   ];
   const schoolChapters: CVChapter[] = [
     {
       title: "Business Information Systems",
-      organization: "FHNW",
-      description: ["Master of Science"],
+      organization: "MSc, FHNW",
+      description: [],
       timeframe: "2023 - heute",
       image: fhnwImage,
     },
     {
       title: "Information Systems",
-      organization: "UZH",
-      description: ["Master of Science"],
+      organization: "MSc, UZH",
+      description: [],
       timeframe: "2022 - 2023",
       image: uzhImage,
     },
     {
       title: "Business Information Technology",
-      organization: "FHNW",
-      description: ["Bachelor of Science"],
+      organization: "BSc, FHNW",
+      description: [],
       timeframe: "2018 - 2021",
       image: fhnwImage,
     },
   ];
   return (
     <>
-      <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">
-          {workChapters.map((item) => (
-            <CVCard
-              {...{
-                title: item.title,
-                description: item.description,
-                organization: item.organization,
-                image: item.image,
-                timeframe: item.timeframe,
-              }}
-              key={item.title}
-            />
-          ))}
-        </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">
-          {schoolChapters.map((item) => (
-            <CVCard
-              {...{
-                title: item.title,
-                description: item.description,
-                organization: item.organization,
-                image: item.image,
-                timeframe: item.timeframe,
-              }}
-              key={item.title}
-            />
-          ))}
-        </div>
+      <h2 className="text-5xl m-4 font-bold">CV</h2>
+      <h3 className="text-3xl m-4">Beruflicher Werdegang</h3>
+      <div className="gap-6 space-y-6 columns-1 md:columns-2 2xl:columns-3">
+        {workChapters.map((item) => (
+          <CVCard
+            {...{
+              title: item.title,
+              description: item.description,
+              organization: item.organization,
+              image: item.image,
+              timeframe: item.timeframe,
+            }}
+            key={item.title}
+          />
+        ))}
+      </div>
+      <h3 className="text-3xl m-4">Akademischer Werdegang</h3>
+      <div className="gap-6 space-y-4 columns-1 md:columns-2 2xl:columns-3">
+        {schoolChapters.map((item) => (
+          <CVCard
+            {...{
+              title: item.title,
+              description: item.description,
+              organization: item.organization,
+              image: item.image,
+              timeframe: item.timeframe,
+            }}
+            key={item.title}
+          />
+        ))}
       </div>
     </>
   );

src/app/components/main/CVTimeline.tsx

@@ -0,0 +1,146 @@
+import React from "react";
+
+export default function CVTimeline() {
+  return (
+    <>
+      <ul className="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">
+        <li>
+          <div className="timeline-middle">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              className="h-5 w-5"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </div>
+          <div className="timeline-start md:text-end mb-10">
+            <time className="font-mono italic">1984</time>
+            <div className="text-lg font-black">First Macintosh computer</div>
+            The Apple Macintosh—later rebranded as the Macintosh 128K—is the
+            original Apple Macintosh personal computer. It played a pivotal role
+            in establishing desktop publishing as a general office function. The
+            motherboard, a 9 in (23 cm) CRT monitor, and a floppy drive were
+            housed in a beige case with integrated carrying handle; it came with
+            a keyboard and single-button mouse.
+          </div>
+          <hr />
+        </li>
+        <li>
+          <hr />
+          <div className="timeline-middle">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              className="h-5 w-5"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </div>
+          <div className="timeline-end mb-10">
+            <time className="font-mono italic">1998</time>
+            <div className="text-lg font-black">iMac</div>
+            iMac is a family of all-in-one Mac desktop computers designed and
+            built by Apple Inc. It has been the primary part of Apple's consumer
+            desktop offerings since its debut in August 1998, and has evolved
+            through seven distinct forms
+          </div>
+          <hr />
+        </li>
+        <li>
+          <hr />
+          <div className="timeline-middle">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              className="h-5 w-5"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </div>
+          <div className="timeline-start md:text-end mb-10">
+            <time className="font-mono italic">2001</time>
+            <div className="text-lg font-black">iPod</div>
+            The iPod is a discontinued series of portable media players and
+            multi-purpose mobile devices designed and marketed by Apple Inc. The
+            first version was released on October 23, 2001, about 8+1⁄2 months
+            after the Macintosh version of iTunes was released. Apple sold an
+            estimated 450 million iPod products as of 2022. Apple discontinued
+            the iPod product line on May 10, 2022. At over 20 years, the iPod
+            brand is the oldest to be discontinued by Apple
+          </div>
+          <hr />
+        </li>
+        <li>
+          <hr />
+          <div className="timeline-middle">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              className="h-5 w-5"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </div>
+          <div className="timeline-end mb-10">
+            <time className="font-mono italic">2007</time>
+            <div className="text-lg font-black">iPhone</div>
+            iPhone is a line of smartphones produced by Apple Inc. that use
+            Apple's own iOS mobile operating system. The first-generation iPhone
+            was announced by then-Apple CEO Steve Jobs on January 9, 2007. Since
+            then, Apple has annually released new iPhone models and iOS updates.
+            As of November 1, 2018, more than 2.2 billion iPhones had been sold.
+            As of 2022, the iPhone accounts for 15.6% of global smartphone
+            market share
+          </div>
+          <hr />
+        </li>
+        <li>
+          <hr />
+          <div className="timeline-middle">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              className="h-5 w-5"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </div>
+          <div className="timeline-start md:text-end mb-10">
+            <time className="font-mono italic">2015</time>
+            <div className="text-lg font-black">Apple Watch</div>
+            The Apple Watch is a line of smartwatches produced by Apple Inc. It
+            incorporates fitness tracking, health-oriented capabilities, and
+            wireless telecommunication, and integrates with iOS and other Apple
+            products and services
+          </div>
+        </li>
+      </ul>
+    </>
+  );
+}

src/app/components/main/ProjectCard.tsx

@@ -19,14 +19,14 @@ export default function ProjectCard({
     <Link
       href={url}
       target="_blank"
-      className="card w-full bg-neutral text-neutral-content shadow-md break-inside-avoid hover:cursor-pointer rounded"
+      className="card w-full bg-base-200 shadow-2xl hover:cursor-pointer rounded-2xl break-inside-avoid"
     >
       <Image
         src={image}
         width={500}
         height={500}
         alt="project picture"
-        className="rounded rounded-b-none"
+        className="rounded-2xl rounded-b-none"
       />
       <div className="card-body">
         <h2 className="card-title">{title}</h2>

src/app/components/main/ProjectSection.tsx

@@ -16,7 +16,11 @@ export default function ProjectSection() {
         "Upload your exported Whatsapp History and see a fun Wrap-up of the last year.",
       url: "/whatsapp-wrapped",
       image: whatsappWrappedImage,
-      techstack: [Techstack.Python, Techstack.PythonFlask, Techstack.Angular],
+      techstack: [
+        Techstack.Python,
+        Techstack.PythonFlask,
+        Techstack.JavaScript,
+      ],
     },
     {
       title: "Swiss Footy Predictor",
@@ -37,7 +41,7 @@ export default function ProjectSection() {
         "Upload one or two rating list csv files and see proposals to watch the next movie (or rewatch a classic).",
       url: "/imdb-proposer",
       image: imdbProposerImage,
-      techstack: [Techstack.Python, Techstack.PythonFlask, Techstack.Angular],
+      techstack: [Techstack.Python, Techstack.PythonFlask, Techstack.React],
     },
     {
       title: "What to Cook",
@@ -51,14 +55,14 @@ export default function ProjectSection() {
       description: "Generate maps for your next Settlers of Catan Game.",
       url: "/settling-in-catan",
       image: settlingInCatanImage,
-      techstack: [Techstack.JavaScript],
+      techstack: [Techstack.NextJS, Techstack.React],
     },
   ];
 
   return (
-    <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">
+      <div className="gap-6 space-y-6 columns-1 md:columns-2 2xl:columns-3">
         {projects.map((item) => (
           <ProjectCard
             {...{
@@ -72,6 +76,6 @@ export default function ProjectSection() {
           />
         ))}
       </div>
-    </div>
+    </>
   );
 }