valentin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Valentin Massonnière
2026-04-23 22:29:00 +02:00
parent fcd3554545
commit 3460b67777
37 changed files with 356 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Contact.jsx
+48 -39
View File
@@ -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>