ATS Resume Templates: Design Guide for 2025

Resume Upload → Text Extraction → Section Detection → Data Parsing → Scoring

1. TEXT EXTRACTION
   - PDF/DOCX → Plain text
   - OCR for image-based content (often fails)
   - Table/column handling (often problematic)

2. SECTION DETECTION
   - Pattern matching for headers
   - "Experience", "Work History", "Employment" → EXPERIENCE
   - "Education", "Academic", "Degrees" → EDUCATION
   - "Skills", "Competencies", "Technical" → SKILLS

3. DATA PARSING
   - Company names, job titles, dates
   - Degree names, institutions, graduation dates
   - Skills extraction and categorization

4. SCORING & RANKING
   - Keyword matching against job description
   - Required skills vs. found skills
   - Experience level matching
   - Education requirements

/* ATS-Friendly Resume Template CSS */

/* Base styles */
.resume {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  line-height: 1.4;
  color: #333;
  max-width: 8.5in;
  margin: 0 auto;
  padding: 0.5in;
}

/* Section headers - easily parseable */
.section-header {
  font-size: 13pt;
  font-weight: bold;
  color: #1a1a1a;
  border-bottom: 2px solid #333;
  padding-bottom: 4px;
  margin-top: 16px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Job entries */
.job-entry {
  margin-bottom: 12px;
}

.job-title {
  font-weight: bold;
  font-size: 11pt;
}

.company-name {
  font-style: italic;
}

.date-range {
  float: right;
  color: #666;
}

/* Skills - simple list format */
.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-item {
  background: #f5f5f5;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10pt;
}

/* Avoid these for ATS */
/* NO: position: absolute */
/* NO: transform */
/* NO: columns/flex for main layout */
/* NO: @font-face with custom fonts */

// components/templates/ATSTemplate.tsx
interface ResumeData {
  contact: ContactInfo;
  summary: string;
  experience: Experience[];
  education: Education[];
  skills: SkillCategory[];
}

export const ATSTemplate: React.FC<{ data: ResumeData }> = ({ data }) => {
  return (
    <div className="resume">
      {/* Contact - in body, not header */}
      <header className="text-center mb-4">
        <h1 className="text-2xl font-bold">{data.contact.name}</h1>
        <p className="text-sm">
          {data.contact.email} | {data.contact.phone} | {data.contact.location}
        </p>
        {data.contact.linkedin && (
          <p className="text-sm">{data.contact.linkedin}</p>
        )}
      </header>

      {/* Summary - standard header */}
      <section>
        <h2 className="section-header">Professional Summary</h2>
        <p>{data.summary}</p>
      </section>

      {/* Experience - standard header, reverse chron */}
      <section>
        <h2 className="section-header">Experience</h2>
        {data.experience.map((job, i) => (
          <div key={i} className="job-entry">
            <div className="flex justify-between">
              <span className="font-bold">{job.title}</span>
              <span>{job.startDate} - {job.endDate || 'Present'}</span>
            </div>
            <div className="italic">{job.company}, {job.location}</div>
            <ul className="list-disc ml-4 mt-2">
              {job.highlights.map((h, j) => (
                <li key={j}>{h}</li>
              ))}
            </ul>
          </div>
        ))}
      </section>

      {/* Education */}
      <section>
        <h2 className="section-header">Education</h2>
        {data.education.map((edu, i) => (
          <div key={i} className="mb-2">
            <div className="font-bold">{edu.degree} in {edu.field}</div>
            <div>{edu.institution}, {edu.graduationYear}</div>
          </div>
        ))}
      </section>

      {/* Skills - comma-separated for ATS */}
      <section>
        <h2 className="section-header">Skills</h2>
        {data.skills.map((category, i) => (
          <div key={i} className="mb-2">
            <span className="font-semibold">{category.name}: </span>
            <span>{category.items.join(', ')}</span>
          </div>
        ))}
      </section>
    </div>
  );
};