portfolio_v2/src/components/sections/About.jsx

import RevealOnScroll from "../RevealOnScroll";

import { VscCalendar } from "react-icons/vsc";
import { HiOutlineBuildingOffice } from "react-icons/hi2";
import { MdPlace } from "react-icons/md";
import { FaSchool } from "react-icons/fa6";

function About() {
    const cybersecuritySkills = {
        "skils": [
            "Penetration testing",
            "Security auditing",
            "Network security",
        ],
        "projects": [
            "Security Audit",
            "Creation of a secured network (ACL and Firewalls)",
            "Root-Me: +2900pts",
            "Assisted in the creation of a cybersecurity initiation workshop at the IUT Lannion's Cyber Club",
            "One of the creators of the CTF competition organized by the Cyber Club, IUT Lannion",
        ]
    }

    const programmationSkills = {
        "skils": [
            "Python",
            "HTML/PHP/CSS",
            "Bash",
            "Powershell",
            "Lerning C/C++/Node.js (Vite/React + Tailwind CSS)",
        ],
        "projects": [
            "Python Softphone (Client/Server)",
            "Python Portfolio",
            "Vite / React / Tailwind Portfolio",
            "Task automation",
            "Cybersecurity challenge (Python / C)",
        ]
    }

    const networkSkills = {
        "skils": [
            "Design",
            "Implementation",
            "Troubleshouting",
            "VPN IPSec / SSL",
            "Firewall (Stormshield CSNA Certified)",
            "Cisco / Aruba / Stormshield",
        ],
        "projects": [
            "Creation of a school network from scratch",
            "Creation of a secured network (ACL and Firewalls)",
        ]
    }

    const systemSkills = {
        "skils": [
            "Linux",
            "Arch Linux /w Hyprland",
            "Debian /w/o gui",
            "Windows",
            "Windows Active Directory",
            "LDAP",
            "Postfix",
            "Poste.io",
            "Virtualisation",
            "Docker",
            "VirutalBox",
            "VMWare Worstation",
            "VMWare vSphere / ESXI",
            "Orchestration",
            "Portainer",
            "CI/CD",
            "Gitlab",
            "Jenkins",
            "Gerrit",
        ],
        "projects": [
            "Lab Work: Active Directory, LDAP, VMware, VCenter, Docker",
            "HomeLab with Dockerized services on Debian",
            "Personal CI/CD using Gitlab and Jenkins (and Portainer for auto deployment)",
            "Reverse proxy using Nginx",
            "Personal mail server using Poste.io",
            "Personal Desktop on Windows 11 / Kali Linux (Dual Boot)",
            "Personal Laptop on Arch Linux /w Hyprland",
        ]
    }

    const projectManagementSkills = {
        "skils": [
            "Reporting",
            "Gantt Chart",
            "Team Management",
        ],
        "projects": [
            "Creation of a school network from scratch",
            "Team Management in different school projects",
        ]
    }

    const languageSkills = {
        "skils": [
            "French: Native language",
            "English: B1+",
        ],
        "projects": [
            "Educational trip to London, hosted in local homes with English-speaking families",
            "Competitive Video Games (Communication in English)",
        ]
    }

    const education = [
        {
            "name": "General Baccalaureate with honors",
            "establishment": "Lycée Colbert",
            "city": "Lorient (56)",
            "graduation_year": "2022",
            "graduated": true
        },
        {
            "name": "University Diploma of Technology in Networks and Telecommunications, Cybersecurity specialization",
            "establishment": "IUT Lannion",
            "city": "Lannion (22)",
            "graduation_year": "2024",
            "graduated": true
        },
        {
            "name": "Bachelor's Degree in Networks and Telecommunications, Cybersecurity specialization",
            "establishment":
                "IUT Lannion",
            "city": "Lannion (22)",
            "graduation_year": "2025",
            "graduated": false
        },
    ];

    const certifications = [
        {
            "name": "Stormhield CSNA",
            "city": "Lannion (22)",
            "date_obtained": "December 2024",
            "expiration": "December 2027"
        }
    ]

    const workExperience = [
        {
            "name": "Intern in Software Quality and Code Correction",
            "company": "Nokia",
            "period": "2024",
            "place": "Lannion (22)",
            "tasks": [
                "Correction of Python code to meet PEP8 standards",
                "Writting unitary test",
                "Technical writing",
            ]
        },
        {
            "name": "General Assistant",
            "company": "Intermarché",
            "period": "2024",
            "place": "Merlevenez (56)",
            "tasks": [
                "Customer service",
                "Stock management",
                "Store maintenance",
            ]
        },
        {
            "name": "Cleaner",
            "company": "Netvim",
            "period": "2022",
            "place": "Hennebont (56)",
            "tasks": [
                "Responsible for cleaning various residential buildings, medical offices, and banks",
            ]
        }
    ]

    return (
        <section id="about" className="min-h-screen flex items-center justify-center py-20">
            <RevealOnScroll>
                <div className="max-w-7xl mx-auto px-4">
                    <h2 className="text-3xl font-bold mb-8 bg-gradient-to-r from-blue-500 to-cyan-400 bg-clip-text text-transparent text-center">
                        About Me
                    </h2>

                    <div className="rounded-xl p-8 border-white/30 border hover:border-white/50 hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] hover:-translate-y-1 transition-all">
                        <p className="text-gray-300 mb-6">
                            Due to my passion for computer science and everything related, I managed to gather skills in multiple domains.
                        </p>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                <h3 className="text-xl font-bold mb-4">
                                    Cybersecurity
                                </h3>
                                <div className="flex flex-col gap-2 ">
                                    <span className="text-lg">Skills</span>
                                    <ul className="flex flex-wrap flex-row space-x-2 space-y-2 list-inside mx-5">
                                        {cybersecuritySkills.skils.map((value, key) => (
                                            <li key={key} className="text-sm whitespace-nowrap bg-blue-500/10 text-blue-500 py-1 px-3 rounded-full hover:bg-blue-500/20 hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] transition">{value}</li>
                                        ))}
                                    </ul>
                                    <span className="text-lg">Projects</span>
                                    <ul className="list-disc list-inside mx-5">
                                        {cybersecuritySkills.projects.map((value, key) => (
                                            <li key={key} className="text-sm">{value}</li>
                                        ))}
                                    </ul>
                                </div>
                            </div>
                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                <h3 className="text-xl font-bold mb-4">
                                    Programming & Development
                                </h3>
                                <div className="flex flex-col gap-2">
                                    <span className="text-lg">Skills</span>
                                    <ul className="flex flex-wrap flex-row space-x-2 space-y-2 list-inside mx-5">
                                        {programmationSkills.skils.map((value, key) => (
                                            <li key={key} className="text-sm whitespace-nowrap bg-blue-500/10 text-blue-500 py-1 px-3 rounded-full hover:bg-blue-500/20 hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] transition">{value}</li>
                                        ))}
                                    </ul>
                                    <span className="text-lg">Projects</span>
                                    <ul className="list-disc list-inside mx-5">
                                        {programmationSkills.projects.map((value, key) => (
                                            <li key={key} className="text-sm">{value}</li>
                                        ))}
                                    </ul>
                                </div>
                            </div>
                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                <h3 className="text-xl font-bold mb-4">
                                    Network
                                </h3>
                                <div className="flex flex-col gap-2">
                                    <span className="text-lg">Skills</span>
                                    <ul className="flex flex-wrap flex-row space-x-2 space-y-2 list-inside mx-5">
                                        {networkSkills.skils.map((value, key) => (
                                            <li key={key} className="text-sm my-1 bg-blue-500/10 text-blue-500 py-1 px-3 rounded-full hover:bg-blue-500/20 hover:shadow-[0_2px_8px_rgba(59, 130, 246, 0.2)] transition">{value}</li>
                                        ))}
                                    </ul>
                                    <span className="text-lg">Projects</span>
                                    <ul className="list-disc list-inside mx-5">
                                        {networkSkills.projects.map((value, key) => (
                                            <li key={key} className="text-sm">{value}</li>
                                        ))}
                                    </ul>
                                </div>
                            </div>
                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                <h3 className="text-xl font-bold mb-4">
                                    System
                                </h3>
                                <div className="flex flex-col gap-2">
                                    <span className="text-lg">Skills</span>
                                    <ul className="flex flex-wrap flex-row space-x-2 space-y-2 list-inside mx-5">
                                        {systemSkills.skils.map((value, key) => (
                                            <li key={key} className="text-sm my-1 bg-blue-500/10 text-blue-500 py-1 px-3 rounded-full hover:bg-blue-500/20 hover:shadow-[0_2px_8px_rgba(59, 130, 246, 0.2)] transition">{value}</li>
                                        ))}
                                    </ul>
                                    <span className="text-lg">Projects</span>
                                    <ul className="list-disc list-inside mx-5">
                                        {systemSkills.projects.map((value, key) => (
                                            <li key={key} className="text-sm">{value}</li>
                                        ))}
                                    </ul>
                                </div>
                            </div>
                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                <h3 className="text-xl font-bold mb-4">
                                    Project Management
                                </h3>
                                <div className="flex flex-col gap-2">
                                    <span className="text-lg">Skills</span>
                                    <ul className="flex flex-wrap flex-row space-x-2 space-y-2 list-inside mx-5">
                                        {projectManagementSkills.skils.map((value, key) => (
                                            <li key={key} className="text-sm my-1 bg-blue-500/10 text-blue-500 py-1 px-3 rounded-full hover:bg-blue-500/20 hover:shadow-[0_2px_8px_rgba(59, 130, 246, 0.2)] transition">{value}</li>
                                        ))}
                                    </ul>
                                    <span className="text-lg">Projects</span>
                                    <ul className="list-disc list-inside mx-5">
                                        {projectManagementSkills.projects.map((value, key) => (
                                            <li key={key} className="text-sm">{value}</li>
                                        ))}
                                    </ul>
                                </div>
                            </div>
                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                <h3 className="text-xl font-bold mb-4">
                                    Language
                                </h3>
                                <div className="flex flex-col gap-2">
                                    <span className="text-lg">Skills</span>
                                    <ul className="flex flex-wrap flex-row space-x-2 space-y-2 list-inside mx-5">
                                        {languageSkills.skils.map((value, key) => (
                                            <li key={key} className="text-sm my-1 bg-blue-500/10 text-blue-500 py-1 px-3 rounded-full hover:bg-blue-500/20 hover:shadow-[0_2px_8px_rgba(59, 130, 246, 0.2)] transition">{value}</li>
                                        ))}
                                    </ul>
                                    <span className="text-lg">Projects</span>
                                    <ul className="list-disc list-inside mx-5">
                                        {languageSkills.projects.map((value, key) => (
                                            <li key={key} className="text-sm">{value}</li>
                                        ))}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
                        <div className="p-6 rounded-xl border-white/30 border hover:border-white/50 hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] hover:-translate-y-1 transition-all">
                            <h3 className="text-xl font-bold mb-4">
                                Education
                            </h3>
                            <ul className="list-disc list-inside text-gray-300 space-y-2 py-2">
                                {education.map((data, key) => (
                                    <div key={key} className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                        <h4 className="text-white font-bold">{data["name"]}</h4>
                                        <p className="text-gray-300"><FaSchool className="inline mr-1" /> <span className="text-blue-500">{data["establishment"]}</span> <MdPlace className="inline mr-1" />{data["city"]}</p>
                                        <p className="text-neutral-100">{data["graduated"] ? "Graduated in " : "To be completed in "}{data["graduation_year"]}</p>
                                    </div>
                                ))}
                            </ul>
                            <h3 className="text-xl font-bold mb-4">
                                Certifications
                            </h3>
                            <ul className="list-disc list-inside text-gray-300 space-y-2">
                                {certifications.map((data, key) => (
                                    <div key={key} className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                        <h4 className="text-white font-bold">{data["name"]}</h4>
                                        <p className="text-neutral-100"><FaSchool className="inline mr-1" /> Obtained: <span className="text-blue-500">{data["date_obtained"]}</span> <MdPlace className="inline mr-1" />{data["city"]}</p>
                                        <p className="text-gray-300">{data["expiration"] ? `Expire ${data["expiration"]}` : ""}</p>
                                    </div>
                                ))}
                            </ul>
                        </div>
                        <div className="p-6 rounded-xl border-white/30 border hover:border-white/50 hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] hover:-translate-y-1 transition-all">
                            <h3 className="text-xl font-bold mb-4">
                                Work Experience
                            </h3>
                            <div className="space-y-4 text-gray-300">
                                {workExperience.map((data, key) => (
                                    <div key={key} className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                        <h4 className="text-white font-bold">{data["name"]}</h4>
                                        <p><HiOutlineBuildingOffice className="inline mr-1" /><span className="text-blue-500">{data["company"]}</span></p>
                                        <p className="text-gray-300"><VscCalendar className="inline mr-1" /> {data["period"]} | <MdPlace className="inline mr-1" />{data["place"]}</p>
                                        <ul className="list-disc list-inside text-white/100">
                                            {data["tasks"].map((task, key) => (
                                                <li key={key}>{task}</li>
                                            ))}
                                        </ul>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </RevealOnScroll>
        </section>
    )
}

export default About;