Add logo assets and update favicon; modify homepage and navbar for branding
This commit is contained in:
Ploc300
@@ -1,77 +1,355 @@
|
||||
import RevealOnScroll from "../RevealOnScroll";
|
||||
|
||||
function About() {
|
||||
const frontendSkills = ["React", "Vue", "Typescript", "Tailwind CSS"]
|
||||
const backendSkills = ["Node.js", "Python", "AWS", "MongoDb"]
|
||||
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-3xl mx-auto px-4">
|
||||
<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/10 border hover:-translate-y-1 transition-all">
|
||||
<div className="rounded-xl p-8 border-white/50 border hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] hover:-translate-y-1 transition-all">
|
||||
<p className="text-gray-300 mb-6">
|
||||
Some text
|
||||
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:-translate-y-1 transition-all">
|
||||
<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">
|
||||
<h3 className="text-xl font-bold mb-4">
|
||||
Frontend
|
||||
Cybersecurity
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{frontendSkills.map((tech) => (
|
||||
<span className="bg-blue-500/10 text-blue-500 py-1 px-3 rounded-full text-sm hover:bg-blue-500/20 hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] transition">
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
<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:-translate-y-1 transition-all">
|
||||
<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">
|
||||
<h3 className="text-xl font-bold mb-4">
|
||||
Backend
|
||||
Programming & Development
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{backendSkills.map((tech) => (
|
||||
<span className="bg-blue-500/10 text-blue-500 py-1 px-3 rounded-full text-sm hover:bg-blue-500/20 hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] transition">
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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/10 border hover:-translate-y-1 transition-all">
|
||||
<div className="p-6 rounded-xl border-white/50 border 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">
|
||||
<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">
|
||||
<li>
|
||||
General Baccalaureate with honors (2022) - Lycée Colbert - Lorient (56)
|
||||
</li>
|
||||
<li>
|
||||
University Diploma of Technology in Networks and Telecommunications, Cybersecurity track (2024) - IUT Lannion - Lannion (22)
|
||||
</li>
|
||||
{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">
|
||||
<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/10 border hover:-translate-y-1 transition-all">
|
||||
<div className="p-6 rounded-xl border-white/50 border 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">
|
||||
<div>
|
||||
<h4 className="font-semibold">Intern in Software Quality and Code Correction at Nokia (2024)</h4>
|
||||
<p>Correction of Python code to meet PEP8 standards and Writting unitary test</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold">General Assistant at Intermarché (2024)</h4>
|
||||
<p>Customer service, Stock management and Store maintenance</p>
|
||||
</div>
|
||||
|
||||
{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/20">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user