Customization Options

import { Roboto, Playfair_Display } from "next/font/google";

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

const play = Playfair_Display({
  subsets: ["latin"],
  weight: ["600", "700"],
});

<div className="flex flex-col w-[350px] h-[453px] md:w-[541px] md:h-[700px]">
  <section id="barra-superior">
    {/* Name, profession, photo */}
  </section>
  <section id="informacion" className="flex">
    <section id="col-izquierda" className="w-2/5">
      {/* Contact, skills, languages, references */}
    </section>
    <section id="col-derecha" className="w-3/5">
      {/* Profile, experience, education */}
    </section>
  </section>
</div>

import { Saira_Condensed, Arsenal } from "next/font/google";

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

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

/* Sidebar background */
background: #424e5e;
color: white;

/* Section title highlight */
background: #fdedcb;

<div className="flex">
  <section id="izquierda" className="w-2/5 bg-[#424e5e] text-white">
    {/* Photo, name, profile, contact, technical skills, soft skills */}
  </section>
  <section id="derecha" className="w-3/5">
    {/* Experience, education, references, languages */}
  </section>
</div>

const [fotoRedonda, setFotoRedonda] = useState(false);

// Load saved preference on component mount
useEffect(() => {
  const estado = localStorage.getItem("fotoRedonda") === "true";
  if (estado) {
    setFotoRedonda(estado);
  }
}, []);

// Save preference to localStorage when changed
const handleToggle = () => {
  const nuevoEstado = !fotoRedonda;
  setFotoRedonda(nuevoEstado);
  localStorage.setItem("fotoRedonda", nuevoEstado);
};

// Apply shape in CV templates
<Image
  src={fotoPerfil}
  alt="Foto de Perfil"
  width={83}
  height={83}
  className={fotoRedonda ? "rounded-[50%]" : ""}
/>

<div className="flex items-center p-2 w-full justify-between">
  <h1>Imagen Circular</h1>
  <label className="flex items-center cursor-pointer">
    <div className="relative">
      <input
        type="checkbox"
        id="toggle"
        checked={fotoRedonda}
        onChange={handleToggle}
        className="hidden"
      />
      <div
        className={`block bg-gray-300 w-8 h-4 rounded-full ${
          fotoRedonda ? "bg-green-500" : ""
        }`}
      ></div>
      <div
        className={`absolute left-0 top-0 bg-white w-4 h-4 rounded-full transition-transform ${
          fotoRedonda ? "translate-x-full" : ""
        }`}
      ></div>
    </div>
  </label>
</div>

/* Background */
background: white;

/* Text */
color: black;

/* Borders */
border-color: black;

/* Overall feel: Clean, minimal, professional */

/* Sidebar background */
background: #424e5e; /* Dark slate blue-gray */

/* Sidebar text */
color: white;

/* Main content background */
background: white;

/* Main content text */
color: black;

/* Section title highlight */
background: #fdedcb; /* Soft cream/beige */

/* Overall feel: Modern, professional, visual hierarchy */

// Responsive container
<div className="w-[350px] h-[453px] md:w-[541px] md:h-[700px]">

// Responsive image
<Image
  src={fotoPerfil}
  width={53}    // Mobile size
  height={53}
  className="rounded-[50%] lg:hidden"  // Show only on mobile
/>
<Image
  src={fotoPerfil}
  width={83}    // Desktop size
  height={83}
  className="hidden lg:block"  // Show only on desktop
/>

// Responsive typography
<div className="text-[5.8px] lg:text-[9px]">