feat: PDF print friendlier (#52)

Author: c3n21

src/components/ContactSection.astro

@@ -41,7 +41,7 @@ const contactInfo = [
             {
                 !isCV && (
                     <div class="lg:col-span-2 animate-fade-in">
-                        <Card>
+                        <Card class="break-inside-avoid">
                             <CardHeader>
                                 <CardTitle class="flex items-center gap-2">
                                     <Linkedin class="text-primary" size={24} />
@@ -101,7 +101,7 @@ const contactInfo = [
 
             <!-- Contact Info -->
             <div class="space-y-6 animate-fade-in">
-                <Card>
+                <Card class="break-inside-avoid">
                     <CardHeader>
                         <CardTitle>Contact Information</CardTitle>
                     </CardHeader>
@@ -125,7 +125,7 @@ const contactInfo = [
                     </CardContent>
                 </Card>
 
-                <Card>
+                <Card class="break-inside-avoid">
                     <CardHeader>
                         <CardTitle>Find Me Online</CardTitle>
                     </CardHeader>

src/components/ProjectsSection.astro

@@ -146,7 +146,7 @@ const isCV = isCVMode()
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
             {
                 featuredProjects.map((project) => (
-                    <Card class="group overflow-hidden hover-scale transition-all duration-300 animate-fade-in">
+                    <Card class="break-inside-avoid group overflow-hidden hover-scale transition-all duration-300 animate-fade-in">
                         <div class="w-full h-full bg-primary/0 group-hover:bg-primary/10 transition-colors duration-300">
                             {project.images.length > 0 && !isCV && (
                                 <div>
@@ -226,7 +226,7 @@ const isCV = isCVMode()
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {
                     otherProjects.map((project) => (
-                        <Card class="group hover-scale transition-all duration-300">
+                        <Card class="break-inside-avoid group hover-scale transition-all duration-300">
                             {project.images.length > 0 && !isCV && (
                                 <div>
                                     <Carousel

src/components/ResumeSection.astro

@@ -69,7 +69,7 @@ const isCV = isCVMode()
 
                 {
                     experiences.map((exp) => (
-                        <Card class="hover-scale transition-all duration-300">
+                        <Card class="break-inside-avoid hover-scale transition-all duration-300">
                             <CardHeader>
                                 <CardTitle class="text-lg">
                                     {exp.position}
@@ -96,7 +96,7 @@ const isCV = isCVMode()
             {/* Skills & Education */}
             <div class="space-y-8 animate-fade-in">
                 {/* Skills */}
-                <Card>
+                <Card class="break-inside-avoid">
                     <CardHeader>
                         <CardTitle>Technical Skills</CardTitle>
                     </CardHeader>
@@ -117,7 +117,7 @@ const isCV = isCVMode()
                 </Card>
 
                 {/* Education */}
-                <Card>
+                <Card class="break-inside-avoid">
                     <CardHeader>
                         <CardTitle>Education</CardTitle>
                     </CardHeader>

src/styles/global.css

@@ -175,3 +175,7 @@
 ::-webkit-scrollbar-thumb:hover {
     background: hsl(var(--primary));
 }
+
+section {
+    page-break-before: always;
+}