Merge pull request #7 from LennardZuendorf/building

PR: Merging Updates for Version 1.3.0.

app/about/layout.tsx

@@ -6,7 +6,7 @@ export default function AboutLayout({
   children: React.ReactNode;
 }) {
   return (
-    <section className={cn("flex flex-col")}>
+    <section className={cn("flex flex-col h-max")}>
       <div className="inline-block text-center justify-center">{children}</div>
     </section>
   );

app/about/page.tsx

@@ -1,53 +1,53 @@
 import * as React from "react";
-import { Code, H2, H3, H4, L, Lead, M, S } from "@/components/ui/typography";
+import { H2, H4, L, Muted, S } from "@/components/ui/typography";
+import Link from "next/link";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import type { AboutBlock } from "contentlayer/generated";
 import { allAboutBlocks } from "contentlayer/generated";
-import { calloutData, experienceData, techStackData } from "@/data/about";
+import { experienceData, techStackData } from "@/data/about";
 import { Mdx } from "@/components/custom/mdx-components";
-import { ExperienceCarousel } from "@/components/pages/experience-carousel";
+import { siteConfig } from "@/data/site";
 import { cn } from "@/lib/utils";
 import { BrandIcon } from "@/components/custom/brand-icons";
 import { ExperienceAccordion } from "@/components/pages/experience-accordion";
 
+export const generateStaticParams = async () => {
+  return allAboutBlocks.map((p) => ({ slug: p.slug.split("/") }));
+};
+
 export default async function AboutPage() {
-  const activities = allAboutBlocks.find((p) =>
-    p.title.includes("Activities"),
+  const aboutIntro = allAboutBlocks.find((p) =>
+    p.title.includes("Intro"),
+  ) as AboutBlock;
+
+  const aboutTech = allAboutBlocks.find((p) =>
+    p.title.includes("Tech"),
   ) as AboutBlock;
 
   return (
-    <div className="flex flex-col justify-center items-center gap-4 lg:gap-8 py-2">
-      <Card key="intro" className="w-full text-start">
+    <div className="flex flex-col justify-center items-center gap-4 lg:gap-8 py-8">
+      <Card key="intro" className="w-full text-start" id="about-me">
         <CardHeader className="flex flex-col space-y-2 p-4">
-          <H4 className="font-black font-title">Lennard Zündorf</H4>
+          <H2 className="font-black font-title">About Me</H2>
         </CardHeader>
         <CardContent className="flex flex-col justify-start gap-4 p-4">
-          <S className="leading-loose lg:leading-relaxed">
-            <L className="inline inline-flex mr-1 font-bold">I&aposm</L>a 24
-            year old student of <strong>Business Computing</strong> at the
-            University of Applied Sciences for Technology and Busines Berlin
-            (HTW Berlin). I&aposm <strong>graduating in March 2024</strong>. I
-            also work as a <strong>Backend Product Manager </strong> at{" "}
-            <strong>Check24 Flug </strong>. I currently live in{" "}
-            <strong>Berlin, Germany</strong>.
-          </S>
-          <S className="leading-loose lg:leading-relaxed">
-            While I&aposm a student, I have{" "}
-            <strong>always worked much and gained many experiences</strong>.
-            Studying has felt more like my side project for years. In my
-            (limited) free time I&aposve had a passion for coding, which parts
-            of this website are meant to showcase.
-          </S>
-          <S className="leading-loose lg:leading-relaxed">
-            I combine a <strong> strong technological background </strong> and a
-            high affinity for programming with a passion for product and the
-            bigger picture of software. Which has lead me to my current position
-            in <strong>Technical Product Management</strong>.
-          </S>
+          <Mdx code={aboutIntro.body.code} />
+          <H4>I Work On</H4>
+          <S> (In my free time.)</S>
+          <Muted>
+            Check out my
+            <Link
+              className="pl-1 text-primary underline-offset-4 hover:underline font-semibold"
+              href={siteConfig.links.github}
+            >
+              GitHub
+            </Link>
+          </Muted>
+          <Mdx code={aboutTech.body.code} />
           <div className="space-y-2 pt-4">
             <Card className={cn("border-0")}>
               <CardHeader className="p-2">
-                <H4 className="">Technologies I Commonly Use</H4>
+                <L className="font-semibold">Technologies I Commonly Use</L>
               </CardHeader>
               <CardContent className="flex flex-wrap lg:grid lg:grid-cols-12 gap-2 p-2 pb-2">
                 {techStackData.map((tech, index) => (
@@ -56,16 +56,26 @@ export default async function AboutPage() {
                     title={tech.name}
                     className="h-6 w-6"
                     key={tech.name}
+                    link={tech.link}
                   />
                 ))}
               </CardContent>
             </Card>
           </div>
         </CardContent>
       </Card>
-      <Card key="experiences" className="w-full">
-        <CardHeader className="">
+      <Card key="experiences" className="w-full" id="work-experiences">
+        <CardHeader className="text-start">
           <H4 className="font-title">Work Experiences</H4>
+          <Muted>
+            Check out my
+            <Link
+              className="pl-1 text-primary underline-offset-4 hover:underline font-semibold"
+              href={siteConfig.links.linkedin}
+            >
+              LinkedIn Profile
+            </Link>
+          </Muted>
         </CardHeader>
         <CardContent className="">
           <ExperienceAccordion experienceData={experienceData} />

app/layout.tsx

@@ -46,7 +46,7 @@ export default function RootLayout({
         </head>
         <body
           className={cn(
-            "relative h-screen bg-background font-sans antialiased",
+            "relative min-h-screen bg-background font-sans antialiased",
             lato.variable,
             spartan.variable,
             roboto_mono.variable,
@@ -61,7 +61,7 @@ export default function RootLayout({
             <Nav />
             <main
               className={cn(
-                "container mx-auto grow place-items-center w-full md:w-10/12 xl:w-8/12",
+                "container mx-auto grow place-content-center w-full md:w-9/12 2xl:min-h-[95vh] xl:min-h-[75vh]",
               )}
             >
               {children}

app/page.tsx

@@ -1,38 +1,34 @@
 import { GreetingCard } from "@/components/pages/greeting-card";
+import { CurrentCard } from "@/components/pages/current-card";
 import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { H4, L, M, Muted, Code, S } from "@/components/ui/typography";
+import { H4, L, M, Muted, SMuted, S } from "@/components/ui/typography";
 import * as React from "react";
 import { calloutData } from "@/data/about";
-import { allProjects } from "@/.contentlayer/generated/";
-import type { Project } from "@/.contentlayer/generated";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
-import { SkillIcon } from "@/components/custom/skill-icon";
 
 export default function Home() {
-  const calloutProject = allProjects.find(
-    (project) =>
-      project.title.toLowerCase() === calloutData.calloutProject.toLowerCase(),
-  );
-
   return (
-    <section className="flex flex-col items-center gap-2 sm:gap-4 lg:gap-8 py-4">
+    <section className="flex flex-col gap-2 sm:gap-4 ">
       <div className="grid grid-cols-12 gap-2 w-full">
         <GreetingCard className="col-span-12 lg:col-span-8 lg:row-span-2" />
-        <Card className="col-span-12 lg:col-span-4 lg:row-span-3">
+        <Card
+          className="col-span-12 lg:col-span-4 lg:row-span-3"
+          variant="interactive"
+        >
           <CardHeader className="p-1 pr-4 justify-end">
-            <Muted className="font-mono text-end">about me</Muted>
+            <SMuted className="font-mono text-end">about me</SMuted>
           </CardHeader>
           <CardContent>
-            <ul className="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+            <ul className="my-6 ml-6 list-disc [&>li]:mt-2 text-sm xl:text-base 2xl:text-lg">
               <li>
                 I&rsquo;m a tech enthusiast bridging <strong>product</strong>,{" "}
                 <strong>dev</strong> and other related fields from a technical
@@ -50,103 +46,54 @@ export default function Home() {
             </ul>
           </CardContent>
         </Card>
-        <Card className="col-span-12 lg:col-span-4 lg:row-span-2 space-y-2">
-          <CardHeader className="p-1 pr-4 justify-end">
-            <Muted className="font-mono font-tiny text-end">
-              current project
-            </Muted>
-          </CardHeader>
-          <CardContent className="space-y-1 grid grid-flow-row">
-            <div className="flex flex-row flex-wrap items-center">
-              <SkillIcon
-                variant="default"
-                className="w-8 h-8 mr-2"
-                category={calloutData.focusProject.category}
-              />
-              <H4>{calloutData.focusProject.desc}</H4>
-            </div>
-            <div className="flex flex-row flex-wrap">
-              <S className="leading-relaxed">
-                I currently focus on
-                <Link
-                  href={
-                    calloutData.focusProject.link === ""
-                      ? "/projects"
-                      : calloutData.focusProject.link
-                  }
-                >
-                  <Code className="inline inline-flex">
-                    {calloutData.focusProject.desc.toLowerCase()}
-                  </Code>
-                </Link>
-                . Which is the final step of my Bachelors.
-              </S>
-            </div>
-            <div></div>
-          </CardContent>
-        </Card>
-        <Card className="col-span-12 lg:col-span-4 lg:row-span-2 space-y-2">
-          <CardHeader className="p-1 pr-4 justify-end">
-            <Muted className="font-mono font-tiny text-end">current role</Muted>
-          </CardHeader>
-          <CardContent className="space-y-1 grid grid-flow-row">
-            <div className="flex flex-row flex-wrap items-center">
-              <SkillIcon
-                variant="default"
-                className="w-8 h-8 mr-2"
-                category={calloutData.focusJob.category}
-              />
-              <H4 className="flex-wrap">{calloutData.focusJob.desc}</H4>
-            </div>
-            <div className="flex flex-row flex-wrap">
-              <S className="leading-relaxed">
-                I&rsquo;m a technical product manager for the backend team at
-                <Link
-                  href={
-                    calloutData.focusJob.link === ""
-                      ? "/projects"
-                      : calloutData.focusJob.link
-                  }
-                >
-                  <Code className="inline text-semibold">
-                    {calloutData.focusJob.place.toLowerCase()}
-                  </Code>
-                </Link>
-              </S>
-            </div>
-            <div></div>
-          </CardContent>
-        </Card>
-        <Card className="col-span-12 lg:col-span-4 lg:row-span-1">
+        <CurrentCard
+          className=""
+          currentDesc={calloutData.focusProject.desc}
+          currentCategory={calloutData.focusProject.category}
+          currentLink={calloutData.focusProject.link}
+          currentText={calloutData.focusProject.text}
+          cardHeader="focus project"
+        ></CurrentCard>
+        <CurrentCard
+          className=""
+          currentDesc={calloutData.focusJob.desc}
+          currentCategory={calloutData.focusJob.category}
+          currentLink={calloutData.focusJob.link}
+          currentText={calloutData.focusJob.text}
+          cardHeader="current job"
+        ></CurrentCard>
+        <Card
+          className="col-span-12 lg:col-span-4 lg:row-span-1 hidden lg:block"
+          variant="interactive"
+        >
           <CardHeader className="p-1 pr-4 justify-end">
-            <Muted className="font-mono text-end">about</Muted>
+            <SMuted className="font-mono text-end">about</SMuted>
           </CardHeader>
           <CardContent className="grid grid-cols-3 justify-between">
             <div className="col-span-2 flex flex-wrap justify-start text-start">
-              <M>Learn More About Me</M>
-              <Muted className="text-sm">
-                My skills, experiences and techstack.
-              </Muted>
+              <L>Learn More About Me</L>
+              <Muted>My skills, experiences and techstack.</Muted>
             </div>
             <div className="col-span-1 flex justify-end items-center">
-              <Link href="/about" scroll={false}>
+              <Link href="/about#about-me" scroll={false}>
                 <Button variant="outline" size="icon">
                   <HiMiniArrowTopRightOnSquare className="h-4 w-4" />
                 </Button>
               </Link>
             </div>
           </CardContent>
         </Card>
-        <Card className="col-span-12 lg:col-span-4 lg:row-span-1">
+        <Card
+          className="col-span-12 lg:col-span-4 lg:row-span-1 hidden lg:block"
+          variant="interactive"
+        >
           <CardHeader className="p-1 pr-4 justify-end">
-            <Muted className="font-mono text-end">projects</Muted>
+            <SMuted className="font-mono text-end">projects</SMuted>
           </CardHeader>
           <CardContent className="grid grid-cols-3 justify-between">
             <div className="col-span-2 flex flex-wrap justify-start text-start">
-              <M>See All My Projects</M>
-              <Muted className="text-sm">
-                All my academic and free time projects.
-              </Muted>
+              <L>See All My Projects</L>
+              <Muted>All my academic and free time projects.</Muted>
             </div>
             <div className="col-span-1 flex justify-end items-center">
               <Link href="/projects" scroll={false}>
@@ -157,9 +104,12 @@ export default function Home() {
             </div>
           </CardContent>
         </Card>
-        <Card className="col-span-12 lg:col-span-8 lg:row-span-1 hidden lg:block">
+        <Card
+          className="col-span-12 lg:col-span-8 lg:row-span-1 hidden lg:block"
+          variant="interactive"
+        >
           <CardHeader className="p-1 pr-4 justify-end">
-            <Muted className="font-mono text-end">topics</Muted>
+            <SMuted className="font-mono text-end">topics</SMuted>
           </CardHeader>
           <CardContent className="gap-1 flex flex-wrap">
             {calloutData.skills.map((skill, index) => (

app/projects/[...slug]/page.tsx

@@ -34,7 +34,9 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
         <H3>{project.title} </H3>
         <div className="flex flex-wrap gap-1 justify-start">
           {project.tags &&
-            project.tags.map((tag) => <Badge key={tag}>{tag}</Badge>)}
+            project.tags.map((tag) => (
+              <Badge key={tag}>{tag.toLowerCase()}</Badge>
+            ))}
         </div>
       </div>
       <Separator />
@@ -62,16 +64,6 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
           </Link>
         )}
       </div>
-      {project.images && (
-        <Image
-          src={project.images[0]}
-          alt={project.title}
-          width={780}
-          height={405}
-          className="my-8 rounded-md border bg-muted transition-colors"
-          priority
-        />
-      )}
       <div className="text-start">
         <Mdx code={project.body.code} />
       </div>

app/projects/page.tsx

@@ -9,7 +9,7 @@ export default async function ProjectsPage() {
   const otherProjects = getProjects().otherProjects;
 
   return (
-    <div className="flex flex-col gap-4 lg:gap-8 py-2">
+    <div className="flex flex-col gap-4 lg:gap-8 py-2 py-8">
       <div className="grid gap-2 mx-auto lg:mx-0">
         <ProjectCard project={focusProjects[0]} />
         <div className="grid gap-2 grid-cols-1 md:grid-cols-2">