Presentation

The Presentation component serves as the hero section of the portfolio, displaying personal information, location, availability status, CV download, and social media links.

Overview

This component creates an engaging introduction section with a two-column layout (responsive single column on mobile) featuring text content and a profile image.

Props

The Presentation component does not accept props. All content is defined within the component.

Usage

import Presentation from './components/Presentation/Presentation';

function App() {
  return (
    <main>
      <section id="presentation">
        <Presentation />
      </section>
    </main>
  );
}

Features

Personal Information Display

The component displays:

Name and title
Brief bio/description
Location information
Availability status
Profile image

Includes icons and links to:

GitHub
LinkedIn
Instagram

Using react-icons for consistent icon styling:

import { FaGithub, FaLinkedin, FaInstagram } from 'react-icons/fa';
import { MdOutlineWork } from "react-icons/md";
import { FaLocationDot } from "react-icons/fa6";

CV Download

Provides a download button for the resume/CV:

import CV from '/docs/CV.pdf';

<a href={CV} download="Jeronimo-Diaz-CV.pdf">
  <button>Download CV</button>
</a>

Layout Structure

Responsive Layout

The component uses Flexbox for responsive design:

className="flex flex-col-reverse md:flex-row items-center justify-center gap-10 md:gap-16"

Mobile: Column layout (reversed) with image on top
Desktop: Row layout with text left, image right

Content Sections

Text Content
- Heading and subheading
- Description paragraph
- Location and availability badges
- CV download button
- Social media links
Profile Image
- Rounded corners
- Responsive sizing
- Object-fit cover

Customization

Personalizing Content

function Presentation() {
  return (
    <section className="flex flex-col-reverse md:flex-row items-center justify-center gap-10 md:gap-16 mt-20 md:mt-28 px-6 md:px-16 max-w-5xl mx-auto">
      
      <div className="flex flex-col text-center md:text-left">
        <div>
          <h1 className="text-3xl md:text-5xl font-bold mb-3">
            Hi, I'm [Your Name]
          </h1>
          <h2 className="text-xl md:text-3xl text-[#b5b5b5] mb-5">
            [Your Title/Role]
          </h2>
          <p className="text-base md:text-lg leading-relaxed max-w-[500px] text-[#C7C7C7]">
            [Your description]
          </p>
        </div>

        <div className="flex items-center justify-center md:justify-start gap-5 mt-5">
          <div className="flex items-center gap-2">
            <FaLocationDot className="w-5 h-5 text-white" />
            <p className="text-sm text-[#C7C7C7]">[Your Location]</p>
          </div>
          <div className="flex items-center gap-2">
            <MdOutlineWork className="w-5 h-5 text-white" />
            <p className="text-sm text-[#C7C7C7]">[Your Status]</p>
          </div>
        </div>

        {/* Rest of component */}
      </div>
    </section>
  );
}

<ul className="flex gap-5 list-none">
  <li>
    <a href="[YOUR_GITHUB_URL]" target="_blank" rel="noopener noreferrer">
      <FaGithub className="w-6 h-6 text-white hover:text-[#3A76D9] hover:-translate-y-0.5 transition-all duration-200" />
    </a>
  </li>
  <li>
    <a href="[YOUR_LINKEDIN_URL]" target="_blank" rel="noopener noreferrer">
      <FaLinkedin className="w-6 h-6 text-white hover:text-[#3A76D9] hover:-translate-y-0.5 transition-all duration-200" />
    </a>
  </li>
  {/* Add more social links */}
</ul>

Changing Profile Image

import Pfp from '/img/your-profile-image.jpg';

<div className="w-[250px] h-[250px] md:w-[400px] md:h-[400px] mx-2 flex-shrink-0">
  <img src={Pfp} alt="Profile" className="w-full h-full object-cover rounded-2xl" />
</div>

Button Styling Variants

{/* Solid Button */}
<button className="bg-blue-600 text-white px-5 py-3 rounded-xl text-sm font-medium hover:bg-blue-700 transition-all duration-200 shadow-lg">
  Download CV
</button>

