Initial commit
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import styles from "./styles/About.module.css";
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<section
|
||||
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"
|
||||
alt="about image"
|
||||
width={400}
|
||||
height={400}
|
||||
className="max-w-full h-auto"
|
||||
/>
|
||||
</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 ✨.
|
||||
</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. 📈
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { MailIcon, LinkedinIcon, GithubIcon } from "lucide-react";
|
||||
|
||||
const Contact = () => {
|
||||
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! 😊
|
||||
</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"
|
||||
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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
@@ -0,0 +1,139 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
const Educations = () => {
|
||||
const [formationsData, setFormationsData] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchFormations = 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();
|
||||
setFormationsData(Object.values(data.formations).reverse());
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch formations data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchFormations();
|
||||
}, []);
|
||||
if (!formationsData) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-screen bg-gray-50">
|
||||
<p className="text-xl font-medium text-gray-700">
|
||||
Loading Educations...
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
id="educationScroll"
|
||||
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">
|
||||
Educations
|
||||
</h3>
|
||||
|
||||
{/* Formations container */}
|
||||
<div className="w-full max-w-6xl">
|
||||
{formationsData.map((formation, index) => (
|
||||
<div
|
||||
key={formation.name}
|
||||
className={`
|
||||
bg-white shadow-xl rounded-xl border border-gray-100 my-12
|
||||
flex flex-col items-center justify-center
|
||||
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}
|
||||
alt={`${formation.name} thumbnail`}
|
||||
width={500}
|
||||
height={300}
|
||||
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
|
||||
href={formation.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
|
||||
>
|
||||
Web Site{" "}
|
||||
<i className="fa-solid fa-up-right-from-square ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* 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}
|
||||
</h3>
|
||||
<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
|
||||
href={formation.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
|
||||
>
|
||||
Web Site{" "}
|
||||
<i className="fa-solid fa-up-right-from-square ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Left/Image Column (now on right visually) */}
|
||||
<div className="flex justify-center items-center p-4">
|
||||
<Image
|
||||
src={formation.img}
|
||||
alt={`${formation.name} thumbnail`}
|
||||
width={500}
|
||||
height={300}
|
||||
className="w-full h-auto rounded-lg transition-transform duration-300 hover:scale-95 shadow-md"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Educations;
|
||||
@@ -0,0 +1,145 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
const Experiences = () => {
|
||||
const [experiencesData, setExperiencesData] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchExperiences = 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();
|
||||
setExperiencesData(Object.values(data.experiences).reverse());
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch experiences data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchExperiences();
|
||||
}, []);
|
||||
|
||||
if (!experiencesData) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-screen bg-gray-50">
|
||||
<p className="text-xl font-medium text-gray-700">
|
||||
Loading Experiences...
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
id="experiencesScroll"
|
||||
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">
|
||||
Experiences
|
||||
</h3>
|
||||
|
||||
{/* Experiences container */}
|
||||
<div className="w-full max-w-6xl">
|
||||
{experiencesData.map((experience, index) => (
|
||||
<div
|
||||
key={experience.name}
|
||||
className={`
|
||||
bg-white shadow-xl rounded-xl border border-gray-100 my-12
|
||||
flex flex-col items-center justify-center
|
||||
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
|
||||
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}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-lg mb-2 font-poppins">
|
||||
{experience.date}
|
||||
</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
|
||||
href={experience.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
|
||||
>
|
||||
Web Site{" "}
|
||||
<i className="fa-solid fa-up-right-from-square ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* 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}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-lg mb-2 font-poppins">
|
||||
{experience.date}
|
||||
</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
|
||||
href={experience.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
|
||||
>
|
||||
Web Site{" "}
|
||||
<i className="fa-solid fa-up-right-from-square ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
|
||||
</a>
|
||||
</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
|
||||
className="w-[200px] h-[200px] object-contain rounded-lg transition-transform duration-300 hover:scale-95 shadow-md"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Experiences;
|
||||
@@ -0,0 +1,104 @@
|
||||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
import styles from "./styles/Header.module.css";
|
||||
|
||||
const Header = () => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleHashChange = () => {
|
||||
if (window.location.hash) {
|
||||
const element = document.querySelector(window.location.hash);
|
||||
if (element) {
|
||||
window.scrollTo({
|
||||
top: element.offsetTop - 150,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("hashchange", handleHashChange);
|
||||
return () => window.removeEventListener("hashchange", handleHashChange);
|
||||
}, []);
|
||||
|
||||
const navLinks = [
|
||||
{ name: "Home", href: "#home" },
|
||||
{ name: "About", href: "#aboutScroll" },
|
||||
{ name: "Projects", href: "#projectScroll" },
|
||||
{ name: "Experiences", href: "#experiencesScroll" },
|
||||
{ name: "Education", href: "#educationScroll" },
|
||||
{ name: "Contact", href: "#contactScroll" },
|
||||
];
|
||||
|
||||
return (
|
||||
<header
|
||||
className="fixed top-0 left-0 right-0 z-50 bg-white shadow-xl"
|
||||
id="home"
|
||||
>
|
||||
<div className="flex justify-between items-center px-8 py-8">
|
||||
<div className="flex-shrink-0">
|
||||
<h1 className={`${styles.title} text-2xl font-bold`}>
|
||||
Valentin MASSONNIERE
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<nav className="hidden md:flex space-x-8">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className={`${styles.navLink}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
const element = document.querySelector(link.href);
|
||||
if (element) {
|
||||
window.scrollTo({
|
||||
top: element.offsetTop - 150,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
className={`${styles.mobileMenuButton} focus:outline-none focus:ring-2 focus:ring-blue-500`}
|
||||
aria-label="Toggle navigation menu"
|
||||
>
|
||||
{isMenuOpen ? (
|
||||
<XMarkIcon className="h-7 w-7" />
|
||||
) : (
|
||||
<Bars3Icon className="h-7 w-7" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isMenuOpen && (
|
||||
<nav className="md:hidden bg-white shadow-lg pb-4">
|
||||
<div className="flex flex-col items-center space-y-4 pt-2">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className={`${styles.mobileNavLink} block`}
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,161 @@
|
||||
"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"
|
||||
>
|
||||
{/* 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={{
|
||||
backgroundImage: "url(/assets/img/header_pdp.jpg)",
|
||||
}}
|
||||
></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>
|
||||
</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>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<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>
|
||||
|
||||
{/* 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"
|
||||
alt="Logo C++"
|
||||
width={40}
|
||||
height={40}
|
||||
className={`object-contain ${styles.techIcon}`}
|
||||
/>
|
||||
<Image
|
||||
src="/assets/icon/Python.svg"
|
||||
alt="Logo Python"
|
||||
width={40}
|
||||
height={40}
|
||||
className={`object-contain ${styles.techIcon}`}
|
||||
/>
|
||||
<Image
|
||||
src="/assets/icon/ROS-Dark.svg"
|
||||
alt="Logo GCP"
|
||||
width={40}
|
||||
height={40}
|
||||
className={`object-contain ${styles.techIcon}`}
|
||||
/>
|
||||
<Image
|
||||
src="/assets/icon/Arduino.svg"
|
||||
alt="Logo GCP"
|
||||
width={40}
|
||||
height={40}
|
||||
className={`object-contain ${styles.techIcon}`}
|
||||
/>
|
||||
<Image
|
||||
src="/assets/icon/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"
|
||||
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;
|
||||
@@ -0,0 +1,256 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
const Projects = () => {
|
||||
const [projectsData, setProjectsData] = useState(null);
|
||||
const [isDisplayed, setIsDisplayed] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchProjects = 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();
|
||||
setProjectsData({
|
||||
top: Object.values(data.projects.top),
|
||||
bottom: Object.values(data.projects.bottom),
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch projects data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchProjects();
|
||||
}, []);
|
||||
|
||||
const displayAll = () => {
|
||||
setIsDisplayed((prevIsDisplayed) => !prevIsDisplayed);
|
||||
};
|
||||
|
||||
if (!projectsData) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-screen bg-gray-50">
|
||||
<p className="text-xl font-medium text-gray-700">Loading Projects...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const { top: topProjects, bottom: bottomProjects } = projectsData;
|
||||
|
||||
return (
|
||||
<section
|
||||
id="projectScroll"
|
||||
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">
|
||||
Projects
|
||||
</h3>
|
||||
|
||||
{/* Main projects container (Top Projects) */}
|
||||
<div className="w-full max-w-6xl">
|
||||
{topProjects.map((project, index) => (
|
||||
<div
|
||||
key={project.name}
|
||||
className={`
|
||||
bg-white shadow-xl rounded-xl border border-gray-100 my-12
|
||||
flex flex-col items-center justify-center
|
||||
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}
|
||||
alt={`${project.name} thumbnail`}
|
||||
width={500}
|
||||
height={300}
|
||||
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
|
||||
key={`${project.name}-lang-${iconIndex}`}
|
||||
src={langIcon}
|
||||
alt="language logo"
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-md transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6 shadow-sm"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{/* Code/Demo Links */}
|
||||
<div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
|
||||
{project.link && (
|
||||
<a
|
||||
href={project.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
|
||||
>
|
||||
Code{" "}
|
||||
<i className="fa-brands fa-github ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
|
||||
</a>
|
||||
)}
|
||||
{project.demo && (
|
||||
<a
|
||||
href={project.demo}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
|
||||
>
|
||||
Website{" "}
|
||||
<i className="fa-solid fa-up-right-from-square ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* 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
|
||||
key={`${project.name}-lang-${iconIndex}`}
|
||||
src={langIcon}
|
||||
alt="language logo"
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-md transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6 shadow-sm"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{/* Code/Demo Links */}
|
||||
<div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
|
||||
{project.link && (
|
||||
<a
|
||||
href={project.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
|
||||
>
|
||||
Code{" "}
|
||||
<i className="fa-brands fa-github ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
|
||||
</a>
|
||||
)}
|
||||
{project.demo && (
|
||||
<a
|
||||
href={project.demo}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
|
||||
>
|
||||
Website{" "}
|
||||
<i className="fa-solid fa-up-right-from-square ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Left/Image Column (now on right visually) */}
|
||||
<div className="flex justify-center items-center p-4">
|
||||
<Image
|
||||
src={project.img}
|
||||
alt={`${project.name} thumbnail`}
|
||||
width={500}
|
||||
height={300}
|
||||
className="w-full h-auto rounded-lg transition-transform duration-300 hover:scale-95 shadow-md"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Toggle Button for All Projects */}
|
||||
<button
|
||||
id="btn-all"
|
||||
onClick={displayAll}
|
||||
className={`
|
||||
my-12 px-6 py-3 h-auto w-auto min-w-[200px] rounded-full
|
||||
font-poppins text-xl border-2
|
||||
transition-all duration-300 ease-in-out
|
||||
${
|
||||
isDisplayed
|
||||
? "bg-blue-500 text-white border-blue-500 shadow-md"
|
||||
: "bg-white text-gray-700 border-gray-300 hover:border-blue-500"
|
||||
}
|
||||
flex items-center justify-center gap-3
|
||||
`}
|
||||
>
|
||||
All projects ?
|
||||
<i
|
||||
className={`fa-solid fa-toggle-on text-3xl transition-transform duration-300 ${
|
||||
isDisplayed ? "rotate-0 text-white" : "rotate-180 text-blue-500"
|
||||
}`}
|
||||
></i>
|
||||
</button>
|
||||
|
||||
{/* All Projects Section (conditionally displayed) */}
|
||||
<div
|
||||
className={`
|
||||
w-full max-w-6xl px-4 md:px-8
|
||||
${
|
||||
isDisplayed
|
||||
? "grid place-items-center animate-fade-in-down"
|
||||
: "hidden"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="w-full bg-white shadow-xl rounded-xl border border-gray-100 p-8 my-12">
|
||||
<h3 className="text-3xl font-poppins text-blue-500 mb-10 text-center">
|
||||
All projects
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 justify-items-center">
|
||||
{bottomProjects.map((project) => (
|
||||
<a
|
||||
key={project.name}
|
||||
href={project.demo || 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"
|
||||
>
|
||||
<Image
|
||||
src={project.img}
|
||||
alt={project.name}
|
||||
width={300}
|
||||
height={200}
|
||||
className="w-full h-auto object-cover rounded-lg"
|
||||
title={project.name}
|
||||
/>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Projects;
|
||||
@@ -0,0 +1,20 @@
|
||||
.aboutTitle {
|
||||
color: #308dfb;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.aboutParagraph {
|
||||
color: rgb(85, 85, 85);
|
||||
font-family: "Mulish", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.aboutBackgroundText {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 8rem;
|
||||
letter-spacing: 20px;
|
||||
font-weight: 600;
|
||||
color: rgba(85, 85, 85, 0.1);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.title {
|
||||
color: #2c3e50;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
font-family: "Poppins", sans-serif;
|
||||
color: rgb(45, 46, 50);
|
||||
}
|
||||
|
||||
.navLink {
|
||||
color: #34495e;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
transition: color 0.3s ease-in-out;
|
||||
font-family: "Poppins", sans-serif;
|
||||
color: rgb(45, 46, 50);
|
||||
}
|
||||
|
||||
.navLink:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.mobileMenuButton {
|
||||
color: rgb(45, 46, 50);
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.mobileMenuButton:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.mobileNavLink {
|
||||
color: rgb(45, 46, 50);
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
padding: 0.75rem 0;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.mobileNavLink:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.description {
|
||||
color: rgb(85, 85, 85);
|
||||
font-family: "Mulish", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.techIcon {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.techIcon:hover {
|
||||
transform: scale(1.15) rotate(-5deg);
|
||||
}
|
||||
.animatedImage {
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
border: 3px solid rgb(45, 46, 50);
|
||||
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
||||
animation: imgAnim 8s ease-in-out infinite;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@keyframes imgAnim {
|
||||
0% {
|
||||
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
||||
}
|
||||
50% {
|
||||
border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
|
||||
}
|
||||
100% {
|
||||
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user