portfolio/components/Presentation.jsx

"use client";

import React from "react";
import Image from "next/image";
import { LinkedinIcon, GithubIcon } from "lucide-react";
import styles from "./styles/Presentation.module.css";

const Presentation = () => {
  return (
    <section
      id="home"
      className="flex flex-col md:flex-row items-center justify-center min-h-screen py-16 px-4 md:px-8 bg-gray-50 overflow-hidden"
    >
      <div
        className={`${styles.animatedImage} relative flex-shrink-0 overflow-hidden shadow-xl mt-16 md:mt-0 md:ml-12 order-1 md:order-2`}
        style={{
          backgroundImage: "url(/assets/img/header_pdp.jpg)",
        }}
      ></div>

      <div className="flex flex-col items-center md:items-start text-center md:text-left md:w-1/2 p-4 md:p-8 space-y-6 order-2 md:order-1">
        <div className="max-w-xl">
          <h1
            className={`${styles.title} text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-900 leading-tight`}
          >
            AI - Robotic Engineer & Data Scientist
            <br /> Student
          </h1>
        </div>

        <div className={`${styles.description} max-w-md text-lg text-gray-700`}>
          <p>
            Hi, I'm Valentin Massonniere.
            <br className="hidden sm:inline" /> Currently at Iceberg Data Lab,
            based in France.
          </p>
        </div>

        <div className="flex space-x-6 text-gray-600">
          <a
            href="https://www.linkedin.com/in/valentin-massonniere/"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="LinkedIn profile"
            className="hover:text-blue-600 transition-colors duration-300"
          >
            <LinkedinIcon className="h-8 w-8" />
          </a>
          <a
            href="https://github.com/TheValll"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="GitHub profile"
            className="hover:text-blue-600 transition-colors duration-300"
          >
            <GithubIcon className="h-8 w-8" />
          </a>
        </div>

        <div className="flex flex-col md:flex-row items-center md:items-center space-y-2 md:space-y-0 md:space-x-4 pt-4 w-full">
          <h3 className="text-xl font-semibold text-gray-800 mb-2 md:mb-0 whitespace-nowrap">
            Tech Stack |
          </h3>
          <div className="grid grid-cols-2 gap-4 md:flex md:flex-row md:gap-4">
            <Image
              src="https://raw.githubusercontent.com/tandpfun/skill-icons/main/icons/Rust.svg"
              alt="Logo Rust"
              width={40}
              height={40}
              className={`object-contain ${styles.techIcon}`}
            />
            <Image
              src="https://github.com/tandpfun/skill-icons/raw/main/icons/CPP.svg"
              alt="Logo C++"
              width={40}
              height={40}
              className={`object-contain ${styles.techIcon}`}
            />
            <Image
              src="https://raw.githubusercontent.com/tandpfun/skill-icons/main/icons/Python-Dark.svg"
              alt="Logo Python"
              width={40}
              height={40}
              className={`object-contain ${styles.techIcon}`}
            />
            <Image
              src="https://raw.githubusercontent.com/tandpfun/skill-icons/main/icons/Matlab-Dark.svg"
              alt="Logo Matlab"
              width={40}
              height={40}
              className={`object-contain ${styles.techIcon}`}
            />
            <Image
              src="https://raw.githubusercontent.com/tandpfun/skill-icons/main/icons/ROS-Dark.svg"
              alt="Logo ROS2"
              title="ROS2"
              width={40}
              height={40}
              className={`object-contain ${styles.techIcon}`}
            />
            <Image
              src="https://github.com/tandpfun/skill-icons/raw/main/icons/Arduino.svg"
              alt="Logo Arduino"
              width={40}
              height={40}
              className={`object-contain ${styles.techIcon}`}
            />
            <Image
              src="https://raw.githubusercontent.com/tandpfun/skill-icons/main/icons/NeoVim-Dark.svg"
              alt="Logo NeoVim"
              width={40}
              height={40}
              className={`object-contain ${styles.techIcon}`}
            />
            <Image
              src="https://raw.githubusercontent.com/tandpfun/skill-icons/main/icons/Linux-Dark.svg"
              alt="Logo Linux"
              width={40}
              height={40}
              className={`object-contain ${styles.techIcon}`}
            />
            <Image
              src="https://github.com/tandpfun/skill-icons/raw/main/icons/Docker.svg"
              alt="Logo Docker"
              width={40}
              height={40}
              className={`object-contain ${styles.techIcon}`}
            />
          </div>
        </div>
      </div>

      <a
        href="#aboutScroll"
        aria-label="Scroll down"
        className="absolute bottom-8 animate-bounce hidden md:flex items-center justify-center"
        onClick={(e) => {
          e.preventDefault();
          const element = document.querySelector("#aboutScroll");
          if (element) {
            window.scrollTo({
              top: element.offsetTop - 150,
              behavior: "smooth",
            });
          }
        }}
      >
        <div className="w-8 h-8 border-2 border-gray-600 rounded-full flex items-center justify-center">
          <svg
            className="w-4 h-4 text-gray-600"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M19 14l-7 7m0 0l-7-7m7 7V3"
            ></path>
          </svg>
        </div>
      </a>
    </section>
  );
};

export default Presentation;