Template 3: Balanced Header Design

Template 3 offers a balanced, modern design with a prominent header banner and a light gray sidebar. This template provides excellent versatility and readability, making it suitable for a wide range of professional applications.

Visual Design

Layout Structure

The template features a three-section layout:

Top Header Banner: Full-width dark gray bar with photo and name
Left Column (40% width): Light gray background with personal info and skills
Right Column (60% width): White background with profile, experience, and education

Color Scheme

Header Background: Dark gray (#585858)
Header Text: White
Left Column Background: Light gray (#f2f2f2)
Left Column Text: Black
Right Column Background: White
Right Column Text: Black
Borders: Light gray (border-gray-300)
Style: Clean, balanced, professional

Typography

The template combines Jost and Cairo fonts:

import { Cairo, Jost } from "next/font/google";

const nombreApellido = Jost({
  subsets: ["latin"],
  weight: ["400", "700"],
});

const contenido2 = Cairo({
  subsets: ["latin"],
  weight: "300",
});

Name Font: Jost (400, 700) - Modern geometric sans-serif
Body Font: Cairo Light (300) - Clean, readable text
Font Sizes:
- Mobile: 5.8px for body, 9px for profession
- Desktop: 9px for body, 13px for profession, 24px for name

Component Structure

The top banner creates a strong visual anchor:

<section
  id="barra-superior"
  className="flex h-auto border-b-[1px] bg-[#585858] text-white"
>
  {/* Photo Section - 50% width */}
  <div className="w-3/6 flex justify-center px-7 py-[5px] lg:py-2">
    <Image
      src={fotoPerfil}
      alt="Foto de Perfil"
      width={83}
      height={83}
      className={fotoRedonda ? "rounded-[50%] hidden lg:block" : "hidden lg:block"}
    />
  </div>
  
  {/* Name & Profession - 75% width */}
  <div className="w-3/4 flex flex-col flex-grow items-center justify-center px-7 py-[5px] lg:py-2">
    <div className={`${nombreApellido.className} text-center antialiased text-sm lg:text-2xl gap-3 tracking-wider uppercase flex`}>
      <h1>{datos.nombre} {datos.apellido}</h1>
    </div>
    <h5 className="text-[9px] lg:text-sm">{datos.profesion}</h5>
  </div>
</section>

Visual Description: A dark gray horizontal banner spans the top of the page. The profile photo is centered in the left half, while the name and profession are centered in the right portion, creating balanced visual weight.

Left Column (Light Gray Background)

The left column uses consistent border styling:

<section
  id="izquierda"
  className="w-2/5 bg-[#f2f2f2] py-1 pl-3 pr-2 lg:py-2 lg:pl-5 lg:pr-3"
>
  <DatosPersonales icono={cv3} classTitulo={borde} />
  <Lenguajes icono={item} classBloque="mt-2" classTitulo={borde} />
  <HabilidadesBlandas
    icono={item}
    classBloque="mt-2"
    classTitulo={borde}
  />
  <HabilidadesTecnicas
    icono={item}
    classBloque="mt-2"
    classTitulo={borde}
  />
  <RefProfesionales classBloque="mt-2" classTitulo={borde} />
  <RefPersonales classBloque="mt-2" classTitulo={borde} />
</section>

Visual Description: A light gray background distinguishes the left column from the main area. Section titles have subtle bottom borders in light gray.

Right Column (White Background)

The main content area features the profile and professional history:

<section
  id="derecha"
  className="w-3/5 md:h-[580px] py-1 pr-3 pl-2 lg:py-2 lg:pr-5 lg:pl-3"
>
  {/* Profile Section */}
  {datos.sobremi !== "" && datos.sobremi ? (
    <div>
      <h2 className={`${borde} mb-1 font-black`}>PERFIL</h2>
      <p className="text-justify">{datos.sobremi}</p>
    </div>
  ) : <></>}
  
  <Experiencia
    icono="✓&nbsp;"
    classBloque="mt-2"
    classTitulo={borde}
  />
  <Educacion classBloque="mt-2" classTitulo={borde} />
</section>

Information Sections

Header Section

Profile Photo
- Centered in left half of header
- Size: 83px × 83px (desktop), 53px × 53px (mobile)
- Circular option available
Name & Profession
- Centered in right portion of header
- Name in uppercase Jost font
- Profession displayed below

Left Column Sections

Personal Information (DatosPersonales)
- Email, address, DNI, phone, marital status
- Icons from react-icons
Languages (Lenguajes)
- Bulleted with • symbol
Soft Skills (HabilidadesBlandas)
- Bulleted with • symbol
Technical Skills (HabilidadesTecnicas)
- Bulleted with • symbol
Professional References (RefProfesionales)
Personal References (RefPersonales)

Right Column Sections

Profile/About Me
- Optional section at top
- Text justified
- Border-bottom separator
Work Experience (Experiencia)
- Company, dates, position
- Task list with ✓ checkmark
Education (Educacion)
- Institution, dates, degree

Icon Configuration

Template 3 uses the same modern icon set as Template 2:

import { MdEmail } from "react-icons/md";
import { FaLocationDot } from "react-icons/fa6";
import { HiIdentification } from "react-icons/hi2";
import { BsFillPhoneFill } from "react-icons/bs";
import { GiLinkedRings } from "react-icons/gi";

const cv3 = {
  correo: <MdEmail />,
  direccion: <FaLocationDot />,
  dni: <HiIdentification />,
  celular: <BsFillPhoneFill />,
  estadocivil: <GiLinkedRings />,
};

Styling Constants

Template 3 defines specific styling patterns:

const item = "•";  // Bullet point for lists
const borde = "border-b-[0.1px] lg:border-b-[1px] border-gray-300";

The border constant creates subtle separators:

Mobile: 0.1px bottom border
Desktop: 1px bottom border
Color: Light gray (border-gray-300)

Section Spacing

Consistent spacing pattern throughout:

classBloque="mt-2"   // Top margin for section spacing
classTitulo={borde}   // Border bottom for section titles

Dimensions

Mobile: 350px × 453px
Desktop: 541px × 700px
Header Height: Auto, based on content
Content Height: 580px (desktop)
PDF Output: Letter size (8.5” × 11”)
Padding:
- Header: px-7, py-[5px] (mobile), py-2 (desktop)
- Left column: pl-3, pr-2 (mobile), pl-5, pr-3 (desktop)
- Right column: pr-3, pl-2 (mobile), pr-5, pl-3 (desktop)

Data Management

Standard data retrieval from cookies and localStorage:

const [datos, setDatos] = useState([]);
const [fotoPerfil, setFotoPerfil] = useState(defaultSrc);
const [fotoRedonda, setFotoRedonda] = useState(false);

useEffect(() => {
  const image = localStorage.getItem("fotoPerfil");
  if (image) setFotoPerfil(image);
  
  const existe = Cookies.get("InformacionPersonal");
  if (existe) setDatos(JSON.parse(existe));
  
  const estadoFoto = localStorage.getItem("fotoRedonda") === "true";
  setFotoRedonda(estadoFoto);
}, []);

PDF Generation Settings

Identical to all templates:

function generarPDF() {
  const pdf = new jsPDF("p", "pt", "letter");
  const contenidoDiv = document.getElementById("contenido-pdf");
  contenidoDiv.width = 541;
  contenidoDiv.height = 700;

  html2canvas(contenidoDiv, { scale: 5 }).then((canvas) => {
    const imgData = canvas.toDataURL("image/jpeg");
    pdf.addImage(
      imgData,
      "JPEG",
      0,
      0,
      pdf.internal.pageSize.getWidth(),
      pdf.internal.pageSize.getHeight(),
      "",
      "FAST"
    );
    pdf.save(`CV-${datos.nombre}${datos.apellido}.pdf`);
  });
}

Unique Features

The full-width header banner is unique to Template 3:

Creates strong visual impact
Centers photo and name prominently
Separates candidate identity from detailed information
Dark background provides contrast

Three-Layer Color Scheme

Template 3 uses three distinct background colors:

Dark gray header (#585858)
Light gray sidebar (#f2f2f2)
White main area

This creates visual hierarchy without strong contrast.

Subtle Borders

Unlike Templates 1 and 2, Template 3 uses very subtle, light gray borders:

const borde = "border-b-[0.1px] lg:border-b-[1px] border-gray-300";

This maintains clean separation without harsh lines.

Centered Header Content

Both the photo and name/profession are centered within their respective sections:

className="flex justify-center"  // Photo
className="flex flex-col items-center justify-center"  // Name

Use Cases

Template 3 is ideal for:

Professional services (consulting, accounting, etc.)
Healthcare professionals
Education and training roles
Business development positions
Candidates seeking versatile, industry-agnostic design
Applications requiring both modern and professional appearance
Roles where readability is paramount

Design Philosophy

Balance and Harmony

Template 3 achieves visual balance through:

Centered header elements
Proportional column widths
Consistent spacing rhythm
Subtle color differentiation

Readability Focus

The design prioritizes content readability:

Cairo Light font is highly legible
Ample white space
Clear visual hierarchy
Subtle separators don’t compete with content

Professional Versatility

The neutral color palette and balanced layout make this template appropriate for:

Conservative industries that appreciate modern touches
Progressive companies that value professionalism
Cross-industry applications
Various career levels (entry to executive)

Customization Points

Developers can customize:

Header color: Modify bg-[#585858]
Sidebar color: Change bg-[#f2f2f2]
Border styling: Adjust the borde constant
Border color: Modify border-gray-300
Font pairing: Replace Jost and Cairo
Bullet symbols: Change • symbol
Header proportions: Adjust photo vs. name width split
Column widths: Modify the 40/60 split
Spacing rhythm: Adjust mt-2 values
Photo shape: Square or circular options

Comparison with Other Templates

vs. Template 1

More modern color scheme
Header banner instead of simple top section
Lighter overall appearance
Softer visual separators

vs. Template 2

Less contrast (no dark sidebar)
More neutral and versatile
Better for print (less ink consumption)
Professional info in column instead of sidebar

Print Optimization

Template 3 is the most print-friendly:

Minimal dark areas (only header)
Light gray background prints well or can be ignored
Subtle borders remain visible when printed
High contrast between text and backgrounds

Templates

Components

Template 3: Balanced Header Design

Visual Design

Layout Structure

Color Scheme

Typography

Component Structure

Header Banner

Left Column (Light Gray Background)

Right Column (White Background)

Information Sections

Header Section

Left Column Sections

Right Column Sections

Icon Configuration

Styling Constants

Section Spacing

Dimensions

Data Management

PDF Generation Settings

Unique Features

Header Banner Design

Three-Layer Color Scheme

Subtle Borders

Centered Header Content

Use Cases

Design Philosophy

Balance and Harmony

Readability Focus

Professional Versatility

Customization Points

Comparison with Other Templates

vs. Template 1

vs. Template 2

Print Optimization

Build docs developers (and LLMs) love

Templates

Components

​Visual Design

​Layout Structure

​Color Scheme

​Typography

​Component Structure

​Header Banner

​Left Column (Light Gray Background)

​Right Column (White Background)

​Information Sections

​Header Section

​Left Column Sections

​Right Column Sections

​Icon Configuration

​Styling Constants

​Section Spacing

​Dimensions

​Data Management

​PDF Generation Settings

​Unique Features

​Header Banner Design

​Three-Layer Color Scheme

​Subtle Borders

​Centered Header Content

​Use Cases

​Design Philosophy

​Balance and Harmony

​Readability Focus

​Professional Versatility

​Customization Points

​Comparison with Other Templates

​vs. Template 1

​vs. Template 2

​Print Optimization

Build docs developers (and LLMs) love

Visual Design

Layout Structure

Color Scheme

Typography

Component Structure

Header Banner

Left Column (Light Gray Background)

Right Column (White Background)

Information Sections

Header Section

Left Column Sections

Right Column Sections

Icon Configuration

Styling Constants

Section Spacing

Dimensions

Data Management

PDF Generation Settings

Unique Features

Header Banner Design

Three-Layer Color Scheme

Subtle Borders

Centered Header Content

Use Cases

Design Philosophy

Balance and Harmony

Readability Focus

Professional Versatility

Customization Points

Comparison with Other Templates

vs. Template 1

vs. Template 2

Print Optimization