{/* Outline Button */}
<button className="bg-transparent text-white px-5 py-3 rounded-xl text-sm font-medium border-2 border-white hover:bg-white hover:text-black transition-all duration-200">
  Download CV
</button>

{/* Gradient Button */}
<button className="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-5 py-3 rounded-xl text-sm font-medium hover:from-purple-600 hover:to-pink-600 transition-all duration-200 shadow-lg">
  Download CV
</button>

Dependencies

This component requires react-icons for the social media and status icons:

npm install react-icons

Icons Used

FaGithub - GitHub icon
FaLinkedin - LinkedIn icon
FaInstagram - Instagram icon
MdOutlineWork - Work/availability icon
FaLocationDot - Location pin icon

File Structure

src/
├── components/
│   └── Presentation/
│       └── Presentation.jsx
└── public/
    ├── docs/
    │   └── CV.pdf
    └── img/
        └── Pfp.jpg

Styling Details

Text Hierarchy

{/* Main heading */}
<h1 className="text-3xl md:text-5xl font-bold mb-3">

{/* Subheading */}
<h2 className="text-xl md:text-3xl text-[#b5b5b5] mb-5">

{/* Body text */}
<p className="text-base md:text-lg leading-relaxed max-w-[500px] text-[#C7C7C7]">

Hover Effects

Social icons include smooth hover animations:

className="w-6 h-6 text-white hover:text-[#3A76D9] hover:-translate-y-0.5 transition-all duration-200"

Color change to blue
Subtle upward movement (-0.5rem)
200ms transition duration

Divider Line

A styled horizontal rule separates sections:

<hr className="w-3/4 border-2 border-[#3A3C41] rounded my-6 mx-auto md:mx-0" />

Responsive Breakpoints

Mobile (< 768px):
- Column layout (flex-col-reverse)
- Centered text
- Smaller image (250x250px)
- Smaller text sizes
- Margin top: 20 (mt-20)
Desktop (≥ 768px):
- Row layout (flex-row)
- Left-aligned text
- Larger image (400x400px)
- Larger text sizes
- Margin top: 28 (mt-28)

Accessibility

Semantic HTML elements (<section>, <header>, <nav>)
Proper heading hierarchy (h1, h2)
Alt text for images (add via img alt attribute)
External links with target="_blank" and rel="noopener noreferrer"
Descriptive link text and icons
Keyboard accessible buttons and links

Best Practices

Image Optimization: Compress profile image for web (WebP format recommended)
CV File: Keep CV file size reasonable (< 2MB)
Social Links: Verify all links are current and working
Responsive Testing: Test on multiple device sizes
Color Contrast: Ensure text colors meet WCAG accessibility standards

Remember to update the social media URLs, CV file path, and profile image path with your own information.

Get Started

Components

Customization

Deployment

Presentation

Presentation

Overview

Props

Usage

Features

Personal Information Display

CV Download

Layout Structure

Responsive Layout

Content Sections

Customization

Personalizing Content

Changing Profile Image

Button Styling Variants

Dependencies

Icons Used

File Structure

Styling Details

Text Hierarchy

Hover Effects

Divider Line

Responsive Breakpoints

Accessibility

Best Practices

Get Started

Components

Customization

Deployment

​Presentation

​Overview

​Props

​Usage

​Features

​Personal Information Display

​Social Media Integration

​CV Download

​Layout Structure

​Responsive Layout

​Content Sections

​Customization

​Personalizing Content

​Customizing Social Links

​Changing Profile Image

​Button Styling Variants

​Dependencies

​Icons Used

​File Structure

​Styling Details

​Text Hierarchy

​Hover Effects

​Divider Line

​Responsive Breakpoints

​Accessibility

​Best Practices

Presentation

Overview

Props

Usage

Features

Personal Information Display

Social Media Integration

CV Download

Layout Structure

Responsive Layout

Content Sections

Customization

Personalizing Content

Customizing Social Links

Changing Profile Image

Button Styling Variants

Dependencies

Icons Used

File Structure

Styling Details

Text Hierarchy

Hover Effects

Divider Line

Responsive Breakpoints

Accessibility

Best Practices