update

2026-04-23 22:29:00 +02:00
parent fcd3554545
commit 3460b67777
37 changed files with 356 additions and 325 deletions
@@ -8,35 +8,40 @@ const About = () => {
      id="aboutScroll"
      className="max-w-6xl mx-auto my-20 px-4 md:px-8 grid grid-cols-1 md:grid-cols-2 gap-16 items-center min-h-[80vh]"
    >
-      {/* Left Image Column */}
      <div className="flex justify-center items-center">
        <Image
-          src="/assets/img/about.png"
+          src="/assets/img/about_me.jpg"
          alt="about image"
-          width={400}
-          height={400}
-          className="max-w-full h-auto"
+          width={480}
+          height={480}
+          className="max-w-full h-auto rounded-xl shadow-md"
        />
      </div>

-      {/* Right Content Column */}
      <div className="relative flex flex-col items-center md:items-start text-center md:text-left space-y-4">
-        {/* Title */}
        <h3 className={styles.aboutTitle}>About me</h3>

-        {/* Paragraph 1 */}
        <p className={`${styles.aboutParagraph} mt-5`}>
          I'm currently registered at Efrei Paris specializing in Data
-          Engineering & AI 📊. I'm in apprenticeship at IceBerg Data Lab such as
-          AI Engineer & Data Scientist ✨.
+          Engineering & AI. I'm in apprenticeship at Iceberg Data Lab as AI
+          Engineer & Data Scientist.
        </p>

-        {/* Paragraph 2 */}
        <p className={styles.aboutParagraph}>
-          These aspirations merge my deep interest in IT 🖥️ with the fascinating
-          fields of aerospace and aeronautics 🛰️. My strong passion lies in
-          computer science and artificial intelligence, and my ultimate aim is
-          to become a highly skilled engineer in the big data and AI domains. 📈
+          My deep interest in IT merges with the fascinating field of aerospace.
+          My strong passion lies in computer science and artificial
+          intelligence, with a growing focus on robotics and its applications to
+          space.
+        </p>
+        <p className={styles.aboutParagraph}>
+          I am working toward a PhD in Robotics + AI, and I prepare for it
+          actively. With DeepSight-Nebula, I am turning an educational robot
+          into a real-time capable platform — writing ESP32 firmware from
+          scratch and documenting the work as a mini-thesis. In parallel, I run
+          a daily spaced-repetition review on MP-level mathematics, work through
+          the Rust book for low-level fluency, and read one robotics paper per
+          week. Next up: a SLAM-focused project paired with a ROS2 course, to
+          bridge the gap from firmware to full autonomous systems.
        </p>
      </div>
    </section>
@@ -0,0 +1,80 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Image from "next/image";
+
+const Certifications = () => {
+  const [certifications, setCertifications] = useState(null);
+
+  useEffect(() => {
+    const fetchCertifications = async () => {
+      try {
+        const response = await fetch("/assets/data/data.json");
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        setCertifications(data.certifications || []);
+      } catch (error) {
+        console.error("Failed to fetch certifications data:", error);
+      }
+    };
+
+    fetchCertifications();
+  }, []);
+
+  if (!certifications) {
+    return (
+      <div className="flex justify-center items-center h-64 bg-gray-50">
+        <p className="text-xl font-medium text-gray-700">
+          Loading Certifications...
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <section
+      id="certificationsScroll"
+      className="w-full flex flex-col items-center justify-center py-20 px-4 md:px-8 bg-gray-50 rounded-lg shadow-inner"
+    >
+      <h3 className="text-2xl font-poppins text-blue-500 mb-12 font-extrabold">
+        Certifications
+      </h3>
+
+      <div className="w-full max-w-6xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
+        {certifications.map((cert) => (
+          <a
+            key={cert.name}
+            href={cert.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={cert.name}
+            className="flex flex-col bg-white rounded-xl border border-gray-100 shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-xl"
+          >
+            <div className="relative w-full aspect-[4/3] bg-gray-50">
+              <Image
+                src={cert.img}
+                alt={`${cert.name} certificate`}
+                fill
+                className="object-contain p-2"
+                sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, 20vw"
+                unoptimized
+              />
+            </div>
+            <div className="flex flex-col items-start p-4 gap-1">
+              <p className="text-sm font-semibold text-gray-800 font-poppins leading-snug">
+                {cert.name}
+              </p>
+              <p className="text-xs text-gray-500 font-poppins">
+                {cert.issuer}
+              </p>
+            </div>
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default Certifications;
@@ -1,62 +1,71 @@
 "use client";

 import React from "react";
-import Image from "next/image";
-import { MailIcon, LinkedinIcon, GithubIcon } from "lucide-react";
+import { Mail, MailOpen, LinkedinIcon, GithubIcon } from "lucide-react";

 const Contact = () => {
+  const itemClass =
+    "group relative flex items-center gap-3 text-gray-700 font-mulish text-lg rounded-lg px-3 py-2 -mx-3 transition-colors duration-300 hover:text-blue-600";
+
  return (
    <section
      id="contactScroll"
      className="mx-auto flex justify-center py-20 px-4 md:px-8 bg-gray-50 rounded-lg shadow-inner"
    >
      <div className="w-full max-w-6xl">
-        {/* Contact section title */}
        <h3 className="text-2xl font-poppins text-blue-500 mb-4 font-extrabold text-center">
          Contact
        </h3>
        <p className="text-gray-700 font-poppins text-xl mt-5 font-semibold text-center mb-12">
-          Feel free to contact me! 😊
+          Feel free to contact me!
        </p>

-        <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-12">
-          <div className="w-full md:w-1/2 lg:w-2/5 flex justify-center">
-            <div className="bg-white p-6 rounded-xl shadow-xl border border-gray-100 flex flex-col gap-4 max-w-sm w-full">
-              {/* Mail contact */}
-              <div className="flex items-center text-gray-700 font-mulish text-lg">
-                <MailIcon
-                  className="mr-3 text-blue-500 flex-shrink-0"
+        <div className="flex justify-center">
+          <div className="bg-white p-8 rounded-xl shadow-xl border border-gray-100 flex flex-col gap-4 w-full max-w-md">
+            <a
+              href="mailto:contact@valentin-massonniere.ch"
+              className={itemClass}
+            >
+              <span className="relative flex-shrink-0 w-6 h-6 text-blue-500">
+                <Mail
+                  className="absolute inset-0 transition-opacity duration-300 ease-out group-hover:opacity-0"
                  size={24}
-                />{" "}
-                {/* Added flex-shrink-0 */}
-                <p className="min-w-0 break-words">
-                  valentin78.massonniere@gmail.com
-                </p>{" "}
-                {/* Added min-w-0 and break-words */}
-              </div>
+                />
+                <MailOpen
+                  className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100"
+                  size={24}
+                />
+              </span>
+              <span className="relative min-w-0 break-words">
+                contact@valentin-massonniere.ch
+              </span>
+            </a>

-              {/* Discord contact */}
-              <div className="flex items-center text-gray-700 font-mulish text-lg">
-                <GithubIcon className="mr-3 text-blue-500" size={24} />
-                <p>TheValll</p>
-              </div>
+            <a
+              href="https://github.com/TheValll"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={itemClass}
+            >
+              <GithubIcon
+                className="relative flex-shrink-0 text-blue-500"
+                size={24}
+              />
+              <span className="relative">TheValll</span>
+            </a>

-              {/* LinkedIn contact */}
-              <div className="flex items-center text-gray-700 font-mulish text-lg">
-                <LinkedinIcon className="mr-3 text-blue-500" size={24} />
-                <p>Valentin MASSONNIERE</p>
-              </div>
-            </div>
-          </div>
-
-          <div className="relative w-full md:w-1/2 lg:w-3/5 hidden md:flex justify-center items-center">
-            <Image
-              src="/assets/img/contact.png"
-              alt="Contact illustration"
-              width={400}
-              height={400}
-              className="z-10 max-w-full h-auto rounded-lg"
-            />
+            <a
+              href="https://www.linkedin.com/in/valentin-massonniere/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={itemClass}
+            >
+              <LinkedinIcon
+                className="relative flex-shrink-0 text-blue-500"
+                size={24}
+              />
+              <span className="relative">Valentin MASSONNIERE</span>
+            </a>
          </div>
        </div>
      </div>
@@ -41,7 +41,6 @@ const Educations = () => {
        Educations
      </h3>

-      {/* Formations container */}
      <div className="w-full max-w-6xl">
        {formationsData.map((formation, index) => (
          <div
@@ -52,10 +51,8 @@ const Educations = () => {
              md:grid md:grid-cols-2 md:gap-8 p-6
            `}
          >
-            {/* Conditional rendering for alternating layout */}
            {index % 2 === 0 ? (
              <>
-                {/* Left/Image Column */}
                <div className="flex justify-center items-center p-4">
                  <Image
                    src={formation.img}
@@ -65,17 +62,14 @@ const Educations = () => {
                    className="w-full h-auto rounded-lg transition-transform duration-300 hover:scale-95 shadow-md"
                  />
                </div>
-                {/* Right/Content Column */}
                <div className="flex flex-col items-center text-center p-4 md:items-start md:text-left">
                  <h3 className="text-2xl font-semibold text-gray-800 mb-3 font-poppins">
                    {formation.name}
                  </h3>
-                  {/* Use whitespace-pre-wrap to respect newline characters in description */}
                  <p className="text-gray-600 text-lg mb-5 font-poppins whitespace-pre-wrap">
                    {formation.desc}
                  </p>

-                  {/* Link to formation (if available) */}
                  {formation.link && (
                    <div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
                      <a
@@ -93,7 +87,6 @@ const Educations = () => {
              </>
            ) : (
              <>
-                {/* Right/Content Column (now on left visually) */}
                <div className="flex flex-col items-center text-center p-4 md:items-start md:text-left">
                  <h3 className="text-2xl font-semibold text-gray-800 mb-3 font-poppins">
                    {formation.name}
@@ -102,7 +95,6 @@ const Educations = () => {
                    {formation.desc}
                  </p>

-                  {/* Link to formation (if available) */}
                  {formation.link && (
                    <div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
                      <a
@@ -117,7 +109,6 @@ const Educations = () => {
                    </div>
                  )}
                </div>
-                {/* Left/Image Column (now on right visually) */}
                <div className="flex justify-center items-center p-4">
                  <Image
                    src={formation.img}
@@ -42,7 +42,6 @@ const Experiences = () => {
        Experiences
      </h3>

-      {/* Experiences container */}
      <div className="w-full max-w-6xl">
        {experiencesData.map((experience, index) => (
          <div
@@ -53,20 +52,17 @@ const Experiences = () => {
              md:grid md:grid-cols-2 md:gap-8 p-6
            `}
          >
-            {/* Conditional rendering for alternating layout */}
            {index % 2 === 0 ? (
              <>
-                {/* Left/Image Column */}
                <div className="flex justify-center items-center p-4">
                  <Image
                    src={experience.img}
                    alt={`${experience.name} logo`}
-                    width={200} // Changed to 200
-                    height={200} // Changed to 200
+                    width={200}
+                    height={200}
                    className="w-[200px] h-[200px] object-contain rounded-lg transition-transform duration-300 hover:scale-95 shadow-md"
                  />
                </div>
-                {/* Right/Content Column */}
                <div className="flex flex-col items-center text-center p-4 md:items-start md:text-left">
                  <h3 className="text-2xl font-semibold text-gray-800 mb-3 font-poppins">
                    {experience.name}
@@ -74,11 +70,15 @@ const Experiences = () => {
                  <p className="text-gray-600 text-lg mb-2 font-poppins">
                    {experience.date}
                  </p>
+                  {experience.about && (
+                    <p className="text-gray-500 text-base mb-3 font-poppins italic">
+                      {experience.about}
+                    </p>
+                  )}
                  <p className="text-gray-600 text-lg mb-5 font-poppins whitespace-pre-wrap">
                    {experience.desc}
                  </p>

-                  {/* Link to experience (if available) */}
                  {experience.link && (
                    <div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
                      <a
@@ -96,7 +96,6 @@ const Experiences = () => {
              </>
            ) : (
              <>
-                {/* Right/Content Column (now on left visually) */}
                <div className="flex flex-col items-center text-center p-4 md:items-start md:text-left">
                  <h3 className="text-2xl font-semibold text-gray-800 mb-3 font-poppins">
                    {experience.name}
@@ -104,11 +103,15 @@ const Experiences = () => {
                  <p className="text-gray-600 text-lg mb-2 font-poppins">
                    {experience.date}
                  </p>
+                  {experience.about && (
+                    <p className="text-gray-500 text-base mb-3 font-poppins italic">
+                      {experience.about}
+                    </p>
+                  )}
                  <p className="text-gray-600 text-lg mb-5 font-poppins whitespace-pre-wrap">
                    {experience.desc}
                  </p>

-                  {/* Link to experience (if available) */}
                  {experience.link && (
                    <div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
                      <a
@@ -123,13 +126,12 @@ const Experiences = () => {
                    </div>
                  )}
                </div>
-                {/* Left/Image Column (now on right visually) */}
                <div className="flex justify-center items-center p-4">
                  <Image
                    src={experience.img}
                    alt={`${experience.name} logo`}
-                    width={200} // Changed to 200
-                    height={200} // Changed to 200
+                    width={200}
+                    height={200}
                    className="w-[200px] h-[200px] object-contain rounded-lg transition-transform duration-300 hover:scale-95 shadow-md"
                  />
                </div>
@@ -26,6 +26,7 @@ const Header = () => {
  const navLinks = [
    { name: "Home", href: "#home" },
    { name: "About", href: "#aboutScroll" },
+    { name: "Certifications", href: "#certificationsScroll" },
    { name: "Projects", href: "#projectScroll" },
    { name: "Experience", href: "#experiencesScroll" },
    { name: "Education", href: "#educationScroll" },
@@ -11,7 +11,6 @@ const Presentation = () => {
      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"
    >
-      {/* Right Image Column (appears first on small screens due to flex-col order) */}
      <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={{
@@ -19,35 +18,24 @@ const Presentation = () => {
        }}
      ></div>

-      {/* Left Content Column (appears second on small screens, first on medium screens) */}
      <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">
-        {/* Title */}
        <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{" "}
-            <span role="img" aria-label="mobile phone">
-              ✨
-            </span>
+            <br /> Student
          </h1>
        </div>

-        {/* Description */}
        <div className={`${styles.description} max-w-md text-lg text-gray-700`}>
          <p>
-            Hello, I'm Valentin Massonniere, an enthusiastic{" "}
-            <br className="hidden sm:inline" />
-            AI - Robotic Engineer & Data Scientist at IceBergData Lab from
-            France{" "}
-            <span role="img" aria-label="pin location">
-              🇫🇷
-            </span>
+            Hi, I'm Valentin Massonniere.
+            <br className="hidden sm:inline" /> Currently at Iceberg Data Lab,
+            based in France.
          </p>
        </div>

-        {/* Social Links */}
        <div className="flex space-x-6 text-gray-600">
          <a
            href="https://www.linkedin.com/in/valentin-massonniere/"
@@ -69,59 +57,79 @@ const Presentation = () => {
          </a>
        </div>

-        {/* Tech Stack */}
        <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="/assets/icon/CPP.svg"
+              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="/assets/icon/Python.svg"
+              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="/assets/icon/ROS-Dark.svg"
-              alt="Logo GCP"
+              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="/assets/icon/Arduino.svg"
-              alt="Logo GCP"
+              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="/assets/icon/Docker.svg"
+              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}`}
            />
-            <Image
-              src="/assets/icon/RaspberryPi.svg"
-              alt="Logo RaspberryPi"
-              width={40}
-              height={40}
-              className={`object-contain ${styles.techIcon}`}
-            />
          </div>
        </div>
      </div>

-      {/* Scroll Down Indicator */}
      <a
        href="#aboutScroll"
        aria-label="Scroll down"
@@ -49,7 +49,6 @@ const Projects = () => {
        Projects
      </h3>

-      {/* Main projects container (Top Projects) */}
      <div className="w-full max-w-6xl">
        {topProjects.map((project, index) => (
          <div
@@ -60,10 +59,8 @@ const Projects = () => {
              md:grid md:grid-cols-2 md:gap-8 p-6
            `}
          >
-            {/* Conditional rendering for alternating layout */}
            {index % 2 === 0 ? (
              <>
-                {/* Left/Image Column */}
                <div className="flex justify-center items-center p-4">
                  <Image
                    src={project.img}
@@ -73,16 +70,13 @@ const Projects = () => {
                    className="w-full h-auto rounded-lg transition-transform duration-300 hover:scale-95 shadow-md"
                  />
                </div>
-                {/* Right/Content Column */}
                <div className="flex flex-col items-center text-center p-4 md:items-start md:text-left">
                  <h3 className="text-2xl font-semibold text-gray-800 mb-3 font-poppins">
                    {project.name}
                  </h3>
-                  {/* Applied font-poppins here */}
                  <p className="text-gray-600 text-lg mb-5 font-poppins">
                    {project.desc}
                  </p>
-                  {/* Language Icons */}
                  <div className="flex flex-wrap justify-center md:justify-start gap-4 mb-6">
                    {project.language.map((langIcon, iconIndex) => (
                      <Image
@@ -95,7 +89,6 @@ const Projects = () => {
                      />
                    ))}
                  </div>
-                  {/* Code/Demo Links */}
                  <div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
                    {project.link && (
                      <a
@@ -124,16 +117,13 @@ const Projects = () => {
              </>
            ) : (
              <>
-                {/* Right/Content Column (now on left visually) */}
                <div className="flex flex-col items-center text-center p-4 md:items-start md:text-left">
                  <h3 className="text-2xl font-semibold text-gray-800 mb-3 font-poppins">
                    {project.name}
                  </h3>
-                  {/* Applied font-poppins here */}
                  <p className="text-gray-600 text-lg mb-5 font-poppins">
                    {project.desc}
                  </p>
-                  {/* Language Icons */}
                  <div className="flex flex-wrap justify-center md:justify-start gap-4 mb-6">
                    {project.language.map((langIcon, iconIndex) => (
                      <Image
@@ -146,7 +136,6 @@ const Projects = () => {
                      />
                    ))}
                  </div>
-                  {/* Code/Demo Links */}
                  <div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
                    {project.link && (
                      <a
@@ -172,7 +161,6 @@ const Projects = () => {
                    )}
                  </div>
                </div>
-                {/* Left/Image Column (now on right visually) */}
                <div className="flex justify-center items-center p-4">
                  <Image
                    src={project.img}
@@ -188,7 +176,6 @@ const Projects = () => {
        ))}
      </div>

-      {/* Toggle Button for All Projects */}
      <button
        id="btn-all"
        onClick={displayAll}
@@ -212,7 +199,6 @@ const Projects = () => {
        ></i>
      </button>

-      {/* All Projects Section (conditionally displayed) */}
      <div
        className={`
          w-full max-w-6xl px-4 md:px-8
@@ -231,7 +217,7 @@ const Projects = () => {
            {bottomProjects.map((project) => (
              <a
                key={project.name}
-                href={project.demo || link}
+                href={project.demo || project.link}
                target="_blank"
                rel="noopener noreferrer"
                className="block w-full max-w-xs overflow-hidden rounded-lg shadow-md transition-transform duration-300 hover:scale-105 hover:shadow-lg"