Customizing Content

This guide shows you how to customize all the content in your portfolio website by editing the React components.

Updating Personal Information

The hero section contains your main personal information and introduction.

Hero Section

Edit src/components/HeroSection.tsx to update your name, title, and introduction.

Update Your Title

Modify the job title displayed above your name:

src/components/HeroSection.tsx

<motion.p
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ delay: 0.2, duration: 0.6 }}
  className="text-primary font-heading text-sm tracking-[0.3em] uppercase mb-6"
>
  Chief Technology Officer  {/* Change this to your title */}
</motion.p>

Keep your title concise and professional. Examples: “Full Stack Developer”, “Product Designer”, “Data Scientist”

Update Your Name

Change the main heading to display your name:

src/components/HeroSection.tsx

<motion.h1
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ delay: 0.4, duration: 0.6 }}
  className="font-heading text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight mb-6"
>
  David{" "}  {/* First name */}
  <span className="text-gradient">Carrascosa</span>  {/* Last name with gradient */}
</motion.h1>

The gradient effect is applied to the second part of your name using the text-gradient class.

Update Your Introduction

Modify your professional summary and current company:

src/components/HeroSection.tsx

<motion.p
  className="text-muted-foreground text-lg md:text-xl max-w-2xl mx-auto leading-relaxed mb-4"
>
  +20 años liderando tecnología, consultoría y desarrollo de software.
  Actualmente impulsando la transformación digital desde{" "}
  <span className="text-primary font-medium">Grupo SADE</span>.  {/* Your company */}
</motion.p>

Update Your Location

Change your location:

src/components/HeroSection.tsx

<motion.p
  className="text-muted-foreground/60 text-sm tracking-wide"
>
  Madrid, España  {/* Your location */}
</motion.p>

Updating About Section Stats

The stats array in src/components/AboutSection.tsx displays your key metrics.

const stats = [
  { icon: Briefcase, value: "+20", label: "Años de experiencia" },
  { icon: Users, value: "+70", label: "Clientes atendidos" },
  { icon: Lightbulb, value: "+200", label: "Proyectos exitosos" },
];

Changing Stat Icons

You can use any icon from Lucide React:

src/components/AboutSection.tsx

import { Briefcase, Users, Lightbulb, Award, Code, Rocket } from "lucide-react";

const stats = [
  { icon: Code, value: "5+", label: "Years Experience" },
  { icon: Award, value: "15", label: "Awards Won" },
  { icon: Rocket, value: "100+", label: "Projects Launched" },
];

Updating About Section Content

Edit the text content in src/components/AboutSection.tsx:

Update Section Title

src/components/AboutSection.tsx

<p className="text-primary font-heading text-sm tracking-[0.2em] uppercase mb-3">
  Sobre mí  {/* Section label */}
</p>
<h2 className="font-heading text-3xl md:text-5xl font-bold mb-8">
  Tecnología con visión de negocio  {/* Main heading */}
</h2>

Update Biography Paragraphs

src/components/AboutSection.tsx

<div className="md:col-span-3 space-y-5">
  <p className="text-secondary-foreground leading-relaxed text-lg">
    Your first paragraph - make it compelling!
  </p>
  <p className="text-muted-foreground leading-relaxed">
    Second paragraph with more details about your current role.
  </p>
  <p className="text-muted-foreground leading-relaxed">
    Third paragraph about your approach and values.
  </p>
</div>

Modifying Skills

Update the skills array in src/components/SkillsSection.tsx to showcase your expertise.

Adding New Skills

Import Required Icons

src/components/SkillsSection.tsx

import { Brain, Code, Shield, Workflow, Cloud, Users, Database, Palette } from "lucide-react";

Add Your Skills

src/components/SkillsSection.tsx

const skills = [
  {
    icon: Code,
    title: "Frontend Development",
    description: "Building responsive, accessible web applications with React, TypeScript, and modern CSS.",
  },
  {
    icon: Database,
    title: "Backend Development",
    description: "Designing scalable APIs and services with Node.js, Python, and cloud infrastructure.",
  },
  {
    icon: Palette,
    title: "UI/UX Design",
    description: "Creating beautiful, user-centered interfaces with Figma and modern design systems.",
  },
  // Add more skills...
];

The layout uses a 3-column grid on large screens. For best visual balance, use 3, 6, or 9 skills.

Removing Skills

Simply delete the skill object from the array:

src/components/SkillsSection.tsx

const skills = [
  {
    icon: Brain,
    title: "IA Generativa",
    description: "...",
  },
  // Delete this skill by removing the entire object
  // {
  //   icon: Code,
  //   title: "Desarrollo de Software",
  //   description: "...",
  // },
  {
    icon: Workflow,
    title: "Transformación Digital",
    description: "...",
  },
];

Updating Experience

Modify the experiences array in src/components/ExperienceSection.tsx:

const experiences = [
  {
    role: "Your Job Title",
    company: "Company Name",
    period: "2020 - Present",
    description: "Brief description of your role and key achievements.",
    highlights: ["Skill 1", "Skill 2", "Skill 3", "Skill 4"],
  },
];

Edit src/components/ContactSection.tsx to update your contact information:

Update Section Heading and Description