Enhance CV page with ATS-compatible semantic HTML and print styles

Co-authored-by: papotte <21336477+papotte@users.noreply.github.com>

Author: Copilot

src/pages/cv/index.astro

@@ -56,7 +56,7 @@ const title = `${CONTENT.name}'s CV`;
 				<Print />
 			</div>
 			<div class="a4">
-				<div class="header">
+				<header class="header">
 					<div class="title">
 						<h1>{CONTENT.name}</h1>
 						<p>{CONTENT.designation}</p>
@@ -68,17 +68,19 @@ const title = `${CONTENT.name}'s CV`;
 							contactInfo.map(({ icon, label }) => {
 								return (
 									<p class="contact">
-										{icon && <Icon name={icon} />}
-										{label}
+										<span class="icon-wrapper print:hidden" aria-hidden="true">
+											{icon && <Icon name={icon} />}
+										</span>
+										<span class="contact-label">{label}</span>
 									</p>
 								);
 							})
 						}
 					</div>
-				</div>
+				</header>
 
-				<div class="section">
-					<div class="title"><h3>Work Experience</h3></div>
+				<section class="section" aria-label="Work Experience">
+					<div class="title"><h2>Work Experience</h2></div>
 					{
 						CONTENT.work.map((job: JobExperience) => {
 							return (
@@ -102,9 +104,9 @@ const title = `${CONTENT.name}'s CV`;
 							);
 						})
 					}
-				</div>
-				<div class="section">
-					<div class="title"><h3>Education</h3></div>
+				</section>
+				<section class="section" aria-label="Education">
+					<div class="title"><h2>Education</h2></div>
 					{
 						CONTENT.education.map((edu: Education) => {
 							return (
@@ -128,9 +130,9 @@ const title = `${CONTENT.name}'s CV`;
 							);
 						})
 					}
-				</div>
-				<div class="section">
-					<div class="title"><h3>Language Skills</h3></div>
+				</section>
+				<section class="section" aria-label="Language Skills">
+					<div class="title"><h2>Language Skills</h2></div>
 					{
 						CONTENT.languages.map((item: Language) => {
 							return (
@@ -145,9 +147,9 @@ const title = `${CONTENT.name}'s CV`;
 							);
 						})
 					}
-				</div>
-				<div class="section">
-					<div class="title"><h3>IT Skills</h3></div>
+				</section>
+				<section class="section" aria-label="IT Skills">
+					<div class="title"><h2>IT Skills</h2></div>
 					{
 						skillList.map(([label, item]) => {
 							return (
@@ -164,9 +166,9 @@ const title = `${CONTENT.name}'s CV`;
 							);
 						})
 					}
-				</div>
-				<div class="section">
-					<div class="title"><h3>Projects</h3></div>
+				</section>
+				<section class="section" aria-label="Projects">
+					<div class="title"><h2>Projects</h2></div>
 					{
 						CONTENT.projects.map((item: Project) => {
 							return (
@@ -188,9 +190,9 @@ const title = `${CONTENT.name}'s CV`;
 							);
 						})
 					}
-				</div>
-				<div class="section">
-					<div class="title"><h3>Interests</h3></div>
+				</section>
+				<section class="section" aria-label="Interests">
+					<div class="title"><h2>Interests</h2></div>
 					<div class="block">
 						<div class="date"></div>
 						<div class="information">
@@ -203,7 +205,7 @@ const title = `${CONTENT.name}'s CV`;
 							</div>
 						</div>
 					</div>
-				</div>
+				</section>
 			</div>
 		</div>
 	</body>

src/styles/cv.scss

@@ -12,6 +12,14 @@
   .header {
     @apply mb-10 flex items-end justify-between;
 
+    // Print: stack header in single column for better ATS parsing
+    @media print {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
     h1 {
       @apply mb-2;
     }
@@ -23,13 +31,36 @@
         @apply justify-end text-end;
       }
 
+      // Print: left-align for better ATS reading order
+      @media print {
+        > * {
+          justify-content: flex-start;
+          text-align: start;
+        }
+      }
+
       p {
         @apply flex flex-row gap-1;
 
         svg {
           @apply h-4 w-4;
         }
       }
+
+      // Print: ensure contact info is text-only for ATS
+      .contact {
+        .icon-wrapper {
+          @media print {
+            display: none;
+          }
+        }
+
+        .contact-label {
+          @media print {
+            font-style: normal;
+          }
+        }
+      }
     }
   }
 
@@ -46,21 +77,56 @@
         content: ' ';
       }
 
+      > h2,
       > h3 {
         @apply col-span-5;
       }
+
+      // Print: simplify section title styling for ATS
+      @media print {
+        display: flex;
+        flex-direction: row;
+        align-items: baseline;
+        gap: 0.5rem;
+
+        &::before {
+          width: 40px;
+          flex-shrink: 0;
+        }
+      }
     }
 
     > .block {
       @apply my-2 grid grid-cols-6 gap-4;
 
+      // Print: use single column layout for better ATS parsing
+      @media print {
+        display: block;
+        page-break-inside: avoid;
+      }
+
       > .date {
         @apply col-span-1 text-right;
+
+        // Print: inline with information for better reading order
+        @media print {
+          display: inline;
+          font-weight: 600;
+
+          &::after {
+            content: ': ';
+          }
+        }
       }
 
       > .information {
         @apply col-span-5;
 
+        // Print: ensure proper display
+        @media print {
+          display: inline;
+        }
+
         > .title {
           > span {
             &::after {
@@ -81,8 +147,57 @@
               display: unset;
             }
           }
+
+          // Print: simplify columns for ATS
+          @media print {
+            column-count: 1 !important;
+          }
         }
       }
     }
   }
+
+  // Print-specific optimizations for ATS compatibility
+  @media print {
+    // Avoid CSS properties that cause rasterization
+    * {
+      transform: none !important;
+      filter: none !important;
+      backdrop-filter: none !important;
+      mix-blend-mode: normal !important;
+    }
+
+    // Ensure all text is selectable (not rendered as image)
+    body,
+    div,
+    p,
+    span,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    ul,
+    li {
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
+
+    // Hide all SVG icons
+    svg {
+      display: none !important;
+    }
+
+    // Optimize page breaks
+    h1,
+    h2,
+    h3 {
+      page-break-after: avoid;
+    }
+
+    .section {
+      page-break-inside: avoid;
+    }
+  }
 }