avoid splitting sections

src/App.css

@@ -1,42 +1,5 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
+@media print {
+  .never-split {
+    page-break-inside: avoid;
   }
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.tsx

@@ -2,6 +2,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { fab } from "@fortawesome/free-brands-svg-icons";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useState } from "react";
+import "./App.css";
 import Experience from "./components/Experience";
 import { FileDownloadButton } from "./components/FileDownloadButton";
 import { FileUploadButton } from "./components/FileUploadButton";

src/components/experience_components/ExperienceItem.tsx

@@ -11,7 +11,7 @@ const ExperienceItem = ({
   activities,
 }: ExperienceItemProps) => {
   return (
-    <div className="pl-3 pb-3 pt-1 hover:bg-zinc-100">
+    <div className="pl-3 pb-3 pt-1 hover:bg-zinc-100 never-split">
       <div className="flex flex-row items-center justify-between text-[11px] mb:text-xs mb-[-5px]">
         <p>{dateTo ? `${dateFrom} -  ${dateTo}` : dateFrom}</p>
         <p>{company}</p>

src/components/experience_components/ExperienceSection.tsx

@@ -1,13 +1,13 @@
-import ExperienceItem from "./ExperienceItem";
+import Icon from "../Icon";
 import {
   ExperienceItemProps,
   ExperienceSectionProps,
 } from "../contexts/DataContext";
-import Icon from "../Icon";
+import ExperienceItem from "./ExperienceItem";
 
 const ExperienceSection = ({ icon, title, items }: ExperienceSectionProps) => {
   return (
-    <div className="mb-5 ">
+    <div className="mb-5 never-split">
       <div className="flex flex-row text-2xl items-center">
         <Icon name={icon.name} family={icon.family} style={icon.style} />
         <p className="font-bold">{title}</p>

src/components/sidebar_components/SidebarItem.tsx

@@ -23,7 +23,7 @@ const SidebarItem = ({ data }: SidebarItemProps) => {
   }
 
   return (
-    <div className="mb-5">
+    <div className="mb-5 never-split">
       {data.title ? (
         <div className="mb-2">
           <div className="font-bold text-2xl">{data.title}</div>